JavaScriptで作ったゲームが動かない!

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <title>SnakeKit</title>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7    <script type="text/javascript">
8
9        var W, H, S = 20;
10        var snake = [], foods = [];
11        var keycode = 0;
12        var point = 0;
13        var timer = NaN;
14        var ctx;
15
16        // pointオブジェクト
17        function Point(x, y){
18            this.x = x;
19            this.y = y;
20        }
21
22        // 初期化関数
23        function init(){
24            var canvas = document.getElementById('field');
25            W = canvas.width / S;
26            H = canvas.height / S;
27            ctx = canvas.getContext('2d');
28            ctx.font = "20px sans-serif";
29
30            // 蛇の初期化
31            snake.push(new Point(W / 2, H / 2));
32
33            // 餌の初期化
34            for(var i = 0; i < 10; i++){
35                addFood();
36            }
37
38            timer = setInterval("tick()", 200);
39            window.onkeydown = keydown;
40        }
41
42        // 餌の追加
43        function addFood(){
44            while(true){
45                var x = Math.floor(Math.random() * W);
46                var y = Math.floor(Math.random() * H);
47
48                if(isHit(foods, x, y) || isHit(snake, x, y)){
49                    continue;
50                }
51
52                foods.push(new Point(x, y));
53                break;
54            }
55        }
56
57        // 衝突判定
58        function isHit(data, x, y){
59            for(var i = 0; i < data.length; i++){
60                if(data[i].x == x && data[i].y == y){
61                    return true;
62                }
63            }
64            return false;
65        }
66
67        function moveFood(x, y){
68            foods = foods.filter(function (p) {
69                return (p.x != x || p.y != y);
70            });
71            addFood();
72        }
73
74        function tick(){
75            var x = snake[0].x;
76            var y = snake[0].y;
77
78            switch(keycode){
79                case 37: x--; break;    // 左
80                case 38: y--; break;    // 上
81                case 39: x++; break;    // 右
82                case 40: x++; break;    // 下
83                default: paint(); return;
84            }
85
86            // 自分か壁に衝突?
87            if(isHit(snake, x, y) || x < 0 || W <= x || y < 0 || H <= y){
88                clearInterval(timer);
89                paint();
90                return;
91            }
92
93            // 頭を先頭に追加
94            snake.unshift(new Point(x, y));
95
96            if(isHit(foods, x, y)){
97                point += 10;    // 餌を食べた
98                moveFood(x, y);
99            } else{
100                snake.pop();    // 食べてない -> 尻尾を削除
101            }
102
103            paint();
104        }
105
106        function paint(){
107            ctx.clearRect(0, 0, W * S, H * S);
108            ctx.fillStyle = "rgb(256, 0, 0)";
109            ctx.fillText(point, S, S * 2);
110            ctx.fillStyle = "rgb(0, 0, 255)";
111
112            foods.forEach(function (p){
113                ctx.fillText("+", p.x * S, (p.y + 1) * S);
114            });
115            snake.forEach(function (p){
116                ctx.fillText("*", p.x * S, (p.y + 1) * S);
117            });
118        }
119
120        function keydown(event){
121            keycode = event.keycode;
122        }
123    </script>
124</head>
125<body onload="init()">
126    <canvas id="field" width="400" height="400" style="background:#cccccc">
127    </canvas>
128</body>
129</html>

ゲームを作りながら楽しく学べる・・・という本を参考に作ってみたのですが、画面は表示されても動きはしません。なぜ動かないのですか?
Chromeのコンソールではエラーは出ていませんでしたので、論理的な間違えかなと思うのですが・・・どこが間違っているのか全く見当もつきません・・・
よろしくお願いします!

ちなみに本に書いてある通りに写生しましたが、勝手に載せるのは著作権に触れますかね?

行動規範の内容に同意します

回答1件

JavaScript
1// before
2    function keydown(event){
3            keycode = event.keycode;
4        }

JavaScript
1// after
2    function keydown(event){
3            keycode = event.keyCode;
4        }

keycode の code が小文字でした・・・

javascript
1      switch(keycode){
2                case 37: x--; break;    // 左
3                case 38: y--; break;    // 上
4                case 39: x++; break;    // 右
5                case 40: x++; break;    // 下
6                default: paint(); return;
7            }

javascript
1      switch(keycode){
2                case 37: x--; break;    // 左
3                case 38: y--; break;    // 上
4                case 39: x++; break;    // 右
5                case 40: y++; break;    // 下
6                default: paint(); return;
7            }