92 lines
2.0 KiB
HTML
92 lines
2.0 KiB
HTML
<!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>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.map {
|
|
width: 800px;
|
|
height: 600px;
|
|
background: gray;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="map">
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script type="text/javascript">
|
|
// 创建随机数
|
|
(function () {
|
|
// 创建随机数对象
|
|
function Random() {
|
|
|
|
}
|
|
Random.prototype.getRandom = (min, max) => {
|
|
// 0~5整数
|
|
return Math.floor(Math.random() * (max - min) + min)
|
|
}
|
|
window.Random = Random
|
|
}());
|
|
|
|
// 创建小方块
|
|
(function(){
|
|
|
|
|
|
// 创建一个方块对象 --- 属性 宽高 颜色 位置 位置改变的方法
|
|
function Square(width, height, color) {
|
|
this.width = width || 20;
|
|
this.height = height || 20;
|
|
this.color = color || 'orange'
|
|
this.x = 0
|
|
this.y = 0
|
|
this.ele = document.createElement('div')
|
|
}
|
|
Square.prototype.init = function() {
|
|
|
|
// 设置样式
|
|
this.ele.style.position = 'absolute'
|
|
|
|
this.ele.style.background = this.color
|
|
this.ele.style.width = this.width + 'px'
|
|
this.ele.style.height = this.height + 'px'
|
|
this.render(map)
|
|
// 把小方块放进map中
|
|
map.appendChild(this.ele)
|
|
}
|
|
// 改变小方块的坐标
|
|
Square.prototype.render = function(map) {
|
|
var random = new Random()
|
|
var maxX = map.offsetWidth / this.width
|
|
var maxY = map.offsetHeight / this.height
|
|
|
|
// 坐标
|
|
this.x = random.getRandom(0, maxX)
|
|
this.y = random.getRandom(0, maxY)
|
|
|
|
this.ele.style.left = this.x * this.width + 'px'
|
|
this.ele.style.top = this.y * this.height + 'px'
|
|
}
|
|
window.Square = Square
|
|
}());
|
|
|
|
// 获取map对象
|
|
var map = document.querySelector('.map')
|
|
var sq = new Square()
|
|
sq.init(map)
|
|
setInterval(function(){
|
|
sq.render(map)
|
|
},1)
|
|
</script>
|
|
|
|
</html> |