<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
outline: none;
}
h3{
position: absolute;
left: 95px;
color: deepskyblue;
}
.box {
width: 250px;
height: 300px;
border: solid 2px gold;
position: fixed;
top: 100px;
left: 20px;
}
.btn {
width: 120px;
height: 30px;
background-color: transparent;
border: solid 2px black;
margin: 20px 65px;
}
#map {
margin: 20px auto;
width: 800px;
height: 600px;
background: url("images/map.jpg") 800px 600px;
position: relative;
}
#btn4 {
text-align: center;
}
</style>
</head>
<body>
<h3>按空格键加速</h3>
<div class="box">
<input class="btn" id="btn1" type="button" value="开始游戏">
<input class="btn" id="btn2" type="button" value="暂停游戏">
<input class="btn" id="btn3" type="button" value="关闭游戏">
<input class="btn" id="btn4" type="text" value="积分：" disabled>
</div>
<div id="map"></div>
<script>
//随机生成颜色
function getColor() {
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var a = Math.random();
return "rgba(" + r + "," + g + "," + b + "," + a + ")"
}
//积分
var count = 0;
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
//食物对象
(function () {
//食物的构造函数
function Food(width, height, color, x, y) {
this.width = width || 20;
this.height = height || 20;
this.color = color || 'transparent';
this.x = x || 0;
this.y = y || 0;
this.element = document.createElement('div');
}
//初始化食物
Food.prototype.init = function (map) {
var div = this.element;
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.backgroundColor = this.color;
div.style.backgroundImage = 'url("images/food.png")';
div.style.backgroundSize = '100%';
div.style.borderRadius = '50%';
div.style.position = 'absolute';
//随机产生食物的横纵坐标
this.x = Math.floor(Math.random() * (map.offsetWidth / this.width)) * this.width;
this.y = Math.floor(Math.random() * (map.offsetHeight / this.height)) * this.height;
div.style.left = this.x + 'px';
div.style.top = this.y + 'px';
map.appendChild(div);
}
window.Food = Food;
})();
//小蛇对象
(function () {
var snakeList = [];
//小蛇的构造函数
function Snake(width, height, direction) {
this.width = width || 20;
this.height = height || 20;
this.body = [
{color: 'deepskyblue', x: 3, y: 1, bg: 'url("images/head.jpg")', size: '100%'},
{color: 'pink', x: 2, y: 1, bg: 'url("images/body.png")', size: '100%'},
{color: 'gold', x: 1, y: 1, bg: 'url("images/body.png")', size: '100%'}
];
this.direction = direction || 'right';
}
//初始化小蛇
Snake.prototype.init = function (map) {
this.remove();
for (var i = 0; i < this.body.length; i++) {
var div = document.createElement('div');
div.style.width = this.width + 'px';
div.style.height = this.height + 'px';
div.style.position = 'absolute';
div.style.backgroundColor = this.body[i].color;
div.style.backgroundImage = this.body[i].bg;
div.style.backgroundSize = this.body[i].size;
div.style.borderRadius = '50%';
div.style.left = this.body[i].x * this.width + 'px';
div.style.top = this.body[i].y * this.height + 'px';
map.appendChild(div);
snakeList.push(div);
}
}
//移动小蛇
Snake.prototype.move = function (food, map) {
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 'top':
this.body[0].y--;
break;
case 'bottom':
this.body[0].y++;
break;
case 'left':
this.body[0].x--;
break;
case 'right':
this.body[0].x++;
}
//蛇头坐标
var headX = this.body[0].x * this.width;
var headY = this.body[0].y * this.height;
//食物坐标
var foodX = food.x;
var foodY = food.y;
if (headX == foodX && headY == foodY) {
var lastBox = this.body[this.body.length - 1];
this.body.push({
x: lastBox.x,
y: lastBox.y,
color: getColor()
})
food.init(map);
count += 5;
btn4.value = '积分：' + count;
}
}
//删除小蛇
Snake.prototype.remove = function () {
for (var i = snakeList.length - 1; i >= 0; i--) {
snakeList[i].remove();
snakeList.splice(i, 1);
}
}
window.Snake = Snake;
}
)();
//游戏对象
(function () {
//游戏的构造函数
function Game(map) {
this.food = new Food();
this.snake = new Snake();
this.map = map || document.getElementById('map');
}
//初始化游戏
Game.prototype.init = function () {
this.food.init(this.map);
this.snake.init(this.map);
this.moveSnake();//移动小蛇
game.keyDown();//操作按键
}
Game.prototype.moveSnake = function () {
var that = this;
var timer = setInterval(function () {
if (btn2.value=='继续游戏'){
}else {
that.snake.move(that.food, that.map);
that.snake.init(this.map);
//蛇头坐标
var headX = that.snake.body[0].x;
var headY = that.snake.body[0].y;
//横纵坐标最大值
var maxX = that.map.offsetWidth / that.snake.width;
var maxY = map.offsetHeight / that.snake.height;
if (headX < 0 || headX >= maxX) {
clearInterval(timer);
alert('真菜');
}
if (headY < 0 || headY >= maxY) {
clearInterval(timer);
alert('真菜');
}
// 头部撞到身体游戏结束
for (var i = that.snake.body.length - 1; i > 0; i--) {
if (headX == that.snake.body[i].x && headY == that.snake.body[i].y) {
clearInterval(timer);
alert('咬到自己了')
}
}
}
}, 200)
}
Game.prototype.keyDown = function () {
var that = this;
document.onkeydown = function (e) {
//上下左右控制方向 禁止蛇掉头
switch (e.keyCode) {
case 37:
if (that.snake.direction != 'right') that.snake.direction = 'left';
break;
case 38:
if (that.snake.direction != 'bottom') that.snake.direction = 'top';
break;
case 39:
if (that.snake.direction != 'left') that.snake.direction = 'right';
break;
case 40:
if (that.snake.direction != 'top') that.snake.direction = 'bottom';
break;
}
//空格键位移
switch (that.snake.direction) {
case 'left':
if (e.keyCode == 32) that.snake.body[0].x -= 5;
break;
case 'right':
if (e.keyCode == 32) that.snake.body[0].x += 5;
break;
case 'top':
if (e.keyCode == 32) that.snake.body[0].y -= 5;
break;
case 'bottom':
if (e.keyCode == 32) that.snake.body[0].y += 5;
break;
}
}
}
window.Game = Game;
})();
var game = new Game();
//开始游戏
btn1.onclick = function () {
game.init();
}
//暂停/继续游戏
btn2.onclick = function () {
if (this.value == '暂停游戏') {
this.value = '继续游戏';
} else {
this.value ='暂停游戏'
}
}
//关闭游戏
btn3.onclick = function () {
window.close();
}
</script>
</body>
</html>
