2048网页版小游戏

简介: 2048网页版小游戏主要实现的功能:1.初始化的时候随机生成两个为2的格子。注意两个格子别生成到一个格子上去了。     2.方块的移动和合并。方块移动的动画。

2048网页版小游戏


主要实现的功能:

1.初始化的时候随机生成两个为2的格子。注意两个格子别生成到一个格子上去了。     

2.方块的移动和合并。方块移动的动画。 根据移动后的值。改变方块的颜色。注意操作的顺序。   颜色主要是添加和移除 2到2048所代表的颜色的class。 位置也添加和移除对应位置所代表的类。  动画则是用css3的过渡。0.2s。

3.判断某个方向上不能移动,不能出现新的格子。

4.随机在空白处出现下一块。 

5.判输。 需要满足条件 1.没有空格子。2.横方向上没有相邻且相等的方块。3.纵方向上没有相邻且相等的方块。  任何一项不满足都没输。 

6.判赢。 某个格子的值达到2048。

7.分数。任意两个格子合并的时候,分数增加合并之后方块的值。

8.包裹div的大小任意设置,方块中的数字始终垂直居中。

9.核心算法是判断每个格子移动到什么位置。应不应该合并。

   我这里使用的方法是,循环到每一个格子。  然后这个格子的值,依次去跟它移动方向上的下一位做比较。下一位是空,可以继续跟下一位比较,直到比较到下一位不是空且跟当前比较值相等或不相等或遇到比较的边界(之前有合并的值对应的格子或移动方向上最后一格),判断是移动并合并还是只移动,最终的移动方位。 


如果触发向左移动

  遍历所有非空元素

    如果当前元素在第一个位置

          不动

    如果当前元素不在第一个位置

      如果当前元素左侧是空元素   

              向左移动

      如果当前元素左侧是非空元素   

        如果左侧元素和当前元素的内容不同   

                  不动

        如果左侧元素和当前元素的内容相同   

                  向左合并

如果触发向右移动

  遍历所有非空元素

    如果当前元素在最后一个位置   

          不动

    如果当前元素不在最后一个位置

      如果当前元素右侧是空元素 

              向右移动

      如果当前元素右侧是非空元素   

        如果右侧元素和当前元素的内容不同   

                  不动

        如果右侧元素和当前元素的内容相同   

                  向右合并


获取所有元素

获取所有非空元素

如果所有元素的个数 == 所有非空元素的个数

循环遍历所有非空元素

上面元素存在 && (当前元素的内容 == 上面元素的内容)  return

下面元素存在 && (当前元素的内容 == 下面元素的内容)  return

左边元素存在 && (当前元素的内容 == 左边元素的内容)  return

右边元素存在 && (当前元素的内容 == 右边元素的内容)  return   

以上条件都不满足,Game Over!

我的github地址 有源代码

目录
相关文章
|
6月前
|
Java Android开发
大鱼吃小鱼【小游戏】
大鱼吃小鱼【小游戏】
133 0
|
11天前
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
31 5
|
Python
实现一个2048小游戏
要实现一个2048小游戏,你需要使用Python编程语言和图形用户界面(GUI)库。下面是一个使用Tkinter库来创建2048小游戏的基本步骤
481 3
|
算法
2048小游戏(变态版哦)
2048小游戏(变态版哦)
237 0
10分钟制作一个反弹球小游戏(视频版)
当然它们其实各有利弊,阅读文字效率更高,但是也要求你有更多的注意力和理解力。音视频传递信息效率慢,但是它们更复活人类学习的直觉习惯,通过听觉和视觉来进行模仿。 虽然我个人更喜欢文字,但是我仍然会继续录制视频教程,因为很多内容并不是只给我自己看的,是给很多人看的,而大多数人更倾向于观看视频。
111 0
|
小程序
如何制作一个塔防小游戏(三)
嗨!大家好,我是小蚂蚁。今天我们继续分享制作一个塔防小游戏的第三节,如何创建不同类型的敌人,以及如何利用表格来编辑数据以及创建敌人。
135 0
|
JavaScript C语言 Python
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇
159 0
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇
|
算法 Java C++
vc++ 24点小游戏
vc++ 24点小游戏
vc++ 24点小游戏
|
前端开发
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
413 0
仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS
uiu
|
JavaScript 前端开发
制作别踩白块网页小游戏
制作别踩白块网页小游戏
uiu
150 0
制作别踩白块网页小游戏