贪吃蛇小游戏css+javascript代码实现（全）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇</title> <style> body { display: flex; height: 100vh; margin: 0; padding: 0; justify-content: center; align-items: center; } </style> </head> <body> <script> var snake = [40, 40]; //蛇身 var direction = 1; //方向 var food = 43; //食物的位置 var n; // 下一个蛇头的位置 var box = document.getElementById('game').getContext('2d'); // 绘制每个点位 var draw = function (seat, color) { box.fillStyle = color; box.fillRect(seat % 20 * 20 + 1, ~~(seat / 20) * 20 + 1, 18, 18); } document.onkeydown = function (e) { console.log(e.keyCode) // 获取蛇头方向 /* e.keyCode 键盘按键Unicode值 左上右下分别对应 37,38,39,40, snake[1] - snake[0] : 获得蛇当前的方向 n = [-1, -20, 1, 20][(e.keyCode - 37)] || direction 获得用户期望的方向 [-1, -20, 1, 20][(e.keyCode - 37)] || direction 根据当前用户按键, 取值. 如果用户按下的不是 "左上右下" e.keyCode - 37 的范围一定不再 0,1,2,3 这几个数字范围内 所以后面跟一个 || direction, 这样的算法可以得出 n 要么等于用户期望的方向, 要么等于当前蛇头的方向 蛇头方向 = 当前方向 === 用户期望的方向 ? 当前方向 : 用户期望的方向 */ direction = snake[1] - snake[0] == ( n = [-1, -20, 1, 20][(e.keyCode - 37)] || direction ) ? direction : n; } ; (function () { snake.unshift(n = snake[0] + direction); // 得出蛇头的位置: 蛇头 + 方向 // 碰撞检测 if ( (snake.indexOf(n, 1) > 0) || // 撞上蛇身 (n < 0) || // 撞墙 上 (n > 399) || // 撞墙 下 (direction === 1 && n % 20 === 0) || // 撞墙 右 (direction === -1 && n % 20 === 19) // 撞墙 做 ) { // return console.log('game over') return alert('您可真菜！！！') } // 绘制蛇头 draw(n, 'red'); if (n === food) { // 得到下一个食物的位置 while (snake.indexOf(food = ~~(Math.random() * 400)) > 0); // 绘制下一个食物 draw(food, 'yellow'); } else { // 蛇尾出列 draw(snake.pop(), 'black'); } setTimeout(arguments.callee, 150); })(); </script> </body> </html>