zoukankan      html  css  js  c++  java
  • JS做2048

    首先我们了解一下2048这个游戏的原理:

      他由一个4x4二维数组组成,在游戏一开始时候在随机位置随机生成一个2或者4  

      如:

      

      1.每点击一次开始就刷新一次游戏界面;

      2.通过键盘的上下左右四个方向键分别来控制数字的移动;

      3.当移动的时候判断相应的方向有无相同的数字或者0;

        a.若为相同的数字则叠加,讲叠加的和作为分数计算进总分;

        b.若为0,则与其换位,

      4.当页面被铺满时,且每个数字都无法叠加,那么叛定为游戏结束,显示一个结束界面,界面内容有当前分数以及重新开始;

      

      以上是游戏的基本流程,其中还要考虑到每个数字的不同颜色。

      游戏开始页面:

      1.定义二维数组初始化状态,

     

    2.随机在数组中出现2或者4

    3.根据数组中的状态来更新界面:

    4.左移动:

      当向左移时,要查找当前元素右侧第一个不为0的数字,若存在则返回不为0元素的下标,否则返回-1,若返回-1则判断这一行为空。如果当前元素的值为0,返回值不为空,则将返回下标元素的值赋给当前元素,并将返回下标元素的值设为0,继续循环判定;若当前元素值 == 返回下标元素的值,则将当前元素的值*=2,且将返回元素的值设置为0;若返回-1则跳出循环

      5.接着实现所有行的左移动,一词循环所有的行,实现元素的左移动

     

    右移动可以根据此逻辑实现;而上下的移动因为移动方向不一样,他们是根据列的变化来进行判定的,不过只要写出来第一个移动,剩下的就很好办。

    6.接下来定义键盘事件(通过上下左右来控制数字的变化)

    上下左右是根据Unicode码来分析控制

     7.最后判断游戏是否结束

      我之前的想法是判定整个数组是否被铺满且每个相邻的数都不相等,具备这两个情况说明游戏结束,且放在键盘的循环之中,效果是每移动一次就进行这样的判断,

    但是最后做出来的结果是动一下就结束,后来发现问题是break带来的影响,最后没有继续这个想法。

    而是...

    先给游戏定义一个状态:

    判断:当state == GAMEONER时表示游戏结束,那么我隐藏的结束界面就会显示,若不等于0则结束界面继续隐藏

    好,思路确定后先确定如何判断游戏结束:

    这个思路是遍历每个数组之中的每个数,若数的周围不等于自身且不为0则false,

    否则true

    这样就可以确定游戏是否结束

    最后将结束的页面显示出来:

     附带2048文件,自行去文件下载,仅供学习

    https://i.cnblogs.com/Files.aspx

      

  • 相关阅读:
    第二阶段冲刺站立会议报告
    09软件工程读后感之三
    08软件工程读后感之二
    07软件工程读后感之一
    一个整数数组中最大字数组二
    返回一个二维数组最大联通子数组的和
    项目阶段总结
    大道至简阅读笔记之三
    大道至简阅读笔记二
    课堂设计
  • 原文地址:https://www.cnblogs.com/hzqzwl/p/11331890.html
Copyright © 2011-2022 走看看