关键词：
最近工作量好大，好忙，趁周末练练手，花了近3小时写了一个贪吃蛇。
实现贪吃蛇的功能很简单。
我就分享一下我实现贪吃蛇看起来在界面上移动并且吃食物长大的原理。
我建了一个数组list_arr[]来保存贪吃蛇所在的每个格子的id，并建了2个全局变量x和y，监听贪吃蛇头的位置，当然x和y也是贪吃蛇的起始位置。
那么贪吃蛇移动实际上就是每次从list_arr[]里取出第一个元素（list_arr.shift()方法），取出的第一个元素也可以认为是贪吃蛇的尾巴，然后把这个元素（也就是格子的id）代表的格子的css中的贪吃蛇的样式去掉。然后，把[x, y]这组坐标所代表的格子的id扔进list_arr[]里（list_arr.push()），并给这个格子添加上贪吃蛇的样式。所以实际上每次就操作了2个格子的样式。
如果贪吃蛇吃食物（[x, y]与食物所在坐标相同），那么把食物那个格子的css去掉代表食物的样式并加上贪吃蛇的样式，并且不去掉尾巴，也就是不去掉list_arr[]里的第一个元素所在格子的样式。
1 <!doctype html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 5 <meta name="format-detection" content="telephone=no"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <style> 9 body { 10 position: relative; 11 margin: 0; 12 width: 100vw; 13 height: 100vh; 14 } 15 .wrapper { 16 padding: 40px 0; 17 } 18 .snake-box { 19 margin: 0 auto; 20 border-collapse: collapse; 21 border:solid #ddd; 22 border-width:1px 0px 0px 1px; 23 } 24 .snake-box td { 25 padding: 10px; 26 border: solid #ddd; 27 border-width: 0px 1px 1px 0px; 28 } 29 .snake-body { 30 background-color: #8078f3; 31 } 32 .food { 33 background-color: #e81616; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="wrapper"> 39 <table id="snake_box" class="snake-box"> 40 </table> 41 </div> 42 <script> 43 //Array扩展indexOf 44 Array.prototype.indexOf = function(val) { 45 for (var i = 0; i < this.length; i++) { 46 if (this[i] == val) return i; 47 } 48 return -1; 49 }; 50 51 (function() { 52 var option = { 53 ‘width‘: 10, //x轴数量 54 ‘height‘: 10, //y轴数量 55 ‘cell‘: 10, //暂时无用 56 ‘speed‘: 400 //setInterval的执行周期 57 } 58 var o = option; 59 60 var snakeBox = document.getElementById(‘snake_box‘); 61 snakeBox.innerHTML = null; 62 var fragment = document.createDocumentFragment(); 63 var snakeBoxArray = new Array(); 64 for (var i = 0; i < o.height; i++) { 65 var sTr = document.createElement(‘tr‘); 66 sTr.setAttribute(‘class‘, ‘row‘); 67 var cellFragment = document.createDocumentFragment(); 68 snakeBoxArray[i]= new Array(); 69 for (var j = 0; j < o.width; j++) { 70 var sTd = document.createElement(‘td‘); 71 var sId = j + ‘_‘ + i; 72 sTd.setAttribute(‘id‘, sId); 73 sTd.setAttribute(‘class‘, ‘cell‘); 74 cellFragment.appendChild(sTd); 75 snakeBoxArray[i][j] = j + ‘_‘ + i; 76 } 77 fragment.appendChild(sTr).appendChild(cellFragment); 78 } 79 snakeBox.appendChild(fragment); 80 var x = Math.floor(o.width / 2), 81 y = Math.floor(o.height / 2), 82 list_arr = []; //记录蛇的cell 83 document.getElementById(snakeBoxArray[x][y]).classList.add(‘snake-body‘); 84 list_arr.push(x + ‘_‘ + y); 85 86 /*实现键盘方向事件， 87 注释的代码实现按下方向键立即朝指定方向移动一格,以解决按键后函数的响应延迟问题 88 */ 89 var lastDir = 39; //记录上一次方向 90 document.onkeydown = control; 91 function control(e) { 92 clearInterval(moveEvent) 93 var dir; 94 switch(e.keyCode) { 95 case 37: //左 96 if (list_arr.length > 1 && lastDir == 39) { 97 dir = 39; 98 } else { 99 // x-- 100 lastDir = dir = 37; 101 } 102 break; 103 case 38: //上 104 if (list_arr.length > 1 && lastDir == 40) { 105 dir = 40; 106 } else { 107 // y--; 108 lastDir = dir = 38; 109 } 110 break; 111 case 39: //右 112 if (list_arr.length > 1 && lastDir == 37) { 113 dir = 37; 114 } else { 115 // x++; 116 lastDir = dir = 39; 117 } 118 break; 119 case 40: //下 120 dir = lastDir == 38 ? 38 : 40; 121 if (list_arr.length > 1 && lastDir == 38) { 122 dir = 38; 123 } else { 124 // y++; 125 lastDir = dir = 40; 126 } 127 break; 128 } 129 // var head = list_arr.shift(); 130 // list_arr.push(x + ‘_‘ + y) 131 // document.getElementById(head).classList.remove(‘snake-body‘); 132 // document.getElementById(snakeBoxArray[y][x]).classList.add(‘snake-body‘); 133 moveEvent = setInterval(move.bind(this, dir), o.speed) //移动 134 } 135 136 /*移动函数*/ 137 var moveEvent; 138 function move(direction) { 139 switch(direction) { 140 case 37: //左 141 x--; 142 break; 143 case 38: //上 144 y--; 145 break; 146 case 39: //右 147 x++; 148 break; 149 case 40: //下 150 y++; 151 break; 152 } 153 154 /*死亡判定*/ 155 var flag = list_arr.indexOf(x + ‘_‘ + y) 156 if (x < 0 || x >= o.width || y < 0 || y >= o.height || flag != -1) { 157 location.reload(); 158 } 159 list_arr.push(x + ‘_‘ + y) 160 if (document.getElementById(snakeBoxArray[y][x]).classList.contains(‘food‘)) { 161 document.getElementById(snakeBoxArray[y][x]).classList.remove(‘food‘); 162 document.getElementById(snakeBoxArray[y][x]).classList.add(‘snake-body‘); 163 food(); 164 } else { 165 var tail = list_arr.shift(); 166 document.getElementById(tail).classList.remove(‘snake-body‘); 167 document.getElementById(snakeBoxArray[y][x]).classList.add(‘snake-body‘); 168 } 169 } 170 moveEvent = setInterval(move.bind(this, 39), o.speed) //加载完成就开始移动 171 172 /*食物*/ 173 var foodCell; //食物位置 174 function food() { 175 var foodX = Math.ceil(Math.random() * o.width) - 1, 176 foodY = Math.ceil(Math.random() * o.height) - 1; 177 foodCell = foodX + ‘_‘ + foodY; 178 if (list_arr.indexOf(foodCell) == -1) { 179 document.getElementById(foodCell).classList.add(‘food‘); 180 } else { 181 return food(); 182 } 183 } 184 food(); 185 })(); 186 187 </script> 188 </body> 189 </html>
面向对象案例——贪吃蛇游戏(代码片段)
最近项目上线，近一个星期没更博了，今天来写一个经典的游戏案例——贪吃蛇。在这个简单的案例里可以体会javaScript面向对象开发相关模式，学习使用面向对象的方式分析问题。1.功能实现1.1搭建页面：放一个容器盛放游戏场... 查看详情
使用前端原生js，贪吃蛇小游戏
好久好久，真的是好久好久没来写过了，因为最近有点小忙。不过即使是忙，也也还是写了两个小游戏，其中一个就是这个，贪吃蛇啦。算是一个小练手了，这个是在有点太简单了，只是第一次写这种小游戏，还是零零星星花了... 查看详情
数据结构大作业-贪吃蛇
...大作业选择的是贪吃蛇，最初我想了很久到底用什么语言来写贪吃蛇，最后想到java实现图形界面是最方便的，因为JDK里已经有AWT和SWING两个类可以实现图形界面，C语言我会用一个叫easyX的图形库，但是我感觉这个图形库用起来挺... 查看详情
使用vb创建贪吃蛇
贪吃蛇作为一个经典游戏，在其开发成功后，有很长一段时间令很多人为之振奋，但随着时间的流逝，贪吃蛇也逐渐淡出人们的视野。本次，我利用VB重现贪吃蛇的创建。主要使用到的控件：Label标签，Command按... 查看详情
一个简单的“贪吃蛇”小游戏
一个简单的“贪吃蛇”小游戏页面结构简单的21x21的方块，页面结构id为container的div包含所21个class名为row的div，每个row代表贪吃蛇的一整行，每个row中又包含21个div，代表这一行的每一个div方格，如果这个方格是空的话，div... 查看详情
javascrip写的贪吃蛇
...world一样，简单又有代表性，以前我学习c语言的时候，第一个做的趣味小游戏也是贪吃蛇---------------------------------1//贪吃蛇的食物模块2(function(){3varelements=[]4//创建一个食物的构造函数5functionFood(x,y,width,height,color){6/ 查看详情
贪吃蛇
无聊发现自己没写过贪吃蛇，于是做了一个简单的贪吃蛇，并不打算做完整版的（只能看到贪吃蛇不断的从上往下移动）。。 效果（截图软件的问题，会有前一帧的印记）： 代码：#include<iostream>#include<windows.h... 查看详情
贪吃蛇需求分析
...nbsp;贪吃蛇游戏（单词版）Parttwo选题背景和意义 作为一个经典的游戏，贪吃蛇设计简单，实用和娱乐性高，是90后的我们童年的美好回忆。对于贪吃蛇传统的玩法，大家众所周知，即：玩家通过控制游戏手柄上下左右四个方... 查看详情
gui简单实战——贪吃蛇(代码片段)
将前面学到的GUI基础知识完成实战，完成一个简单的贪吃蛇项目项目功能用键盘上下左右实现贪吃蛇的自动移动贪吃蛇吃到食物后，长度加一，分数加一贪吃蛇吃到自己的身体，则游戏结束按空格键实现游戏的暂停和继续效果截... 查看详情
做一个简单的贪吃蛇游戏
这是一个贪吃蛇游戏，你可以忽略他的外表，好了，先上html代码<styletype="text/css"> *{margin:0;padding:0;} #container{width:1000px;height:550px;border:1pxsolid#000;margin:0auto;} #container#ground{width:1000px;height:500px; 查看详情
用代码移动桌面图标(贪吃蛇)(代码片段)
...b站搜电脑病毒的视频看(不要问我为什么会搜这个),看到一个很有意思的"病毒",其实也不算病毒,它会控制桌面图标形成一个人形,并跳舞,跳完之后电脑就蓝屏了.之后下定决心也要整一个,埋头研究了两个星期吧,写了一个贪... 查看详情
自制贪吃蛇游戏中的几个“大坑”(代码片段)
...坷”和“挫折”，下面就几个让我印象深刻的“挫折”做一个具体的讲解，以此来为这个贪吃蛇项目画上一个完整句号。（包括打包这个游戏时遇到的问题及解决方式。）BUG1 在运行贪吃蛇游戏时，如果同时按下两个方向键... 查看详情
华为机试真题c++实现贪吃蛇
目录 题目思路考点Code题目贪吃蛇是一个经典游戏，蛇的身体由若干方格连接而成，身体随蛇头移动。蛇头触碰到食物时，蛇的长度会增加一格。蛇头和身体的任一方格或者游戏版图边界碰撞时，游戏结束。下面让我们来完... 查看详情
java一个简单的贪吃蛇(代码片段)
Java一个简单的贪吃蛇虽然GUI已经要淘汰了，但是手动写写界面还是有助于理解语法的，像构造函数，函数调用，内部类，继承，接口。有助于半初学者强化理解。直接上代码游戏主体类：packagecom.chenghu.snake;importjavax.swing.*;publiccl... 查看详情
华为od机试真题python实现贪吃蛇
目录题目思路考点Code题目贪吃蛇是一个经典游戏，蛇的身体由若干方格连接而成，身体随蛇头移动。蛇头触碰到食物时，蛇的长度会增加一格。蛇头和身体的任一方格或者游戏版图边界碰撞时，游戏结束。下面让我们来完成贪... 查看详情
如何用python写一个贪吃蛇ai(代码片段)
...后华丽丽地把整个矩形填满，真心是看得赏心悦目。作为一个CSer，第一个想到的是，这东西是写程序实现的(因为，一般人干不出这事。果断是要让程序来干的)第二个想到的是，写程序该如 查看详情
100行代码，使用pygame制作一个贪吃蛇小游戏！
...们大家都玩过贪吃蛇游戏，今天我们就从头一起来写一个贪吃蛇小游戏，只需要100多行的代码就完成了。用到的Pygame函数贪吃蛇小游戏用到的函数功能描述init()初始化pygamedisplay.set_mode()以元组或列表为参数创建窗口update()... 查看详情
《结对-贪吃蛇-设计文档》
...设计文档：搭建环境：AndroidStudio,eclipse“贪吃蛇”游戏是一个经典的游戏，它操作简单、界面美观、功能较齐全的“贪吃蛇”游戏。整个游戏程序分为二个功能模块，六个类模块，实现了游戏的开始、暂停、结束。进行了游戏的... 查看详情