質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1106閲覧

即時関数内での関数使用ができない

makatin

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/11/18 06:18

編集2021/11/18 09:50

プログラミング初心者です。以下のコードはマウスの動きと同時にボールが動くようにしたいのですが、そもそも赤い球が描写されません。ご教授願います。
ちなみに、Pointはほかのファイルでfunction Point(){
this.x=0; this.y=0;} と書いてあります。

java

1コード 2let screenCanvas; 3let run=true; 4let info; 5let fps=1000/30; 6let mouse=new Point(); 7let ctx; 8let fire=false; 9 10const shot_color="red"; 11const shot_count=10; 12 13screenCanvas=document.getElementById("mycanv"); 14let ctx=screenCanvas.getContext("2d"); 15 16 17window.onload=function(){ 18 screenCanvas.addEventListener("mousemove",mouseMove,true); 19 window.addEventListener("keydown",keyDown,true); 20 screenCanvas.addEventListener("mousedown",mouseMove,ture); 21 info=document.getElementById("info"); 22 23 let chara=new character(); 24 chara.init(10); 25 26 (function(){ 27 info.innerHTML=mouse.x+":"+mouse.y; 28 29 ctx.clearRect(0,0,screenCanvas.offsetWidth,screenCanvas.offsetHeight); 30 draw(); 31 if(run){setTimeout(arguments.callee,fps);} 32 })(); 33}; 34 35 36function draw(){ 37 ctx.beginPath() 38 chara.potision.x=mouse.x; 39 chara.potision.y=mouse.y; 40 ctx.fillStyle="red"; 41 ctx.arc(chara.potision.x,chara.potision.y,chara.size,0,Math.PI*2,false); 42 ctx.fill(); 43 ctx.closePath(); 44} 45 46function mouseMove(event){ 47 mouse.x = event.clientX - screenCanvas.offsetLeft; 48 mouse.y = event.clientY - screenCanvas.offsetTop; 49 50} 51 52function mouseDown(event){ 53 fire=true; 54} 55 56function keyDown(event){ 57 let ck=event.keyCode; 58 if(ck===27){ 59 run=false; 60 } 61} 62

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/11/18 06:21 編集

> window.onload=の中でなく外でfunction draw(){ボールを描く} とした後に ctxなどはどのようにしましたか?
Lhankor_Mhy

2021/11/18 06:22

『即時関数内にdraw();と書くと描写されません』とのことですが、その部分のコードが見当たりませんでした。
y_waiwai

2021/11/18 06:27

このままではコードが読みづらいので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください
yambejp

2021/11/18 06:31

Pointはどこからもってきたのでしょうか?
m.ts10806

2021/11/18 06:42

即時関数内で関数が動作するかミニマムコードで確認してみては
makatin

2021/11/18 09:31

アドバイスありがとうございます。一度やり直してみます。
m.ts10806

2021/11/18 09:47

質問は編集できますので適宜調整してください。
maisumakun

2021/11/18 09:51

・コンソールにエラーは出ていませんか? ・JavaScriptファイルはHTMLのどこで読み込んでいますか?
makatin

2021/11/19 06:42

エラーは出てなさそうです。 ファイルはボディータグのキャンバスタグの下で読み込んでいます。
guest

回答1

0

ベストアンサー

普通の関数にすればどうですか?

Javascript

1move(); 2 3function move(){ 4 info.innerHTML=mouse.x+":"+mouse.y; 5 6 ctx.clearRect(0,0,screenCanvas.offsetWidth,screenCanvas.offsetHeight); 7 draw(); 8 if(run){ 9 setTimeout(move,fps); 10 } 11} 12

投稿2021/11/20 01:15

skys215

総合スコア910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問