贪吃蛇(上)----随机小方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#map {
width: 600px;
height: 600px;
background-color: silver;
position: relative;
/*小方块要脱离标准文档流*/
}
</style>
</head>
<body>
<div id="map"></div>
<script>
//对象: 随机数, 下方块
//产生随机数的对象
((function () {
//1.产生随机数的构造函数
function Random() {
}
//2.在原型中添加方法
Random.prototype.getRandom = function (min, max) {
return Math.floor(Math.random() * (max - min) + min)
}
//3.把局部对象暴露给window
window.Random = Random;
})())
var rm = new Random();
// console.log(rm.getRandom(10, 50));
//产生小方块的对象
((function () {
function Food(width, height, color, x, y) {
this.width = width || 20;
this.height = height || 20;//默认小方块的宽高
this.color = color || "green";
//随机产生的
this.x = x || 0;
this.y = y || 0;
//创建一个div盒子
this.element = document.createElement("div")
}
//设置小方块显示的效果和位置--->显示在地图上
Food.prototype.init = function (map) {
//1.储存div元素对象
var div = this.element;
//2.设置小方块的样式
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroundColor = this.color;
div.style.position = "absolute";
//3.把小方块添加到map中
map.appendChild(div);
//随机的位置
this.random(map);
// setInterval(function () {
// div.random(map);
// div.style.backgroundColor="silver";
// },20)
}
//产生随机的位置
Food.prototype.random=function (map) {
this.x=rm.getRandom(0,map.offsetWidth/this.width)*this.width;
this.y=rm.getRandom(0,map.offsetHeight/this.height)*this.height;
this.element.style.left=this.x+"px";
this.element.style.top=this.y+"px";
}
setInterval(function () {
},20)
//实例化对象
var food = new Food();
food.init(document.getElementById("map"))
})())
</script>
</body>
</html>