❀随机小方块展示

html部分：

<div class="map"></div>

css样式:

.map{
width:800px;
height:600px;
background-image:#ccc;
position:relative;/*因为产生随机小方块就证明小方块是脱离文档流的，所以其父亲设置定位（子绝父相）*/
}

js代码:

<script>
//首先本次代码需要用到两个重点：(1)如何将局部变量转换成全局变量进行使用(2)明白自调用函数的作用---一次性函数（就是执行一次就失效）
(function(window){//定义产生在两个数之间的随机数的构造函数function Random(){}Random.prototype.getRandom=function(min,max){return Math.floor(Math.random()*(max-min)+min);}window.Random=new Random();
})(window);//接下来是把随机产生的小方块当做对象，从而需要创建小方块的构造函数
(function(window){
var map=document.querySelector(".map");function Food(width,height,color){//这里之所以不传入小方块的横纵坐标是因为是随机产生的，所以无需用户进行输入;这里不需要传入元素对象是因为为了以后的操作this.width=width||20;this.height=height||20;this.color=color||"green";this.element=document.createElement("div");this.x=0;this.y=0;}//这个方法主要是对小方块的样式进行设置Food.prototype.init=function(map){var div=this.element;map.appendChild(div);div.style.position="absolute";//在这里一定要注意要给小方块也设置定位，不然页面将不会显示div.style.width=this.width+"px";//在这里进行设置宽度或者高度的时候一定不要忘记加“px”，不然将不会在页面上显示div.style.height=this.height+"px";div.style.backgroundColor=this.color;this.render(map);}Food.prototype.render=function(map){var div=this.element;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;div.style.left=this.x+"px";div.style.top=this.y+"px";}var food=new Food(20,20,"green");food.init(map);
})(window);
</script>

❀经过测试发现随机小方块已经实现成功，并且小方块在随机的过程中也不会超过map的div的界限

这些其实都是很常见的一些案例，比如在贪吃蛇中的随机食物，就可以采用这个代码进行随机产生食物

第三天---随机小方块相关推荐

js实现随机生成小方块
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
随机位置生成小方块案例
每一秒改变所有小方块的颜色和位置,效果如图 html代码很简单,就是一个容器以及十个小方块 ```javascript <div id = 'container'></div> ...
（附Matlab程序）（二）基于DCT编码的图像压缩：对分解后的每个数据小方块进行DCT及IDCT变换
问题一:随机选取一幅图像x.jpg,先将图像分解为8x8个数据块,然后分别对分解后的每个数据小方块进行DCT及IDCT变换,分别保留左上角3.10.15.32个系数进行处理,并对结果进行对比分析. c ...
俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
在html中什么标签可以显示小方块,css列表前的小方块
css列表前的小方块自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design ...
小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...
13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）
目录一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动) 二:取消拖拽文字的行为 1.没取消前: 2.取消后: 三:鼠标拖拽案例优化: 如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻 ...
html带小方块的滚动图片代码,html滚动条样式
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分 ...
皕杰报表斜线单元格、图表里或导出pdf的中文显示小方块解决方案
在皕杰报表中,如果含有斜线的单元格.统计图的报表.或导出pdf时,汉字变成小方框,这往往是服务器端操作系统的中文安装包没有装全,导致报表里用到的字体在服务器端的操作系统里找不到,因此成了小方块.因为斜 ...

第三天---随机小方块

❀随机小方块展示

第三天---随机小方块相关推荐

最新文章

热门文章