• 用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设计模式,希望能用于该游戏中,将代码完善,提高性能,最后希望丰富该游戏的基本功能,积分,不同模式,移动时有滑动效果,手机版。有兴趣的一起捣鼓哦 

         

          

                   

    在程序媛的路上,越走越用劲儿:)
  • 相关阅读:
    【剑指offer】一些简单题05 06
    【剑指offer】11 旋转数组的最小数字
    【剑指offer】10 斐波那契数列
    【剑指offer】 03 数组中重复的数字
    【剑指Offer】 04 二维数组中的查找
    HPCC复习部份
    软工提纲复习
    软件工程复习
    Scala
    [转]对TCP/IP网络协议的深入浅出归纳
  • 原文地址:https://www.cnblogs.com/AliceX-J/p/5003640.html
Copyright © 2020-2023  润新知