前言：
目前姐妹们对“javascript贪吃蛇课程设计报告”大概比较讲究，咱们都需要分析一些“javascript贪吃蛇课程设计报告”的相关文章。那么小编也在网上搜集了一些对于“javascript贪吃蛇课程设计报告””的相关知识，希望姐妹们能喜欢，大家快快来学习一下吧！通过纯JS操作DOM元素面向过程编写一个贪吃蛇小游戏
步骤分解与代码
1.游戏主界面
本示例直接在body标签中添加一个800*400的div充当,没有使用js创建
<!DOCTYPE html><html xmlns=";><head> <title>贪吃蛇小游戏</title> <style type="text/css"> div { width: 800px; height: 400px; background-color: #24f193; position: relative; } </style></head><body> <div id="dv"> </div><!-- 游戏主界面 --></body></html>2.创建食物
通过js创建一个div,背景色是红色,食物位置随机生成显示在游戏主界面范围内
<script type="text/javascript"> window.onload = function () { //获取游戏主界面 var dv = document.getElementById("dv"); //声明一个food变量保存生成的食物对象此变量有两个作用 //1 蛇头吃到食物 2 清除当前被吃掉的食物 var food; function createFood() { food = document.createElement("div"); //设置食物宽高 food.style.width = 20 + 'px'; food.style.height = 20 + 'px'; //设置食物随机显示位置 //Math.floor()其方法作用是向下取整 //Math.random()其方法作用是生成0~1之间的随机数(包含0,不包含1) //Math.floor(Math.random() * 40)生成0-39之间的整数 //Math.floor(Math.random() * 40) * 20 游戏主界面长度为800,20是食物的长度 food.style.left = Math.floor(Math.random() * 40) * 20 + 'px'; food.style.top = Math.floor(Math.random() * 20) * 20 + 'px'; food.style.position = "absolute";//设置绝对定位 food.style.backgroundColor = "red"; dv.appendChild(food);//食物追加到游戏主界面 } //显示生成的食物 createFood(); } </script>3.创建小蛇
声明一个长度为3的数组为初始小蛇,循环此数组通过js创建div为蛇身的每个蛇节
<script type="text/javascript"> window.onload = function () { //获取游戏主界面 var dv = document.getElementById("dv"); //声明数组表示小蛇 //每个蛇节使用数组表示 //[0, 0, "blue", null] 前两个00,表示蛇节的坐标,blue表示背景色 //null用于存储新的蛇节 var snake = [[0, 0, "blue", null], [1, 0, "blue", null], [2, 0, "red", null]]; function createSnake() { for (var i in snake) { //判断当前蛇节是否存在,如果不存在则创建新的蛇节 if (snake[i][3] == null) { snake[i][3] = document.createElement("div"); snake[i][3].style.width = 20 + 'px'; snake[i][3].style.height = 20 + 'px'; snake[i][3].style.position = "absolute"; snake[i][3].style.backgroundColor = snake[i][2]; } //设置每个蛇节显示位置 snake[i][3].style.left = snake[i][0] * 20 + 'px'; snake[i][3].style.top = snake[i][1] * 20 + 'px';//将创建的蛇节显示在游戏主界面 dv.appendChild(snake[i][3]); } } createSnake();//暂时显示小蛇 } </script>显示小蛇与食物
4.小蛇运动
4.1 为body注册一个键盘按下事件,控制小蛇进行上下左右的移动
<script type="text/javascript"> window.onload = function () { var dir="right";//控制运动方向,默认向右运动 document.body.onkeydown = function (evt) { if (evt.keyCode == 38) { dir = "up";//上 } if (evt.keyCode == 39) { dir = "right";//右 } if (evt.keyCode == 40) { dir = "down";//下 } if (evt.keyCode == 37) { dir = "left";//左 } } } </script>4.2 设置一个定时器,让小蛇每过多长时间进行移动 //移动方法
4.3 小蛇与食物相遇处理
小蛇增加一个蛇节,将当前食物清除,重新生成一个新食物
4.4 小蛇越界与结束处理
//移动方法 function Move() { //通过循环让每个蛇节跟着蛇头移动 for (var i = 0 ; i < snake.length - 1; i++) { snake[i][0] = snake[i + 1][0]; snake[i][1] = snake[i + 1][1]; } //判断按键时dir控制的方向 if (dir == "up") { snake[snake.length - 1][1] -= 1;//向上 } if (dir == "right") { snake[snake.length - 1][0] += 1;//向右 } if (dir == "down") { snake[snake.length - 1][1] += 1;//向下 } if (dir == "left") { snake[snake.length - 1][0] -= 1;//向左 } //判断食物与蛇头相遇时的处理 if (snake[snake.length - 1][0] * 20 == parseInt(food.style.left) && snake[snake.length - 1][1] * 20 == parseInt(food.style.top)) { //首先清除当前食物对象 food.parentNode.removeChild(food); //创建新的蛇节添加到小蛇的数组中 var newSnake = [snake[0][0], snake[0][1], "blue", null] snake.unshift(newSnake);//向蛇尾添加蛇节 createFood();//重新生成新的食物 } //判断越界时的处理 //越过左边界 if (snake[snake.length - 1][0] < 0) { snake[snake.length - 1][0] = 39; } //越过右边界 if (snake[snake.length - 1][0] >39) { snake[snake.length - 1][0] = 0; } //越过上边界 if (snake[snake.length - 1][1] < 0) { snake[snake.length - 1][1] = 19; } //越过下边界 if (snake[snake.length - 1][1] >19) { snake[snake.length - 1][1] = 0; } //当小蛇霸屏或者蛇头碰到自身游戏结束 //判断填满与碰到自身 if (snake.length>800) { //停止定时器 clearInterval(interId); alert("恭喜玩家霸屏^-^^-^^-^,游戏结束") } //判断蛇头碰到自身 var stX=snake[snake.length-1][0];//蛇头x坐标 var stY=snake[snake.length-1][1];;//蛇头y坐标 for (var j = 0; j < snake.length-1; j++) { if (stX==snake[j][0]&&stY==snake[j][1]){ clearInterval(interId); alert("想不开自杀了!!! >_<>_<>_<"); } } //每次移动后重新显示小蛇的新位置 createSnake(); }本示例是假设蛇头越过游戏主界面的上边界,让小蛇从游戏主界面的下边界重新出来,其它越界处置以此类推
小蛇越界
游戏结束标志是蛇头碰到蛇身或者小蛇填满游戏主界面
贪吃蛇完整代码
<!DOCTYPE html><html xmlns=";><head> <title>贪吃蛇小游戏</title> <style type="text/css"> div { width: 800px; height: 400px; background-color: #24f193; position: relative; } </style> <script type="text/javascript"> window.onload = function () { //获取游戏主界面 var dv = document.getElementById("dv"); //声明一个food变量保存生成的食物对象此变量有两个作用 //1 蛇头吃到食物 2 清除当前被吃掉的食物 var food; function createFood() { food = document.createElement("div"); //设置食物宽高 food.style.width = 20 + 'px'; food.style.height = 20 + 'px'; //设置食物随机显示位置 //Math.floor()其方法作用是向下取整 //Math.random()其方法作用是生成0~1之间的随机数(包含0,不包含1) //Math.floor(Math.random() * 40)生成0-39之间的整数 //Math.floor(Math.random() * 40) * 20 游戏主界面长度为800,20是食物的长度 food.style.left = Math.floor(Math.random() * 40) * 20 + 'px'; food.style.top = Math.floor(Math.random() * 20) * 20 + 'px'; food.style.position = "absolute";//设置绝对定位 food.style.backgroundColor = "red"; dv.appendChild(food);//食物追加到游戏主界面 } //显示生成的食物 createFood(); //声明数组表示小蛇 //每个蛇节使用数组表示 //[0, 0, "blue", null] 前两个00,表示蛇节的坐标,blue表示背景色 //null用于存储新的蛇节 var snake = [[0, 0, "blue", null], [1, 0, "blue", null], [2, 0, "red", null]]; function createSnake() { for (var i in snake) { //判断当前蛇节是否存在,如果不存在则创建新的蛇节 if (snake[i][3] == null) { snake[i][3] = document.createElement("div"); snake[i][3].style.width = 20 + 'px'; snake[i][3].style.height = 20 + 'px'; snake[i][3].style.position = "absolute"; snake[i][3].style.backgroundColor = snake[i][2]; } //设置每个蛇节显示位置 snake[i][3].style.left = snake[i][0] * 20 + 'px'; snake[i][3].style.top = snake[i][1] * 20 + 'px';//将创建的蛇节显示在游戏主界面 dv.appendChild(snake[i][3]); } } createSnake();//暂时显示小蛇 var dir = "right";//控制运动方向,默认向右运动 document.body.onkeydown = function (evt) { if (evt.keyCode == 38) { dir = "up";//上 } if (evt.keyCode == 39) { dir = "right";//右 } if (evt.keyCode == 40) { dir = "down";//下 } if (evt.keyCode == 37) { dir = "left";//左 } } //移动方法 function Move() { //通过循环让每个蛇节跟着蛇头移动 for (var i = 0 ; i < snake.length - 1; i++) { snake[i][0] = snake[i + 1][0]; snake[i][1] = snake[i + 1][1]; } //判断按键时dir控制的方向 if (dir == "up") { snake[snake.length - 1][1] -= 1;//向上 } if (dir == "right") { snake[snake.length - 1][0] += 1;//向右 } if (dir == "down") { snake[snake.length - 1][1] += 1;//向下 } if (dir == "left") { snake[snake.length - 1][0] -= 1;//向左 } //判断食物与蛇头相遇时的处理 if (snake[snake.length - 1][0] * 20 == parseInt(food.style.left) && snake[snake.length - 1][1] * 20 == parseInt(food.style.top)) { //首先清除当前食物对象 food.parentNode.removeChild(food); //创建新的蛇节添加到小蛇的数组中 var newSnake = [snake[0][0], snake[0][1], "blue", null] snake.unshift(newSnake);//向蛇尾添加蛇节 createFood();//重新生成新的食物 } //判断越界时的处理 //越过左边界 if (snake[snake.length - 1][0] < 0) { snake[snake.length - 1][0] = 39; } //越过右边界 if (snake[snake.length - 1][0] > 39) { snake[snake.length - 1][0] = 0; } //越过上边界 if (snake[snake.length - 1][1] < 0) { snake[snake.length - 1][1] = 19; } //越过下边界 if (snake[snake.length - 1][1] > 19) { snake[snake.length - 1][1] = 0; } //当小蛇霸屏或者蛇头碰到自身游戏结束 //判断填满与碰到自身 if (snake.length > 800) { //停止定时器 clearInterval(interId); alert("恭喜玩家霸屏^-^^-^^-^,游戏结束") } //判断蛇头碰到自身 var stX = snake[snake.length - 1][0];//蛇头x坐标 var stY = snake[snake.length - 1][1];;//蛇头y坐标 for (var j = 0; j < snake.length - 1; j++) { if (stX == snake[j][0] && stY == snake[j][1]) { clearInterval(interId); alert("想不开自杀了!!! >_<>_<>_<"); } } //每次移动后重新显示小蛇的新位置 createSnake(); } var interId = setInterval(Move, 500);//定时器 } </script></head><body> <div id="dv"> </div></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #javascript贪吃蛇课程设计报告
