<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#map{
width: 800px;
height: 600px;
background-color: pink;
position: relative;
/*小方块要脱离标准本文档流*/
}
</style>
</head>
<body>
<div id="map"></div>
<script>
//对象: 随机数 , 小方块
//产生随机数的对象
((function () {
//1.产生随机数的构造函数
function Random() {
}
//2.在原型中添加方法
Random.prototype.getRandom = function (min,max) {
return parseInt(Math.random()*(max-min)+min)
}
//3.把局部对象暴露给window
window.Random = Random;
})());
var rm = new Random()
rm.getRandom();
//产生小方块的对象
((function () {
function Food(width, height, color, x, y) {
this.width = width || 20;
this.height = height || 20;// 默认小方块的宽高
this.color = color || "cyan";
// 随机产生的
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.render(map);
7
}
//产生随机的位置-->传地图
Food.prototype.render = function (map) {
// 随机数的区间 0-39\
//随机的坐标 (0-39) * 小方块的宽度
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";
}
//实例化对象
var food = new Food();
food.init(document.getElementById("map"));
})());
</script>
</body>
</html>
随机方块
最新推荐文章于 2021-03-15 08:42:14 发布
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
