这是一个贪吃蛇游戏，你可以忽略他的外表，好了，先上html代码
<style type="text/css">
* {margin: 0;padding: 0;}
#container { 1000px;height: 550px;border: 1px solid #000;margin: 0 auto;}
#container #ground { 1000px;height: 500px;background-color:#eeeeee;position: relative;}
button { 80px;height: 30px;}
.block { 20px;height: 20px;background-color: paleturquoise;float: left;}
.snakeBody {
20px;height: 20px;box-sizing: border-box;padding: 1px;
background-color: yellow;position: absolute;top: 60px;
-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;
}
.snake-block {
background: yellow;position: absolute;
-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;
}
.food-block {
background: red;position: absolute;
-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;
}
</style>
<div id="container">
<div id="ground"></div>
<div id="gameControl">
<span>获得分数：<span id="nums">0</span></span>
<button id="start">开始</button>
<button id="pause">暂停</button>
</div>
</div>
接下来是js代码
//草坪盒子
var oGround = getId("ground");
//创建蛇---
var snakeBody = new Array();
//创建食物并放置在草坪区
var food = createFood();
//蛇移动direction方向 默认情况下向右移动
var direction = "right";
//游戏开始按钮
var oBtnStart = getId("start");
//定时器
var timer = null;
//暂停键
var oPause =getId("pause");
var num = getId("nums");
function getId(n){
return document.getElementById(n)
}
//创建草坪由50*25个小格组成
for(var i = 0; i < 50; i++) {
for(var j = 0; j < 25; j++) {
var oDiv = document.createElement("div");
oDiv.className = "block";
oGround.appendChild(oDiv);
}
}
//初始状态为3节 蛇身数组 确保snakeBody[0]为蛇头
for(var i = 3; i > 0; i--) {
var oDiv = document.createElement("div");
oDiv.className = "block snakeBody";
oDiv.style.left = i * 20 + "px";
//蛇头
if(i == 3) {
oDiv.style.backgroundColor = "blueviolet";
}
oGround.appendChild(oDiv);
//向蛇身数组添加蛇身
snakeBody.push(oDiv);
}
oBtnStart.onclick = function() {
clearInterval(timer);
//每隔300毫秒就移动一个格子 1000毫秒=1秒
timer = setInterval(function() {
move(direction);
num.innerHTML = snakeBody.length -3;
}, 300);
}
oPause.onclick = function() {
clearInterval(timer);
}
//控制蛇转向
document.onkeydown = function(e) {
e = e || window.event;
var keyCode = e.which || e.keyCode;
//键码
switch(keyCode) {
//左
case 37:
if(direction != 'right') {
direction = 'left';
move(direction);
}
break;
//上
case 38:
if(direction != 'down') {
direction = 'up';
move(direction);
}
break;
//右
case 39:
if(direction != 'left') {
direction = 'right';
move(direction);
}
break;
//下
case 40:
if(direction != 'up') {
direction = 'down';
move(direction);
}
break;
}
};
//蛇移动的方法
function move(dir) {
//取出蛇头
var snakeHead = snakeBody[0];
//snakeBody.length 3 个数从右向左数
for(var i = snakeBody.length - 1; i > 0; i--) {
snakeBody[i].style.left = snakeBody[i - 1].offsetLeft + "px";
snakeBody[i].style.top = snakeBody[i - 1].offsetTop + "px";
}
switch(dir) {
case "left":
snakeHead.style.left = snakeHead.offsetLeft - 20 + "px";
break;
case "up":
snakeHead.style.top = snakeHead.offsetTop - 20 + "px";
break;
case "right":
snakeHead.style.left = snakeHead.offsetLeft + 20 + "px";
break;
case "down":
snakeHead.style.top = snakeHead.offsetTop + 20 + "px";
break;
}
//判断蛇是否吃到墙
if(snakeHead.offsetLeft == -20 || snakeHead.offsetTop == -20 || snakeHead.offsetLeft == 1000 || snakeHead.offsetTop == 500) {
alert("撞墙了吧~");
clearInterval(timer);
//页面保持刷新
location.reload();
}
//如果蛇吃身体
for(var i = 1; i < snakeBody.length; i++) {
if(snakeHead.offsetLeft == snakeBody[i].offsetLeft && snakeHead.offsetTop == snakeBody[i].offsetTop) {
alert("连自己都吃，还能不能好好做条蛇");
clearInterval(timer);
}
}
//如果蛇吃食物
if(snakeHead.offsetLeft == food.offsetLeft && snakeHead.offsetTop == food.offsetTop) {
food.className = "block snake-block";
switch("direction") {
case "right":
food.style.left = snakeBody[snakeBody.length - 1].offsetLeft - 20 + "px";
break;
case "down":
food.style.top = snakeBody[snakeBody.length - 1].offsetTop - 20 + "px";
break;
case "left":
food.style.left = snakeBody[snakeBody.length - 1].offsetLeft + 20 + "px";
break;
case "up":
food.style.top = snakeBody[snakeBody.length - 1].offsetTop + 20 + "px";
break;
}
//蛇吃到食物
snakeBody.push(food);
//重新生成食物
food = createFood();
}
}
//生成食物
function createFood() {
var oFood = document.createElement("div");
oFood.className = "block food-block";
var iLeft = 0;
var iTop = 0;
do {
//一个标识，表示是否找到食物合适的位置
var bFound = true;
//在0~1000中取一个随机的整数
iLeft = Math.floor(Math.random() * 1000);
//随机产生食物的位置 让食物的x坐标为20的倍数，因为草坪是20像素为一格
iLeft = iLeft - iLeft % 20;
iTop = Math.floor(Math.random() * 500);
iTop = iTop - iTop % 20;
for(var i = 0; i < snakeBody.length; i++) {
//判断食物的那个格子是否与蛇身占有的格子重合
if(snakeBody[i].offsetLeft == iLeft && snakeBody[i].offsetTop == iTop) {
//表示食物与蛇身重合
bFound = false;
break;
}
}
oFood.style.left = iLeft + "px";
oFood.style.top = iTop + "px";
oGround.appendChild(oFood);
} while (!bFound);
return oFood;
}
大致是这样吧，后续还待改善，要直接看到实例的效果，你可以狠狠的点击这里