是完成俄罗斯方块后 无聊随便写的一个 这个比俄罗斯方块好多了
还是显示和操作数据分开写 这样的思路很好
不多说直接上代码 很简单的小游戏
<html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <canvas id="myCanvas" width="1000" height="600" style="border:5px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <button id="btn" type="button" οnclick="kaishi()"> 开始游戏</button> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); function kaishi() { //o 为随机产生食物的x p 为随机产生食物的y var t = 1; var length = 3; var map = new Array();//把画布定义为一个二维数组并且值为0; for (var k = 0; k < 20; k++) { map[k] = new Array(); for (var j = 0; j < 12; j++) { map[k][j] = 0; } } k = Math.floor(Math.random() * 15 + 3); m = Math.floor(Math.random() * 9 + 3); o = Math.floor(Math.random() * 15 + 3); p = Math.floor(Math.random() * 9 + 3); var snake = [];//把画布定义为一个二维数组并且值为0; for (i = 0; i < length; i++) { var snake_children = { x: k, y: m, me: 1, } k = k + 1; snake.push(snake_children); } function move(t) { if (t == 1) { clearInterval(run); run = setInterval(left, 500) } if (t == 2) { clearInterval(run); run = setInterval(up, 500) } if (t == 3) { clearInterval(run); run = setInterval(right, 500) } if (t == 4) { clearInterval(run); run = setInterval(down, 500) } } function clearCanvas() { c.height = c.height; } function over() { alert("GAME OVER!!!"); for (i = 0; i < snake.length; ++i) snake[i] = 0; o = undefined; p = undefined; chushihua(); clearCanvas(); clearInterval(run); clearInterval(stop); } function showkey() { key = event.keyCode; if (key == 37) move(1);//向左移动 if (key == 38) move(2);//向上移动 if (key == 39) move(3);//向右移动 if (key == 40) move(4);//向下移动 } document.onkeydown = showkey; function len() { //snake 的长度加一并且头为 这个东西的x y值 if (snake[0].y == p && snake[0].x == o) { length++; o = Math.floor(Math.random() * 15 + 3); p = Math.floor(Math.random() * 9 + 3); } else { delete snake[length - 1]//删除一维数组中最后一个值 } } function is(t) {//判断条件 for (i = 0; i < length; i++) if (snake[i].x < 1 || snake[i].x > 18 || snake[i].y < 0 || snake[i].y > 11) return true; else if (t == 1 && map[snake[i].x - 1][snake[i].y] == snake[i].me) return true; else if (t == 3 && map[snake[i].x + 1][snake[i].y] == snake[i].me) return true; else if (t == 2 && map[snake[i].x][snake[i].y - 1] == snake[i].me) return true; else if (t == 4 && map[snake[i].x][snake[i].y + 1] == snake[i].me) return true; else return false; } function fuzhi() { chushihua(); for (i = 0; i < length; i++) if (snake[i].me == 1) map[snake[i].x][snake[i].y] = 1; } function chushihua() { for (var k = 0; k < 20; k++) { for (var j = 0; j < 12; j++) { map[k][j] = 0; } } } function down() { if (is(4)) { over(); } else { mapx = snake[0].x mapy = snake[0].y len() var s = { x: mapx, y: mapy + 1, me: 1, } snake.unshift(s); fuzhi() } } function up() { if (is(2)) { over(); } else { mapx = snake[0].x mapy = snake[0].y len() var s = { x: mapx, y: mapy - 1, me: 1, } snake.unshift(s); fuzhi() } } function right() { if (is(3)) { over(); } else { mapx = snake[0].x mapy = snake[0].y len() var s = { x: mapx + 1, y: mapy, me: 1, } snake.unshift(s); fuzhi() } } function left() { if (is(1)) { over(); } else { mapx = snake[0].x mapy = snake[0].y len() var s = { x: mapx - 1, y: mapy, me: 1, } snake.unshift(s); fuzhi() } } function hsnake() { clearCanvas() for (i = 0; i < length; i++) if (snake[i].me == 1) ctx.fillRect(snake[i].x * 50, snake[i].y * 50, 50, 50) ctx.fillStyle = "#1E90FF"; ctx.fillRect(o * 50, p * 50, 50, 50) } run = setInterval(left, 500) stop = setInterval(hsnake, 0) } </script> </body>