/**
* 贪吃蛇
*
* 1.地图
* 1.1 在html中创建一个div class为map
* 1.2 在style中 写样式 宽 高 背景颜色 相对定位
* 1.3 获取map元素
*
* 2.食物
* 2.1 新建一个空数组 用来存储食物
* 2.2 创建一个食物构造函数 用来创建食物对象
* 2.2.1 设置食物构造函数的宽的属性和默认值
* 2.2.2 设置食物构造函数的高的属性和默认值
* 2.2.3 设置食物构造函数的背景颜色的属性和默认值
* 2.2.4 设置食物构造函数的横纵坐标的默认值
* 2.3 创建一个食物的初始化方法 用来删除旧食物 新建新食物
* 2.3.1 删除旧食物
* 2.3.2 创建新食物元素
* 2.3.3 给新食物元素添加定位
* 2.3.4 给新食物元素添加宽高
* 2.3.5 给新食物添加背景颜色
* 2.3.6 给新食物添加横纵坐标(x和y)
* 2.3.7 把新食物放到地图上
* 2.3.8 把新食物放到数组中
* 2.4 创建一个食物的删除方法
* 2.4.1 循环遍历2.1 新建的空数组
* 2.4.1.1 找到新建的空数组中的每一项
* 2.4.1.2 找到某一项的父节点 删除地图上的自己
* 2.4.1.3 去空数组中删除自己
* 2.5 把食物的构造函数暴露出去
*
* 3.小蛇
* 3.1 新建一个空数组 用来存储小蛇
* 3.2 创建一个小蛇构造函数 用来创建小蛇对象
* 3.2.1 设置小蛇构造函数的属性 宽 和宽的默认值
* 3.2.2 设置小蛇构造函数的属性 高 和高的默认值
* 3.2.3 设置小蛇构造函数的属性 身体(body) 和身体的默认值(x, y , color)
* 3.2.4 设置小蛇的构造函数的属性 方向(direction) 和方向的默认值
* 3.3 创建一个小蛇的初始化方法 用来删除旧小蛇 新建新小蛇
* 3.3.1 删除旧小蛇
* 3.3.2 循环遍历body
* 3.3.2.1 创建新小蛇元素
* 3.3.2.2 给新小蛇元素添加绝对定位
* 3.3.2.3 给新小蛇元素添加宽
* 3.3.2.4 给新小蛇元素添加高
* 3.3.2.5 给新小蛇元素添加背景颜色
* 3.3.2.6 给新小蛇元素添加横坐标
* 3.3.2.7 给新小蛇元素添加纵坐标
* 3.3.2.8 把新小蛇添加到地图中
* 3.3.2.9 把新小蛇添加到3.1 的空数组中
* 3.4 创建一个小蛇的移动方法
* 3.4.1 遍历小蛇的身体(body属性)
* 3.4.2 给小蛇的每节改变坐标
* 3.4.3 判断小蛇的头和食物的坐标是否一致
* 3.4.3.1 获取小蛇的头的坐标
* 3.4.3.2 判断小蛇的头的坐标和食物额坐标是否一致 如果一致
* 3.4.3.2.1 获取小蛇的尾巴
* 3.4.3.2.1.1 把尾巴添加到身体的最后 push
* 3.4.3.2.2 删除旧食物 新建新食物(食物的init方法)
* 3.5 创建一个小蛇的删除方法
* 3.5.1 循环遍历数组(倒着遍历) 倒序遍历
* 3.5.1.1 找到数组中的每一项
* 3.5.1.2 找到某一项的父节点删除自己 在地图上
* 3.5.1.3 在数组中删除自己
* 3.6 把小蛇的构造函数暴露出去
*
* 4.游戏
* 4.1 创建一个 变量 用来存储游戏实例
* 4.2 创建一个游戏构造函数 用来创建游戏对象
* 4.2.1 把食物的实例化对象 给游戏构造函数的food属性
* 4.2.2 把小蛇的实例化对象 给游戏构造函数的snake属性
* 4.2.3 把地图给游戏构造函数的map属性
* 4.3.4 把this保存到that变量中
* 4.3 创建一个游戏初始化方法 用来调用
* 4.3.1 调用食物的初始化方法(初始化食物)
* 4.3.2 调用小蛇的初始化方法(初始化小蛇)
* 4.3.3 调用小蛇跑起来的方法
* 4.3.4 调用按键绑定的方法
* 4.4 创建一个小蛇跑起来的方法
* 4.4.0 清理定时器
* 4.4.1 添加一个定时器 (别忘了改变this的指向 如果不改变 是window 如果改变时game)
* 4.4.1.1 调用小蛇的移动方法
* 4.4.1.2 调用小蛇的初始化方法
* 4.4.1.3 获取地图的最大边界(横坐标 纵坐标)
* 4.4.1.4 获取小蛇头的横纵坐标
* 4.4.1.5 判断小蛇的蛇头坐标是否小于0 或 小蛇的蛇头坐标大于等于地图的最大边界
* 4.4.1.5.1 如果是这样的 那么就停止定时器 弹框 游戏结束
* 4.4.1.6 判断小蛇的蛇头坐标是否小于0 或 小蛇的蛇头坐标大于等于地图的最大边界
* 4.4.1.6.1 如果是这样的 那么就停止定时器 弹框 游戏结束
* 4.5 创建一个小蛇按键绑定的方法
* 4.5.1 直接就给document添加keydonw事件 (别忘了改变this的指向 如果不改变是document 改变时game)
* 4.5.2 switch语句 去重新给小蛇的方向设置属性值
* 4.6 把游戏的构造函数暴露出去
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.map {
position: relative;
width: 800px;
height: 600px;
background-color:
}
</style>
</head>
<body>
<div class="map"></div>
<script>
var map = document.querySelector('.map');
(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) {
this.remove();
var cib = document.createElement('div');
cib.style.position = "absolute";
cib.style.width = this.width + "px";
cib.style.height = this.height + "px";
cib.style.backgroundColor = this.color;
this.x = Math.floor(Math.random() * (map.offsetWidth) / this.width) * this.width;
this.y = Math.floor(Math.random() * (map.offsetHeight) / this.height) * this.height;
cib.style.top = this.y + "px";
cib.style.left = this.x + "px";
map.appendChild(cib);
elements.push(cib);
}
Food.prototype.remove = function () {
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.body = [{
x: 3,
y: 2,
color: "red"
},
{
x: 2,
y: 2,
color: "orange"
},
{
x: 1,
y: 2,
color: "orange"
}
];
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.position = "absolute";
div.style.borderRadius = "50%";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.body[i].color;
div.style.left = this.body[i].x * this.width + "px";
div.style.top = this.body[i].y * this.height + "px";
map.appendChild(div);
elements.push(div);
}
}
Snake.prototype.move = function (map, food) {
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 -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "bottom":
this.body[0].y += 1;
break;
case "left":
this.body[0].x -= 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);
}
}
Snake.prototype.remove = function () {
for (var i = elements.length-1; i >= 0; i--) {
var ele = elements[i];
ele.parentElement.removeChild(ele);
elements.splice(i, 1);
}
}
window.Snake = Snake;
}());
//game
(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.snake.init(this.map);
this.food.init(this.map);
this.runSnake(this.map,this.food);
this.bindKey();
}
//runSnake方法
Game.prototype.runSnake = function(map,food){
var timer = null;
clearInterval(timer);
timer = 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;
console.log(HeadX,HeadY,maxX,maxY);
if(HeadX < 0 || HeadX >= maxX){
clearInterval(timer);
alert("game over");
}
if(HeadY < 0 || HeadY >= maxY){
clearInterval(timer);
alert("game over");
}
}.bind(that),150);
//bindKey方法
Game.prototype.bindKey = function(e){
document.addEventListener("keydown",function(e){
switch(e.keyCode){
case 37 :
this.snake.direction = "left";
break;
case 38 :
this.snake.direction = "top";
break;
case 39 :
this.snake.direction = "right";
break;
case 40 :
this.snake.direction = "bottom";
break;
}
}.bind(that),false)
}
}
window.Game = Game;
}());
var game = new Game(map);
game.init();
</script>
</body>
</html>
复制代码
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
