前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战
一、组件化开发
1.1组件化概述
页面特效的制作,特别需要html、css有固定的布局,所以说现在越来越流行组件开发的模式,就是用js写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成。
new carousel();
实例化后,页面中就有一个轮播图的布局结构,而且可以通过参数传递进去。
这个new里面封装了html、css、js的业务逻辑。组件开发的规律就是所有按钮、小圆点、图片等等都是这个类(的实例的)属性,自己管理自己。
组件开发的好处就是在用的时候可以高度自定义,在new的时候应该能传入一个json参数进行配置,当你的json里面的属性改变的时候,我们的ui界面逻辑就要有响应的变化。
面向对象+设计模式组合各种类(通常是中介者模式),就是组件化开发。
本质思想,组件只考虑两个事情:
l 别人怎么控制我,要提供很多函数,这个函数可以改变我的状态。
l 我怎么给别人提供接口,比如轮播图被点击时,要提供一个click事件回调。
组件只需要对自己负责,至于别人怎么调用我的接口,在我提供的接口中做什么,自己不需要考虑。
特点:
组件都是可以单独测试的,所有组件都可以单独上树,进行测试。
dom都是动态生成的,组件开发中,现在90%以上的,都是将dom写在js中,在“查看源代码”中看见的是空标签。
组件是嵌套的,往往大组件是小组件的中介者。
优点:
l 方便维护,功能易于插拔,很容易找出bug的地方。
l 易于复用,比如我们做一个分页条组件,此时可以非常*在其他项目使用。
组件开发是一个非常实用的技术,组件开发越来越火,催生了一些组件开发的框架:react、vue、angular等。
1.2轮播图组件开发
js对象、dom对象,js对象的属性是dom对象
用轮播图的面向对象举例,js对象中有自己的参数属性(比如当前显示图片的编号、速度、间隔时间、宽度、高度),还dom属性。
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="js/carousel.js"></script> <script type="text/javascript"> new carousel({ "id" : "carousel", "images" : [ {"picurl" : "images/0.jpg", "link" : "http://www.iqianduan.cn"}, {"picurl" : "images/1.jpg", "link" : "http://www.iqianduan.cn"}, {"picurl" : "images/2.jpg", "link" : "http://www.iqianduan.cn"}, {"picurl" : "images/3.jpg", "link" : "http://www.iqianduan.cn"}, {"picurl" : "images/4.jpg", "link" : "http://www.iqianduan.cn"} ], "width" : 560, "height": 300, "speed" : 500, "interval" : 2000 }); </script>
css样式:carousel样式后面动态创建
#carousel{ width: 560px; height: 300px; position: relative; overflow: hidden; } .leftbtn,.rightbtn{ position: absolute; top:50%; width: 30px; height: 30px; background-color: orange; } .leftbtn{left: 10px;} .rightbtn{right: 10px;} .circls{ position: absolute; bottom: 10px;left: 100px; list-style: none; } .circls li{ float: left; width: 20px; height: 20px; background-color: orange; margin-right: 10px; } .circls li.cur{background-color: red;}
(function(){ //强行暴露一个变量,一枝红杏出墙来 window.carousel = carousel; //轮播图类 function carousel(json){ this.$dom = $("#" + json.id); //dom元素 this.$imagesul = null; this.$imagesullis = null; this.width = json.width; this.height = json.height; this.$leftbtn = null; this.$rightbtn = null; this.$circleol = null; this.$circlelis = null; this.interval = json.interval; this.speed = json.speed; //滑动速度 this.idx = 0;//信号量 this.imagesurlarr = json.images;//图片地址数组 this.picturelength = json.images.length;//图片长度 this.init(); this.bindevent(); this.autoplay(); //定时器 } //初始化dom carousel.prototype.init = function(){ //创建ul节点 this.$imagesul = $("<ul></ul>"); this.$dom.append(this.$imagesul); //创建li节点 for(var i = 0; i < this.picturelength; i++) { $("<li><img src='"+this.imagesurlarr[i].picurl+"'/></li>") .appendto(this.$imagesul); }; //获得li元素引用 this.$imagesullis = this.$imagesul.find("li"); //大盒子的布局 this.$dom.css({ "width" : this.width, "height" : this.height, "position" : "relative", "overflow" : "hidden" }); //猫腻,让所有li藏起来(left移动到显示区域外) this.$imagesullis.css({ "position" : "absolute", "left": this.width, "top": 0 }); //只显示第一张图 this.$imagesullis.eq(0).css("left",0); //创建按钮 this.$leftbtn = $("<a href='javascript:;' class='leftbtn'></a>"); this.$rightbtn = $("<a href='javascript:;' class='rightbtn'></a>"); this.$leftbtn.appendto(this.$dom); this.$rightbtn.appendto(this.$dom); //创建小圆点 this.$circleol = $("<ol class='circls'></ol>"); this.$circleol.appendto(this.$dom); for (var i = 0; i < this.picturelength; i++) { $("<li></li>").appendto(this.$circleol); }; //获得ol的li元素 this.$circlelis = this.$circleol.find("li"); //加cur this.$circlelis.eq(0).addclass("cur"); } })();
事件监听方法:
carousel.prototype.bindevent = function(){ var self = this; //右边按钮的监听 this.$rightbtn.click(function(){ if(self.$imagesullis.is(":animated")) return; self.shownext(); }); //左边按钮的监听 this.$leftbtn.click(function(){ if(self.$imagesullis.is(":animated")) return; self.showprev(); }); }
shownext() 显示下一张方法
//展示下一张 carousel.prototype.shownext = function(){ this.$imagesullis.eq(this.idx).animate({"left" : -this.width},this.speed); this.idx++; if(this.idx > this.picturelength - 1){ this.idx = 0; } this.$imagesullis.eq(this.idx).css("left",this.width).animate({"left" : 0},this.speed); //圆点的cur this.changecirclescur(); }
changecirclescur()小圆点方法
carousel.prototype.changecirclescur = function(){ this.$circlelis.eq(this.idx).addclass("cur").siblings().removeclass("cur"); }
showprev() 显示上一张方法
//展示上一张 carousel.prototype.showprev = function(){ this.$imagesullis.eq(this.idx).animate({"left" : this.width},this.speed); this.idx--; if(this.idx < 0){ this.idx = this.picturelength - 1; } this.$imagesullis.eq(this.idx).css("left",-this.width).animate({"left" : 0},this.speed); //圆点的cur this.changecirclescur(); }
//自动轮播 carousel.prototype.autoplay = function(){ var self = this; this.timer = setinterval(function(){ self.shownext(); },this.interval); }
bindevent()
carousel.prototype.bindevent = function(){ var self = this; //鼠标停表 this.$dom.mouseenter(function(){ clearinterval(self.timer); }); //离开开启 this.$dom.mouseleave(function(){ self.autoplay(); }); //圆点的监听 this.$circlelis.click(function(){ self.show($(this).index()); }); }
//小圆点点击展示任意 carousel.prototype.show = function(number){ var old = this.idx; //旧idx信号量 this.idx = number; //当前点击的信号量,改变全局 //判断 if(this.idx > old){ //从右到左 this.$imagesullis.eq(old).animate({"left" : -this.width},this.speed); this.$imagesullis.eq(this.idx).css("left",this.width).animate({"left" : 0},this.speed); }else if(this.idx < old){//从左到右 this.$imagesullis.eq(old).animate({"left" : this.width},this.speed); this.$imagesullis.eq(this.idx).css("left",-this.width).animate({"left" : 0},this.speed); } //圆点的cur this.changecirclescur(); }
二、俄罗斯方块游戏开发
2.1先认识方块
俄罗斯方块一共有7种:s、z、j、l、o、i、t
2.2写二维数组的json表(表示砖块)
首先做两种图形:
// s 、z 、j 、l 、o 、i 、t
var block_json = { "i":[ //i有2种方向 [ [0,1,0,0], [0,1,0,0], [0,1,0,0], [0,1,0,0] ], [ [0,0,0,0], [0,0,0,0], [1,1,1,1], [0,0,0,0] ] ], "l":[ //l有4种方向 [ [0,1,0,0], [0,1,0,0], [0,1,1,0], [0,0,0,0] ], [ [1,1,1,0], [1,0,0,0], [0,0,0,0], [0,0,0,0] ], [ [1,1,0,0], [0,1,0,0], [0,1,0,0], [0,0,0,0] ], [ [0,0,1,0], [1,1,1,0], [0,0,0,0], [0,0,0,0] ] ], "j":[//j有4种方向 [ [0,1,0,0], [0,1,0,0], [1,1,0,0], [0,0,0,0] ], [ [1,0,0,0], [1,1,1,0], [0,0,0,0], [0,0,0,0] ], [ [1,1,0,0], [1,0,0,0], [1,0,0,0], [0,0,0,0] ], [ [1,1,1,0], [0,0,1,0], [0,0,0,0], [0,0,0,0] ] ], "o":[ //o有1种方向 [ [1,1,0,0], [1,1,0,0], [0,0,0,0], [0,0,0,0] ] ], "z":[ //z有2种方向 [ [1,1,0,0], [0,1,1,0], [0,0,0,0], [0,0,0,0] ], [ [0,0,1,0], [0,1,1,0], [0,1,0,0], [0,0,0,0] ] ], "s":[ //s有2种方向 [ [0,1,1,0], [1,1,0,0], [0,0,0,0], [0,0,0,0] ], [ [0,1,0,0], [0,1,1,0], [0,0,1,0], [0,0,0,0] ] ], "t":[//t有4种方向 [ [1,1,1,0], [0,1,0,0], [0,0,0,0], [0,0,0,0] ], [ [0,1,0,0], [1,1,0,0], [0,1,0,0], [0,0,0,0] ], [ [0,1,0,0], [1,1,1,0], [0,0,0,0], [0,0,0,0] ], [ [0,1,0,0], [0,1,1,0], [0,1,0,0], [0,0,0,0] ] ] }
2.3基本布局【table表格(12*20)】
都是套路,和贪吃蛇没区别。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>document</title> <style type="text/css"> table{ margin:50px auto; } table,tr,td{border: 1px solid #000;border-collapse:collapse;} td{width: 18px;height: 18px;} </style> </head> <body> <div id="app"></div> </body> <script type="text/javascript" src="js/game.js"></script> <script type="text/javascript" src="js/block.js"></script> <script type="text/javascript"> var game = new game() </script> </html>
循环创建12*20的table表格,原因:为了方块能居中。
(function(){ window.game = function(){ this.init() } //20 * 12创建表格 game.prototype.init = function(){ this.dom = document.createelement('table'); document.getelementbyid("app").appendchild(this.dom); var tr,td; //循环插入行 for(var i = 0;i < 20;i++){ tr = document.createelement('tr'); this.dom.appendchild(tr); for(var j = 0;j < 12;j++){ //循环插入列 td = document.createelement('td'); tr.appendchild(td); } } } })();
//如果别的类修改game类的表格颜色,尽量提供一个方法给其他类调用,不要让其他类修改自己的属性 //设置table表格的颜色 game.prototype.setclass = function(row, col, classname){ this.dom.getelementsbytagname('tr')[row].getelementsbytagname('td')[col].classname = classname }
在index.html中写两个类:
.l{background: skyblue;} .i{background: pink;}
(function(){ window.block = function(){ //在所有的形状中,选择一个砖块形状 var arr = ["i","l","j"]; this.alltype = arr[~~(math.random() * arr.length)] console.log(this.alltype) //自己所有的方向个数 this.alldirectionnumber = block_json[this.alltype].length; //随意一个方向 this.direction = ~~(math.random() * this.alldirectionnumber); //得到形状,马上渲染图形的而进行code码 this.code = block_json[this.alltype][this.direction]; //4 * 4小方块的初始位置 this.row = 0; this.col = 4; //保证方块从中间出现 } })();
2.4砖块渲染
(function(){ window.block = function(){ ... } //渲染砖块 block.prototype.render = function(){ for(var i = 0; i < 4;i++){ for(var j = 0; j < 4;j++){ //显示4 * 4矩阵颜色,写class类 game.setclass(this.row + i, this.col + j, "gray"); if(this.code[i][j] == 1){ //如果4 * 4 二维数组编码中有1就渲染颜色,0就没色 game.setclass(this.row + i, this.col + j, this.alltype) } } } } })();
别忘记在game类中添加定时器并render block(渲染方块)
(function(){ window.game = function(){ this.init(); this.start(); //实例化砖块类 this.block = new block(); } game.prototype.start = function(){ var self = this; setinterval(function(){ //渲染砖块 self.block.render(); },30); } })();
2.5砖块下落
//砖块下落 block.prototype.down = function(){ this.row++; } //清屏方法 game.prototype.clearclass = function(){ for(var i = 0; i < 20;i++){ for(var j = 0; j < 12;j++){ game.setclass(i, j, ""); } } } game.prototype.start = function(){ this.f = 0; var self = this; setinterval(function(){ self.f++; //清屏 self.clearclass() //渲染砖块 self.block.render(); //每间隔20帧下落 self.f % 20 == 0 && self.block.down(); },30); }
砖块就能下落了
2.6 map地图类
map地图类存储死亡的方块
(function(){ window.map = function(){ this.code = [ [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0] ] } })()
用for循环更优雅的创建二维数组
this.code = (function(){ var arr = []; for(var i = 0;i < 20;i++){ arr.push([]); for(var j = 0;j < 12;j++){ arr[i].push(0) } } return arr; })();
es6语法,写一个二维数组:
new array(20).fill(new array(12).fill(0)
(function(){ window.map = function(){ this.code = (function(){ var arr = []; for(var i = 0;i < 20;i++){ arr.push([]); for(var j = 0;j < 12;j++){ arr[i].push(0) } } //写一个“一柱擎天”方便测试 arr[10][5] = "l"; arr[11][5] = "l"; arr[12][5] = "l"; arr[13][5] = "l"; arr[14][5] = "l"; arr[15][5] = "l"; arr[16][5] = "l"; arr[17][5] = "l"; arr[18][5] = "l"; arr[19][5] = "l"; return arr; })(); console.log(this.code) } })()
map地图类渲染:
//地图渲染 map.prototype.render = function(){ for(var i = 0;i < 20; i++){ for(var j = 0;j < 12; j++){ //如果地图中二维数组中有非0的,就渲染方块 if(this.code[i][j] != 0){ game.setclass(i, j, this.code[i][j]) } } } }
2.7下落的砖块卡住判断
看下一行能不能进取决于两个条件:
1、地图类的下一行不能是非“0”
2、方块的下一行不能是“1”
//检测碰撞,提供check方法,返回值true或false block.prototype.check = function(row,col){ for(var i = 0; i < 4; i++){ for(var j = 0; j < 4; j++){ if(this.code[i][j] != 0 && game.map.code[row + i][col + j] != 0){ return false; //如果不能进,返回false } } } return true; //能进返回true }
//砖块下落 block.prototype.down = function(){ //调用check方法,如果为真就继续row++往下落 console.log(this.check(this.row+1,this.col)) if(this.check(this.row+1,this.col)){ this.row++; } }
到这来碰撞检测完成。
当删除测试的“一柱擎天”后,block下落到底的时候,报错了,因为下标越界了,map类最下面没有非0的code码,检测block.check方法中循环不到第i第j列没有非0的值了。
解决办法:手动在最后补一行非0的数组值即可。
arr.push([1,1,1,1,1,1,1,1,1,1,1,1]); arr.push(array(12).fill(1));
2.8添加键盘事件监听
//键盘事件监听 game.prototype.bindevent = function(){ var self = this; document.onkeyup = function(event){ if(event.keycode == 37){ self.block.left(); }else if(event.keycode == 38){ self.block.rotate(); }else if(event.keycode == 39){ self.block.right(); }else if(event.keycode == 40){ self.block.godown(); } } } //向左 block.prototype.left = function(){ if(this.check(this.row,this.col-1)){ this.col--; } } // 向右 block.prototype.right = function(){ if(this.check(this.row,this.col+1)){ this.col++; } } //一键到底 block.prototype.godown = function(){ while(this.check(this.row+1,this.col)){ this.row++; } }
可以左右、向下控制砖块了。
只要碰到map中的死尸砖块就添加。
//添加死亡方块 block.prototype.adddie = function(){ for(var i = 0; i < 4;i++){ for(var j = 0; j < 4;j++){ // console.log(this.row+i,this.col+j) if(this.code[i][j] != 0){ //如果不是0表示有颜色(有砖块) //将随机出来的字母类名,写在地图类的code中 game.map.code[this.row + i][this.col + j] = this.alltype; } } } }
//砖块下落 block.prototype.down = function(){ //调用check方法,如果为真就继续row++往下落 if(this.check(this.row+1,this.col)){ this.row++; }else{ //如果为假,表示碰到非0的砖块了,将自己添加到map地图类中 this.adddie(); //同时new一个新的砖块出来 game.block = new block(); } }
2.10旋转
//旋转 block.prototype.rotate = function(){ //备份旧方向 var olddirection = this.direction; //如果旋转的值已经等于自己方向的个数,就回到0,重新翻转 if(this.direction == this.alldirectionnumber - 1){ this.direction = 0; }else{ // 否则继续加,可以旋转 this.direction++; } //得到自己的方向下标后,马上渲染图形的二维数组的code码 this.code = block_json[this.alltype][this.direction]; if(!this.check(this.row,this.col)){ //已经碰到了 //如果不可以旋转,就撤回来 this.direction = olddirection //改为刚刚随机出来的旧方向。 this.code = block_json[this.alltype][this.direction]; } }
2.11消行判断
//消行判断 block.prototype.remove = function(){ //判断map地图类中的code中某一行是不是没有0,如果没有0,就消行 for(var i = 0;i < 20;i++){ if(!game.map.code[i].includes(0)){ //如果没有0,就删除行 game.map.code.splice(i,1); //删除行之后,再重新在头部填充一行全0的 game.map.code.unshift(new array(12).fill(0)); } } }
//砖块下落 block.prototype.down = function(){ //调用check方法,如果为真就继续row++往下落 if(this.check(this.row+1,this.col)){ this.row++; }else{ //如果为假,表示碰到非0的砖块了,将自己添加到map地图类中 this.adddie(); //同时new一个新的砖块出来 game.block = new block(); //没碰到一次检测是否需要消行 this.remove(); } }
2.12游戏结束判断
//砖块下落 block.prototype.down = function(){ //判断数组的第0行,有没有不等于0的项,如果有,游戏结束 game.map.code[0].foreach(function(item){ if(item != 0){ clearinterval(game.timer); alert`游戏结束`; } }); //调用check方法,如果为真就继续row++往下落 if(this.check(this.row+1,this.col)){ this.row++; }else{ //如果为假,表示碰到非0的砖块了,将自己添加到map地图类中 this.adddie(); //同时new一个新的砖块出来 game.block = new block(); //没碰到一次检测是否需要消行 this.remove(); } }
2.13添加音效和美化
<html> <head> <style type="text/css"> *{margin: 0;padding: 0;} body{ height: 100%; background: url(img/bg.jpg) no-repeat 0 0; background-size:cover; } table{ margin:50px auto; background: rgba(0, 0, 0,0.5); } table,tr,td{ border: 1px solid #000; border-collapse:collapse; } td{ width: 20px; height: 20px; } .l{ background: linear-gradient(to right bottom, #800080, #ffc0cb);} .i{ background: linear-gradient(to right bottom, #00f260, #0575e6);} .s{ background: linear-gradient(to right bottom, #fc4a1a, #f7b733);} .z{ background: linear-gradient(to right bottom, #22c1c3, #fdbb2d);} .j{ background: linear-gradient(to right bottom, #ff9966, #ff5e62);} .o{ background: linear-gradient(to right bottom, #7f00ff, #e100ff);} .t{ background: linear-gradient(to right bottom, #c0392b, #8e44ad);} .b{ background:yellow; } .a{ background:yellowgreen; } h1,h2{color:#fff;text-align:center;} </style> </head> <body> <audio src="audio/bg.wav" autoplay id="bg"></audio> <audio src="audio/一键到底.wav" id="godown"></audio> <audio src="audio/旋转.wav" id="rotate"></audio> <audio src="audio/移动.wav" id="move"></audio> <audio src="audio/消行.wav" id="godie"></audio> <h1 id="score"></h1> <h2 id="info"></h2> <div id="app"></div> </body> </html> <script type="text/javascript" src="js/block_json.js"></script> <script type="text/javascript" src="js/game.js"></script> <script type="text/javascript" src="js/block.js"></script> <script type="text/javascript" src="js/map.js"></script> <script type="text/javascript"> document.getelementbyid("bg").volume = 0.2; var game = new game(); </script>
//主循环,游戏定时器 game.prototype.start = function(){ var self = this; this.f = 0; this.score = 0; this.timer = setinterval(function(){ self.f++; document.getelementbyid("info").innerhtml = "帧编号:"+ self.f; document.getelementbyid("score").innerhtml = "分数:"+ self.score; //先清屏,再渲染 self.clearclass(); //渲染小方块 self.block.render(); //每隔20帧,方块下落 self.f % 30 == 0 && self.block.down(); //地图方块渲染 self.map.render(); },20); }
音效:
//旋转 block.prototype.rotate = function(){ document.getelementbyid("rotate").play(); } //一键下落 block.prototype.godown = function(){ document.getelementbyid("godown").play(); } //向左 block.prototype.left = function(){ document.getelementbyid("move").play(); } //向右 block.prototype.right = function(){ document.getelementbyid("move").play(); }
//消行判断、加分 block.prototype.remove = function(){ //判断map类中的code中某一行是不是没有0,如果没有0,就消行 for (var i = 0; i < 20; i++) { if(!game.map.code[i].includes(0)){ game.score++; document.getelementbyid("godie").play(); } }; }
上一篇: jQuery(四)、文档处理