<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
<style media="screen">
.map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
margin: auto;
}
</style>
</head>
<body>
<div class="map"></div>
<script type="text/javascript">
//map的这个div
var map = document.querySelector(".map");
//食物对象
(function() {
var elements = [];
// var num=11;
// window.num = num;
function Food(width, height, color, x, y) {
this.width = width;
this.height = height;
this.color = color;
this.x = x;
this.y = y;
console.log(this.width);
console.log(window);
var num=11;
window.num = num;
};
//食物方法 初识化 在地图
Food.prototype.init = function(map) {
remove();
//把div创建
var div = document.createElement("div");
//方地图
map.appendChild(div);
//初始化div
div.style.position = "absolute";
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.color;
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);
// console.log(elements);
};
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;
this.height = height;
// 身体数组
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) {
//删除上一次小蛇
remove();
//每个div进行循环（）
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.left = obj.x * this.width + "px";
div.style.top = obj.y * this.height + "px";
//背景颜色
div.style.backgroundColor = obj.color;
elements.push(div);
console.log(num);
}
}
}
//小蛇移动
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;
}
//对于头部
// console.log(this.direction);
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;
// default:"请使用方向键进行移动"
}
}
function remove() {
for (var i = elements.length - 1; i >=0 ; i--) {
var ele=elements[i];
// console.log(Snake);
// console.dif(Snake);
ele.parentNode.removeChild(ele);
elements.splice(i,1);
}
}
window.Snake = Snake;
}());
//测试
function a() {
console.log(window.num);
console.log(Food);
alert("sds")
};
a();
console.log(window);
// console.log(num);
// console.log(devicePixelRatio);
// console.log(Food.length);
var fd = new Food(20, 20, "green");
fd.init(map);
var sna = new Snake(20, 20);
sna.init(map);
sna.move(map);
sna.init(map);
// sna.move(map);
// sna.init(map);
// sna.move(map);
// sna.init(map);
</script>
</body>
</html>
聪明的汤姆
相关分类