貪吃蛇效果：
貪吃蛇
鍵盤(pán)的w奥额、s、a歇僧、d分別來(lái)控制蛇移動(dòng)方向：上图张、下、左诈悍、右
js代碼：
// 創(chuàng)建地圖
var map = document.createElement('div')
// 設(shè)置樣式
setStyle(map,{
width:"800px",
height:"500px",
border:"3px solid #000",
position:"relative",
backgroundColor:"#eee"
})
// 將地圖放入body中
document.body.appendChild(map)
// 創(chuàng)建食物
var food = createFood()
function createFood(){
var div = document.createElement('div')
// 設(shè)置樣式
setStyle(div,{
width:"10px",
height:"10px",
backgroundColor:"#0f0",
position:"absolute",
// 因?yàn)樯呤且淮我苿?dòng)10px祸轮，所以left和top是隨機(jī)的，但是必須保證是10的倍數(shù)
left:parseInt(getRandom(map.clientWidth - 10)/10)*10 + 'px',
top:parseInt(getRandom(map.clientHeight - 10)/10)*10 + 'px',
})
// 將食物放在地圖中
map.appendChild(div)
return div
}
// 定義蛇的身體的坐標(biāo)
var body = [
{
x:0,
y:0
},
{
x:10,
y:0
},
{
x:20,
y:0
},
]
// 根據(jù)蛇的身體坐標(biāo)顯示蛇的身體
show()
function show(){
for(var i=0;i<body.length;i++){
var div = document.createElement('div')
setStyle(div,{
width:"10px",
height:"10px",
backgroundColor:"blue",
position:"absolute",
left:body[i].x + 'px',
top:body[i].y + 'px'
})
// 給蛇身體div設(shè)置類(lèi)名
div.className = 'snake';
// 蛇頭的特殊樣式
if(i === body.length-1){
div.style.borderRadius = '50%';
div.style.backgroundColor = 'red';
}
// 將蛇的身體放進(jìn)地圖中
map.appendChild(div)
}
}
// 定義蛇的默認(rèn)移動(dòng)方向
var direction = 'right';
// 設(shè)置鍵盤(pán)事件更改移動(dòng)方向
document.onkeydown = function(){
var e = window.event;
// 通過(guò)鍵盤(pán)碼獲取到當(dāng)前按下的鍵的字符
var keycode = e.keyCode || e.which;
var word = String.fromCharCode(keycode).toLowerCase()
switch(word){
case 'a':
direction = 'left';
break;
case 'w':
direction = 'up';
break;
case 'd':
direction = 'right';
break;
case 's':
direction = 'down';
break;
}
}
// 讓蛇根據(jù)方向移動(dòng)身體
var timerId = setInterval(function(){
// 將之前的身體刪除 - 創(chuàng)建新的身體
var snakes = document.querySelectorAll('.snake');
if(snakes.length){
for(var i=0;i<snakes.length;i++){
map.removeChild(snakes[i])
}
}
// 修改身體坐標(biāo) - 除了蛇頭的坐標(biāo)外侥钳，其他身體的坐標(biāo)是前一節(jié)身體的坐標(biāo)
for(var i=0;i<body.length-1;i++){
body[i].x = body[i+1].x;
body[i].y = body[i+1].y;
}
// 根據(jù)移動(dòng)方向修改蛇頭的坐標(biāo)
switch(direction){
case 'up':
body[body.length-1].y -= 10
break;
case 'down':
body[body.length-1].y += 10
break;
case 'left':
body[body.length-1].x -= 10
break;
case 'right':
body[body.length-1].x += 10
break;
}
// 根據(jù)新的坐標(biāo)重新顯示身體
show()
// 移動(dòng)過(guò)程判斷是否吃到食物
eat()
// 移動(dòng)過(guò)程判斷是否死亡
die()
},500)
// 蛇死亡
function die(){
// 蛇頭撞墻
if(body[body.length-1].x<0 || body[body.length-1].x>map.clientWidth-10 || body[body.length-1].y<0 || body[body.length-1].y>map.clientHeight-10){
alert('GAME OVER')
// 清除定時(shí)器
clearInterval(timerId)
}
// 蛇頭撞自己身體
for(var i=0;i<body.length-1;i++){
if(body[i].x===body[body.length-1].x && body[i].y===body[body.length-1].y){
alert('GAME OVER')
// 清除定時(shí)器
clearInterval(timerId)
}
}
}
// 蛇吃到食物
function eat(){
// 如果蛇頭的坐標(biāo)跟食物的坐標(biāo)完全重疊就表示吃到了食物
if(body[body.length-1].x === food.offsetLeft && body[body.length-1].y === food.offsetTop){
// 刪除食物
map.removeChild(food)
// 蛇的身體增加一節(jié)
body.unshift({
x:body[0].x,
y:body[0].y
})
// 重新創(chuàng)建食物
food = createFood()
}
}
// 獲取隨機(jī)數(shù)的函數(shù)
function getRandom(a,b=0){
var max = a;
var min = b;
if(a<b){
max = b;
min = a;
}
return Math.floor(Math.random() * (max - min)) + min;
}
// 設(shè)置樣式的函數(shù)
function setStyle(ele, styleObj){
for(var attr in styleObj){
ele.style[attr] = styleObj[attr];
}
}
