贪吃蛇上
html代码
//简单的小地图
<div class="map">
</div>
css代码
<style>
/*设置地图样式*/
.map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
}
</style>
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 = [];//设置数组用来存储蛇的div
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();
//通过循环进行创建body元素数量次数的蛇身div并保存在elements数组中
for(var i = 0; i < this.body.length; i++) {
var div = document.createElement("div");
map.appendChild(div);
div.style.position = "absolute";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
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(food,map) {
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;
}
}
//同时蛇也需要清除在创建实现移动
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.food,this.map);
}
//蛇移动加入定时器,实现连续,其中判断蛇什么时候撞墙,游戏结束
Game.prototype.runSnake=function(food,map){
var timeId=setInterval(function(){
this.snake.move(food,map);
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);
}
window.Game=Game;
}());
var gm=new Game(document.querySelector(".map"));
gm.init();
蛇移动的过程:
蛇撞墙的过程:
今天就到这里了,下次继续贪吃蛇。