js实现随机生成小方块

<!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-39this.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

js实现随机生成小方块相关推荐

js实现上下左右移动小方块
js实现上下左右移动小方块在学习过程中同学实现的移动小方块代码,我重写了一遍,感觉收获很大,不过代码存在些许不足 <!DOCTYPE html> <html lang=" ...
随机位置生成小方块案例
每一秒改变所有小方块的颜色和位置,效果如图 html代码很简单,就是一个容器以及十个小方块 ```javascript <div id = 'container'></div> ...
JS如何随机生成一个整数
随机生成一个整数的第一步是要了解2个js方法: 1.JavaScript random() 方法 Math.random(): 返回介于 0(包含) ~ 1(不包含) 之间的一个随机数 2.JavaS ...
JS实现随机生成十六进制颜色值的代码
//定义一个函数,实现随机生成十六进制颜色值 function getColor(){ //定义字符串变量colorValue存放可以构成十六进制颜 ...
【JS】随机点名小案例
一.html <h2>随机点名</h2><div class="box"><span>名字是:</span><di ...
html如何随机生成小头像,CSS3 随机用户头像矩阵（照片背景墙）
HTML 导入代码模板:
原生JS实现躲避粒子小游戏
小项目的实战操作可以帮助我们更好的掌握javascript躲避例子游戏规则:拖拽红球躲避绿球碰撞,拖拽过程不能触碰容器内壁,以赢得游戏持久度页面效果: 实现过程不积小流,无以成江海. 将页面效果的 ...
html验证码功能如何实现原理,基于JS实现一个随机生成验证码功能
效果展示实现原理 1. html:一般就是一个div: 2. JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的字符个数以内,随机生成索引号 3)根据索引号查找对应字符,拼接成验 ...
第三天---随机小方块
❀随机小方块展示 html部分: <div class="map"></div> css样式: .map{ width:800px; height:600p ...

js实现随机生成小方块

js实现随机生成小方块相关推荐

最新文章

热门文章