<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style type="text/css">
.map{
width: 800px;
height: 600px;
margin: 0 auto;
background: #ccc;
position: relative;
}
.map>div{
border-radius: 40%;
}
</style>
</head>
<body>
<div class="map"></div>
<script type="text/javascript">
var map = document.querySelector('.map');
var mapWidth = map.clientWidth;
var mapHight = map.clientHeight;
var body = [];
var snakeBox = [];
var timer = null;
//构造函数
function Game() {
//小方块
this.width = 20;
this.height = 20;
this.color = 'blue';
this.x = 0;
this.y = 0;
this.speed = 20;
this.box = document.createElement('div');
//蛇
this.direction = 'right';
this.body = [
{x:3,y:2,color:'red'},//蛇头
{x:2,y:2,color:'orange'},//蛇的身体
{x:1,y:2,color:'orange'},//蛇的身体
]
}
//原型方法
Game.prototype = {
//调用
init: function () {
this.food();
this.snake();
this.snakeMove();
this.keydown();
},
//随机小方块
food: function (x,y) {
var div = this.box;
console.log(div);
div.style.position = 'absolute';
div.style.width = this.width+'px';
div.style.height = this.height+'px';
div.style.backgroundColor = this.color;
//把小方块添加在map地图中了
map.appendChild(div);
//随机产生横纵坐标
var x = Math.floor(Math.random()*mapWidth/this.width)*this.width;
var y = Math.floor(Math.random()*mapHight/this.height)*this.height;
this.x = x;
this.y = y;
div.style.left = this.x+'px';
div.style.top = this.y+'px';
},
//创建小蛇
snake:function(){
for (var i = 0; i < this.body.length; i++) {
var obj = this.body[i];
var div = document.createElement('div');
map.appendChild(div);
div.style.position = 'absolute';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.left = this.width*obj.x + 'px';
div.style.top = this.height*obj.y + 'px';
div.style.backgroundColor = obj.color;
snakeBox.push(div);
console.log(snakeBox);
}
},
snakeMove:function () {
clearInterval(timer);
timer = setInterval(()=>{
for(var i = snakeBox.length - 1; i > 0 ; i--) {
snakeBox[i].style.left = snakeBox[i - 1].style.left;
snakeBox[i].style.top = snakeBox[i - 1].style.top;
}
//设置小蛇的头部
switch(this.direction){
case 'right':
snakeBox[0].style.left = parseInt(snakeBox[0].style.left) + this.speed + 'px';
break;
case 'left':
snakeBox[0].style.left = parseInt(snakeBox[0].style.left) - this.speed + 'px';
break;
case 'top':
snakeBox[0].style.top = parseInt(snakeBox[0].style.top) - this.speed + 'px';
break;
case 'bottom':
snakeBox[0].style.top = parseInt(snakeBox[0].style.top) + this.speed + 'px';
break;
}
if(parseInt(snakeBox[0].style.left) == this.x && parseInt(snakeBox[0].style.top) == this.y){
var div = document.createElement('div');
map.appendChild(div);
div.style.position = 'absolute';
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
var lastLeft = parseInt(snakeBox[snakeBox.length - 1].style.left) + 'px';
var lastTop = parseInt(snakeBox[snakeBox.length - 1].style.top) + 'px';
div.style.top = lastTop;
div.style.left = lastLeft;
div.style.backgroundColor = 'orange';
snakeBox.push(div);
this.food();
}
var left = parseInt(snakeBox[0].style.left);
var top = parseInt(snakeBox[0].style.top);
if (left < 0 || left > parseInt(mapWidth) || top < 0 || top > parseInt(mapHight)) {
alert('游戏结束,重新开始');
window.location.reload();
}
},200)
},
keydown:function(){
document.addEventListener('keydown',function(e){
//console.log(e.keyCode)
switch (event.keyCode){
case 37:
this.direction = 'left';
break;
case 38:
this.direction = 'top';
break;
case 39:
this.direction = 'right';
break;
case 40:
this.direction = 'bottom';
break;
}
this.snakeMove();
}.bind(this))
},
}
//实例对象
var game = new Game();
game.init();
</script>
</body>
</html>
08-11
728
12-22
03-03