之前在网上看到《蓝色拼图》这款小游戏,作者是用jquery写的。于是便考虑能不能用vue.js优雅简单的编写出来呢?
之前在网上看到《蓝色拼图》这款小游戏,作者是用jquery写的。于是便考虑能不能用vue.js优雅简单的编写出来呢?
Later equals never!说干就干。首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推
该图为第三关3*3的方块。点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了。
现在规则清楚了,开动吧!
/*style*/ .game_bg{ background: #333; width: 600px; height: 600px; margin: 30px auto; border-radius: 3px; } .card{ background: #E6AB5E; float: left; margin: 6px 0 0 6px; } .blueCard{ background: #5C90FF; }
<!--html--> <div id="game"> <div class='game_bg'> <div></div> </div> </div>
/*js*/var vm=ew Vue({ el:'#game', data:{ margin:6,//每张卡片间的距离 level:1,//游戏等级 cards:[],//卡片 size:0,//每张卡片的尺寸 }, methods:{}, });
卡片数为等级的平方,而每张卡片有黄色和蓝色两种颜色,并且随着游戏难度的升级,方块间的距离也在变小。所以在vue构造函数中添加初始化游戏方法