本篇文章给大家带来了利用javascript实现贪吃蛇小游戏的实例，希望对大家有帮助。

button { width: 100px; height: 40px; font-weight: bold;}#game_title { margin-left: 95px;}#canvas { border: 1px solid #000000; /* 设置边框线 */}#score { font-weight: bold;}#mode_form { font-weight: bold;}#game_over { display: none; /* 设置game over 窗口不可见 */ position: fixed; top: 190px; left: 65px; width: 280px; height: 160px; background-color: aliceblue; border-radius: 5px; border: 1px solid #000; /* 设置边框线 */}#once_again { position: relative; left: 20px;}#cancel { position: relative; left: 50px;}

贪吃蛇小游戏

游戏结束！

您的最终得分为: 0分

再来一把取消

游戏说明:

1. 用键盘上下左右键（或者IJKL键，或者WSAD键）控制蛇的方向，寻找吃的东西
2. 每吃一口就能得到一定的积分，同时蛇的身子会越吃越长
3. 不能碰墙，不能咬到自己的身体，更不能咬自己的尾巴
4. 在下方单选框中选择难度等级，点击”开始 / 继续“即开始游戏，点击”暂停“则暂停游戏，
再点击”开始 / 继续“继续游戏，点击”重新开始”则重新开始游戏
5. 快捷键: “C“表示开始或继续，”P“表示暂停，”R“表示重新开始

目前得分: 0分

