javascript初心者です。以下のコードでどこにミスがあるのか
解りません。どこにあるのでしょうか? このソースをエディタに
貼ると見やすくなると思います。
<!DOCTYPE html>
<html>
<head>
<title>SnakeBite</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript">
var W, H, S = 20;
var snake = [ ], foods = [ ];
var keyCode = 0;
var point = 0;
var timer = NaN;
var ctx;
// pointオブジェクト
function Point(x,y) {
this.x = x;
this.y = y;
}
//初期関数
function init() {
var canvas = document.getElementById('field');
W = canvas.width / S;
H = canvas.height / S;
ctx = canvas.getContext('2d');
ctx.font = "20px sans-serif";
//蚊の初期化
snake.push(new Point(W / 2, H / 2));
//餌の初期化
for (var i = 0 ; i < 10 ; i++) {
addFood();
}
timer = setInterval("tick()", 200);
window.onkeydown = keydown;
}
//餌の追加
function addFood() {
while (true) {
var x = Math.floor(Math.random() * W);
var y = Math.floor(Math.random() * H);
if (isHit(foods, x, y) || isHit(snake, x, y)) {
continue;
}
foods.push(new Point(x, y));
break;
}
}
//衝突判定
function isHit(data, x, y) {
for (var i = 0 ; i < data.length ; i++) {
if (data[i].x==x && data[i].y==Y) {
return true;
}
}
return false;
}
function moveFood(x, y) {
foods =foods. filter(function (p){return (p.x !=x || p.y !=y);}); addFood();
}
function tick() {
var x = snake[0].x;
var y = snake[0].y;
switch (keyCode) {
case 37: x--; break; //左
case 38: y--; break; //上
case 39: x++; break; //右
case 40: y++; break; //下
default: paint(); return;
}
//自分or壁に衝突
if(isHit(snake,x,y) || x<0 || x>=W || y<0 || y>=H )
clearInterval(timer);
paint();
return;
}
//頭を先頭に追加
snake.unshift(new Point(x,y));
if(isHit(foods, x, y)) {
point +=10; //餌を食べた
moveFood(x,y);
}else{
snake.pop(); //食べていない→しっぽを解除
}
paint();
}
function paint() {
ctx.clearRect(0,0,W * S, H * S);
ctx.fillStyle = "rgb(256,0,0)";
ctx.fillText(point, S, S * 2);
ctx.fillStyle = "rgb(0,0,255)";
foods.forEach(function (p) {
ctx.fillText("+", p.x * S, (p.y + 1) * S);});
snake.forEach(function (p) {
ctx.fillText("*", p.x * S, (p.y + 1) * S); });
}
function keydown(event) {
keyCode = event.keyCode;
}
</script>
</head>
<body onload="init()">
<canvas id="field" width="400" height="400" style="background:#cccccc">
</canvas>
</body>
</html>
No.1ベストアンサー
- 回答日時:
決定的な間違いは3箇所ありました。
yの大文字小文字が1箇所と、「{}」の対応が2箇所間違っている。<!DOCTYPE html>
<html>
<head>
<title>SnakeBite</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript">
var W, H, S = 20;
var snake = [ ], foods = [ ];
var keyCode = 0;
var point = 0;
var timer = NaN;
var ctx;
// pointオブジェクト
function Point(x, y) {
this.x = x;
this.y = y;
}
//初期関数
function init() {
var canvas = document.getElementById('field');
W = canvas.width / S;
H = canvas.height / S;
ctx = canvas.getContext('2d');
ctx.font = "20px sans-serif";
//蚊の初期化
snake.push(new Point(W / 2, H / 2));
//餌の初期化
for (var i = 0 ; i < 10 ; i++) {
addFood();
}
timer = setInterval(tick, 200);
window.onkeydown = keydown;
}
//餌の追加
function addFood() {
while (true) {
var x = Math.floor(Math.random() * W);
var y = Math.floor(Math.random() * H);
if (isHit(foods, x, y) || isHit(snake, x, y)) {
continue;
}
foods.push(new Point(x, y));
break;
}
}
//衝突判定
function isHit(data, x, y) {
for (var i = 0 ; i < data.length ; i++) {
if (data[i].x == x && data[i].y == y) {
return true;
}
}
return false;
}
function moveFood(x, y) {
foods = foods. filter(function (p) {
return (p.x != x || p.y != y);
});
addFood();
}
function tick() {
var x = snake[0].x;
var y = snake[0].y;
switch (keyCode) {
case 37:
x--;
break;
//左
case 38:
y--;
break;
//上
case 39:
x++;
break;
//右
case 40:
y++;
break;
//下
default:
paint();
return;
}
//自分or壁に衝突
if (isHit(snake, x, y) || x < 0 || x >= W || y < 0 || y >= H ) {
clearInterval(timer);
paint();
return;
}
//頭を先頭に追加
snake.unshift(new Point(x, y));
if (isHit(foods, x, y)) {
point += 10;
//餌を食べた
moveFood(x, y);
} else {
snake.pop();
//食べていない→しっぽを解除
}
paint();
}
function paint() {
ctx.clearRect(0, 0, W * S, H * S);
ctx.fillStyle = "rgb(256, 0, 0)";
ctx.fillText(point, S, S * 2);
ctx.fillStyle = "rgb(0, 0, 255)";
foods.forEach(function(p) {
ctx.fillText("+", p.x * S, (p.y + 1) * S);
});
snake.forEach(function (p) {
ctx.fillText("*", p.x * S, (p.y + 1) * S);
});
}
function keydown(event) {
keyCode = event.keyCode;
}
</script>
</head>
<body onload="init()">
<canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas>
</body>
</html>
ありがとうございます! 動きました
IE11のデバッグやJSLINTを使ってもどこが間違いなのか
解らず、困っていました。
もしよければどのようにミスの箇所を見つけたのか
教えていただけませんか?
デバッグして表示された内容を検索しても
意味が不明でして、、。私の基礎力が足りない事
は承知しているのですが、、。
とにかく、こんなに早く正確なご指摘もらえた
事に感謝します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLで作った時報アプリが動き...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
リンク集をCSVファイルで管理し...
-
特定のclassを表示、非表示にする
-
ジェネレーターの作り方
-
javascriptカウントダウン終了...
-
Ajaxでタイムアウトしてしまう
-
今日からnヶ月後(前)
-
カンマで終わってるのはセミコ...
-
ローカルにあるファイルを検索...
-
引数なしの関数で疑問です
-
テーブルセル内のinput要素のna...
-
翌月を取得するGASが分かりません
-
ボタンを押すことでテキストエ...
-
なぜmatchメソッドがエラーにな...
-
var exports = exports || {}; ...
-
1日1回引けるJavaScriptおみく...
-
JScriptでExcelの全シートにア...
-
スマフォではボタンを表示させ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
ローカルにあるファイルを検索...
-
JavaScriptで文字列の特定文字...
-
ジェネレーターの作り方
-
javascriptでiframeのURL変更は?
-
なぜmatchメソッドがエラーにな...
-
ASP.NET MVCでObjectをjsに渡す
-
gas スプレッドシートがアクテ...
-
Google Apps Script で添付ファ...
-
html javascript リンク先アド...
-
ASP.NETのコントロールの値をJa...
-
javascriptでテーブルに追加し...
-
C言語の質問です HTMLでこのよ...
-
JavaScriptで決まった「時刻」...
-
翌月を取得するGASが分かりません
-
特定のclassを表示、非表示にする
-
どうすれば良いでしょうか?
-
HTMLにWSHを組み込む
おすすめ情報