用html5_canvas实现贪吃蛇

发表于 更新于 分类于 阅读次数：

摘要：用html5_canvas实现贪吃蛇

查看示例

html代码

1
2
3
<div class="main">
    <canvas id="myCanvas" width="500" height="500"></canvas>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
<style>
        body {
            margin: 0;
            padding: 0;
        }

        #myCanvas {
            border: red 1px solid;
            margin: 50px auto;
            display: block;
        }
    </style>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 <script type="text/javascript">
        window.onload = function () {
            //初始化canvas
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            //难度
            var speed = 500;
            //蛇身胖瘦
            var a = 20
            //按键
            var upKey = 87
            var leftKey = 65
            var downKey = 83
            var rightKey = 68
            var pauseKey = 27
            //蛇头方向
            var direction;
            //定义蛇并初始化
            var snake = new Array();
            var snk = new Object();
            snk.x = 100
            snk.y = 100
            snake.push(snk)
            //食物坐标
            var x0
            var y0

            var inter
            //画蛇
            var drawSnake = function () {
                //失败条件：蛇头碰到墙壁或蛇身
                if (snake[0].x < 0 || snake[0].x >= 500 || snake[0].y < 0 || snake[0].y >= 500) {
                    alert('你失败了！')
                    window.clearInterval(inter)
                    snake = new Array();
                    snake.push(snk)
                }
                for (var i = 0; i < snake.length; i++) {
                    if (i != 0 && snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
                        alert('你失败了！')
                        window.clearInterval(inter)
                        snake = new Array();
                        snake.push(snk)
                        break;
                    }
                    var obj = snake[i];
                    context.beginPath()
                    context.rect(obj.x, obj.y, a, a);
                    context.stroke();
                }
            }
            //画食物
            var singelRect = function (type) {
                if (type) {
                    x0 = a * parseInt(Math.random() * (500 / a));
                    y0 = a * parseInt(Math.random() * (500 / a));
                }
                var flag = true;
                for (var i = 0; i < snake.length; i++) {
                    if (x0 == snake[i].x && y0 == snake[i].y) {
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    context.strokeStyle = '#000'
                    context.beginPath()
                    context.rect(x0, y0, a, a);
                    context.stroke();
                } else {
                    singelRect(1)
                }
            }
            //吃到食物
            var eat = function () {
                var food = new Object();
                food.x = x0;
                food.y = y0;
                snake.unshift(food)
                singelRect(1);
                //蛇身变长难度加大
                if (snake.length % 10 == 0) {
                    speed -= 100
                }
            }
            //蛇的移动
            var autoMove = function (keyCode) {
                var leader = new Object();
                switch (keyCode) {
                    case upKey:
                        if (snake[0].x == x0 && snake[0].y == y0 + a) {
                            eat()
                        }
                        leader.x = snake[0].x
                        leader.y = snake[0].y - a
                        direction = upKey
                        break;
                    case leftKey:
                        if (snake[0].x == x0 + a && snake[0].y == y0) {
                            eat()
                        }
                        leader.x = snake[0].x - a
                        leader.y = snake[0].y
                        direction = leftKey
                        break;
                    case downKey:
                        if (snake[0].x == x0 && snake[0].y == y0 - a) {
                            eat()
                        }
                        leader.x = snake[0].x
                        leader.y = snake[0].y + a
                        direction = downKey
                        break;
                    case rightKey:
                        if (snake[0].x == x0 - a && snake[0].y == y0) {
                            eat()
                        }
                        leader.x = snake[0].x + a
                        leader.y = snake[0].y
                        direction = rightKey
                        break;
                    default:
                        return;
                }
                snake.unshift(leader)
                snake.pop();
                context.clearRect(0, 0, 500, 500);
                singelRect()
                drawSnake()
            }
            //键盘监听
            window.onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && (e.keyCode == upKey || e.keyCode == leftKey || e.keyCode == downKey || e.keyCode == rightKey || e.keyCode == pauseKey)) {
                    autoMove(e.keyCode)
                    window.clearInterval(inter)
                    inter = setInterval(function () {
                        autoMove(e.keyCode)
                    }, speed);
                }
            }
            //游戏开始
            drawSnake()
            singelRect(1);
//            inter = setInterval(function () {
//                autoMove(upKey)
//            }, speed);
        }
    </script>