Q&A
>プログラミング初心者
という要件はプログラミングには関係ないと思います。
https://teratail.com/help/question-tips#questionTips3-1
「初心者」は質問に「初心者アイコン」につけるだけで良いです。
教科書の一部の資料をもらって、プログラミングを進めています。
資料通りに入力してエラーが出たため、独自で解決していました。現在はエラーなしです。
修正し手を加えた結果、資料には必要なコードが書かれてないことが多々あることが判明しています。
必要な画像も準備し、パスやディレクトリも問題ありませんが、読み込んでも画面が真っ白のままで全く動きません。
エンターキーやスペースキーなど色々触りましたが、だめでした。
知識が少ないため、正直お手上げ状態です。
教科書も必要箇所だけの資料のため、振り返りなどもできません。
長いコードで読みづらいところ恐縮ですが、どなたかお助けいただけないでしょうか？
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Asteroid</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function(){ //←追加しました "use strict"; var ctx, shop, shots = [], rocks = [], level = 1, score = 0, clock = 0, timer = NaN, bg, bgX = 0, bgY = 0; function Rock(x,y,s) { this.cx = x; this.cy = y; this.w = s; this.h = s; var a = Math.random() * Math.PI * 2; this.dx = Math.floor(Math.cos(a) * (128 / s)); this.dx = Math.floor(Math.sin(a) * (128 / s)); this.image = document.getElementById('rock'); } function Shot() { this.cx = 0; this.cy = 0; this.w = 6; this.h = 6; this.dx = 0; this.dy = 0; this.count = this.maxCount; this.power = 10; this.maxCount = 40; } function Ship() { this.cx = 400; this.cy = 400; this.w = 90; this.h = 60; this.dx = 0; this.dy = 0; this.rotate = 0; this.power = 0; this.accel = 0; this.keyL = false; this.keyR = false; this.keyF = false; this.keyB = false; this.image = document.getElementById('ship'); } Shot.prototype = Ship.prototype = Rock.prototype = { getX: function() {return this.cx - this.w / 2;}, getY: function() {return this.cy - this.h / 2;}, isHit: function(o) { return !( ((o.getX() + o.w) < this.getX()) || ((this.getX() + this.w) < o.getX()) || ((o.getY() + o.h) < this.getY()) || ((this.getY() + this.h) < o.getY()) ); }, update: function() { this.cx = (this.cx + this.dx + 800) % 800; this.cy = (this.cy + this.dy + 800) % 800; } } function rand(r) { return Math.floor(Math.random() * r)} function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "20pt Arial"; bg = document.getElementById("bg"); ship = new Ship(); // 弾丸の初期設定 for (var i = 0; i < 7; i++) { shots.push(new Shot()); } // キーイベントハンドラーの初期化 window.addEventListener('keydown', function(e) { switch (e.keyCode) { case 37: ship.keyL = true; break; case 38: ship.keyF = true; break; case 39: ship.keyR = true; break; case 40: ship.keyB = true; break; case 32: ship.keyH = true; break; } }); window.addEventListener('keyup', function(e) { switch (e.keyCode) { case 37: ship.keyL = false; break; case 38: ship.keyF = false; break; case 39: ship.keyR = false; break; case 40: ship.keyB = false; break; case 32: ship.keyH = false; break; } }); start(); if (isNaN(timer)) { timer = setInterval(mainLoop, 50); } } function start() { rocks = []; // 岩の初期化 for (var i = 0; i < level; i++) { var x = rand(800), y = rand(800); while (true) { var r = new Rock(x,y,64); if (!r.isHit(ship)) { rocks.push(r); break; } } } } function mainLoop() { clock++; if (rock.length == 0) { if (rock > 100) { level++; start(); } return; } // 船の場所・向きを更新 if (ship.keyL) { ship.rotate -= 0.1; } if (ship.keyR) { ship.rotate += 0.1; } if (ship.keyF) { ship.accel = Math.min( +5, ship.accel + 0.2); } if (ship.keyB) { ship.accel = Math.max( -5, ship.accel - 0.1); } ship.power += ship.accel; ship.power *= 0.94; ship.accel *= 0.94; ship.dx = Math.cos(ship.rotate) * ship.power; ship.dy = Math.sin(ship.rotate) * ship.power; ship.update(); bgX = (bgX + ship.dx / 2 + 1600) % 800; bgY = (bgY + ship.dy / 2 + 1600) % 800; // 弾丸の位置を更新 var fire = false; shots.forEach(function (shot) { if (shot.count < shot.maxCount) { shot.count++; shot.update(); // 衝突検出 var hit = -1, r = NaN; rocks.forEach(function (rock, i) { if (rock.isHite(shot)) { hit = i; r = rock; } }); // 弾丸が岩に衝突 if (hit >= 0) { rocks.splice(hit, 1); score += (64 / r.w) * 10; shot.count = shot.maxCount; r.w /= 2; if (r.w >= 16) { for (var i = 0; i < 2; i++) { rocks.push(new Rock(r.cx, r.cy, r.w)); } } // ステージクリア if (rocks.length == 0) { clock = 0; draw(); } } } else if (!fire && ship.keyH) { shot.count = 0; shot.cx = ship.cx; shot.cy = ship.cy; shot.r = ship.rotate; shot.dx = ship.dx + shot.power * Math.cos(shot.r); shot.dy = ship.dy + shot.power * Math.sin(shot.r); fire = true; } }); // 岩の場所を更新 rocks.forEach(function (rock) { rock.update; if (ship.isHit(rock)) { clearInterval(timer); timer = NaN; } }); draw(); } function draw() { // 背景を描画 ctx.drawImage(bg, bgX, bgY, 400, 400, 0, 0, 800, 800); // 弾丸の描画 ctx.fillStyle = 'rgb(0, 255, 255)'; shots.forEach(function (shot) { if (shot.count < shot.maxCount) { ctx.fillRect(shot.getX(), shot.getY(), shot.w, shot.h); } }); // 岩の描画 rocks.forEach(function (rock) { ctx.drawImage(rock.image, rock.getX(), rock.getY(), rock.w, rock.h); }); // 船の描画 ctx.save(); ctx.translate(ship.cx, ship.cy); ctx.rotate(ship.rotate); ctx.drawImage(ship.image, -ship.w / 2, -ship.h / 2); ctx.restore(); // スコアの描画 ctx.fillStyle = 'rgb(0, 255, 0)'; ctx.fillText(('0000000' + score).slice(-7), 670, 30); if (rocks.length == 0) { ctx.fillText('STAGE CLEAR', 300, 150); } if (isNaN(timer)) { ctx.fillText('GAME OVER', 320, 150); ctx.drawImage(bang, ship.getX() - 50, ship.getY() -50, 200, 200); } } }; </script> </head> <body document.body.onload="init(){};"> //↑修正したものです（元<body onload="init()">） <div> <canvas id="canvas" width="800" height="800"></canvas> </div> <img id="ship" src="ship.png" style="display: none;"> <img id="bg" src="bg.png" style="display: none;"> <img id="rock" src="rock.png" style="display: none;"> <img id="bang" src="bang.png" style="display: none;"> </body> </html>
> 教科書の一部の資料をもらって、プログラミングを進めています。
誰にもらったものでしょうか。
事情も知っている、その人に聞くほうが良い気がしますが。
また、何を参考に書いたのでしょうか。
このコード自分で書けるならこの問題が解決できない理屈が不明です。
まず、プログラムは『書いてある通りにしか動かない』です。
なのでコードだけ出されても、『何がしたいのか』さえわかりません。
回答者は質問者と同じ環境にある……わけじゃないです。
回答者は赤の他人なので、『質問者の頭の中』を覗けるわけないです。
したがって、『提示された情報からしか読み取れない』ので回答できません。
(出来ても、質問者の意図通りかどうかは不明)
m.ts10806 さん >
ご指摘ありがとうございます。タイトルと初心者アイコンについて、修正させていただきました。
教科書の内容を一部コピーして配られた資料です。まずは見ながら打ち込むようにと指示されました。ですので、何がどうやってこのような記述になるのか、わからないまま打ち込んだのが始まりです。
html、css、javascript の知識はある程度あるので、それを元に Chrome の開発で確認しながら修正していました。
---------
userisgod さん >
授業で先生から配られたものです。まず自分で打ち込むことから始めるようにと伺い、その後エラーの解決を色々模索していました。
(意図を間違えたっぽい)
回答2件
0
問題山積みに思いますが、とりあえず何か反応がある程度にするなら
<body document.body.onload="init(){};">
これは意味が分かりません。{}つけてしまうと定義なのでは。
それにwindow.onload があるので、ここに書かなくてもonloadとして実行されます。
window.onloadの中で定義されているので<body onload="init()">としても未定義のエラーになります。
window.onload のブロックの最後にinit()とだけ書けば、とりあえず何かしらは起きるようになります（要件通り動くかは別）
投稿2021/06/16 09:40
編集2021/06/16 09:41総合スコア80875
ご回答くださりありがとうございます。
window.onload と body の onload が被っていたんですね。
{} についてはどこかのページでこの方法を見つけて、導入してみたからです。逆に不要なコードを入れているとは思いもしませんでした。
<body onload="init()"> にして、もう一度エラーの修正をやってみます！
むしろbodyのonloadなしに・・というのが私の回答の主旨です。
0
ベストアンサー
window.onload = function(){ ... }
この部分は不要です。
同時に
<body document.body.onload="init(){};">
これは
<body onload="init()">
とするべき。
①
ここまでやって、ブラウザの開発者ツールのコンソールを見ると、
Uncaught ReferenceError: ship is not defined at init (hoge.html:78) at onload (hoge.html:243)
と怒られます。
何が原因かというと、
"use strict";の次の行の
var ctx, shop, shots = [], rocks = [], の行。
ここで「shop」という変数が現れますが、ここは正しくはshipとするべき。
②
this.dx = Math.floor(Math.cos(a) * (128 / s)); this.dx = Math.floor(Math.sin(a) * (128 / s));
1行目も2行目も同じになってる。2行目はthis.dyとするべきでは？
③
function mainLoop() { clock++; if (rock.length == 0) { if (rock > 100) { level++; start(); } return; }
ここが意味不明です。
rockはリストや文字列ではないので、rock.lengthは意味がない。
rock>100も無意味。
下の方にある
shots.forEach(function (shot) {
以下を見たら、ここは多分、rock(敵？)がなくなったら、100クロック待ってレベルアップしてゲームスタート、としたいところだろうから、
clock++; if (rocks.length == 0) { if (clock > 100) { level++; start();
とするのかな？
④
rocks.forEach(function (rock, i) { if (rock.isHite(shot)) { hit = i; r = rock; }
「isHite」 → 「isHit」ですよね？
#その他
⑤
bgX = (bgX + ship.dx / 2 + 1600) % 800; bgY = (bgY + ship.dy / 2 + 1600) % 800; // 弾丸の位置を更新
多分自機の動きに応じて、背景のマップを動かそうとしているようにも思えるが、
描画部分が
ctx.drawImage(bg, bgX, bgY, 400, 400, 0, 0, 800, 800);
の1行だけ。
このままだと自機を動かしたときに、描画範囲内に背景が再描画されず、自機や敵や弾のグラフィックが消えない。
bg.pngの元データは800ｘ800ピクセルの画像を前提にしていると思われます。
で、これを自機が動いたときにうまく位置を合わせて再描画したい。
bgをこのようにしてタイリングしたらうまく行く？
function draw() { // 背景を描画 for (let j=-1; j<1; j++){ for (let i=-1; i<1; i++){ ctx.drawImage(bg, bgX+i*800, bgY+j*800, 400, 400, 0, 0, 800, 800); } }
総括：
教科書を目視で手打ちしたんでしょうか？少々打ち間違いが多かった気がしますね。
投稿2021/06/16 11:48
編集2021/06/16 12:04退会済みユーザー
総合スコア0
ご回答いただきありがとうございます。
まさにそのエラーが出たので、修正してこの形になりました。
自ら修正したものが余計なコードになってしまったのは残念です。ですが、誤字が最初に悪さをしていたことが理解できましたので、今後はもっとミスがないように気をつけます！（何度も見直したんですが、長文で気付きませんでした）
資料を手打ちするように先生から伺ったので、ミスが多かったのは私のせいです（><）
その2点以外は特に変更していませんでしたので、③とその他でいただいた内容の通りに変更するとうまく行きました！
資料通りだとここまではこれませんでした。。
こんなに丁寧に回答してくださり、本当に助かりました！ありがとうございます！
プログラミングは難しすぎて辛いですが、お陰様でもう少し頑張れそうです！
あなたの回答
tips
プレビュー
