在网上找到的几种例子
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>贪吃蛇游戏</title> <style type="text/css">
* {
margin: 0;
padding: 0;
} .wrap {
width: 600px;
margin: 0 auto;
position: relative;
} p {
position: absolute;
left: 65%;
top: 10%;
} h1 {
text-align: center;
margin-bottom: 20px;
} #score {
text-align: center;
font-size: 20px;
} #snake_map {
margin: 0 auto;
border: 1px solid skyblue;
}
/*行样式*/
.row {
height: 20px;
}
/*列样式*/
.col {
height: 20px;
width: 20px;
box-sizing: border-box;
border: 1px solid lightgray;
background: rgb(250, 250, 250);
float: left;
} .activeSnake {
background: black;
} .egg {
background: red;
} #Pause {
margin-left: 18%;
border: 1px solid skyblue;
color: white;
background: skyblue;
width: 50px;
height: 30px;
margin-bottom: 10px;
border-radius: 5px;
} #Start,#Refresh,#Speed {
border: 1px solid skyblue;
background: skyblue;
color: white;
width: 50px;
height: 30px;
border-radius: 5px;
margin-left: 15px;
}
</style> </head>
<body>
<div class="wrap">
<h1>贪吃蛇游戏</h1>
<!-- 记录吃了多少个蛋 -->
<p style="font-size:20px;color:red"> score:<span id="score" style="color:black">0</span> </p>
<!-- 暂停按钮 -->
<input id="Pause" type="button" name="name" value="Pause">
<!-- 开始按钮 -->
<input id="Start" type="button" name="name" value="Start">
<!-- 刷新(重新开始游戏) -->
<input id="Refresh" type="button" name="name" value="Refresh">
<!-- 加速按钮 -->
<input id="Speed" type="button" name="name" value="Speed">
<!-- 贪吃蛇的行走路径地图 -->
<div id="snake_map"> </div>
</div>
</body> <script type="text/javascript">
//获取分数标签
var score = document.getElementById('score');
// 获取路径地图标签
var map = document.getElementById('snake_map');
// 为了灵活的设置地图的大小,以下设置两个变量
// 用于存储行数和列数(即方格的个数)
var rowNumber = 25;// 行数
var columnNumber = 20;// 列数;
var mapWidth = columnNumber * 20 + 'px';// 地图的宽
var mapHeight = rowNumber * 20 + 'px';// 地图的高
map.style.width = mapWidth;
map.style.height = mapHeight;// 设置地图宽高
// 创建一个二维数组,用来记录地图上的所有div的位置
var snakeDIVPosition = [];
// 通过双层for循环来创建地图元素
for ( var i = 0; i < rowNumber; i++) {
// 创建行div
var rowDIV = document.createElement('div');
// 设置div样式
rowDIV.className = 'row';
// 将行div添加到路径地图map中
map.appendChild(rowDIV);
// 创建一个行级数组,用来存储当前行中的每个方块div
var rowArray = [];
for ( var j = 0; j < columnNumber; j++) {
// 创建每一行中的方块div
var columnDIV = document.createElement('div');
// 设置css样式
columnDIV.className = 'col';
// 将方块DIV添加到当前行中
rowDIV.appendChild(columnDIV);
// 同时将方块添加到行数组中
rowArray.push(columnDIV);
}
// 当前内层循环结束,将行数组添加到二维数组中
snakeDIVPosition.push(rowArray);
} // 创建蛇模型
// 创建一个一维数组,用来存储蛇身所占的div
var snake = [];
// 固定蛇身起始长度为3个div
for ( var i = 0; i < 3; i++) {
// 为蛇身设置不同颜色的div
snakeDIVPosition[0][i].className = 'col activeSnake';
// 存储在蛇身数组中
snake[i] = snakeDIVPosition[0][i];
}
// 定义变量来控制蛇
var x = 2;
var y = 0;// 蛇头的起始位置偏移量
var scoreCount = 0;// 分数计数器,即吃了多少个蛋
var eggX = 0;// 记录蛋所在的行位置
var eggY = 0;// 记录蛋所在的列位置; var direction = 'right';// 记录蛇移动的方向,初始为向右
var changeDir = true;// 判断是否需要改变蛇的移动方向
var delayTimer = null;// 延迟定时器 // 添加键盘事件监听方向键来改变蛇的移动方向
document.onkeydown = function(event) {
// 先判断是否需要改变方向,true表示需要,false表示不需要
if (!changeDir) {
return;// return空表示直接结束函数,后续代码不执行
}
event = event || window.event;
// 为了合理处理蛇的移动,需要判断蛇头和蛇身
// 假设蛇向右移动,点方向键左,右键都不需要做出响应
if (direction == 'right' && event.keyCode == 37) {
return;// 终止事件执行
}
if (direction == 'left' && event.keyCode == 39) {
return;
}
if (direction == 'up' && event.keyCode == 40) {
return;
}
if (direction == 'down' && event.keyCode == 38) {
return;
}
// 我们通过keyCode确定蛇要移动的方向
switch (event.keyCode) {
case 37:
direction = 'left';// 向左
break;
case 38:
direction = 'up';// 向上;
break;
case 39:
direction = 'right';// 向右
break;
case 40:
direction = 'down';// 向下
break;
}
changeDir = false;
delayTimer = setTimeout(function() {
// 设置是否需要改变方向
changeDir = true;
}, 300);
}; // 开始设置蛇移动逻辑
// 蛇移动函数
function snakeMove() {
// 根据上面设置的方向来设置蛇头的位置
switch (direction) {
case 'left':
x--;
break;
case 'right':
x++;
break;
case 'up':
y--;
break;
case 'down':
y++;
break;
};
// 判断是否游戏结束
if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) {
alert('Game Over!!!');
// 结束蛇移动的定时器
clearInterval(moveTimer);
return;// 终止键盘事件;
}
// 如果蛇吃到自己,也要结束游戏
for ( var i = 0; i < snake.length; i++) {
// 将此时蛇头移动后的位置与之前左右的组成蛇的div的位置进行比较,如果相同则说明吃到自己,游戏结束
if (snake[i] == snakeDIVPosition[y][x]) {
alert('Game over!!!');
clearInterval(moveTimer);
return;
};
}
// 判断蛇头移动的位置是否有蛋
if (eggX == x && eggY == y) {
snakeDIVPosition[eggY][eggX].className = 'col activeSnake';
snake.push(snakeDIVPosition[eggY][eggX]);// 加入蛇身
scoreCount++;// 记录分数
// 更新当前的分数
score.innerHTML = scoreCount;
// 随机产生一个新的蛋
createNewEgg();
} else {
// 设置蛇碰不到蛋的逻辑
// 让蛇移动
// 蛇尾去掉蛇自身的颜色,变成格子的颜色
snake[0].className = 'col';
// 将蛇尾div从数组中移除
snake.shift();
// 定位到的新的蛇头加入到蛇数组中
snakeDIVPosition[y][x].className = 'col activeSnake';
snake.push(snakeDIVPosition[y][x]);
};
}; var moveTimer = setInterval('snakeMove()', 300); // 定义一个生成min,max之间的随机数函数
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}; function createNewEgg() {
// 随机出新的egg的下标的x和y值
eggX = random(0, columnNumber - 1);
eggY = random(0, rowNumber - 1); // 判断如果随机产生的蛋与蛇身重合,就重新随机产生一个蛋
if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') {
createNewEgg();// 重新随机新的egg
} else {
snakeDIVPosition[eggY][eggX].className = 'col egg';
}
}; createNewEgg();// 在游戏开始的时候生成新的egg var pause = document.getElementById('Pause');
var start = document.getElementById('Start');
var refresh = document.getElementById('Refresh');
var speed = document.getElementById('Speed');
// 添加暂停按钮
pause.onclick = function() {
clearInterval(moveTimer);
};
// 添加开始按钮
start.onclick = function() {
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()', speed1);
};
// 添加刷新按钮
refresh.onclick = function() {
window.location.reload();
};
// 添加加速按钮
var speed1 = 300;
speed.onclick = function() {
speed1 -= 20;
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()', speed1);
};
</script> </html>
2、
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head> <body> <canvas id="canvasTCS">
</canvas> <script>
var tcs = function (id) {
this.element = document.getElementById(id);
this.element.width = this.column * this.cellSize + 200
this.element.height = this.row * this.cellSize + 200;
this.ctx = this.element.getContext("2d");
this.bodys = [];
this.init();
this.drawMap(); }
// 设置他的基础属性
tcs.prototype = {
cellSize: 30,
row: 20,
column: 20,
level: 1,// 默认第一关
tcsOptions: {
hColor: "green",
sColor: "gray",
shiwuColor: "blue",
zawColor: "#000",
bodyLength: 5 }, // 地图
maps: [
'',
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
],
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
],
drawMap: function () {
var
that = this,
maps = that.maps,
bodys = that.bodys,
ctx = this.ctx,
cellSize = that.cellSize,
row = that.row,
column = that.column,
width = column * cellSize,
height = row * cellSize,
startX = 100,
startY = 100,
x = 0.5
;
if (maps.length == 1) {
return;
}
if (that.level > maps.length) {
that.level = 1;
}
ctx.lineWidth = 1;
ctx.strokeStyle = "#000";
ctx.beginPath();
for (var i = 0; i <= row; i++) {
ctx.moveTo(startX + x, startY + (i * cellSize) + x);
ctx.lineTo(startX + width + x, startY + (i * cellSize) + x)
}
for (var i = 0; i <= column; i++) {
ctx.moveTo(startX + (i * cellSize) + x, startY + x);
ctx.lineTo(startX + (i * cellSize) + x, startY + height + x)
}
for (var i = 0; i < row; i++) {
bodys[i] = [];
for (var c = 0; c < column; c++) {
bodys[i][c] = {
x: startX + (c * cellSize) + 1,
y: startY + (i * cellSize) + 1,
w: cellSize - 1,
h: cellSize - 1,
color: maps[this.level][i][c] == 0 ? "" : this.tcsOptions.zawColor }; }
}
ctx.stroke();
this.createTcs();
this.drawBody(); this.isStartGame = false;
this.direction = 39;
this.speed = 500;
this.gameover = false;
this.isAddSpeed = true;
this.movecomplete = false;
},
drawBody: function () {
var bodys = this.bodys, len = bodys.length;
for (var i = 0; i < len; i++) {
for (var c = 0, len2 = bodys[i].length; c < len2; c++) { this.drawPoint(bodys[i][c]); }
}
},
drawPoint: function (d) {
this.ctx.fillStyle = d.color || "#fff";
this.ctx.fillRect(d.x, d.y, d.w, d.h);
},
createTcs: function () {
var that = this, sheSheng = that.sheSheng = [];
for (var i = 2, len = this.tcsOptions.bodyLength + i; i < len; i++) { sheSheng.push({
r: 1,
c: i
});
}
this.drawTcs();
that.createSW(1);
},
drawTcs: function () {
for (var i = 0; i < this.sheSheng.length; i++) {
this.bodys[this.sheSheng[i].r][this.sheSheng[i].c].color = this.gameover ? this.tcsOptions.sColor : this.tcsOptions.hColor;
}
}, eachSheSheng: function (fn) {
for (var i = 0; i < this.sheSheng.length; i++) {
fn.call(this.sheSheng[i]);
}
},
startGame: function () {
var that = this,
maxLen = 15,
speed = that.speed / maxLen,
maxR = that.row,
maxC = that.column,
first,
movehandler = function () {
if (that.sheSheng.length >= maxLen) { that.level++;
that.drawMap();
return;
}
var first, last = that.sheSheng[that.sheSheng.length - 1], r = 0, c = 0;
if (that.direction == 39) {
r = last.r;
c = last.c + 1;
} else if (that.direction == 38) {
r = last.r - 1;
c = last.c;
} else if (that.direction == 37) {
r = last.r;
c = last.c - 1;
} else if (that.direction == 40) {
r = last.r + 1;
c = last.c;
}
if (r < 0 || r >= maxR || c < 0 || c >= maxC) {
that.gameover = true;
that.drawTcs();
that.drawBody();
return;
}
else if (that.bodys[r][c].color == that.tcsOptions.zawColor) {
that.gameover = true;
that.drawTcs();
that.drawBody();
return;
} else if (that.bodys[r][c].color == that.tcsOptions.shiwuColor) {
that.swCount--;
if (that.swCount == 0) {
that.createSW(that.level);
}
} else {
first = that.sheSheng.shift()
that.bodys[first.r][first.c].color = "";
} that.sheSheng.push({ r: r, c: c }); that.drawTcs();
that.drawBody();
that.movecomplete = false;
setTimeout(movehandler, that.speed - speed * that.sheSheng.length);
},
gameTime = setTimeout(movehandler, that.speed - speed * that.sheSheng.length);
},
createSW: function (count) {
this.swCount = 0;
var maxR = this.row,
maxC = this.column, r = 0, c = 0;
do {
r = Math.floor(Math.random() * maxR);
c = Math.floor(Math.random() * maxC);
if (this.bodys[r][c].color != "") {
count++;
} else {
this.bodys[r][c].color = this.tcsOptions.shiwuColor; }
this.swCount++;
} while (--count); }, init: function () {
var that = this; document.addEventListener("keydown", function (e) {
if (that.gameover == true) {
return;
}
if (!that.isStartGame) {
that.isStartGame = true;
that.startGame();
}
if (that.movecomplete) {
return;
}
var keycode = e.which || e.keyCode;
if (keycode >= 37 && keycode <= 40) {
that.movecomplete = true;
if (that.direction == 39 && keycode == 37 || that.direction == 38 && keycode == 40 || that.direction == 40 && keycode == 38 || that.direction == 37 && keycode == 39) {
return;
}
that.direction = keycode;
} }); }
}; var t = new tcs("canvasTCS");
</script> <style>
.aa {
color: #f4f;
}
</style>
</body> </html>
3、
<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
<script>
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
</script>
</body>
</html>
4、
<!Doctype html>
<html>
<head>
<title>贪吃蛇小游戏</title>
<meta http-equiv="content-Type" content="text/html;charset=gbk" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="progma" content="no-cache" />
<meta name="description" content="js实现的简单贪吃蛇游戏" />
<meta name="author" content="成兮" /> <style>
canvas{border:1px solid grey;}
</style> <script> </script>
</head> <body>
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
<script>
window.onload = function(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext('2d');
//设置蛇移动的频率
var snake_speed = 200;
var interval = window.setInterval(snake_leave,snake_speed);
//设置移动的方向0-3上下左右
var direction = 3;
//保存贪吃蛇的实际长度
var snakelen = 20;
//保存移动的路径,元素为{'x':x,'y':y}格式
var map = [];
//蛇身单元大小
var size = 8;
//食物坐标：(a*8,a*8)
var a = 0;
//贪吃蛇每次的蛇头坐标
var x = 8;
var y = 8; //贪吃蛇移动函数
function snake_leave(){
//根据移动方向来移动
switch(direction){
case 0:y -= size;
break;
case 1:y += size;
break;
case 2:x -= size;
break;
case 3:x += size;
break;
}
//判断是否撞墙
if(x > 400 || y > 400 || x < 0 || y < 0){
alert("你撞墙死了");
window.clearInterval(interval);
}
//判断是否撞到自己
for(var i=0; i<map.length; i++){
var xx = parseInt(map[i].x);
var yy = parseInt(map[i].y);
if(xx == x && yy == y){
alert("你撞自己死了");
window.clearInterval(interval);
}
}
//每次移动一下，蛇身最后都要减去1
if(map.length > snakelen){
//把数组的第一个元素删除并返回,map中的数据为{key:value}形式
var foot = map.shift();
context.clearRect(foot['x'],foot['y'],size,size);
}
//判断是否吃到了食物
if(x == a*8 && y == a*8){
snakelen++;
snake_food();
}
//每次移动，进行蛇头的改变
map.push({'x':x,'y':y});
context.fillStyle = "#069";
context.strokeStyle = "#069";
context.fillRect(x,y,size,size);
}; //添加方向键键盘控制事件
document.onkeydown = function(event){
var code = event.keyCode;
switch(code){
case 37:if(direction != 3) direction = 2;
break;
case 38:if(direction != 1) direction = 0;
break;
case 39:if(direction != 2) direction = 3;
break;
case 40:if(direction != 0) direction = 1;
break;
}
}; //产生食物坐标的随机数来生成食物
function snake_food(){
a = Math.ceil(Math.random() * 50);
context.fillStyle = "#000";
context.strokeStyle = "#000";
context.fillRect(a*8,a*8,8,8);
};
snake_food();
};
</script>
</html>