开始 / 继续 暂停 重新开始 const canvas = document.getElementById(“canvas”);const ctx = canvas.getContext(“2d”);const start_btn = document.getElementById(“startButton”);const pause_btn = document.getElementById(“pauseButton”);const restart_btn = document.getElementById(“restartButton”);const once_again_btn = document.getElementById(“once_again”);const cancel_btn = document.getElementById(“cancel”);const game_over_p = document.getElementById(“game_over”);const game_over_score = document.getElementById(“game_over_score”);const score_cal = document.getElementById(“score”);const mode_item = document.getElementsByName(“mode”);// 用刷新间隔代表蛇的速度，刷新间隔越长，则蛇的速度越慢const simply_mode = 200;const middle_mode = 100;const hard_mode = 50;//注意要改为var const是不会修改的var snake = [41, 40]; // 蛇身体队列var direction = 1; // 方向：1为向右，-1为向左，20为向下，-20为向上var food = 42; // 食物位置，取值为0~399var n; // 蛇的下一步的方向（由键盘和蛇的原方向决定）var score = -1; // 得分var time_internal = simply_mode; // 刷新时间间隔，用于调整蛇的速度,默认为简单模式let enabled = true; // 用于控制是否刷新，实现通过一定频率刷新let run_id; // 请求ID，用于暂停功能// 产生min~max的随机整数，用于随机产生食物的位置function random(min, max) {const num = Math.floor(Math.random() * (max – min)) + min;return num;}// 用于绘制蛇或者是食物代表的方块，seat为方块位置，取值为0~399，color为颜色function draw(seat, color) {ctx.fillStyle = color; // 填充颜色// fillRect的四个参数分别表示要绘制方块的x坐标，y坐标，长，宽，这里为了美观留了1px用于边框ctx.fillRect((seat % 20) * 20 + 1,Math.floor(seat / 20) * 20 + 1,18,18);}// 同步难度等级function syncMode() {var mode_value = “”;for (var i = 0; i < mode_item.length; i++) {if (mode_item[i].checked) {mode_value = mode_item[i].value;//原来是mode_item.value}}switch (mode_value) {case "simply":time_internal = simply_mode;break;case "middle":time_internal = middle_mode;break;case "hard":time_internal = hard_mode;break;}}// 用于绑定键盘上下左右事件，我设置了wsad，或者ijkl，或者上下左右方向键，代表上下左右方向// 同时绑定R 重启，P 暂停，C 继续，注意：若是这几个键则不需要更新direction的值，操作结束后直接返回即可document.onkeydown = function (event) {const keycode = event.keyCode;if(keycode == 82){// R 重启restart_btn.onclick();return;} else if(keycode == 80){// P 暂停pause_btn.onclick();return;} else if(keycode == 67){// C 继续start_btn.onclick();return;} else if (keycode <= 40) {// 上 38 下 40 左 37 右 39n = [-1, -20, 1, 20][keycode – 37] || direction; // 若keycode为其他值，则方向不变} else if (keycode = 73) {// i 73 j 74 k 75 l 76n = [-20, -1, 20, 1][keycode – 73] || direction;} else {switch (keycode) {case 87: //wn = -20;break;case 83: //sn = 20;break;case 65: //an = -1;break;case 68: //dn = 1;break;default:n = direction;}}direction = snake[1] – snake[0] == n ? direction : n; // 若方向与原方向相反，则方向不变};// 用于初始化游戏各项参数function init_game() {snake = [41, 40]; direction = 1; food = 42;score = -1; time_internal = simply_mode;enabled = true;score_cal.innerText = “目前得分: 0分”; // 更新得分mode_item[0].checked = true; // 重置难度等级为简单}function game_over(){cancelAnimationFrame(run_id);game_over_score.innerText = “您的最终得分为: ” + score + “分”;game_over_p.style.display = “block”;}// 启动或继续游戏function run_game() {syncMode(); // 同步难度等级n = snake[0] + direction; // 找到新蛇头坐标snake.unshift(n); // 添加新蛇头// 判断蛇头是否撞到自己或者是否超出边界if (snake.indexOf(n, 1) > 0 ||n 399 ||(direction == 1 && n % 20 == 0) ||(direction == -1 && n % 20 == 19)) {game_over();}draw(n, “#1a8dcc”); // 绘制新蛇头为浅蓝色draw(snake[1], “#cececc”); // 将原来的蛇头（浅蓝色）变成蛇身（浅灰色）if (n == food) {score = score + 1;score_cal.innerText = “目前得分: ” + score; // 更新得分while (snake.indexOf((food = random(0, 400))) >= 0); // 重新刷新食物，注意食物应不在蛇内部draw(food, “Yellow”); // 绘制食物} else {draw(snake.pop(), “White”); // 将原来的蛇尾绘制成白色}// setTimeout(arguments.callee, time_internal); //之前的方案，无法实现暂停和游戏的继续}// 控制游戏的刷新频率,每隔time_internal时间间隔刷新一次function game_control(){if(enabled){enabled = false;requestAnimationFrame(run_game);setTimeout(() => enabled = true, time_internal);}run_id = requestAnimationFrame(game_control);}// 绑定开始按钮点击事件start_btn.onclick = function () {run_id = requestAnimationFrame(game_control);};// 绑定暂停按钮点击事件pause_btn.onclick = function () {cancelAnimationFrame(run_id);};// 绑定重新开始按钮点击事件restart_btn.onclick = function () {cancelAnimationFrame(run_id);// 将原有的食物和蛇的方块都绘制成白色for(var i = 0; i < snake.length; i++){draw(snake[i], "White");}draw(food, "White");// 初始化游戏各项参数init_game();run_id = requestAnimationFrame(game_control);};// 绑定游戏结束时的取消按钮点击事件cancel_btn.onclick = function () {for(var i = 0; i < snake.length; i++){draw(snake[i], "White");}draw(food, "White");init_game();game_over_p.style.display = "none";}// 绑定游戏结束时的再来一把按钮点击事件once_again_btn.onclick = function () {for(var i = 0; i < snake.length; i++){draw(snake[i], "White");}draw(food, "White");init_game();game_over_p.style.display = "none";run_id = requestAnimationFrame(game_control);}

登录后复制

【相关推荐：javascript学习教程】

以上就是实例分享之JavaScript实现贪吃蛇小游戏的详细内容，更多请关注【创想鸟】其它相关文章！