js贪吃蛇游戏实现思路和源码

本文实例为大家分享了js贪吃蛇游戏的相关代码，供大家参考，具体内容如下

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>贪吃蛇小游戏</title><style>*{margin:0; padding:0;}header {display: block;margin: 0 auto;width: 500px;text-align: center;}header h1 {font-family: Arial;font-weight: bold;}header #newGameButton {display: block;margin: 20px auto;width: 100px;padding: 10px 10px;background-color: #8f7a66;font-family: Arial;color: white;border-radius: 10px;text-decoration: none;}header #newGameButton:hover {background-color: #9f8b77;}header p {font-family: Arial;font-size: 25px;margin: 20px auto;}canvas{display:block; border:medium double black;margin:4px auto;}</style></head><body><header><h1>贪吃蛇小游戏</h1><a href="javascript:newgame（）;" id="newGameButton">New Game</a><p>score:<span id="score">0</span></p></header><canvas id="canvas">Your browser doesn"t support the <code>canvas</code> element.</canvas><script>var CANVAS = document.getElementById（"canvas"）;var CTX = CANVAS.getContext（"2d"）;var SNAKE = new Array（）;//用队列模拟蛇身var DIR = "right";//用来控制蛇头的方向var SIZE = 20;//蛇身的宽度var FOODX = 0;//食物的x坐标var FOODY = 0;//食物的y坐标var HEADX = 0;//蛇头的x坐标var HEADY = 0;//蛇头的y坐标var MAXWIDTH = 200;//画布的高度var MAXHEIGHT = 200;//画布的宽度var TIME = 400;//蛇的速度var SCORE = 0;//计算玩家分数var interval = null;CANVAS.width = MAXWIDTH;CANVAS.height = MAXHEIGHT;window.onload = function（）{newgame（）;};document.getElementById（"newGameButton"）.click（function（）{newgame（）;}）;function newgame（）{SNAKE = [];//用队列模拟蛇身DIR = "right";//用来控制蛇头的方向HEADX = 0;//蛇头的x坐标HEADY = 0;//蛇头的y坐标SCORE = 0;window.clearInterval（interval）;interval = null;//初始化画布CTX.clearRect（0, 0, MAXWIDTH, MAXHEIGHT）;//画一条蛇drawSnake（）;//放置食物setFood（）;//移动蛇interval = window.setInterval（move, TIME）;}function move（）{switch（DIR）{case "up":HEADY = HEADY-SIZE;break;case "right":HEADX = HEADX+SIZE;break;case "down":HEADY = HEADY+SIZE;break;case "left":HEADX = HEADX-SIZE;break;}if（HEADX>MAXWIDTH-SIZE || HEADY>MAXHEIGHT-SIZE || HEADX<0 || HEADY<0）{alert（"你的分数为："+SCORE+"分，继续努力吧！失败原因：碰壁了....."）;window.location.reload（）;}for（var i=1;i<SNAKE.length;i++）{if（SNAKE[i][0] == SNAKE[0][0] && SNAKE[i][1] == SNAKE[0][1]）{alert（"你的分数为："+SCORE+"分，继续努力吧！失败原因：撞到自己了....."）;window.location.reload（）;}}if（SNAKE.length == MAXWIDTH *MAXHEIGHT）{alert（"好厉害！么么哒~"）;window.location.reload（）;}moveIn（HEADX, HEADY）;//移动一格}document.onkeydown = function（e） { //改变蛇方向var code = e.keyCode - 37;switch（code）{case 1 : DIR = "up";break;//上case 2 : DIR = "right";break;//右case 3 : DIR = "down";break;//下case 0 : DIR = "left";break;//左}}//=============================画一条蛇=======================================================function drawSnake（）{CTX.fillStyle = "black";//画蛇头CTX.fillRect （HEADX, HEADY, SIZE, SIZE）;SNAKE.push（[HEADX, HEADY]）;//画蛇身switch（DIR）{case "up": drawBody（HEADX, HEADY + SIZE, HEADX, HEADY + 2 * SIZE）;break;case "right": drawBody（HEADX - SIZE, HEADY, HEADX - 2 * SIZE, HEADY）;break;case "down": drawBody（HEADX, HEADY - SIZE, HEADX, HEADY - 2 * SIZE）;break;case "left": drawBody（HEADX + SIZE, HEADY, HEADX + 2 * SIZE, HEADY）;break;}}function drawBody（x1, y1, x2, y2）{CTX.fillRect （x1, y1, SIZE, SIZE）; CTX.fillRect （x2, y2, SIZE, SIZE）; SNAKE.push（[x1, y1]）;SNAKE.push（[x2, y2]）;}//===========================放置食物==============================function setFood（）{do{FOODX = SIZE * Math.floor（Math.random（） * MAXWIDTH / SIZE）;FOODY = SIZE * Math.floor（Math.random（） * MAXHEIGHT / SIZE）;}while（foodInSnake（））;CTX.fillStyle = "red";CTX.fillRect （FOODX, FOODY, SIZE, SIZE）;}function foodInSnake（）{for （var i = 0; i < SNAKE.length; i++） {if（FOODX == SNAKE[i][0] && FOODY == SNAKE[i][1]）{return true;}}return false;}//========================================移动一格===========================function moveIn（x, y）{CTX.fillStyle = "black";CTX.fillRect（x, y, SIZE, SIZE）;//重画蛇头//把新蛇头添加到 SNAKE 数组var newSnake = [[x, y]];SNAKE = newSnake.concat（SNAKE）;if（false == eatFood（））{//如果没吃到食物，减少一格蛇尾var snakeTail = SNAKE.pop（）;//获得蛇尾位置CTX.clearRect（snakeTail[0], snakeTail[1], SIZE, SIZE）;//去掉蛇尾}}function eatFood（）{if（HEADX == FOODX && HEADY == FOODY）{CTX.fillStyle = "block";CTX.fillRect （FOODX, FOODY, SIZE, SIZE）;setFood（）;SCORE++;//$（"#score"）.text（SCORE）;document.getElementById（"score"）.innerHTML = SCORE;return true;}return false;}</script></html>

效果图：

思路：

function newgame（）{重置蛇和分数的数据；清除interval；初始化画布；画一条蛇；放置食物；使用定时器（setInterval）使蛇移动（move函数）；}function move（）{根据方向改变蛇头下一格将要到达的位置；判断游戏是否结束，以及显示结束的原因（包含输赢）；蛇移动一格（moveIn函数）；}对键盘的方向键作监控，当改变方向时，修改全局变量DIR的值（用于存储方向）；function moveIn（）{在蛇头的前一格增加一格作为新的蛇头，并将蛇头的坐标作为第一个元素加入到代表蛇的数组中；if（没吃到食物）{删除一格蛇尾，在画布中做相应改变；}}

需要注意的是，如果需要在JS中设定canvas中的宽度和高度，和设置其他CSS属性略有不同。
CANVAS.width = MAXWIDTH;CANVAS.height = MAXHEIGHT;
小编还为大家准备了精彩的专题：javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。