- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>The snake game</title>
- </head>
- <script type="text/javascript">
- function log(msg) {
- console.log(msg);
- }
- </script>
- <body>
- <canvas id="canvas">
- Your browser cannot support html5.
- </canvas>
- <script type="text/javascript">
- this.onkeydown = function(e) {
- var code = e.keyCode;
- if (code == 37)
- changeMove(3);
- if (code == 38)
- changeMove(0);
- if (code == 39)
- changeMove(1);
- if (code == 40)
- changeMove(2);
- }
- function changeMove(val) {
- if ((move == 0 || move == 2) && (val == 2 || val == 0))
- return;
- if ((move == 3 || move == 1) && (val == 1 || val == 3))
- return;
- move = val;
- }
- function dead(snake) {
- // 撞墙壁
- switch (move) {
- case 0:
- if (snake[0] < 0) {
- log('up:' + snake[0]);
- return true;
- }
- break;
- case 1:
- if (snake[0] % 20 == 0) {
- log('right:' + snake[0]);
- return true;
- }
- break;
- case 2:
- if (snake[0] >= 400) {
- log('down:' + snake[0]);
- return true;
- }
- break;
- case 3:
- if ((snake[0] + 1) % 20 == 0) {
- log('left:' + snake[0]);
- return true;
- }
- break;
- default:
- break;
- }
- // 咬自己
- for(var i = 1; i < snake.length ; i ++) {
- if(snake[0] == snake[i]) {
- log('self:' + snake[0]);
- return true;
- }
- }
- return false;
- }
- // rand=-1表示食物被吃,要求重新生成食物
- function run(rand) {
- //ctx.fillStyle = '#000000';
- ctx.clearRect(100, 100, 300, 300);
- // 画布容器
- var container = new Array(400);
- for ( var i = 0; i < container.length; i++) {
- container[i] = 0;
- }
- for ( var i in snake) {
- container[snake[i]] = 1;
- }
- // 生成食物
- if(rand == -1) {
- var rands = [];
- for ( var i in container) {
- if (container[i] == 0)
- rands.push(i);
- }
- rand = rands[parseInt(Math.random() * rands.length)];
- }
- // 放入画布容器
- container[rand] = 1;
- for ( var i = 0; i < container.length; i++) {
- if (container[i] == 0) {
- ctx.fillRect(100 + sw * (i % 20),
- 100 + sw * parseInt((i / 20)), sw, sw);
- ctx.strokeRect(100 + sw * (i % 20),
- 100 + sw * parseInt((i / 20)), 10, sw);
- } else {
- ctx.strokeRect(100 + sw * (i % 20),
- 100 + sw * parseInt((i / 20)), sw, sw);
- }
- }
- var slen = snake.length;
- var shead = snake[0], send = snake[slen - 1];
- ctx.fillStyle = '#000000';
- ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
- //ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
- ctx.fillStyle = '#ff0000';
- ctx.beginPath();
- ctx.arc((100 + sw * (shead % 20)) + sw / 2, (100 + sw * parseInt((shead / 20))) + sw / 2, sw / 2, 0, Math.PI * 2, false);
- //不关闭路径路径会一直保留下去,当然也可以利用这个特点做出意想不到的效果
- ctx.closePath();
- ctx.fill();
- ctx.fillStyle = '#000000';
- //ctx.strokeRect(100 + sw * (shead % 20), 100 + sw
- // * parseInt((shead / 20)), sw, sw);
- for ( var i = slen - 1; i > 0; i--) {
- snake[i] = snake[i - 1];
- }
- switch (move) {
- case 0:
- snake[0] = shead - 20;
- break;
- case 1:
- snake[0] = shead + 1;
- break;
- case 2:
- snake[0] = shead + 20;
- break;
- case 3:
- snake[0] = shead - 1;
- break;
- default:
- break;
- }
- // 死亡
- if (dead(snake)) {
- alert('game over');
- return false;
- }
- // 蛇吃到食物,增加移动次数,到达蛇尾,把食物放到蛇数组
- if (eat && ms++ == slen) {
- ms = 0;
- snake.push(send);
- eat = false;
- }
- // 吃到食物,重新生成食物
- if (snake[0] == rand) {
- eat = true;
- rand = -1;
- }
- setTimeout('run(' + rand + ')', speed);
- }
- //log(snake);
- //for(var i = 0; i < 300; i ++)
- var canvas = document.getElementById('canvas');
- canvas.width = 400;
- canvas.height = 400;
- var ctx = canvas.getContext('2d');
- var snake = []; // 蛇对象
- snake.push(205);
- snake.push(204);
- snake.push(203);
- snake.push(202);
- snake.push(201);
- // move:移动方式[0, 1, 2, 3] = [up, right, down, left]
- // ms:当蛇吃到食物后的移动次数,以此来判断增加蛇数组长度
- // eat:蛇是否吃到食物
- // sw:蛇方块宽度
- // speed:速度ms
- var move = 1, ms = 0, eat = false, sw = 10, speed = 50;
- run(-1);
- log(canvas);
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/251220138230.html
来源: http://www.codesnippet.cn/detail/251220138230.html