Q&A
コードの提示の仕方が結構めちゃくちゃになっています。
質問は編集できるので、質問投稿画面の右側のプレビューを見ながら調整してください。
エラー自体は未定義の変数を利用しようとしている、ということなので、そこは辿れそうに思います。
私はまだまだプログラムの初心者です。
どなたかご教授頂ければ幸いです。
何かゲームを作りながら学ぼうと思い、上記リンク先の方の記事を参考にさせて頂きながら「その５の敵キャラを作る」ところでつまづいております。
画像の様にコンソールエラーが出ており解決に至っておりません。
何か間違えていたり、記述が不足、間違っていましたらご教授を宜しくお願いいたします。
また、質問方法やその他の事でも気づいた事が御座いましたらご指摘のほど、宜しくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>shoot</title> 6 <script src="commo.js"></script> 7 <script src="character.js"></script> 8 <script src="main.js"></script> 9 <style>canvas {border: 1px solid skyblue;}</style> 10</head> 11<body> 12 <canvas id="screen"></canvas> 13 <p id="info"></p> 14 15</body> 16</html>
javascript
1//main.js 2 3//- global-------------------------------------------------- 4//html で記述したcanvasとpタグのinfoを参照するための変数screenCanvasとinfo 5//run= ゲームの処理を継続するかどうかのフラグ（真偽値を格納） 6//fps= ゲームの更新速度を表すFPS(1000㍉秒＝１秒) 7//mouse= マウスカーソルの座標を格納する 8//ctx= canvas2d コンテキスト格納用 9//fire= ショットを発射するのかしないのかを真偽値で保持 10//counter= シーンを管理するために使用 11var screenCanvas, info; 12var run = true; 13var fps = 1000 / 30; //1秒に約30回更新されるゲーム 14var mouse = new Point(); //変数mouseにはcommo.jsで記述したPointクラスを利用してマウスカーソルの座標1を格納するためのインスタンスを作っておく 15var ctx; 16var fire = false; 17var counter = 0; 18 19// -const ----------------------------------------------------- 20var CHARA_COLOR = 'rgba(0, 0, 255, 0.75)'; 21var CHARA_SHOT_COLOR = 'rgba(0, 255, 0, 0.75)'; 22var CHARA_SHOT_MAX_COUNT = 10; //画面上に出せるショット数の最大値の設定 23var ENEMY_COLOR = 'rgba(255, 0, 0, 0.75)'; 24var ENEMY_MAX_COUNT = 10; 25 26//- main ---------------------------------------------------- 27window.onload = function () { 28 29 //スクリーンの初期化 30 screenCanvas = document.getElementById('screen'); 31 screenCanvas.width = 256; //横幅を256ピクセルに変更 32 screenCanvas.height = 256; //縦幅を256ピクセルに変更 33 34 //2dコンテキスト 35 ctx = screenCanvas.getContext('2d'); 36 37 //イベントの登録 38 //イベントの登録には addEventListener を使う 39 //マウスカーソルの位置を検知するための関数一つとキー入力を検知するための関数２つを登録 40 screenCanvas.addEventListener('mousemove', mouseMove, true); 41 screenCanvas.addEventListener('mousedown', mouseDown, true); 42 window.addEventListener('keydown', keyDown, true); 43 44 //エレメント関連 45 //変数 info にはHTML内のpタグへの参照を入れる 46 //このpタグの中身を動的に書き換えてコンソール出力の様な感じで使用 47 info = document.getElementById('info'); 48 49 //自機初期化 50 var chara = new Character(); 51 chara.init(10); //init メソッドによって自機キャラクターサイズを１０へ設定 52 53 //自機ショットの初期化 54 var charaShot = new Array(CHARA_SHOT_MAX_COUNT); 55 for (var i = 0; i < CHARA_SHOT_MAX_COUNT; i++) { 56 charaShot[i] = new CharacterShot(); 57 } 58 59 //敵機初期化 60 var enemy = new Array(ENEMY_MAX_COUNT); 61 for (i = 0; i < ENEMY_MAX_COUNT; i++) { 62 enemy[i] = new Enemy(); 63 } 64 65 66 //ループ処理(レンダリング処理）を呼び出す 67 (function () { 68 //HTML を更新 69 info.innerHTML = mouse.x + ':' + mouse.y; 70 71 // fireフラグの値により分岐 72 if (fire) { 73 // すべての自機ショットを調査する 74 for (i = 0; i < CHARA_SHOT_MAX_COUNT; i++) { 75 // 自機ショットが既に発射されているかチェック 76 if (!charaShot[i].alive) { 77 // 自機ショットを新規にセット 78 charaShot[i].set(chara.position, 3, 5); 79 // ループを抜ける 80 break; 81 }; 82 }; 83 // フラグを降ろしておく 84 fire = false; 85 }; 86 87 // screen クリア 88 ctx.clearRect(0, 0, screenCanvas.width, screenCanvas.height); 89 90 //自機パスの設定を開始 91 ctx.beginPath(); 92 93 //自機の位置を決定 94 chara.position.x = mouse.x; 95 chara.position.y = mouse.y; 96 97 //自機を描くパスを設定 98 ctx.arc(chara.position.x, chara.position.y, chara.size, 0, Math.PI * 2, false); 99 100 //自機の色を設定する 101 ctx.fillStyle = CHARA_COLOR; 102 103 //自機を描く 104 ctx.fill(); 105 106 //自機ショットのパスの設定を開始 107 ctx.beginPath(); 108 // すべての自機ショットを調査する 109 for (i = 0; i < CHARA_SHOT_MAX_COUNT; i++) { 110 // 自機ショットが既に発射されているかチェック 111 if (charaShot[i].alive) { 112 // 自機ショットを動かす 113 charaShot[i].move(); 114 115 // 自機ショットを描くパスを設定 116 ctx.arc( 117 charaShot[i].position.x, 118 charaShot[i].position.y, 119 charaShot[i].size, 120 0, Math.PI * 2, false 121 ); 122 123 // パスをいったん閉じる 124 ctx.closePath(); 125 } 126 } 127 128 // 自機ショットの色を設定する 129 ctx.fillStyle = CHARA_SHOT_COLOR; 130 131 // 自機ショットを描く 132 ctx.fill(); 133 134 // エネミーの出現管理--------------------------- 135 if (counter % 100 === 0) { 136 for (i = 0; i < ENEMY_MAX_COUNT; i++) { 137 if (!enemy[i].alive) { 138 j = (counter % 200) / 100; 139 var enemySize = 15; 140 p.x = -enemySize + (screenCanvas.width + enemySize * 2) * j 141 p.y = screenCanvas.height / 2; 142 143 enemy[i].set(p, enemySize, j); 144 break; 145 } 146 } 147 } 148 149 150 //フラグにより再帰呼び出し 151 /** 152 * setTimeoutを用いて無名関数自体を再帰的に呼び出す 153 * mouse の中身は後述するイベント処理用の関数で更新するので 154 * ここではループ処理の中には特に値を設定する処理は入れていない 155 */ 156 if (run) { 157 setTimeout(arguments.callee, fps); 158 } 159 160 })(); //ここまでが無名関数 161}; //ここまでが window.onload関数 162 163// - event -------------------------------------------- 164/** 165 * マウスカーソルの位置を拾うためのmouseMove 166 * @param {mouseMove} event 167 */ 168function mouseMove(event) { 169 //マウスカーソル座標の更新 170 mouse.x = event.clientX - screenCanvas.offsetLeft; 171 mouse.y = event.clientY - screenCanvas.offsetTop; 172}; 173//マウスがクリックされた際の処理 174function mouseDown(event) { 175 //フラグを立てる 176 fire = true; 177}; 178/** 179 * キーの入力を拾うためのkeyDown 180 * @param {keyDown} event 181 */ 182function keyDown(event) { 183 //キーコードを取得 184 var ck = event.keyCode; 185 //Escキーが押されていたらフラグを降ろす 186 if (ck === 27) { 187 run === false; 188 console.log('Escキーが押されたので処理を中断します'); 189 } 190};
javascript
1//character.js 2 3//-自機のcharacterクラス作成----------------------------------- 4function Character() { 5 this.position = new Point(); 6 this.size = 0; 7}; 8 9//自機のサイズ指定を init メソッドで行う 10Character.prototype.init = function (size) { 11 this.size = size; 12}; 13 14//-自機の弾を扱う CharacterShotoクラスの作成------------------- 15function CharacterShot() { 16 this.position = new Point(); 17 this.size = 0; 18 this.speed = 0; 19 this.alive = false; 20} 21//set メソッドは引数を３つほど受け取りそれと共に自機ショットを初期化 22//引数にはショットの初期位置とサイズ、スピード与えます 23//このメソッドが呼び出されることで this.alive=true も自動で呼び出され生存フラグが立つ 24CharacterShot.prototype.set = function (p, size, speed) { 25 //座標をセット 26 this.position.x = p.x; 27 this.position.y = p.y; 28 29 //サイズ、スピードをセット 30 this.size = size; 31 this.speed = speed; 32 33 //生存フラグを立てる 34 this.alive = true; 35}; 36// moveメソッドはショットの動きに関する処理を持つ 37//自機は画面下から画面上に向かってショットを打つので座標では y軸は数字が小さくなる（左上が座標０、０のため) 38 39CharacterShot.prototype.move = function () { 40 // 座標を真上にspeed分だけ移動させる 41 this.position.y -= this.speed; 42 43 //一定以上の座標に到達していたら生存フラグを降ろす 44 if (this.position.y < -this.size) { 45 this.alive = false; 46 } 47}; 48//-敵機の characterクラス作成------------------------- 49function Enemy() { 50 this.position = new Point(); 51 this.size = 0; 52 this.type = 0; 53 this.param = 0; 54 this.alive = false; 55} 56 57Enemy.prototype.set = function (p, size, type) { 58 //座標をセット 59 this.position.x = p.x; 60 this.position.y = p.y; 61 62 //サイズ、タイプをセット 63 this.size = size; 64 this.type = type; 65 66 //パラメーターをリセット 67 this.param = 0; 68 69 //生存フラグを立てる 70 this.alive = true; 71}; 72 73Enemy.prototype.move = function () { 74 //パラメーターをインクリメント 75 this.param++; 76 switch (this.type) { 77 case 0: 78 //x 報告へまっすぐ進む 79 this.position.x += 2; 80 //すくりーんの右端より奥へ到達したら生存フラグを降ろす 81 if (this.position.x > this.size + screenCanvas.width) { 82 this.alive = false 83 } 84 break; 85 case 1: 86 this.position.x -= 2; 87 if (this.position.x < -this.size) { 88 this.alive = false; 89 } 90 break; 91 } 92}; 93
javascript
1//common.js 2 3//xとyの二つの座標情報を格納するためのクラス 4function Point(){ 5 this.x = 0; 6 this.y =0; 7}
回答3件
0
ベストアンサー
リンク先のソースを見ましょう。
・リンクを開く
・F12を押してディベロッパーツールを開く
・Sourcesをクリックして main.jsをクリックする
そうするとソースの全部が見れます。
既に解答されている方もいますが、問題となっているpの宣言箇所も見れます。
投稿2019/01/15 05:25
総合スコア2341
解決致しました。
また、それだけでなくここまで記事のコードを見てどこにコードを記述するかわからず、文章やコードの役割を考えながら作っていたのですが、デベロッパーツールでファイル毎のコードを見る事ができるという初歩的な事に気づいておりませんでした。
今回の質問の内容だけでなく、自分が気づけていなかった事まで推測して頂き、回答頂けたため、ベストアンサーに選ばせて頂きました。
今後の学習に於いても非常に助けになりました。
本当にありがとう御座いました。
私も記事を読んでどこのコードを切り取って話してるんだこいつはって思ったのでサイトが悪いです（）
ディベロッパーツールはコードを見るだけではなくて、デバック機能もあるので、
使いこなすとどこが今実行されているんだろうとか、ブレークポイントを貼ってここに到達するのはいつだろうというのも見れるので
画面系開発するときには必需品です。使いこなせると強いですよ。
0
リンク先のソースと見比べただけですが、
先頭で変数を宣言しているのが抜けてますね。
リンク先のソースでは、先頭でi,j,pが下記のように宣言されていました。
js
1// - main --------------------------------------------------------------------- 2window.onload = function(){ 3 // 汎用変数 4 var i, j; 5 var p = new Point(); 6 7 // スクリーンの初期化 8 ・ 9 ・ 10 ・
投稿2019/01/15 05:17
総合スコア280
0
とうとつにpを参照していますが、pがどこにも宣言されていないからでは？
投稿2019/01/15 05:07
総合スコア114784
ご返答ありがとう御座います。
リンク先のサイト通りに記述を行い、pが未定義な事には気づいたのですが自分がどこで間違えているのか、どこをどの様に修正すれば良いのかが現状解決できておりません。
差し支えなければご教授願えないでしょうか？
なぜその箇所でpを参照しようとしたかソースを見るしかないですね
よくよく元のサイトを確認してください。
ソース量がおおくなっているので細かく検証はきびしいです
（どこかのライブラリでpをグローバル変数として宣言していて
マウス位置かなにかを示しているのかなぁ・・・とは想像しますが）
ご返答ありがとう御座います。
他の方の回答で私が記事の部分しかコードを記述しておらず不完全な状態でプログラムを実行していた事に気づきました。
お忙しい中、ご返答頂きありがとう御座いました。
あなたの回答
tips
プレビュー
