| |
<!doctype html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<meta name="viewport" |
| |
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
| |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| |
<title>Document</title> |
| |
<script> |
| |
var map = null; |
| |
var food = null; |
| |
var snake = null; |
| |
|
| |
var timer = null; |
| |
var t = 500; |
| |
//定义地图构造器（类） |
| |
function Map(){ |
| |
//地图有属性 |
| |
this.width = 600; //单位像素 px |
| |
this.height = 400; |
| |
this.backgroundColor = '#dddddd'; |
| |
this.position = 'relative'; |
| |
//创建一个保存地图的成员属性 |
| |
this._map = null; |
| |
//创建地图的方法 |
| |
this.show = function(){ |
| |
this._map = document.createElement('div'); |
| |
//设置div的属性 |
| |
this._map.style.width = this.width + 'px'; |
| |
this._map.style.height = this.height + 'px'; |
| |
this._map.style.backgroundColor = this.backgroundColor; |
| |
this._map.style.position = this.position; |
| |
//将div放到body中 |
| |
document.querySelector('body').appendChild(this._map); |
| |
} |
| |
} |
| |
|
| |
//定义食物构造器（类） |
| |
function Food(){ |
| |
//食物的属性 |
| |
this.width = 20; //单位像素 px |
| |
this.height = 20; |
| |
this.backgroundColor = 'green'; |
| |
//位置。。。 |
| |
this.position = 'absolute'; |
| |
this.x = 0; //x轴坐标 |
| |
this.y = 0; //y轴坐标 |
| |
//表示食物的属性 |
| |
this._food = null; |
| |
//创建并显示食物的方法 |
| |
this.show = function(){ |
| |
if(this._food === null){ |
| |
this._food = document.createElement('div'); |
| |
} |
| |
this._food.style.width = this.width + 'px'; |
| |
this._food.style.height = this.height + 'px'; |
| |
this._food.style.backgroundColor = this.backgroundColor; |
| |
this._food.style.position = this.position; |
| |
//设置left和top属性前，先随机设置x和y的值 |
| |
this.x = Math.floor(Math.random() * 30); |
| |
this.y = Math.floor(Math.random() * 20); |
| |
this._food.style.left = this.x * this.width + 'px'; |
| |
this._food.style.top = this.y * this.height + 'px'; |
| |
//给定完样式，让食物显示在地图上 |
| |
map._map.appendChild(this._food); |
| |
} |
| |
} |
| |
|
| |
//定义蛇类 |
| |
function Snake(){ |
| |
//定义蛇的初始身体 |
| |
//每个数组中的null表示当前这节蛇的dom对象，就是这节蛇的div |
| |
this.body = [[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]]; |
| |
this.width = 20; |
| |
this.height = 20; |
| |
this.position = 'absolute'; |
| |
this.direct = 'right'; |
| |
//定义蛇的显示方法 |
| |
this.show = function(){ |
| |
for(var i=0; i<this.body.length; i++){ |
| |
if(this.body[i][3] === null){ |
| |
this.body[i][3] = document.createElement('div'); |
| |
} |
| |
|
| |
//设置这节蛇的位置和背景颜色 |
| |
this.body[i][3].style.backgroundColor = this.body[i][2]; |
| |
this.body[i][3].style.width = this.width + 'px'; |
| |
this.body[i][3].style.height = this.height + 'px'; |
| |
this.body[i][3].style.position = this.position; |
| |
//div.style.left = 横坐标*宽度 |
| |
this.body[i][3].style.left = this.body[i][0] * this.width + 'px'; |
| |
this.body[i][3].style.top = this.body[i][1] * this.height + 'px'; |
| |
//把这节蛇显示在地图上 |
| |
map._map.appendChild(this.body[i][3]); |
| |
} |
| |
} |
| |
//蛇移动 |
| |
this.move = function(){ |
| |
//判断是否吃到食物 |
| |
if(this.body[0][0] == food.x && this.body[0][1] == food.y){ |
| |
//增加body元素的个数 |
| |
this.body.push([0,0,'blue',null]); |
| |
//重新显示蛇 |
| |
this.show(); |
| |
//从新生成一个食物 |
| |
food.show(); |
| |
//修改t |
| |
t -= 50; |
| |
m(t); |
| |
} |
| |
|
| |
//移动一次，实验一下 |
| |
//this.body = [[4,2,'red'],[3,2,'blue'],[2,2,'blue']]; |
| |
//写循环，除了蛇头，改变每节蛇的坐标（先改变蛇尾，依次向前改） |
| |
for(var i=this.body.length-1; i>0; i--){ |
| |
this.body[i][0] = this.body[i-1][0]; //改变横坐标 |
| |
this.body[i][1] = this.body[i-1][1]; //改变纵坐标 |
| |
} |
| |
//this.body[0][0] += 1; |
| |
//单独设置蛇头 |
| |
if(this.direct == 'right'){ |
| |
this.body[0][0] += 1; |
| |
}else if(this.direct == 'left'){ |
| |
this.body[0][0] -= 1; |
| |
}else if(this.direct == 'up'){ |
| |
this.body[0][1] -= 1; |
| |
}else if(this.direct == 'down'){ |
| |
this.body[0][1] += 1; |
| |
} |
| |
|
| |
//判断是否超过边界 |
| |
if(this.body[0][1] < 0 || this.body[0][1] > 19 || this.body[0][0] < 0 || this.body[0][0] > 29){ |
| |
alert('Game Over！刷新从新开始'); |
| |
clearInterval(timer); |
| |
return false; |
| |
} |
| |
//判断不能撞自己，可加可不加 |
| |
for(var i=1; i<this.body.length; i++){ |
| |
//在循环过程中判断，判断蛇头是否和身体的某一节坐标相同，坐标相同，表示相撞 |
| |
if(this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]){ |
| |
alert('太不小心了，怎么能吃自己呢'); |
| |
clearInterval(timer); |
| |
return false; |
| |
} |
| |
} |
| |
|
| |
this.show(); |
| |
} |
| |
//设置direct的值 |
| |
this.setDirect = function(keyCode){ |
| |
switch (keyCode){ |
| |
case 37: |
| |
this.direct = 'left'; |
| |
break; |
| |
case 38: |
| |
this.direct = 'up'; |
| |
break; |
| |
case 39: |
| |
this.direct = 'right'; |
| |
break; |
| |
case 40: |
| |
this.direct = 'down'; |
| |
break; |
| |
} |
| |
} |
| |
} |
| |
function m(t){ |
| |
clearInterval(timer); |
| |
timer = setInterval('snake.move()', t); |
| |
} |
| |
window.onload = function () { |
| |
//实例化Map，调用创建地图方法 |
| |
map = new Map(); |
| |
map.show(); //调用show方法，创建地图 |
| |
|
| |
//实例化食物Food |
| |
food = new Food(); |
| |
food.show(); //显示食物 |
| |
|
| |
// |
| |
snake = new Snake(); |
| |
snake.show(); |
| |
//每隔多少毫秒调用一次move |
| |
|
| |
|
| |
m(t); |
| |
//设置按键 |
| |
document.body.onkeydown = function(event){ |
| |
var e = window.event||event; |
| |
var keyCode = e.keyCode; |
| |
//37 、38、 39、 40 分别表示 左上右下 |
| |
//调用setDirect |
| |
snake.setDirect(keyCode); |
| |
} |
| |
} |
| |
</script> |
| |
</head> |
| |
<body> |
| |
|
| |
</body> |
| |
</html> |
浙公网安备 33010602011771号