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地址 有源代码

目录
相关文章
|
2月前
|
域名解析
新手怎样制作网页?
现在网页制作的方法多种多样,既有复杂,又有简单,但是总的概括起来,制作网站方法不外乎两个,一种是传统编程网站建设,另外一种是使用最新的自助建站系统建站。如果是小白想自己制作网页,最简单的方法就是选择成熟的自助建站系统建站,因为这种建站方式不单能节省建站成本,还会节省建站的时间。
|
Python
实现一个2048小游戏
要实现一个2048小游戏,你需要使用Python编程语言和图形用户界面(GUI)库。下面是一个使用Tkinter库来创建2048小游戏的基本步骤
479 3
|
6月前
|
安全 Windows
在线网页版扫雷游戏HTML源码
在线网页版扫雷游戏HTML源码
217 1
在线网页版扫雷游戏HTML源码
|
6月前
如何制作一个微信音乐小游戏
如何制作一个微信音乐小游戏
183 0
|
算法
2048小游戏(变态版哦)
2048小游戏(变态版哦)
234 0
10分钟制作一个反弹球小游戏(视频版)
当然它们其实各有利弊,阅读文字效率更高,但是也要求你有更多的注意力和理解力。音视频传递信息效率慢,但是它们更复活人类学习的直觉习惯,通过听觉和视觉来进行模仿。 虽然我个人更喜欢文字,但是我仍然会继续录制视频教程,因为很多内容并不是只给我自己看的,是给很多人看的,而大多数人更倾向于观看视频。
110 0
|
小程序
如何制作一个塔防小游戏(三)
嗨!大家好,我是小蚂蚁。今天我们继续分享制作一个塔防小游戏的第三节,如何创建不同类型的敌人,以及如何利用表格来编辑数据以及创建敌人。
134 0
做个不一样的小游戏
,我发布了“微信小游戏实战系列”的第一篇文章,也是我的第一个小游戏正式开始制作的时间,之前它只是一个脑袋中的想法,大概类似于这样:我能不能试着做这样的一系列的游戏呢?它们有着经典的玩法,不会过时,仍然有着很多的受众,如果我把一个经典的小游戏做成一个精品的小游戏,是否是有价值的,甚至能产生商业价值?
156 0
|
JavaScript C语言 Python
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇
159 0
好玩的小游戏系列 (一)基于html+js 原生贪吃蛇

相关实验场景

更多