<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.board {
600px;
height: 600px;
background: silver;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.snake div {
30px;
height: 30px;
background: black;
border-radius: 5px;
position: absolute;
}
.snake .head {
background: green;
left: 90px;
z-index: 2;
}
.snake div:nth-of-type(2) {
left: 60px;
}
.snake div:nth-of-type(3) {
left: 30px;
}
.snake div:nth-of-type(4) {
left: 0px;
}
.food {
30px;
height: 30px;
background-image: url(shit.jpg);
background-size: 100%;
position: absolute;
}
</style>
</head>
<body>
<button>快的</button>
<button>慢的</button>
<!-- <div class="food"></div> -->
<div class="board">
<div class="snake">
<div class="head"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
</div>
</div>
<script>
var moveId;
var head = document.querySelector('.head');
var speed = 30;
var move_dir = 'down';
var key_dir = 'down';
function move(interval) {
clearInterval(moveId)
moveId = setInterval(function () {
//移动蛇身体
var body = document.querySelectorAll('.snake div');
for (var i = body.length - 1; i > 0; i--) {
body[i].style.left = body[i - 1].offsetLeft + 'px'
body[i].style.top = body[i - 1].offsetTop + 'px'
}
if (key_dir === 'left' && move_dir === 'right' ||
key_dir === 'up' && move_dir === 'down' ||
key_dir === 'right' && move_dir === 'left' ||
key_dir === 'down' && move_dir === 'up'
) {
//do nothing
} else {
move_dir = key_dir;
}
//移动蛇头
var currentX = head.offsetLeft;
var currentY = head.offsetTop;
//有一个分支，来决定蛇的移动方向
if (move_dir === 'right') {
head.style.left = currentX + speed + 'px'
} else if (move_dir === 'left') {
head.style.left = currentX - speed + 'px'
} else if (move_dir === 'up') {
head.style.top = currentY - speed + 'px'
} else {
//down
head.style.top = currentY + speed + 'px'
}
die();
eat();
}, interval)
}
move(500)
createFood();
var KEY_CODE = {
KEY_LEFT: 37,
KEY_UP: 38,
KEY_RIGHT: 39,
KEY_DOWN: 40,
KEY_W: 87
}
window.onkeydown = function (evt) {
//evt.keyCode
console.log(evt.which)
switch (evt.which) {
case KEY_CODE.KEY_LEFT:
// if (move_dir === 'right') {
// return;
// }
key_dir = 'left'
break;
case KEY_CODE.KEY_RIGHT:
// if (move_dir === 'left') {
// return;
// }
key_dir = 'right'
break;
case KEY_CODE.KEY_UP:
case KEY_CODE.KEY_W:
// if (move_dir === 'down') {
// return;
// }
key_dir = 'up'
break;
case KEY_CODE.KEY_DOWN:
// if (move_dir === 'up') {
// return;
// }
key_dir = 'down'
break;
default:
break;
}
}
function createFood() {
var food = document.createElement('div');
food.className = 'food'
var types = ['poison', 'poison', 'poison', 'normal']
var type = types[Math.floor(Math.random() * types.length)]
// console.log(type)
food.setAttribute('type', type)
//食物的位置范围为：0-570
var x = Math.floor(Math.random() * 571);
var y = Math.floor(Math.random() * 571);
//保证x，y是30的整数倍
x = Math.floor(x / 30) * 30
y = Math.floor(y / 30) * 30
//TODO:保证食的位置不在蛇的身体上
food.style.left = x + 'px'
food.style.top = y + 'px'
document.querySelector('.board').appendChild(food)
}
function eat() {
var head = document.querySelector('.head');
var food = document.querySelector('.food');
if (head.offsetLeft === food.offsetLeft && head.offsetTop === food.offsetTop) {
//吃。
// food.style.backgroundColor = 'green';
document.querySelector('.snake').appendChild(food);
food.className = 'body';
if (food.getAttribute('type') === 'poison') {
move(100);
setTimeout(function () {
move(500)
}, 5 * 1000)
}
createFood();
}
}
function die() {
var head = document.querySelector('.snake .head');
var body = document.querySelectorAll('.snake .body');
for(var i=0; i<body.length; i++) {
if(head.offsetLeft === body[i].offsetLeft && head.offsetTop === body[i].offsetTop) {
location.reload();
}
}
}
</script>
</body>
</html>