当前位置： >
JavaScript版贪吃蛇游戏代码
时间： 22:53 来源：互联网 作者：源码搜藏 浏览：
相关内容推荐JavaScript原生实现《贪吃蛇》 - 简书
JavaScript原生实现《贪吃蛇》
贪吃蛇大家都不陌生吧~简单做一个。
贪吃蛇.jpg
因为没有图片素材，所以只能用简单的样式代替了，不要嫌弃呀~
1.让我们的小蛇动起来2.随机生成食物3.每吃掉一个食物，蛇的身体会变长，食物会重新换位置
&div class="face"&
&!-- 小蛇移动的操场 --&
&div id="playground"&
&!-- 食物 界面中的蓝色小方块--&
&div id="food"&&/div&
&!-- 小蛇 界面中的红色小方块--&
&div id="snack"&&/div&
&!-- 计算得分 --&
&div class="menu"&
&div&得分&span id="score"&&/span&&/div&
css样式注：1.蓝色的小方块代表食物；2.红色的小方块代表小蛇；3.绿色的小方块代表吃掉怪物后增长的身体；
&style type="text/css"&
height: 400
width: 600
margin-left:
margin-right:
background-color:
#playground{
height: 400
width: 450
height: 400
width: 150
background-color:
height: 20
background-color:
height: 20
background:
height: 20
background:
font-size: 30
font-weight:
.menu div{
font-size: 20
font-weight:
获取元素节点、设置全局变量；
//获取元素节点
var jsDiv = document.getElementById("playground");
var jsSnack = document.getElementById("snack");
var jsFood = document.getElementById("food");
var jsBody = document.getElementById("playground");
var jsScore = document.getElementById("score");
//设置全局变量
//创建定时器为全局变量
var timer1 = setInterval(eat,10);//检测位置碰撞，并且吃掉食物；
var srr = [];//记录蛇行动的位置
var num = 0 ;//记录数组的长度
var jsSnackB//么米吃掉一个食物，蛇的身体
让我们的小蛇动起来
通过按键盘的上下左右键，控制小蛇的移动方向，并记录小蛇走过的位置。我们通过什么来获取我们按下的是哪个键？？我们当然通过ASCII码值；
信息在计算机上是用二进制表示的，这种表示法让人理解就很困难。因此计算机上都配有输入和输出设备，这些设备的主要目的就是，以一种人类可阅读的形式将信息在这些设备上显示出来供人阅读理解。为保证人类和设备，设备和计算机之间能进行正确的信息交换，人们编制的统一的信息交换代码，这就是ASCII码表，它的全称是“美国信息交换标准代码”
左-------》对应的ASCII码值是 37；上-------》对应的ASCII码值是 38；右-------》对应的ASCII码值是 39；下-------》对应的ASCII码值是 40；
//开始游戏
document.onkeydown = function(e){
var evt = e || window.
switch(evt.keyCode) {
//向左移动
clearInterval(timer);
timer=window.setInterval(runLeft,10)
function runLeft(){
if (jsSnack.offsetLeft & 0) {
jsSnack.style.left = jsSnack.offsetLeft - 1+ "px";
jsSnack.style.top = jsSnack.offsetTop + "px";
//记录小蛇的位置
srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
num++;//记录数组的长度
//向上移动
clearInterval(timer);
timer=window.setInterval(runTop,10);
function runTop(){
if (jsSnack.offsetTop & 0) {
jsSnack.style.top = jsSnack.offsetTop - 1 + "px";
jsSnack.style.left = jsSnack.offsetLeft + "px";
//记录小蛇的位置
srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
num++;//记录数组的长度
//向右移动
clearInterval(timer);
timer=window.setInterval(runRight,10);
function runRight(){
if (jsSnack.offsetLeft + jsSnack.offsetWidth &= 450) {
jsSnack.style.left = jsSnack.offsetLeft + 1 + "px";
jsSnack.style.top = jsSnack.offsetTop + "px";
//记录小蛇的位置
srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
num++;//记录数组的长度
//向下移动
clearInterval(timer);
timer=window.setInterval(runBottom,10);
function runBottom(){
if (jsSnack.offsetTop + jsSnack.offsetHeight &= 400) {
jsSnack.style.top = jsSnack.offsetTop + 1 + "px";
jsSnack.style.left = jsSnack.offsetLeft + "px";
//记录小蛇的位置
srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
num++;//记录数组的长度
检验碰撞详解这里笔者觉得语言的描述太空洞，还是弄几张图吧，图是笔者手绘的，不要嫌丑，画的是没有碰撞的情况，那取反，就说明碰撞到了
食物随机出现
把食物的随机出现封装在一个函数里，那么我们后续需要的时候可以直接调用。利用随机数来让食物的位置随机出现。
//食物随机出现
function Pos(){
jsFood.style.left=parseInt(Math.random() * (430 - 20 + 1) + 20) + "px";
jsFood.style.top=parseInt(Math.random() * (380 - 20 + 1) + 20) + "px";
创建定时器、检验碰撞
碰撞检测原理：蛇在实物的左边、右边、上边、下边的时候，说明没有发生碰撞，那么我们取反，就说明发生碰撞
function eat(){
rectangleCrashExamine(jsSnack,jsFood);
function rectangleCrashExamine(obj1, obj2) {
var obj1Left = obj1.offsetL
var obj1Width = obj1.offsetLeft + obj1.offsetW
var obj1Top = obj1.offsetT
var obj1Height = obj1.offsetTop + obj1.offsetH
var obj2Left = obj2.offsetL
var obj2Width = obj2.offsetLeft + obj2.offsetW
var obj2Top = obj2.offsetT
var obj2Height = obj2.offsetTop + obj2.offsetH
//检测碰撞
//碰撞检测原理：
//蛇在实物的左边、右边、上边、下边的时候，说明没有发生碰撞，那么我们取反，就说明发生碰撞
if ( !(obj1Left & obj2Width || obj1Width & obj2Left || obj1Top & obj2Height || obj1Height & obj2Top) ) {
//碰撞后身体
jsSnackBody = document.createElement("div");
jsSnackBody.setAttribute("class","body");
jsBody.appendChild(jsSnackBody);
Pos();//怪物的位置随机变换
setInterval(follow,10);//身体跟随的定时器
每吃掉一个食物，小蛇的长度发生变化
function follow(){
//检查一共添加了多少身体
var bodyNum = document.getElementsByClassName("body");
//记录得分
jsScore.innerHTML = bodyNum.
//蛇每次移动1个像素，那么新的身体应该跟随在当前数组的倒数第20个数组的位置;依次加等;
var place = 0 ;
for( var i = 0 ; i&bodyNum. i++){
place += 20;
bodyNum[i].style.left=srr[num-place][0] + 'px';
bodyNum[i].style.top=srr[num-place][1] + 'px';
好了，现在我们的游戏可以玩了
这是一个简单的贪吃蛇，并没有做死亡碰撞，喜欢的小伙伴可以继续放下做。任何时候不要吝啬您的赞美，喜欢就点赞拉~，互粉互粉
新的一年。
自信一点。
勇敢一点。
尝试着接受别人的好意。如何用javascript写一个贪吃蛇
我原来用C语言，借助curses库实现了linux 终端下的贪吃蛇游戏。
这个javascript版本的贪吃蛇是/game/tanchishe.html 的学习笔记，实现的原理和C版本基本一样。
--------------------
1.怎样表示一条snake
用一个二维数组存snake的各个点(x,y)，同时标记这些点(x,y)为“cover”，这是用于以后检查snake的头是否撞到了snake的body。
//initialize snake
function initSnake() {
var pointer = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < i++) {
var x = pointer[0] - i,
y = pointer[1];
snake.push([x,y]);
carrier[x][y] = "cover"; //标记snake body
2.用js画出&#26684;子
用document.createElent()方法创建出table->tr->td, 然后用document.appendChild()方法追加到id为“snakewrap”的元素上：
//initialize grid
function initGrid() {
var body = document.getElementsByTagName("body")[0];
var table = document.createElement("table"),
tbody = document.createElement("tbody")
for(var j = 0; j < HEIGHT; j++) {
var col = document.createElement("tr");
for(var i = 0; i < WIDTH; i++) {
var row = document.createElement("td");
gridElems[i][j] = col.appendChild(row);
tbody.appendChild(col);
table.appendChild(tbody);
document.getElementById("snakewrap").appendChild(table);
3.生成食物的随机坐标
function randomPointer(startX,startY,endX,endY) {
startX = startX || 0;
startY = startY || 0;
endX = endX || WIDTH;
endY = endY || HEIGHT;
var p = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
//如果(x,y)有物体，则重新生成坐标
if(carrier[x][y]) {
return randomPointer(startX,startY,endX,endY);
添加新的食物：
//addObject("food")
function addObject(name) {
var p = randomPointer(); //get random position
var x = p[0];
var y = p[1];
carrier[x][y] =
gridElems[x][y].className =
4.方向键按下动作事件监听：
允许左上右下这4个按键来改变snake的运动方向，注意，如果方向相反的话，不生效。
对于键盘上的每一个按键，都有一个key cord,我的这篇博客记录了javascript的key cord,可看到：
left arrow
right arrow
down arrow
//keyboard event listener
function attachEvents(e) {
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode :
5.贪吃蛇的核心--判断
每次判断（即judge()函数每运行一次-->这里用到了setInterval()方法），都要先把snake的“头”节点保存下来，然后做判断
1）判断方向，根据方向调整“头”的坐标（由于有setInterval()方法，会每个若个毫秒就运行一次judge()函数，确保用户按下方向键后能够该表方向）
2）判断“头”是否撞到墙，或碰到snake的身体（即carrier[headX][headY] == "cover"时），如果碰到，则游戏结束。
3）判断“头”当前的位置是不是食物（即carrier[headX][headY] == "food"), 如果头元素的carrier不是食物，则让snake的尾巴pop出来；如果是，则让当前位置的携带信息carrier[headX][headY] = false
4 ）向数组的开头添加一个元素-->从而实现了“视觉上”的snake移动（或吃食物body增长)的效果
function judge() {
//把snake的“头”位置暂存起来
var headX = snake[0][0], headY = snake[0][1];
switch(directkey) {
case 37: headX -= 1; //left
case 38: headY -= 1; //up
case 39: headX += 1; break
case 40: headY += 1; //down
//碰到边界(block),或头碰到身体(cover)，则结束游戏
if(headX >= WIDTH || headX = HEIGHT || headY 从而实现了“视觉上”的snake移动（或吃食物body增长)的效果
snake.unshift([headX,headY]);
carrier[headX][headY] = "cover";
gridElems[headX][headY].className = "cover";
len = snake.
setInterval()函数（使得上面的judge()函数每隔300ms就运行一次）：
function run_run_run() {
if(snakeTimer) {
window.clearInterval(snakeTimer);
snakeTimer = window.setInterval("judge()", Math.floor(300));
6.onload 运行
onload 事件会在页面或图像加载完成后立即发生：
window.onload = function(){
initGrid();
document.onkeydown = attachE //监听keydown事件
$("start").onclick = function (e) {
len = 3; //snake的初始长度
directkey = 39; //right
snake = new Array();
initSnake();
addObject("food");
run_run_run();
//让start按钮失效
$("start").setAttribute("disabled",true);
$("start").style.color = "#aaa";
7.参考：/game/tanchishe.html
8.玩玩：我的simple and stupid snake game
效果图（我借用了下最近很火的2048）：网页小游戏：贪食蛇源码，纯JS编写，有详细注解。
今天给大家提供一个网页小游戏的源代码，呵呵，纯JS编写的，代码都有详细注解，大家看看，不明白的地方回复咨询我就行了。
不放演示地址了哦。
代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&
http-equiv="Content-Type" content="text/ charset=gbk" /&
&title&贪食蛇&/title&
& & &meta name="description" content="纯JS的贪食蛇小游戏!"&
& & &meta name="keywords" content="贪食蛇， 无聊的游戏， 囧，好囧，非常囧."&
type="text/css"&
* {margin:0; padding:0}
body {background:#333; -moz-user-select: text-align:
font-size:12px}
table {margin:80px auto 10 overflow:
border-collapse: }
td {width:20 height:20 border:1px solid #
background:#f4f4f4}
.cover {background:#39c;}
.food {background:#093}
.block {background:#333}
.brake {background:#f00}
.skate {background:#00f}
#say {margin-top:50 color:white}
#help {width:420 margin:0 line-height:17
color:white}
#help span {float: margin-right:10px}
#help .box {width:15 height:15 margin-right:5 border:1px
solid white}
#btnStart {clear: width:100 height:30 margin-top:10
padding:0; background:# color:#222; border:1px solid #
border-bottom-color:#000; border-right-color:#000;
cursor:pointer}
type="text/javascript"&
// code by CNwander.
function $(str) {
& return document.getElementByIdx(str);
function $tag(str,target) {
& target = target ||
& return target.getElementsByTagName_r(str);
var WIDTH = 20, //网格宽度
& HEIGHT = 20, //网格高度
["相当不错","可以啊！","一个字，牛！","差不多行了，别把游戏玩爆了"];
var len = 3, //蛇的长度
& speed, //爬行速度
& gridElems = multiArray(WIDTH,HEIGHT),
//单元格对象
& carrier, //承载对象(食物，障碍，滑板，刹车)
& snake, //蛇每节的坐标点
& info, //交互对话
& btnStart, //开始按钮
& topScore = len,
& snakeTimer, //蛇行走计时器
& brakeTimers = [], //随机刹车
& skateTimers = [], //随机滑板
& // 方向键值 37-40 左上右下
window.onload = function(){
& info = $("say");
& btnStart = $("btnStart");
& initGrid(); //网格初始化
& document.onkeydown = attachE
//绑定方向事件
& btnStart.onclick = function (e) {
& & btnStart.blur();
//firefox中必须释放焦点
& & start(); //游戏开始
btnStart.setAttribute("disabled",true);
& & btnStart.style.color =
//开始游戏
function start() {
& len = 3;
& speed = 10;
& directkey = 39;
& carrier = multiArray(WIDTH,HEIGHT);
& snake = new Array();
& clear();
& initSnake(); //蛇初始化
& addObject("food");
& addRandomBrake();
//创建网格
function initGrid() {
& var body = $tag("body")[0];
& var table =
document.createElement_x("table"),
& & tbody =
document.createElement_x("tbody")
& for(var j = 0; j & HEIGHT;
& & &var col
= document.createElement_x("tr"); &
&for(var i = 0; i & WIDTH;
&var row =
document.createElement_x("td");
&gridElems[i][j]
= col.appendChild(row);
&tbody.appendChild(col);
& &table.appendChild(tbody);
& &$("snakeWrap").appendChild(table);
function initSnake() {
& &var pointer = randomPointer(len-1, len-1,
& &for(var i = 0; i &
& & &var x
= pointer[0] - i,
&y = pointer[1];
&snake.push([x,y]);
&carrier[x][y]
= "cover";
//添加键盘事件
function attachEvents(e) {
& &directkey = Math.abs(e.keyCode -
directkey) !=
e.keyCode & 36 && e.keyCode &
41 ? e.keyCode : //非方向键、反向无效
function walk() {
& if(snakeTimer)
window.clearInterval(snakeTimer);
& snakeTimer = window.setInterval(step,
Math.floor(3000/speed));
function step() {
& //获取目标点
& var headX = snake[0][0],
& & headY = snake[0][1];
& switch(directkey) {
& & case 37: headX -= 1;
& & case 38: headY -= 1;
& & case 39: headX += 1;
& & case 40: headY += 1;
& //碰到边界，阻挡物，则结束游戏
& if(headX &= WIDTH || headX
& 0 || headY
&= HEIGHT || headY & 0 || carrier[headX][headY] == "block" ||
carrier[headX][headY] == "cover" ) {
&trace("GAME OVER");
&if(getText($("score"))*1 &
len) trace(len,$("score"));
&btnStart.removeAttribute("disabled");
&btnStart.style.color = "#000";
&window.clearInterval(snakeTimer);
&for(var i = 0; i & brakeTimers.
i++) window.clearTimeout(brakeTimers[i]);
&for(var i = 0; i & skateTimers.
i++) window.clearTimeout(skateTimers[i]);
& &if(len % 4 == 0
&& speed &
carrier[headX][headY] == "food") {
& & &speed
&walk(); & &
&trace("加速！");
& &//捡到刹车
& &if(carrier[headX][headY] == "brake") {
& & &speed
&trace("恭喜！捡到刹车一个。");
& &//遭遇滑板
& &if(carrier[headX][headY] == "skate") {
& & &speed
&trace("遭遇滑板！");
& &//添加阻挡物
& &if(len % 6 == 0
carrier[headX][headY] == "food") {
&addObject("block");
& &if(len &= 40
&& len % 10 == 0) {
& & &var cheer
= SAY[len/10-1];
&trace(cheer);
& &//吃东西
& &if(carrier[headX][headY] != "food") {
& & &var lastX
= snake[snake.length-1][0],
snake[snake.length-1][1];
&carrier[lastX][lastY] =
&gridElems[lastX][lastY].className
&snake.pop();
&carrier[headX][headY] =
&trace("吃到食物");
&addObject("food");
& &snake.unshift([headX,headY]);
& &carrier[headX][headY] = "cover";
& &gridElems[headX][headY].className
= "cover";
//添加物品
function addObject(name) {
& &var p = randomPointer();
& &carrier[p[0]][p[1]] =
& &gridElems[p[0]][p[1]].className = name;
//添加随机数量刹车和滑板
function addRandomBrake() {
& &var num = randowNum(1,5);
& &for(var i = 0; i &
&brakeTimers.push(
window.setTimeout(function(){addObject("brake")},randowNum()) );
&skateTimers.push(
window.setTimeout(function(){addObject("skate")},randowNum()) );
//输出信息
function trace(sth,who) {
& &if(document.all) who.innerText
& &else who.textContent
//获取信息
function getText(target) {
& &if(document.all) return
target.innerT
& &else return target.textC
//创建二维数组
function multiArray(m,n) {
& &var arr = &new Array(n);
& &for(var i=0; i&m;
&arr[i] = new Array(m);
//清除画面
function clear() {
& &for(var y = 0; y &
gridElems. y++) {
&for(var x = 0; x & gridElems[y]. x++) {
&gridElems[x][y].className = "";
//产生指定范围随机点
function randomPointer(startX,startY,endX,endY)
& &startX = startX || 0;
& &startY = startY || 0;
& &endX = endX || WIDTH;
& &endY = endY || HEIGHT;
& &var p = [],
= Math.floor(Math.random()*(endX - startX)) + startX,
= Math.floor(Math.random()*(endY - startY)) + startY;
& &if(carrier[x][y]) return
randomPointer(startX,startY,endX,endY);
//产生随机整数
function randowNum(start,end) {
& &return Math.floor(Math.random()*(end - start)) + start;
onselectstart="return
& &div id="say"&贪吃蛇&/div&
& & &div id="snakeWrap"&&/div&
& & &div id="help"&
class="box
food"&&/span&&span&绿色食物&/span&
& &span class="box
block"&&/span&&span&灰色毒品&/span&
& &span class="box
skate"&&/span&&span&蓝色滑板&/span&
& &span class="box
brake"&&/span&&span&红色刹车&/span&
& &span style="float:right"&最高分：&strong id="score"&0&/strong&&/span&
& &input type="button" id="btnStart" value="开始游戏" /&
& & &/div&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。