<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
* {
margin: 0;
padding: 0;
}
.btn {
width: 80px;
height: 30px;
border: 1px solid #000000;
background-color: #eee;
margin: 20px auto 0;
display: block;
}
.map {
width: 800px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
position: relative;
}
</style>
</head>
<body>
<button id="btn" class="btn" type="button">开始游戏</button><br />
<div id="map" class="map"></div>
<script>
var map = document.getElementById("map");
var foodElements = [];
function Food() {
this.x = 0;
this.y = 0;
Food.prototype.width = 20;
Food.prototype.height = 20;
Food.prototype.color = "green";
if (typeof this.init != "function") {
Food.prototype.init = function() {
food.remove();
var div = document.createElement("div");
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.color;
div.style.position = "absolute";
this.x = parseInt(Math.random() * (map.offsetWidth / this.width));
this.y = parseInt(Math.random() * (map.offsetHeight / this.height));
for (var i = 0; i < snake.body.length; i++) {
while (this.x == snake.body[i].x && this.y == snake.body[i].y) {
this.x = parseInt(Math.random() * (map.offsetWidth / this.width));
this.y = parseInt(Math.random() * (map.offsetHeight / this.height));
continue;
}
}
div.style.left = this.x * this.width + "px";
div.style.top = this.y * this.height + "px";
map.appendChild(div);
foodElements.push(div);
};
}
if (typeof this.remove != "function") {
Food.prototype.remove = function() {
for (var i = 0; i < foodElements.length; i++) {
map.removeChild(foodElements[i]);
foodElements.splice(i, 1);
}
};
}
};
var snakeElements = [];
function Snake() {
this.direction = "right";
this.body = [{
x: 3,
y: 2,
color: "red"
},
{
x: 2,
y: 2,
color: "orange"
},
{
x: 1,
y: 2,
color: "orange"
}
];
Snake.prototype.width = 20;
Snake.prototype.height = 20;
if (!(this.init instanceof Function)) {
Snake.prototype.init = function() {
this.remove();
for (var i = 0; i < this.body.length; i++) {
var obj = this.body[i];
var div = document.createElement("div");
map.appendChild(div);
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.position = "absolute";
div.style.backgroundColor = obj.color;
div.style.left = obj.x * this.width + "px";
div.style.top = obj.y * this.height + "px";
while (i == 0) {
switch (this.direction) {
case "right":
div.style.borderTopRightRadius = "15px";
div.style.borderBottomRightRadius = "15px";
break;
case "left":
div.style.borderTopLeftRadius = "15px";
div.style.borderBottomLeftRadius = "15px";
break;
case "top":
div.style.borderTopRightRadius = "15px";
div.style.borderTopLeftRadius = "15px";
break;
case "bottom":
div.style.borderBottomRightRadius = "15px";
div.style.borderBottomLeftRadius = "15px";
break;
}
break;
}
snakeElements.push(div);
}
};
}
if (!(this.remove instanceof Function)) {
Snake.prototype.remove = function() {
for (var i = snakeElements.length - 1; i >= 0; i--) {
map.removeChild(snakeElements[i]);
snakeElements.splice(i, 1);
}
};
}
if (!(this.move instanceof Function)) {
Snake.prototype.move = 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 "right":
this.body[0].x += 1;
break;
case "left":
this.body[0].x -= 1;
break;
case "top":
this.body[0].y -= 1;
break;
case "bottom":
this.body[0].y += 1;
break;
}
this.init();
if (this.body[0].x == food.x && this.body[0].y == food.y) {
var last = this.body[this.body.length - 1];
this.body.push({
x: last.x,
y: last.y,
color: last.color
});
food.init();
}
var maxX = map.offsetWidth / this.width;
var maxY = map.offsetHeight / this.height;
var headX = this.body[0].x;
var headY = this.body[0].y;
if (headX < 0 || headX > maxX - 1 || headY < 0 || headY > maxY - 1) {
clearInterval(timeId);
timeId = null;
alert("撞墙了,游戏结束!");
// 移除snake
this.remove();
this.direction = "right";
this.body = [{
x: 3,
y: 2,
color: "red"
},
{
x: 2,
y: 2,
color: "orange"
},
{
x: 1,
y: 2,
color: "orange"
}
];
this.init();
// 结束游戏
return false;
}
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(timeId);
timeId = null;
alert("你把自己吃了,游戏结束!");
// 移除snake
this.remove();
this.direction = "right";
this.body = [{
x: 3,
y: 2,
color: "red"
},
{
x: 2,
y: 2,
color: "orange"
},
{
x: 1,
y: 2,
color: "orange"
}
];
this.init();
return false;
}
}
};
}
};
var food = new Food();
var snake = new Snake();
food.init();
snake.init();
document.onkeydown = function(e) {
var eve = e || window.event;
switch (eve.keyCode) {
case 37:
case 65:
if (snake.direction != "right") {
snake.direction = "left";
}
break;
case 38:
case 87:
if (snake.direction != "bottom") {
snake.direction = "top";
}
break;
case 39:
case 68:
if (snake.direction != "left") {
snake.direction = "right";
}
break;
case 40:
case 83:
if (snake.direction != "top") {
snake.direction = "bottom";
}
break;
}
};
var btn = document.getElementById("btn");
var timeId = null;
function begin() {
if (timeId != null) return;
timeId = setInterval("snake.move()", 200);
};
btn.onclick = begin;
</script>
</body>
</html>
JavaScript贪吃蛇小游戏
于 2021-09-26 15:17:10 首次发布