###前提・実現したいこと
当方JavaScript初心者です。
JavaScriptの入門書を購入しました。
本に書いてある通りに、ソースを写してゲームを作りました。しかし、作動しません。
写し間違えは99%ありえないと思ってます。確認作業は何度もやりました。
もしかしたら、本に書いてあるソースが間違っているのでは?と思い、ここで質問させてもらっています。どなたか原因を教えてください。
※ゲームの説明については本から引用します。
「...Canvasを使ったゲームとして、SnakeBite風のゲームを紹介しましょう。上下左右キーで蛇を操作し、餌を食べさせます。餌を食べるたびに体が伸びていきます。四方の壁にぶつかるか自分にぶつかるとゲームオーバーです。ただ、これだけのゲームだけですが、思いのほか夢中で遊んでしまうことでしょう...」
田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript プログラミング』(株式会社インプレスR&D、2013年)
###発生している問題・エラーメッセージ
ゲームプログラミングが起動しない。(ブラウザで背景のみ表示される)
###該当のソースコード
JavaScript
1<!DOCTYPE html> 2<html> 3<head> 4<title>SnakeBite</title> 5<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6<script type="text/javascript"> 7var W, H, S = 20; 8var snake = [], foods = []; 9var keyCode = 0; 10var point = 0; 11var timer = NaN; 12var ctx; 13 14// Pointオブジェクト 15function Point(x, y){ 16this.x = x; 17this.y = y; 18} 19 20//初期化関数 21function init(){ 22var canvas = document.getElementById("field"); 23W = canvas.width / S; 24H = canvas.height / S; 25ctx = canvas.getContext("2d"); 26ctx.font = "20px sans-serif"; 27 28//蛇の初期化 29snake.push(new Point(W / 2, H / 2)); 30 31//餌の初期化 32for(var i = 0; i < 10; i++){ 33addFood(); 34} 35 36timer = setInterval("tick()", 200); 37window.onkeydown = keydown; 38} 39 40//餌の追加 41function addFood(){ 42while(true){ 43var x = Math.floor(Math.random() * W); 44var y = Math.floor(Math.random() * H); 45 46if(isHit(foods, x, y) || isHit(snake, x, y)){ 47continue; 48} 49 50foods.push(new Point(x, y)); 51break; 52} 53} 54 55//衝突判定 56function isHit(data, x, y){ 57for(var i = 0; i < data.length; i++){ 58if(data[i].x == x && data[i].y == y){ 59return true; 60} 61} 62return false; 63} 64 65function moveFood(x, y){ 66foods = foods.filter(function (p) { 67return (p.x != x || p.y != y); 68}); 69addFood(); 70} 71 72function tick(){ 73var x = snake[0].x; 74var y = snake[0].y; 75 76switch(keyCode){ 77case 37: x--; break; //左 78case 38: y--; break; //上 79case 39: x++; break; //右 80case 40: y++; break; //下 81default: paint(); return; 82} 83 84//自分 or 壁に衝突? 85if(isHit(snake, x, y) || x < 0 || x >= W || y < 0 || y >= H) 86 87clearInterval(timer); 88paint(); 89return; 90} 91 92//頭を先頭に追加 93snake.unshift(new Point(x, y)); 94 95if(isHit(foods, x, y)){ 96point += 10; //餌を食べた 97moveFood(x, y); 98} else { 99snake.pop(); //食べてない→しっぽを削除 100} 101 102paint(); 103} 104 105function paint(){ 106ctx.clearRect(0, 0, W * S, H * S); 107ctx.fillStyle = "rgb(256,0,0)"; 108ctx.fillText(point, S, S * 2); 109ctx.fillStyle = "rgb(0,0,255)"; 110 111foods.forEach(function (p) { 112ctx.fillText("+", p.x * S, (p.y + 1) * S); 113}); 114snake.forEach(function (p) { 115ctx.fillText("*", p.x * S, (p.y + 1) * S); 116}); 117} 118 119function keydown(event){ 120keyCode = event.keyCode; 121} 122</script> 123</head> 124 125<body onload="init()"> 126<canvas id="field" width="400" height="400" style="background:#cccccc"> 127</canvas> 128</body> 129</html> 130
###試したこと
メモ帳に打ち込んだものを印刷して、本と照らし合わせながら、間違っていないか2回確認しました。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答2件
あなたの回答
tips
プレビュー