您的位置：首页 > Web前端 > JavaScript
javascript贪吃蛇小游戏

2016-06-27 12:04 393 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script>

function Map() {
var h = 400;
var w = 800;
//绘制地图
this.draw = function () {
var div = document.createElement('div');
div.style.width = w + 'px';
div.style.height = h + 'px';
div.style.backgroundColor = 'pink';
div.style.backgroundImage = "url('./bg.jpg')";
document.body.style.margin = 0;
document.body.appendChild(div);

}

}

function Food() {

var len = 20;
this.foodX;
this.foodY;
this.foodBody = null;//保存食物节点

//绘制食物
this.draw = function () {
if (this.foodBody == null) {
this.foodBody = document.createElement('div');
this.foodBody.style.width = len + 'px';
this.foodBody.style.height = len + 'px';
this.foodBody.style.backgroundColor = 'green';
this.foodBody.style.position = 'absolute';
document.body.appendChild(this.foodBody);
}

this.foodX = Math.floor(Math.random() * 40);
this.foodY = Math.floor(Math.random() * 20);
this.foodBody.style.left = this.foodX * len + 'px';
this.foodBody.style.top = this.foodY * len + 'px';

}

}

function Snake() {
var side = 20;
//蛇有4个节点，每个节点包含的信息为 [x坐标权值，y坐标权值,节点颜色，节点元素对象]
this.snakeBody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];
//蛇头移动的方向
this.direction = 'right';
//绘制蛇
this.draw = function () {
for (var i = 0; i < this.snakeBody.length; i++) {
if (this.snakeBody[i][3] == null) {
this.snakeBody[i][3] = document.createElement('div');
this.snakeBody[i][3].style.width = side + 'px';
this.snakeBody[i][3].style.height = side + 'px';
this.snakeBody[i][3].style.backgroundColor = this.snakeBody[i][2];
this.snakeBody[i][3].style.position = 'absolute';
document.body.appendChild(this.snakeBody[i][3]);
}
this.snakeBody[i][3].style.left = this.snakeBody[i][0] * side + 'px';
this.snakeBody[i][3].style.top = this.snakeBody[i][1] * side + 'px';

}
}

//移动蛇
this.move = function () {
//蛇尾开始每个节点的坐标移动后是上一个节点的坐标
for (var i = 0; i < this.snakeBody.length - 1; i++) {
this.snakeBody[i][0] = this.snakeBody[i + 1][0];
this.snakeBody[i][1] = this.snakeBody[i + 1][1];
}

//蛇头节点做特殊处理
if (this.direction == 'right') {
this.snakeBody[this.snakeBody.length - 1][0] += 1;
} else if (this.direction == 'left') {
this.snakeBody[this.snakeBody.length - 1][0] -= 1;
} else if (this.direction == 'up') {
this.snakeBody[this.snakeBody.length - 1][1] -= 1;
} else {
this.snakeBody[this.snakeBody.length - 1][1] += 1;
}

//蛇头的坐标
var snakeX = this.snakeBody[this.snakeBody.length - 1][0];
var snakeY = this.snakeBody[this.snakeBody.length - 1][1];
//吃食物--蛇头的坐标和食物的坐标一致，吃掉食物的同时，蛇增加一个节点到尾部，增加节点的坐标为原来蛇尾节点的坐标
if (snakeX == food.foodX && snakeY == food.foodY) {
var tailX = this.snakeBody[0][0];
var tailY = this.snakeBody[0][1];
var newNode = [tailX, tailY, 'green', null];
this.snakeBody.unshift(newNode);//吃掉食物后增加蛇的节点
food.draw();//重新随机绘制食物的坐标
}

//游戏结束判断

//1 碰撞边界

if (snakeX > 39 || snakeX < 0 || snakeY < 0 || snakeY > 19) {
clearInterval(timer);
alert('game over!');
return;
}

//2.蛇头咬到蛇身
for (var i = 0; i < this.snakeBody.length - 1; i++) {
if (snakeX == this.snakeBody[i][0] && snakeY == this.snakeBody[i][1]) {
clearInterval(timer);
alert('game over by eat yourself!');
//                    return;
}
}

this.draw();
}

}

window.onload = function () {
var map = new Map();
map.draw();

food = new Food();
food.draw();

var snake = new Snake();
snake.draw();

timer = setInterval(function () {
snake.move();
}, 200);

//根据键盘事件切换蛇头的方向
document.onkeydown = function (event) {

console.log(event.keyCode);

if (event.keyCode == 39) {
//right
if(snake.direction!='left')//当前蛇头往左边移动的时候，不能切换为向右移动
snake.direction = 'right';
}
if (event.keyCode == 37) {
//left
if(snake.direction!='right')
snake.direction = 'left';
}
if (event.keyCode == 38) {
//up
if(snake.direction!='down')
snake.direction = 'up';
}
if (event.keyCode == 40) {
//down
if(snake.direction!='up')
snake.direction = 'down';
}
}

}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： javascript
相关文章推荐
新的分享
章节导航