javascript贪吃蛇小游戏代码实例
分类：实例代码
本章节分享一段代码实例，它实现了贪吃蛇小游戏功能。
虽然美观度和真正商业应用的没法相比，但是功能是基本实现了。
非常适合学习者参考之用，代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#container {
width: 1000px;
height: 550px;
border: 1px solid #000;
margin: 0 auto;
}
#ground {
width: 1000px;
height: 500px;
background: gray;
position: relative;
}
#button {
float: right;
height: 50px;
line-height: 50px;
}
button {
width: 50px;
height: 20px;
}
.block {
width: 20px;
height: 20px;
float: left;
background: #2abad9;
}
.snakeBody {
width: 20px;
height: 20px;
background: #f57926;
position: absolute;
top: 60px;
}
.snake-block {
background: #f57926;
position: absolute;
}
.food-block {
background: green;
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div id="ground"></div>
<div id="gameControl">
<div id="button">
<button id="start">开始</button>
<button id="pause">暂停</button>
</div>
</div>
</div>
<script>
//创建草坪
var oGround = document.getElementById("ground");
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);
}
};
//创建蛇
var snakeBody = new Array();//蛇身数组
for (var i = 3; i > 0; i--) {
var oDiv = document.createElement("div");
oDiv.className = "block snakeBody";
oDiv.style.left = i * 20 + "px";
oGround.appendChild(oDiv);
snakeBody.push(oDiv);//向蛇身数组添加蛇身
}
//创建食物
var food = createFood();
//蛇移动
var direction = 'right';
var oBtnStart = document.getElementById("start");
var timer = null;
oBtnStart.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
// for(var i=0; i<snakeBody.length;i++){
// snakeBody[i].style.left=snakeBody[i].offsetLeft + 20 + "px";
// }
move(direction);
}, 300);
}
//蛇转向
document.onkeydown = function (e) {
e = e || window.event;
var keyCode = e.which || e.keyCode;
if (keyCode == 37) {//左
if (direction != 'right') {
direction = 'left';
move(direction);
}
} else if (keyCode == 38) {//上
if (direction != 'down') {
direction = 'up';
move(direction);
}
} else if (keyCode == 39) {//右
if (direction != 'left') {
direction = 'right';
move(direction);
}
} else if (keyCode == 40) {//下
if (direction != 'up') {
direction = 'down';
move(direction);
}
}
};
//蛇暂停
var oPause = document.getElementById("pause");
oPause.onclick = function () {
clearInterval(timer);
}
//蛇移动的方法
function move(dir) {
var snakeHead = snakeBody[0];//取出蛇头
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("Game over");
clearInterval(timer);
location.reload(); // 页面刷新
}
//蛇吃身体
for (var i = 1; i < snakeBody.length; i++) {
if (snakeHead.offsetLeft == snakeBody[i].offsetLeft && snakeHead.offsetTop == snakeBody[i].offsetTop) {
alert(1);
clearInterval(timer);
}
}
//蛇吃食物
if (snakeHead.offsetLeft == food.offsetLeft && snakeHead.offsetTop == food.offsetTop) {
food.className = "block snake-block";
if ("direction" == "right") {
food.style.left = snakeBody[snakeBody.length - 1].offsetLeft - 20 + "px";
} else if ("direction" == "down") {
food.style.top = snakeBody[snakeBody.length - 1].offsetTop - 20 + "px";
} else if ("direction" == "left") {
food.style.left = snakeBody[snakeBody.length - 1].offsetLeft + 20 + "px";
} else if ("direction" == "up") {
food.style.top = snakeBody[snakeBody.length - 1].offsetTop + 20 + "px";
}
snakeBody.push(food);//蛇吃到食物
food = createFood();//重新生成食物
}
}
//生成食物
function createFood() {
var oFood = document.createElement("div");
oFood.className = "block food-block";
var iLeft = iTop = 0;
do {
var bFound = true;//一个标识，表示是否找到食物合适的位置
iLeft = Math.floor(Math.random() * 1000);
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;
}
</script>
</body>
</html>
javascript贪吃蛇小游戏代码实例，这样的场景在实际项目中还是用的比较多的，关于javascript贪吃蛇小游戏代码实例就介绍到这了。
javascript贪吃蛇小游戏代码实例属于前端实例代码，有关更多实例代码大家可以查看。