beginners follow the code when learning js videos. The effect of the implementation should be to randomly generate small squares on a page.
actual effect of running
but squares have been generated in debugging!
Thecode is as follows:
<script >
/*
*
*/
(function (window) {
function Random() {
}
Random.prototype.getRandom = function (min,max) {
return Math.floor(Math.random()*(max-min)+min);
};
window.Random=new Random();//window
})(window);
/*
*
*/
(function (window) {
console.log(Random.getRandom(0,5))//
var map = document.querySelector(".map");//.getElementById
//
function Food(width,height,color) {
this.width=width||20;//
this.height=height||20;
this.x=0;//
this.y=0;//
this.color=color;
this.element=document.createElement("div");//
}
//
Food.prototype.init = function(map){
var div = this.element;//
div.style.position = "absolute";//;
div.style.width = this.width + "px";
div.style.height = this.height + "px";
div.style.backgroudcolor = this.color;
map.appendChild(div);//
this.render(map);
};
//
Food.prototype.render=function(map){
var x =Random.getRandom(0,map.offsetWidth/this.width)*this.width;//
var y =Random.getRandom(0,map.offsetHeight/this.height)*this.height;
this.x=x;
this.y=y;
var div = this.element;
div.style.left = this.x + "px";
div.style.top = this.y + "px";
};
var fd = new Food(20,20,"green");
fd.init(map);
console.log(fd.x+"--"+fd.y);
})(window);