- ベストアンサー
JavaScriptのタイプミス？初心者が気になるコードのミスとは
- JavaScript初心者が気になるコードのミスを解説します。エディタにソースを貼り付ければ見やすくなります。
- SnakeBiteというタイトルで、IEでの表示に対応したSnakeゲームのコードです。
- このコードには、餌の初期化や衝突判定などの関数が含まれており、Snakeの動きを制御しています。
- montamisa
- お礼率66% (2/3)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
決定的な間違いは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>
その他の回答 (1)
- 中村 拓男（@tknakamuri）
- ベストアンサー率35% (674/1896)
JSLINTを使いましょう。私はあれなしでは怖くて JS のコードをかけません。
お礼
ありがとうございます! 動きました IE11のデバッグやJSLINTを使ってもどこが間違いなのか 解らず、困っていました。 もしよければどのようにミスの箇所を見つけたのか 教えていただけませんか？ デバッグして表示された内容を検索しても 意味が不明でして、、。私の基礎力が足りない事 は承知しているのですが、、。 とにかく、こんなに早く正確なご指摘もらえた 事に感謝します。