zoukankan      html  css  js  c++  java
  • JS如何做2048(详细)

    在做2048之前,我们首先要了解它的游戏规则,以及运行逻辑

      首先,来看上半部分

      

      除了标题外还有记录每次获得的分数,以及总分数,还有一个重新开始按钮,这个最大分数会保存下来。

      来看页面内容

     页面内容由16个格子组成,格子里面装着数字

    以上就是2048的基础显示部分

    在游戏一开始运行的时候会在格子随机位置生成   2   或  4   这两个随机数,

    代码:

      

    // 随机生成2 或 4
    Random:function(){
    // 生成死循环
    for(;;){
    var r = Math.floor(Math.random()*4);
    var c = Math.floor(Math.random()*4);
    if(this.date[r][c]==0){
    var num = Math.random()>0.5?2:4;
    this.date[r][c]=num;
    break;
    }
    }
    },

    在这个之前,我们要先定义分数,以及游戏运行时和结束时的状态

      

     在获取到随机数后我们要将随机数放到这些格子中去

     这样后,每次刷新页面都会在不同位置生成2或4

    当完成这一步后我们需要知道,2048是用户通过键盘的上下左右来控制方向,然后进行数字的移动和相加的,所以我们要定义四个键盘事件

     定义好了以后,我们写一个向左移动事件

    写之前我们要理清楚逻辑,当向左移动时,先判断当前行有无数字,分两种情况,1:有数字时则判断是否相同,若为相同的数字则相加,若不相同则向最左侧移动;2.无数字时则交换位置,原位置清空置零。

    最后我们还需要判断是否进行了移动,这里提供一个思想,在移动之前拍个照,然后在移动之后再拍个照,若两个不相等则进行移动的操作

    拍照:

      

     左移动:

      

     写了一个移动后其余几个大同小异,逻辑清楚后就很快写出来了

    然后我们要进行一个游戏结束的判断,首先我们有个游戏结束的界面

    这个界面应该经过什么判断出来好呢?

    先判断十六个格子的是否铺满,若铺满了则返回false,结束判断;再就是判断行

    和列,若行或者列等于下一个则无法移动相加,所以由此可以判断游戏为结束状态

    代码:

    最后扩充一下,将游戏打包成移动端;

    移动端的屏幕是通过手指的滑动进行操控的,怎么将2048的上下左右放在手机上判断呢?

    那需要重新定义触发事件:

    手机可以当做一个坐标轴,原点是左上角,然后获取不同手机的分辨率,获取分辨率后,得到

    x和y,通过对x和y的相关判断来重新定义上下左右事件。

    代码:

      

    最后通过打包软件就可以在手机上下载运行了,前提是你的2048格子是由弹性盒子或者百分比写的,不然太小了。

  • 相关阅读:
    linux 网卡配置详情
    linux ftp 添加用户及权限管理
    mysql 权限管理
    linux ftp 安装及相关命令
    linux find 命令
    linux yum 安装及卸载
    linux svn 安装
    cssText方式写入css
    addLoadEvent
    mobile体验效果:增加点击后反馈
  • 原文地址:https://www.cnblogs.com/hzqzwl/p/11915603.html
Copyright © 2011-2022 走看看