贪吃蛇下续进行汇总
html代码
<div class="map"></div>
css<代码
.map{
width:800px;
height:600px;
background-color:#ccc;
position:absolute;
js代码
//食物对象
(function() {
var elements = [];
function Food(x, y, width, height, color) {
this.x = x || 0;
this.y = y || 0;
this.width = width || 20;
this.height = height || 20;
this.color = color || "green";
}
//食物样式初始化
Food.prototype.init = function(map) {
remove();
var div = document.createElement("div");
map.appendChild(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.width;
this.y = parseInt(Math.random() * map.offsetHeight / this.height) * this.height;
div.style.left = this.x + "px";
div.style.top = this.y + "px";
elements.push(div);
}
//清除食物
function remove() {
for(var i = 0; i < elements.length; i++) {
var ele = elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i, 1);
}
}
window.Food = Food;
}());
//小蛇对象
(function() {
var elements = [];
function Snake(width, height, direction) {
this.width = width || 20;
this.height = height || 20;
this.direction = direction || "right";
this.body = [{
x: 3,
y: 2,
color: "red"
},
{
x: 2,
y: 2,
color: "orange"
},
{
x: 1,
y: 2,
color: "orange"
}
];
}
//小蛇样式初始化
Snake.prototype.init = function(map) {
remove();
for(var i = 0; i < this.body.length; 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.left = this.body[i].x * this.width + "px";
div.style.top = this.body[i].y * this.height + "px";
div.style.backgroundColor = this.body[i].color;
elements.push(div);
}
}
//小蛇移动
Snake.prototype.move = function(map, food) {
var i = this.body.length - 1;
for(; 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;
}
//计算小蛇长度随着吃食物而增加
var headX = this.body[0].x * this.width;
var headY = this.body[0].y * this.height;
if(headX == food.x && headY == food.y) {
var last = this.body[this.body.length - 1];
this.body.push({
x: last.x,
y: last.y,
color: last.color
});
food.init(map);
}
}
//删除小蛇样式
function remove() {
var i = elements.length - 1;
for(; i >= 0; i--) {
var ele = elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i, 1);
}
}
window.Snake = Snake;
}());
//游戏对象
(function() {
var that = null;
function Game(map) {
this.food = new Food();
this.snake = new Snake();
this.map = map;
that = this;
}
//游戏初始化进行创建食物对象和小蛇对象
Game.prototype.init = function() {
this.food.init(this.map);
this.snake.init(this.map);
this.runSnake(this.map, this.food);
this.bindKey();
}
//定时器让小蛇进行开始移动
Game.prototype.runSnake = function(map, food) {
var timeId = setInterval(function() {
this.snake.move(map, food);
this.snake.init(map);
var maxX = map.offsetWidth / this.snake.width;
var maxY = map.offsetHeight / this.snake.height;
//判断小蛇最大最小移动距离,控制撞墙进行游戏结束
var headX = this.snake.body[0].x;
var headY = this.snake.body[0].y;
if(headX < 0 || headX >= maxX || headY < 0 || headY >= maxY) {
clearInterval(timeId);
alert("游戏结束");
}
}.bind(that), 150);
}
//通过获取上下左右方向按键进行控制小蛇方向
Game.prototype.bindKey = function() {
document.addEventListener("keydown", function(e) {
switch(e.keyCode) {
case 37:
this.snake.direction = "left";
break;
case 39:
this.snake.direction = "right";
break
case 38:
this.snake.direction = "top";
break;
case 40:
this.snake.direction = "bottom";
break;
}
}.bind(that), false)
}
window.Game = Game;
}());
//创建游戏对象并进行操作
var gm = new Game(document.querySelector(".map"));
gm.init();
通过图示可见相应的一些操作,小蛇吃东西,及长度变化,随之食物进行随机分布,及被吃掉之后,重新出现。