Q&A
前提・実現したいこと
JavaScriptを使って動体視力のような測定プログラムを作成しています。Cの文字を使い、上下左右に穴が開いている画像を4枚使い、更新するたびにランダムでその4枚が読みこまれ、左画面外から右の画面外に流れる内容です。
発生している問題・エラーメッセージ
更新をしても画像が右に穴の開いたCで固定されたままで、他の3つの画像に切り替わりません。 画像は左画面外から右画面外に動きます。
該当のソースコード
JavaScript
1<html> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4<script type="text/javascript"> 5//画像を格納した 6img = new Array(); 7img[0] = "C.gif"; 8img[1] = "Cbotton.gif"; 9img[2] = "Cup.gif"; 10img[3] = "Cleft.gif"; 11 12//初期の画像表示位置 13x_zahyo = -400; 14y_zahyo = 100; 15 16// 開始モジュール 17function start() { 18 canvas = document.getElementById ('canvas_e'); 19 ctx = canvas.getContext ('2d'); // キャンバスからコンテキストを取得 20 21 //画像をランダムで表示したい 22 selectnum = Math.floor(Math.random() * img.length); 23 output = "<img src='" + img[selectnum] +"' >"; 24 document.write(output); 25 26 timerID = setInterval ('draw()', 24); 27} 28// 描画モジュール 29function draw() { 30 ctx.clearRect (0 , 0 , 1400 , 600);//画面をいったん消して表示する 31 ctx.drawImage (output , x_zahyo , y_zahyo); 32 x_zahyo += 500;//x座標を変える 33} 34</script> 35</head> 36<body onload="start()"> 37 <canvas id="canvas_e" style="background-color:white;" width="1400" height="600" /> 38</body> 39</html>
試したこと
このプログラムにする前は下記のようなプログラムでした。
JavaScript
1// 開始モジュール 2 3function start() { 4 canvas = document.getElementById ('canvas_e'); 5 ctx = canvas.getContext ('2d'); // キャンバスからコンテキストを取得 6 7 //画像をランダムで表示したい 8 selectnum = Math.floor(Math.random() * img.length); 9 //output =で書いたソースコードはなく下のように書いてました。 10 document.write("<img src='" + img[selectnum] +"' >"); 11 12 timerID = setInterval ('draw()', 24); 13} 14// 描画モジュール 15function draw() { 16 ctx.clearRect (0 , 0 , 1400 , 600);//画面をいったん消して表示する 17 ctx.drawImage (img , x_zahyo , y_zahyo);//outputではなくimg 18
このような表記の場合ランダムに4つの画像が表示されましたが、ブラウザの左上から動かず、更新するたびそこで画像が切り替わるだけでした。
４つの画像に更新でランダムに切り替わりつつ、左画面外から右画面外に動かしたいです。
よろしくお願いします。
補足情報（FW/ツールのバージョンなど）
TeraPad
ブラウザはGoogle Chromeを使用
回答2件
0
ベストアンサー
start() の中で、ランダムに1枚を決定して、インターバル内ではその1枚を表示する形になっています。
インターバルの中で、ランダムに選ぶようにしてください。
javascript
1intervalCount = 0; 2 3// 開始モジュール 4function start() { 5 canvas = document.getElementById ('canvas_e'); 6 ctx = canvas.getContext ('2d'); // キャンバスからコンテキストを取得 7 8 timerID = setInterval ('draw()', 24); 9} 10// 描画モジュール 11function draw() { 12 if( intervalCount % <この数値が重要> === 0 ) { 13 //画像をランダムで表示したい 14 selectnum = Math.floor(Math.random() * img.length); 15 output = new Image(); // <img> は書き出しせずにメモリ内で作れます。 16 output.src = img[selectnum] ; 17 } 18 intervalCount++; // interval の回数をカウント 19 20 ctx.clearRect (0 , 0 , 1400 , 600);//画面をいったん消して表示する 21 ctx.drawImage (output , x_zahyo , y_zahyo); 22 x_zahyo += 500;//x座標を変える 23}
追記
左画面外から右画面外に動かしたいです。
コードも変更しました。
別途、時間管理が必要になります。
24msec ごとにインターバルしますが、
何px ずつ動かすのか、画面に現れ、消えるまで、要するインターバル回数は何回なのか。
これを算出して、ランダム生成する（移動箇所）を if() で囲みます。
投稿2019/11/18 07:22
編集2019/11/18 07:34
総合スコア5434
0
js
1var img = [ "C.gif", "Cbotton.gif", "Cup.gif", "Cleft.gif" ];
【JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita】
https://qiita.com/takeharu/items/d75f96f81ff83680013f
投稿2019/11/18 06:58
総合スコア69596
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/18 08:10