用javascript制作2048游戏的思路(原创若 转载请附上本链接)
一、项目已上传至github,地址:https://github.com/forjuan/2048game
二、学习了javascript基础后,想要捣鼓点东西做,做了一个自己以前很爱玩的2048游戏。经过初期的思路设计手工画了设计思路图。手工图有空在用图画出来。
实现2048的功能:1、核心:上下左右移动。
2、游戏开始,游戏结束。
3、外观实现。
4、积分(暂时没实现)
把问题分解:1.首要难点移动,将移动进行分解,分为上下左右移动;
2.用什么记录位置,怎样记录每个方块的值,边界,相同值相加?
3.我选择用一个二维数组记录位置相关信息,包括,left,top值(相对于页面的位置),用一个boolean类型value值记录该位置上是否有值。loca[i][i] = {left:***,top:***,value:false}
4.怎么记录小方块,小方块与位置间的关系?我用的是div,每个div是个小方块(样式不在此说明),每个div有x,y值用于储存div的位置信息,value:小方块的值,change:每次移动小方块是否已经相加过(这是后来出现bug想到的)。
5.先向左移动,左移每个小方块向左边移动,左边可能有两种情况:a.无值,
b.有值,有值可能有两种情况,
(1).值相同,
(2).值不同。
6.哪些值需要移动,哪些值不需要移动: 根据5知:不移动:与左边相邻第一个值不相等,或者是到左边界。其他情况都要移动
7.向左移动,则每行的每列的循环从左往右对每个方块执行移动操作(判断是否需要移动,若移动操作)
8.若要移动操作,怎么移动,(我选择用一个函数封装找到这个小方块应该到达的位置,如果它的左边第一个有值而且是相等的,则小方块的值是原来的2倍,它的位置就是左边第一有值得位置,若值不等则目标位置是左边第一有值的值的后一个位置,若它左边都无值,它的目标位置是最左边)
9.基本向左思路就是这样了。
三、编写过程中发现的bug
1.在移动过后,有的小方块,移动乱了位置,无法显示,解决bug比查找bug更简单,怎么查找bug呢,我用的排除法,用浏览器调试工具找到不见的小方块在哪里被隐藏,然后思考它前一步,分析出现这个问题的原因,再单独处理确认错误原因,最后解决问题,我的问题有我用了原生的运动的完美框架,到指定位置会有时间延迟,后面设置的位置信息先执行完,它才运动完,导致后面的设置没用。
2.小方块只有16个,所以一个小方块占用了位置,原来位置上的小方块与它交换位置。
四、版本迭代中
现在我的这个小游戏只是实现了,初步将move(top,left,down,right)封装在同一函数中,同一功能的函数也已封装,为了复用,提高性能,现在正在学习js设计模式,希望能用于该游戏中,将代码完善,提高性能,最后希望丰富该游戏的基本功能,积分,不同模式,移动时有滑动效果,手机版。有兴趣的一起捣鼓哦