<!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>