2048小游戏分析

最新推荐文章于 2021-06-08 11:21:25 发布
最新推荐文章于 2021-06-08 11:21:25 发布
阅读量665 收藏 3
点赞数
分类专栏： js小功能 文章标签： 2048 js js小游戏 js小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35176916/article/details/86351530
版权

这两天写了个2048小游戏先看效果图：

 

现在分享一下它的逻辑：

首先要关注的就是它的页面结构：

容器中放置16个div用于，初始页背景的16个格子，注意class命名方式，这样命名可以用函数方便的进行布局,和其他功能操作。

  <div class="container">
            <div class="box--0-0"></div>
            <div class="box--0-1"></div>
            <div class="box--0-2"></div>
            <div class="box--0-3"></div>
            <div class="box--1-0"></div>
            <div class="box--1-1"></div>
            <div class="box--1-2"></div>
            <div class="box--1-3"></div>
            <div class="box--2-0"></div>
            <div class="box--2-1"></div>
            <div class="box--2-2"></div>
            <div class="box--2-3"></div>
            <div class="box--3-0"></div>
            <div class="box--3-1"></div>
            <div class="box--3-2"></div>
            <div class="box--3-3"></div>
        </div>

其次 数字所在的div并不是这16个div，而是在通过方向键移动的过程中另外动态生成的。这里我先用一个值为0的4 *4的二维数组来标记初始的16个div,然后移动过程中生成的数字根据坐标放到这个数组的相应位置。而动态div就是根据这个数组的值来生成的，值不为0，则生成div，值为0，相应位置不生成div

   //1:二维数组生成函数
       function getArr () {
           var arr =[];
           for( var i = 0; i < 4; i++){
                 arr[i]=[];
               for( var j = 0; j < 4; j++){
                 arr[i][j]=0
               }
           }
           return arr;
       }

  // 2: 创建16个容纳数字的方格函数
       function getBoxs(arr1) {
           //重新开始先移除包含数字的格子
         if(getChild(parents)>16){
            removeClassEle('news');
         }
        for( var i = 0; i < arr1.length; i++){
               for( var j = 0; j < arr1[0].length; j++){
                  if(arr1[i][j]===0){
                      continue;
                  }else{
                    var divs = document.createElement('div');
                    divs.setAttribute('id','news--'+i+'-'+j);
                    divs.setAttribute('class','news');
                    divs.style.left=20+j*120+'px';
                    divs.style.top=20+i*120+'px';
                    divs.innerText=arr1[i][j]
                    parents.appendChild(divs);
                  }
               }
           }
       }

第三点就是上下左右移动的逻辑

以向左移动为例：

向左移动=>首先判断能否向左移动（条件：向左移动列的左侧有空间或者移动列与它相邻的左侧列值相等 xx24||x224）=>移动完成改变之前定义的数组的值，然后再重新根据该数组动态布局，=>检测数组的剩余空间，然后在剩余的空间位置中随机添加一个值=》在根据数组动态布局

 //判断能否向左移动，可以向左移动的条件，1:存在数字的方格左侧不存在数字，2：存在数字但两者相同。x 1 xx |  1,1 xx | 1 x 1 x 
    function canLeft(arr){
        //我通过arr2来判断
     for(var i=0;i<arr.length;i++){
         //这里j等于1是因为第一列没必要判断，不用左移了
         for(var j=1;j<arr[0].length;j++){
                 for(var k=j-1; k>=0;k--){   //循环判断数字左侧的格子
                     if(arr[i][k]===0){
                         arr[i][k]=arr[i][k+1];
                         arr[i][k+1]=0;
                     }
                     else if(arr[i][k]===arr[i][k+1]){
                         arr[i][k]=arr[i][k]*2;
                         arr[i][k+1]=0;
                     }
                 }
             
         }
     }
     return arr
    }

