<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #map{ width: 800px; height: 600px; background-color: lightblue; margin: 10px auto; /*因为小方块要脱标*/ position: relative; } </style> </head> <body> <div id="map"></div> <script> //1.产生随机数的对象 (function () { function Random() { } Random.prototype.getRandom = function (min, max) { return Math.floor(Math.random() * (max - min) + min); } window.random = new Random(); })(); console.log(random.getRandom(0,40)); //2.产生小方块的对象 (function () { var map = document.getElementById("map"); //小方块的构造函数 function Food(width,height, color, x, y) { this.width = width || 20;//设置默认的小方块的宽度 this.height = height ||20; this.color = color || "pink"; //需要随机产生的left和top值 this.x = x || 0; this.y = y || 0; //创建一个div盒子-->即小方块 this.element = document.createElement("div"); } //初始化小方块显示的位置 Food.prototype.init = function () { //1.设置小方块的样式 console.log(this.element); var div = this.element; div.style.width = this.width + "px"; div.style.height = this.height + "px"; div.style.backgroundColor = this.color; div.style.position = "absolute"; //2.把小方块添加到map中 map.appendChild(div); //3.位置随机 this.render(); } //添加位置随机的方法 Food.prototype.render = function () { // 0-40 --->随机区间0-39 this.x = random.getRandom(0,map.offsetWidth/this.width )* this.width; this.y = random.getRandom(0,map.offsetHeight/this.height )* this.height; //设置小方块的left和top值 this.element.style.left = this.x + "px"; this.element.style.top = this.y + "px"; } window.food = new Food(); //food.init(); })(); food.init(); </script> </body> </html>
原文：https://www.cnblogs.com/Ironman725/p/10946432.html