使用原生JavaScript实现贪吃蛇,代码如下
<!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>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.main {
width: 800px;
height: 400px;
margin: 50px auto;
}
.btn {
width: 100px;
height: 40px;
}
.map {
position: relative;
width: 800px;
height: 400px;
background: #ccc;
}
</style>
</head>
<body>
<div class="main">
<button class="btn" id="begin">开始游戏</button>
<div class="map" id="map"></div>
<script type="text/javascript">
var map = document.getElementById('map');
function Snake()
{
this.width = 10;
this.height = 10;
this.direction = 'right';
this.body = [
{x:2, y:0},
{x:1, y:0},
{x:0, y:0}
];
this.display = function() {
for (var i=0; i<this.body.length; i++) {
if (this.body[i].x != null) {
var s = document.createElement('div');
this.body[i].flag = s;
s.style.width = this.width + 'px';
s.style.height = this.height + 'px';
s.style.borderRadius = "50%";
s.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
s.style.position = 'absolute';
s.style.left = this.body[i].x * this.width + 'px';
s.style.top = this.body[i].y * this.height + 'px';
map.appendChild(s);
}
}
};
this.run = function() {
for (var i=this.body.length-1; i>0; i--) {
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
switch(this.direction)
{
case "left":
this.body[0].x -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "up":
this.body[0].y -= 1;
break;
case "down":
this.body[0].y += 1;
break;
}
if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {
clearInterval(timer);
alert("你瞎吗?撞死了!");
for (var i=0; i<this.body.length; i++) {
if (this.body[i].flag != null) {
map.removeChild(this.body[i].flag);
}
}
this.body = [
{x:2, y:0},
{x:1, y:0},
{x:0, y:0}
];
this.direction = 'right';
this.display();
return false;
}
if (this.body[0].x == food.x && this.body[0].y == food.y) {
this.body.push({x:null, y:null, flag: null});
map.removeChild(food.flag);
food.display();
}
for (var i=4; i<this.body.length; i++) {
if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
clearInterval(timer);
alert("傻子!你怎么能吃自己呢?");
for (var i=0; i<this.body.length; i++) {
if (this.body[i].flag != null) {
map.removeChild(this.body[i].flag);
}
}
this.body = [
{x:2, y:0},
{x:1, y:0},
{x:0, y:0}
];
this.direction = 'right';
this.display();
return false;
}
}
for (var i=0; i<this.body.length; i++) {
if (this.body[i].flag != null) {
map.removeChild(this.body[i].flag);
}
}
this.display();
}
}
function Food()
{
this.width = 10;
this.height = 10;
this.display = function() {
var f = document.createElement('div');
this.flag = f;
f.style.width = this.width + 'px';
f.style.height = this.height + 'px';
f.style.background = 'red';
f.style.borderRadius = '50%';
f.style.position = 'absolute';
this.x = Math.floor(Math.random()*80);
this.y = Math.floor(Math.random()*40);
f.style.left = this.x * this.width + 'px';
f.style.top = this.y * this.height + 'px';
map.appendChild(f);
}
}
var snake = new Snake();
var food = new Food();
snake.display();
food.display();
document.body.onkeydown = function(e) {
var ev = e || window.event;
switch(ev.keyCode)
{
case 38:
if (snake.direction != 'down') {
snake.direction = "up";
}
break;
case 40:
if (snake.direction != "up") {
snake.direction = "down";
}
break;
case 37:
if (snake.direction != "right") {
snake.direction = "left";
}
break;
case 39:
if (snake.direction != "left") {
snake.direction = "right";
}
break;
}
};
var begin = document.getElementById('begin');
var timer;
begin.onclick = function() {
clearInterval(timer);
timer = setInterval("snake.run()", 500);
};
</script>
</div>
</body>
</html>