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

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

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

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

Q&A

解決済

2回答

411閲覧

配列画像のランダム表示と動かし方

Taisa

総合スコア5

JavaScript

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

0グッド

0クリップ

投稿2019/11/18 06:37

前提・実現したいこと

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つの画像が表示されましたが、ブラウザの左上から動かず、更新するたびそこで画像が切り替わるだけでした。
4つの画像に更新でランダムに切り替わりつつ、左画面外から右画面外に動かしたいです。
よろしくお願いします。

補足情報(FW/ツールのバージョンなど)

TeraPad
ブラウザはGoogle Chromeを使用

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

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

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

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

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

guest

回答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
AkitoshiManabe

総合スコア5432

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

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

Taisa

2019/11/18 08:10

理想通りに動きました! ありがとうございます。
guest

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

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問