//随机生成一个Box
function productRandomBox (arr){
    //首先盘算是否有空间
    var arr3 =[]; //放剩余空间

    var objs;
  for (var i=0;i<arr.length;i++){
      for (var j=0;j<arr[0].length;j++){
          if(arr[i][j]===0){
             arr3.push({"x":i,"y":j});
          }
      }
  }
      if(arr3.length>0){  //随机生成box的逻辑
         objs=Math.floor(Math.random()*(arr3.length));
            arr[arr3[objs].x][arr3[objs].y]=getNum()
            return arr
            
      }else{
          alert('GG思密达')
      }
 }

//左移事件，首先判断能否左移，然后随机生成数组,左移后，重新设定样式
    function goLeft (){
            getBoxs(canLeft(arr2));
           
            getBoxs( productRandomBox(arr2));
         
            getColor();
    }

主要逻辑就是这些，写完后发现还是很简单的，下面附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2048哈哈</title>
    <style>
    .parent{ text-align:center;}
    .restart{ cursor: pointer;  background: bisque; width: 100px; height: 30px; line-height: 30px; margin: auto; border-radius: 5px;}
    div[class|='box']{ width: 100px; height: 100px; background: #ccc0b3; position: absolute;}
    .news{ width: 100px; height: 100px; background-color: rgb(238, 228, 218); position: absolute; text-align:center; line-height: 100px;}
    .container { background:#bbada0; width: 500px; height: 500px; margin: 20px auto; position: relative;}
    </style>
</head>
<body>
    <div class="parent">
        <h1>唯美JS2048</h1>
        <p class="restart">new game</p>
        <span><strong>score:</strong><span class="score">0</span></span>
        <div class="container">
            <div class="box--0-0"></div>
            <div class="box--0-1"></div>
            <div class="box--0-2"></div>
            <div class="box--0-3"></div>
            <div class="box--1-0"></div>
            <div class="box--1-1"></div>
            <div class="box--1-2"></div>
            <div class="box--1-3"></div>
            <div class="box--2-0"></div>
            <div class="box--2-1"></div>
            <div class="box--2-2"></div>
            <div class="box--2-3"></div>
            <div class="box--3-0"></div>
            <div class="box--3-1"></div>
            <div class="box--3-2"></div>
            <div class="box--3-3"></div>
        </div>
    </div>
    <script>
    window.onload=function (){
    var games = document.getElementsByClassName('restart')[0];
        //设置16个方格样式函数
        function setStyle (box) {
            for (var i = 0; i < 4; i++){
                for (var j = 0; j < 4; j++){
                    var el = document.getElementsByClassName(box+'--'+i+'-'+j)[0];
                    el.style.left=20+j*120+'px';
                    el.style.top=20+i*120+'px';
                }
            }
        };
        setStyle('box');

       //接着创建另一组16个方格容纳数字---想想，当某位置数字不存在时，容纳数字的方格也不应该存在，所以应该设置一标记来判断数字是否存在，
       //例如：当我们初始化开始游戏时只有两个位置有方格，那就意味着只能创建两个方格
       //  我们用一个数组标记,初始值都为0；当出现数字，就把值赋给它，然后通过该数组判断。


        //1:二维数组生成函数
       function getArr () {
           var arr =[];
           for( var i = 0; i < 4; i++){
                 arr[i]=[];
               for( var j = 0; j < 4; j++){
                 arr[i][j]=0
               }
           }
           return arr;
       }
       //标记
       var arr1=getArr();
       var parents = document.getElementsByClassName('container')[0];
       // 2: 创建16个容纳数字的方格函数
       function getBoxs(arr1) {
           //重新开始先移除包含数字的格子
         if(getChild(parents)>16){
            removeClassEle('news');
         }
        for( var i = 0; i < arr1.length; i++){
               for( var j = 0; j < arr1[0].length; j++){
                  if(arr1[i][j]===0){
                      continue;
                  }else{
                    var divs = document.createElement('div');
                    divs.setAttribute('id','news--'+i+'-'+j);
                    divs.setAttribute('class','news');
                    divs.style.left=20+j*120+'px';
                    divs.style.top=20+i*120+'px';
                    divs.innerText=arr1[i][j]
                    parents.appendChild(divs);
                  }
               }
           }
       }
        //点击new game 随机位置生成数字赋予arr1
       function randoms(arr) {
         var random1 =  Math.floor(Math.random()*4);
         var random3 =  Math.floor(Math.random()*4);
         var random4 =  Math.floor(Math.random()*4);
         var random5 =  Math.floor(Math.random()*4);
         var random2 = Math.random()>0.5?2:4;
         arr[random1][random3]=random2;
         arr[random4][random5]=random2;
         return arr
       }
       var arr2=getArr()
       //new game点击事件
     games.addEventListener('click',function(){
        
          arr2 =randoms(arrval(arr1))
         //生成两个随机的包含数字的box
        getBoxs(arr2);
        
     })
   // 清除数组数据的函数
   function arrval(arr){
    for( var i = 0; i < arr.length; i++){
               for( var j = 0; j < arr[0].length; j++){
                 arr[i][j]=0
               }
           }
           return arr
    }
    //清除指定class的元素集合
    function removeClassEle(cls){
        var arr = document.getElementsByClassName(cls);
        var c=arr.length;
        var parents = arr[0].parentNode;
        for(var i = 0; i<c; i++){
            parents.removeChild(arr[0]);  //这里有些不明白，为什么移除子元素后arr长度会变呢？arr不是之前读取的吗
        }
    }
    //获取元素的所有子元素的长度
    function getChild(pa) {
        var arr=[];
        var child = pa.childNodes;
        for ( var i=0; i<child.length;i++){
            if(child[i].nodeType===1){
                arr.push(child[i])
            }
        }
        return arr.length;
    }
    //判断能否向左移动，可以向左移动的条件，1:存在数字的方格左侧不存在数字，2：存在数字但两者相同。x 1 xx |  1,1 xx | 1 x 1 x 
    function canLeft(arr){
        //我通过arr2来判断
     for(var i=0;i<arr.length;i++){
         //这里j等于1是因为第一列没必要判断，不用左移了
         for(var j=1;j<arr[0].length;j++){
                 for(var k=j-1; k>=0;k--){   //循环判断数字左侧的格子
                     if(arr[i][k]===0){
                         arr[i][k]=arr[i][k+1];
                         arr[i][k+1]=0;
                     }
                     else if(arr[i][k]===arr[i][k+1]){
                         arr[i][k]=arr[i][k]*2;
                         arr[i][k+1]=0;
                     }
                 }
             
         }
     }
     return arr
    }
    function canRight(arr){
       for(var i=0;i<arr.length;i++){
           for (var j=0;j<arr[0].length-1;j++){
                for(var k=j+1;k<arr[0].length;k++){
                   if(arr[i][k]===0){
                       arr[i][k]=arr[i][k-1];
                       arr[i][k-1]=0;
                   } else if(arr[i][k]===arr[i][k-1]){
                       arr[i][k]=arr[i][k]*2;
                       arr[i][k-1]=0;
                   }
                }
           }
       }
       return arr;
    }
    function canUp(arr){
        for(var i=1;i<arr.length;i++){
            for(var j=0;j<arr[0].length;j++){
                for(var k=i-1; k>=0;k--){
                    if(arr[k][j]===0){
                        arr[k][j]=arr[k+1][j];
                        arr[k+1][j]=0;
                    }else if(arr[k][j]===arr[k+1][j]){
                        arr[k][j]=arr[k][j]*2;
                        arr[k+1][j]=0;
                    }
                }
            }
        }
        return arr;
    }
    function canDown(arr){
        for(var i=0;i<arr.length-1;i++){
            for(var j=0;j<arr[0].length;j++){
                for(var k=i+1; k<arr.length;k++){
                    if(arr[k][j]===0){
                        arr[k][j]=arr[k-1][j];
                        arr[k-1][j]=0;
                    }else if(arr[k][j]===arr[k-1][j]){
                        arr[k][j]=arr[k][j]*2;
                        arr[k-1][j]=0;
                    }
                }
            }
        }
        return arr;
    }
    //左移事件，首先判断能否左移，然后随机生成数组,左移后，重新设定样式
    function goLeft (){
            getBoxs(canLeft(arr2));
           
            getBoxs( productRandomBox(arr2));
         
            getColor();
    }
    //右移事件
    function goRight() {
        getBoxs(canRight(arr2));
           getBoxs( productRandomBox(arr2));
           getColor();
    }
    //上移事件
    function goUp() {
        getBoxs(canUp(arr2));
           getBoxs( productRandomBox(arr2));
           getColor();
    }
    //下移事件
    function goDowm (){
        getBoxs(canDown(arr2));
           getBoxs( productRandomBox(arr2));
           getColor();
    }
    //键盘绑定事件
    document.addEventListener('keydown',function(e){
        var codes = window.event ? e.keyCode: e.which;
        switch (codes) {
            case 37 : 
            goLeft();
            break;
            case 38:
            goUp();
            break;
            case 39 :
            goRight();
            break;
            case 40:
            goDowm();
            break;
            default :
          
        }
    })
//随机生成一个Box
function productRandomBox (arr){
    //首先盘算是否有空间
    var arr3 =[]; //放剩余空间

    var objs;
  for (var i=0;i<arr.length;i++){
      for (var j=0;j<arr[0].length;j++){
          if(arr[i][j]===0){
             arr3.push({"x":i,"y":j});
          }
      }
  }
      if(arr3.length>0){  //随机生成box的逻辑
         objs=Math.floor(Math.random()*(arr3.length));
            arr[arr3[objs].x][arr3[objs].y]=getNum()
            return arr
            
      }else{
          alert('GG思密达')
      }
 }
 //随机生成一个2或者4的数字
 function getNum(){
     return Math.random()>0.5 ? 2 : 4;
 }
}
function setColor(number) {
    switch (number) {
    case 2:
        return "#eee4da";
        break;
    case 4:
        return "#eee4da";
        break;
    case 8:
        return "#f26179";
        break;
    case 16:
        return "#f59563";
        break;
    case 32:
        return "#f67c5f";
        break;
    case 64:
        return "#f65e36";
        break;
    case 128:
        return "#edcf72";
        break;
    case 256:
        return "#edcc61";
        break;
    case 512:
        return "#9c0";
        break;
    case 1024:
        return "#3365a5";
        break;
    case 2048:
        return "#09c";
        break;
    case 4096:
        return "#a6bc";
        break;
    case 8192:
        return "#93c";
        break;
    }
    return "black";
}
//设置颜色的函数
function getColor (){
 var arr = document.getElementsByClassName('news');
  for(var i=0;i<arr.length;i++){
       arr[i].style.backgroundColor=setColor(parseInt(arr[i].innerText));
  }
}
    </script>
</body>
</html>

 

yaxi_yaxi_yaxi
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2048游戏分析、讨论与扩展 - Part I - 游戏分析与讨论
Weiran Liu的渣技术小专栏
05-06 6862
2048这个游戏从刚出开始就风靡整个世界。本技术博客的目的是想对2048涉及到相关的所有问题进行细致的分析与讨论，得到一些大家能够接受并且理解的结果。在这基础上，扩展2048的游戏性，使其变得更好玩，更有意思，更有耐玩性。本技术博客涵盖了有关2048的策略，理论分析与讨论，代码简单剖析，以及代码扩展的思路。个人认为应该是至今为止最全的2048游戏相关分析博客了。如有任何问题，有意思的讨论，以及想要交流的内容，欢迎大家留言~ 本篇为Part I，针对2048中各个问题进行分析与讨论。
一个专业的程序原该养成的好习惯（分析能力）《2048》游戏分析
qq_42902470的博客
12-19 765
一、游戏分析 《2048》是一款比较流行的数字游戏，其作者Gabriele Cirulli (加布里埃尔斯路理)目前居住在意大利。他在2014年3月最先将 2048 的开源版本放到 Github 上，由此引发了风靡全球的狂潮，而其当时年仅20岁。 这款游戏的玩法很简单，每次可以选择上下左右移动，每移动一次，所有的数字方块都会往移动的方向靠拢，系统也会在空白的地方乱数出现一个数字方块，相同数字的方块...
2048小游戏解析
YZBPXX
11-30 370
# -*- coding: utf-8 -*- import curses from random import randrange, choice # generate and place new tile from collections import defaultdict letter_codes = [ord(ch) for ch in 'WASDRQwasdrq'] # prin...
kivy 021 2048游戏解析
weixin_33595571的博客
05-18 227
# -*- coding: utf-8 -*- import curses from random import randrange, choice # generate and place new tile from collections import defaultdict #它以一个字符（长度为1的字符串）作为参数，返回对应的 ASCII 数值 letter_codes = [ord(ch) for ch in 'WASDRQwasdrq'] # print(letter_codes)所有的有
小游戏数据库分析
12-08
这是关于数据库和小游戏之间的分析（主要是数据库部分），这是基础部分.
2048分析
weixin_45741841的博客
08-17 452
Android开发之2048小游戏游戏逻辑源码 一、游戏简介   2048小游戏类似于开心消消乐，但是相同的数字会相加而不是相消,主要实现逻辑代码如下，这里cardMap是一个4*4的二维数组，游戏逻辑主要通过对这个二维数组的运算来实现。 ##二、逻辑代码 private void rightMove(){ boolean isAdd = false; boolean isplay = false; for(int row=0;row<4;row++){ for(int column =.
JAVA小游戏2048需求分析.pdf
09-27
JAVA小游戏2048需求分析.pdf
2048游戏详解
weixin_30484739的博客
08-01 287
　　由于最近在百度IFE看到有2048任务，所以昨天兴趣一来自己也做了一个。大概花了五个小时完成，不过不足之处是操作时没有滑动效果。昨晚新增了手机版本，流畅度还可以，不过由于没有滑动，游戏过程显得很突兀啊，且容我下次再加上吧。下面先讲讲这个游戏怎么实现，这是个人想的方法。不足之处，多多指教啊。 　　首先我在做这个小游戏的时候我想到了两种方法：第一种方法就是本例用到的方法，利用方向键操作，只改变相...
js实现的2048游戏
09-06
js实现的2048小游戏。供初学者参考，代码有注释。供参考
python2048小游戏需求分析_Python实现小游戏--2048
weixin_42498003的博客
02-03 788
开篇语今天是笔者奶奶生日，昨天为此准备了不少事情，也因此花费了很多时间，今天上午接待客人，下午送我年迈的姑奶奶回家。等我抽出身来看代码已经是三点的事情了。再加上还有个“问题xx”要教导，真正开始认真看代码，已经是四点咯。然后看到五点多，爸爸叫我吃饭，我去，还没跑步，所以又是一番鸡飞狗跳。跑完回来一边压腿，一边看家人吃饭，也是醉醉的。虽然有点跑题，但是我还是要拿我的跑步的图来放一放~~~这是定向越野...
2048游戏的逻辑
u010345160的专栏
01-06 2533
今天从极客学院学习了一下Android项目开发实战-2048游戏，写下学习笔记。 2048游戏是一个4*4的方格布局，里面随机出现2的倍数如果同一行两个挨着的方格数字相同可相加的这么一个游戏。 首先先建立一个4*4的方格，用的gridlayout，设置4列，初始化16个方格加到view里， private void addCards(int cardWidth, int cardHeight
2048小程序的分析总结
qq_43278522的博客
12-01 2129
昨天写了一个2048小程序，玩起来没有什么明显的bug。今天及时的做一个分析。 首先2048的小游戏逻辑十分清晰。可以把其中要实现的要点归为以下几点： 1.需要一个4x4的棋盘。并且需要展示它的函数。 2.需要一个随机坐标的产生，该坐标在棋盘上的空闲位置产生。 3.需要四个可以操作数据的函数：up(),down(),left(),right(),操作内容为数据合并。 4.需要一个可以检查棋盘的函数...
html2048游戏算法逻辑,2048小游戏算法解析
weixin_31921223的博客
06-08 781
数组转换为了方便理解，我们使用二维数组来进行分析 2048 的算法逻辑。首先我们简单的了解一下游戏玩法：简言之，就是通过上、下、左、右移动，使相邻的相同元素进行合并，进而数字相加得到 2048的结果的游戏。(如果费解的话，可以下载一个2048的游戏体验一下)注：这里的相邻，指忽略掉两个元素中间的空元素的情况。(下图所示都是相邻情况)相邻说明好了，我们来分析一下移动的逻辑处理：以向右移动为例吧：那我...
2048小游戏
weixin_34208185的博客
04-16 95
需求分析：NABCD N（Need，需求） 生活在21世纪的我们已经进入电子时代，比如平板、笔记本、手机等等。而随着时代的进步，生活学习压力也在不断加大，而越来越多的人都会热衷于玩手机，当你感到无聊的时候，可以上上网，看看新闻，累了之后可以玩玩小游戏缓解一下，所以我们设计了这款2048的小游戏，既开发智力，又缓解疲劳。 A（Approach，做法） 我们的小游戏是基...
2048基本小游戏
weixin_30325793的博客
04-16 340
需求分析NABCD N（Need，需求） 在进入21世纪的我们已经进入电子时代，比如平板、笔记本、手机、电脑等等。随着时代的进步，生活学习压力也在不断加大，而越来越多的人都会热衷于玩手机，当你感到无聊的时候，可以上上网，看看新闻，累了之后可以玩玩小游戏缓解一下，所以我们设计了这款2048的小游戏，既开发智力，又缓解疲劳。 A（Approach，做法） ...
JavaScript--2048游戏二（）
带翅膀的猫的博客
05-26 4096
2048游戏项目第二天在上次的讲解中完成了游戏的总体界面的设计，本次将主要讲解游戏的实现逻辑和代码的实现。 在开始之前先完成一个上次遗漏的小小的界面–GameOver界面。 完成界面如下： 界面分析： 代码如下：<!--HTML代码--> <!--GameOver界面--> <div id="gameOver"> <div id="gameov
c语言2048小游戏的问题分析
最新发布
06-19
2048是一个数字拼图游戏，玩家通过滑动将相同数字的方块合并，目标是达到2048这个数值。在C语言中实现2048游戏，问题分析可能涉及以下几个方面： 1. **游戏逻辑**：游戏的核心是处理方块的移动和合并操作。需要检查玩家每次操作后是否有新的可以合并的方块，并更新游戏状态。这需要使用数组或二维数组来表示游戏板，以及相应的遍历和比较算法。 2. **用户界面**：C语言本身没有图形界面，通常会用到一些Curses库或者命令行接口。需要考虑如何清晰地显示游戏进度、得分等信息。 3. **输入验证**：处理用户的键盘输入，确保每次操作符合规则，比如只能在空格、上、下、左、右四个方向滑动。 4. **错误处理**：游戏可能会遇到边界条件，如游戏板满、操作无效等，需要设置合适的错误处理机制，避免程序崩溃。 5. **优化算法**：在大规模游戏中，特别是当游戏板接近满时，高效的搜索算法（如A*搜索）能帮助提高性能，但这也带来了复杂性。 6. **内存管理**：C语言没有垃圾回收机制，开发者需要手动管理内存，避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值