2048小游戏——简简单单利用js做出自己的游戏！！

最新推荐文章于 2022-01-02 09:07:44 发布
原创 最新推荐文章于 2022-01-02 09:07:44 发布 · 1.6k 阅读 · 16 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
结构清晰

当前文章被收录于：

结构清晰
7 篇文章 0 人学习
订阅专栏 查看详情
一学就会

当前文章被收录于：

一学就会
2 篇文章 0 人学习
订阅专栏 查看详情
制作游戏

当前文章被收录于：

制作游戏
1 篇文章 0 人学习
订阅专栏 查看详情
这篇博客教你如何利用JavaScript轻松创建属于自己的2048小游戏。从游戏逻辑梳理、CSS样式设计到JS代码实现，包括游戏界面设计、开始与结束状态判断、视图更新、操作按键响应等关键步骤，让你一步步构建出完整的游戏功能。

博主教你轻轻松松利用js技巧 写出属于自己的2048小游戏！！

在这里插入图片描述

自己做出实现在页面中

想必大家都听说过甚至玩过2048这款小游戏 博主无聊时也会拿起手机或者在电脑上玩上几把 但是大家有没有想过自己花费点时间做出一个2048游戏 会不会非常有成就感呢？
在这里插入图片描述
废话不多说 开始

一.首先大家要整理一下逻辑。

首先大家在打开电脑，准备敲代码写出游戏的时候，一定要先思考，该游戏的每一步应该用什么样的逻辑判断去表达，包括游戏的输赢判断条件是什么，有没有理清楚，建议没玩过的宝贝们可以下载一个去玩玩，是非常有必要的。

1>游戏的界面应该怎么样用css去设计更为美观

每个人都有自己的审美观 在做到保证基本样式的情况下 可以添加一些自己的元素进去

2>游戏的开始与结束：

需要添加：游戏进行状态（status） 游戏结束状态（gameover） 游戏运行状态 （gamerunning）

然后分别写出游戏开始的代码块封装成一个函数 命名为“start游戏开始函数”。然后写出游戏在什么状态下会结束，写出一个总的判断条件封装成“gameover游戏结束函数”。

3>游戏的视图更新 分数，样式，数据

需要添加：游戏得分属性（score） 游戏数据存储数组[data]

然后写出游戏进行时视图的更新.样式的变化.数据的变化.分数的变化 封装成一个函数用来进行调用。

>特别重要的操作按钮键

创建键盘上下左右键按下事件绑定各自的功能
按下左键 数字移动功能封装成一个函数
按下左键 数字进行相加的功能以及判定封装成两个函数

为了保证游戏的完整性 所有的封装函数功能都是相辅相成的 所以每一个都是不可缺少的

二 在HTML文档中利用css写出游戏基本样式

因为布局比较简单 博主在这简单介绍一下我的布局 主要还是讲解js部分
首先打开百度搜索2048小游戏 然后对比页面进行设计 先上博主的效果图：
在这里插入图片描述

（ul li） 标签部分为游戏格 用div写也是一样的效果

注意：博主为了方便稍后的调用 li标签的id名 才设置成这个样子 与行列一一对应

（div的tab属性名标签）为游戏分数与历史分数
（div的zhebu属性名标签）为游戏结束后全屏遮布效果
<body>

    <div class="father">
        <div class="top_1">
            <div class="top_l">
                <p class="bigzi">2048</p>
                <p class="bigzi1">Play 2048 Game Online</p>
                <p class="bigzi2">Join the numbers and get to the <b>2048 tile!</b> </p>
            </div>
            <div class="top_r">
                <div class="tab tab1">
                    <p>BEST</p>
                    <P class="score03">0</P>
                </div>
                <div class="tab tab2">
                    <p class="score01">SCORE</p>
                    <P class="score02">0</P>
                </div>
                <div class="tab3">
                    <p><button>New Gamen</button></p>
                </div>
            </div>
        </div>
        <div class="bot">
            <ul>
                <li class="cell" id="c00"></li>
                <li class="cell" id="c01"></li>
                <li class="cell" id="c02"></li>
                <li class="cell" id="c03"></li>

                <li class="cell" id="c10"></li>
                <li class="cell" id="c11"></li>
                <li class="cell" id="c12"></li>
                <li class="cell" id="c13"></li>

                <li class="cell" id="c20"></li>
                <li class="cell" id="c21"></li>
                <li class="cell" id="c22"></li>
                <li class="cell" id="c23"></li>

                <li class="cell" id="c30"></li>
                <li class="cell" id="c31"></li>
                <li class="cell" id="c32"></li>
                <li class="cell" id="c33"></li>
            </ul>
        </div>
    </div>
    <div id="zhebu">
        <p>
            GAME OVER !<br> SCORE:
            <span id="score00">0</span><br>
            <a href="">TRY AGAIN</a>
        </p>
    </div>

</body>
css样式与大家分享一下 博主写的比较简略
 <style>
 //以下为主结构基本样式
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            /* background-color: #FAF8EF; */
        }
        
        .father {
            width: 510px;
            height: 700px;
            /* border: 1px solid; */
            margin: 0 auto;
            z-index: 2;
        }
        
        .top_1 {
            color: #776E65;
            width: 100%;
            height: 160px;
            background-color: #FAF8EF;
        }
        
        .top_r {
            width: 150px;
        }
        
        .bigzi {
            font-weight: 900;
            font-size: 75px;
        }
        
        .bigzi1 {
            font-weight: 900;
            font-size: 20px;
        }
        
        .top_l,
        .top_r {
            float: left;
            margin-top: 5px;
        }
        
        .top_r {
            margin-left: 10px;
            width: 165px;
            /* border: 1px solid; */
        }
        
        .tab {
            width: 70px;
            height: 70px;
            /* border: 1px solid; */
            float: right;
            text-align: center;
            background-color: #bbada0;
            color: #fff;
        }
        
        .tab1 {
            margin-left: 21px;
        }
        
        .tab3 {
            width: 100%;
            height: 40px;
            text-align: center;
            background-color: #9f8d77;
            float: left;
            line-height: 40px;
            border-radius: 4px;
            margin-top: 30px;
        }
        
        .bot {
            width: 100%;
            height: 535px;
            /* border: 1px solid; */
            background-color: #BBADA0;
        }
        
        .cell {
            width: 110px;
            height: 110px;
            background-color: #CDC0B4;
            float: left;
            margin-left: 14px;
            margin-top: 19px;
            border-radius: 5px;
            font-size: 60px;
            line-height: 110px;
            text-align: center;
            color: #fff;
        }
         .score02,
        .score03 {
            font-size: 20px;
        }
        
        button {
            font-size: 20px;
            background: #9f8d77;
            border: 0px;
            color: #FAF8EF;
        }
        
        #zhebu {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(55, 55, 55, 0.5);
            display: none; //游戏结束时 遮罩才会弹出来 所以先隐藏
        }
        
        #zhebu>p {
            width: 300px;
            height: 200px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid;
            line-height: 65px;
            font-size: 40px;
        }
        
        #zhebu>p>a {
            padding: 10px;
            color: #fff;
            background-color: #9f8d77;
            border-radius: 6px;
            text-decoration: none;
        }
        //下面是不同数值 产生的不同游戏格字体颜色 以及格子颜色
        .n2 {
            background-color: #eee3da;
            color: #776e65
        }
        
        .n4 {
            background-color: #ede0c8;
            color: #776e65
        }
        
        .n8 {
            background-color: #f2b179
        }
        
        .n16 {
            background-color: #f59563
        }
        
        .n32 {
            background-color: #f67c5f
        }
        
        .n64 {
            background-color: #f65e3b
        }
        
        .n128 {
            background-color: #edcf72
        }
        
        .n256 {
            background-color: #edcc61
        }
        
        .n512 {
            background-color: #9c0
        }
        
        .n1024 {
            background-color: #33b5e5;
            font-size: 40px
        }
        
        .n2048 {
            background-color: #09c;
            font-size: 40px
        }
        
        .n4096 {
            background-color: #a6c;
            font-size: 40px
        }
        
        .n8192 {
            background-color: #93c;
            font-size: 40px

js代码部分 封装函数的逻辑代码解析

首先为了能更好的取值并使用各个函数

创建一个game对象，游戏中所有的属性和方法都放在game对象中
并创建出需要用到的对象名以及属性：

var game = {
    score: 0, //添加一个得分属性
    status: 1, //添加一个游戏状态
    gameover: 0, //添加一个游戏结束状态
    gamerunning: 1, //添加一个游戏运行状态
    data: [], //添加一个数组，用于存储游戏数据的，
    }
游戏开始的代码进行封装

大家请先思考 在进行游戏重新开始 要做到哪些方面的更新重置？
1.游戏状态必须设置为游戏运行中
2.将分数重置
3.清空历史游戏数据的储存器data数组
4.游戏开始时会产生两个随机数2或4 并随机出现在格子随机的两个位置

start: function() {
        this.status = this.gamerunning; //游戏状态重新设置为运行状态
        this.score = 0; //分数重置
        this.data = []; //清空游戏数据数组
        
        // 生成二维数组，放置在data数组中保存数据 16个0
        for (var r = 0; r < 4; r++) {
            this.data[r] = []
            for (var c = 0; c < 4; c++) {
                this.data[r][c] = 0;
            }
        }
        
        this.randomNum() //随机产生的数封装的函数  因为开始会随机两个数  所以这里调用两次
        this.randomNum() 
        this.dataView() //视图更新函数 稍后会做讲解
    },

以及生成随机数的代码:
游戏开始产生的随机数字只可能是2或4 再根据for死循环生成随机行和列。
博主这里需要提到上面的li命名方式就是为了能一一对应，给大家画个简易图片：
在这里插入图片描述
行和列分别是从0开始 到3结束 每一行都是四格
所以用到floor向下取整 获取随机数

// 生成随机数
    randomNum: function() {
        for (;;) {
            // 生成随机位置
            var r = Math.floor(Math.random() * 4) //随机生成行
            var c = Math.floor(Math.random() * 4) //随机生成列
                // 判断位置上是否有数据
            if (this.data[r][c] == 0) { //没有数据
                var num = Math.random() > 0.3 ? 2 : 4; //三元表达式 表示非2即4
                this.data[r][c] = num;
                break;
            }
        }
    },
游戏进行需要视图更新以及样式和数据的修改 封装成函数

首先利用双层for循环 遍历出所有的li 即每一个横纵排列的游戏格
然后判断数组中的值是否为0 不为0则需要渲染游戏格

 dataView: function() {
            for (r = 0; r < 4; r++) {
                for (c = 0; c < 4; c++) {
                    var liAll = document.getElementById("c" + r + c) //注意观察博主的li命名方式
                    if (this.data[r][c] != 0) { //数组中的值不为0，渲染页面
                        liAll.innerHTML = this.data[r][c];  //修改li的值
                        liAll.className = "cell n" + this.data[r][c]
                    } else { //数组中的值为0，数据不能显示至
                        liAll.innerHTML = "";
                        liAll.className = "cell";
                    }
                }
            }

            //找到分数class名并设置分数
            document.getElementsByClassName("score02")[0].innerHTML = this.score;

            //判断条件  
            if (this.status == this.gameover) { //gameover 为游戏结束的函数 稍后会讲解 
                document.getElementById("score00").innerHTML = this.score;
                document.getElementById("zhebu").style.display = "block"; //游戏结束便会弹出遮罩层  宣布游戏结束

            } else {
                document.getElementById("zhebu").style.display = "none"  //没结束遮罩永远不会弹出
            }
        },
游戏结束判断代码片 封装成函数

所有的游戏都会在某种情况下结束掉 要先列举出每一种情况 一件都不能少 否则游戏会无限进行下去：
1.游戏中方格被数字填充满 没有位置可以移动并产生随机数
2.游戏格子占满时要判断相邻数字之间能否左右上下能否相加
如果以上两点都满足 则游戏结束 弹出遮罩层 宣布游戏结束。
给大家看一下遮罩层的效果图：
在这里插入图片描述

isGameover: function() {
            for (var r = 0; r < 4; r++) {
                for (var c = 0; c < 4; c++) {
                    if (this.data[r][c] == 0) {
                        //有空位置 说明没结束
                        return false;
                    }
                    if (c < 3) {
                        if (this.data[r][c] == this.data[r][c + 1]) {
                            //说明左右相邻相等，可以进行相加，游戏没有结束
                            return false;
                        }
                    }
                    if (r < 3) {
                        if (this.data[r][c] == this.data[r + 1][c]) {
                            //说明上下相邻数据相等，则可以相加，游戏没有结束
                            return false;
                        }
                    }
                }
            }
            return true; //游戏结束 
        },
上下左右按键操作以及数字位置调换

向左移动 封装函数：
博主封装了三个函数（moveLeft） （moveLeftRow:）（getNextinRow）
三个函数都有着各自的功能 但是每一个功能都是联系紧密的 所以需要一起来看：

moveLeft: function() {
            var before = String(this.data)
            console.log(before);
            for (r = 0; r < 4; r++) {
                this.moveLeftRow(r)

            }
            var after = String(this.data)
            console.log(after);
            if (before != after) {
                this.randomNum()
                if (this.isGameover()) {
                    this.status = this.gameover
                }
                this.dataView()
            }
        },
        moveLeftRow: function(r) { //单独抽出一行进行写逻辑
            for (var c = 0; c < 3; c++) { //最左边的不需要移动，所以遍历三次
                //找出r行c列后面不为0的数据的位置保存至nextc中
                var nextc = this.getNextinRow(r, c)
                console.log(nextc);
                if (nextc != -1) {
                    //这一行中有需要移动的数据

                    if (this.data[r][c] == 0) {
                        this.data[r][c] = this.data[r][nextc]
                        this.data[r][nextc] = 0;
                        c--;
                        //c留在原地继续左移动
                    } else if (this.data[r][c] == this.data[r][nextc]) {
                        this.data[r][c] = this.data[r][c] * 2;
                        console.log(this.data[r][c]);
                        this.score += this.data[r][c] * 1000; //分数
                        this.data[r][nextc] = 0;
                    }
                } else {
                    //这一行没有需要移动的数据
                    break;
                }
            }

        },
        getNextinRow: function(r, c) {
            for (var i = c + 1; i < 4; i++) {
                if (this.data[r][i] != 0) {
                    return i;
                }
            }
            return -1; //如果当前行找不到不为0的数据则返回-1
        },

同理只需要修改行列 就可以做出向右，向上，向下移动的封装函数:

 moveRight: function() {
            var before1 = String(this.data);
            console.log(before1);
            for (r = 0; r < 4; r++) {
                this.moveRightRow(r)

            }
            var after1 = String(this.data);
            console.log(after1);
            if (before1 != after1) {
                this.randomNum()
                if (this.isGameover()) {
                    this.status = this.gameover
                }
                this.dataView()
            }
        },
        moveRightRow: function(r) {
            for (var c = 3; c > 0; c--) {
                var prevc = this.getPrevRow(r, c)
                console.log(prevc);
                if (prevc != -1) {
                    if (this.data[r][c] == 0) {
                        this.data[r][c] = this.data[r][prevc]
                        this.data[r][prevc] = 0;
                        c++;
                    } else if (this.data[r][c] == this.data[r][prevc]) {
                        this.data[r][c] = this.data[r][c] * 2;
                        this.score += this.data[r][c] * 1000;
                        this.data[r][prevc] = 0;
                    }
                } else {
                    break;
                }
            }
        },
        getPrevRow: function(r, c) {
            for (var i = c - 1; i > -1; i--) {
                if (this.data[r][i] != 0) {
                    return i;
                }
            }
            return -1;
        },
        moveUp: function() {
            var before1 = String(this.data);
            console.log(before1);
            for (c = 0; c < 4; c++) {
                this.moveUpRow(c)

            }
            var after1 = String(this.data);
            console.log(after1);
            if (before1 != after1) {
                this.randomNum()
                if (this.isGameover()) {
                    this.status = this.gameover
                }
                this.dataView()
            }
        },
        moveUpRow: function(r) {
            for (var r = 0; r < 3; r++) {
                var prevc = this.getPrev1Row(r, c)
                console.log(prevc);
                if (prevc != -1) {
                    if (this.data[r][c] == 0) {
                        this.data[r][c] = this.data[prevc][c]
                        this.data[prevc][c] = 0;
                        r--;
                    } else if (this.data[r][c] == this.data[prevc][c]) {
                        this.data[r][c] = this.data[r][c] * 2;
                        this.score += this.data[r][c] * 1000;
                        this.data[prevc][c] = 0;
                    }
                } else {
                    break;
                }
            }
        },
        getPrev1Row: function(r, c) {
            for (var i = r + 1; i < 4; i++) {
                if (this.data[i][c] != 0) {
                    return i;
                }
            }
            return -1;
        },
        moveDow: function() {
            var before1 = String(this.data);
            console.log(before1);
            for (c = 0; c < 4; c++) {
                this.moveDowRow(c)

            }
            var after1 = String(this.data);
            console.log(after1);
            if (before1 != after1) {
                this.randomNum()
                if (this.isGameover()) {
                    this.status = this.gameover
                }
                this.dataView()
            }
        },
        moveDowRow: function(c) {
            for (var r = 3; r > 0; r--) {
                var prevc = this.getDowRow(r, c)
                console.log(prevc);
                if (prevc != -1) {
                    if (this.data[r][c] == 0) {
                        this.data[r][c] = this.data[prevc][c]
                        this.data[prevc][c] = 0;
                        r++;
                    } else if (this.data[r][c] == this.data[prevc][c]) {
                        this.data[r][c] = this.data[r][c] * 2;
                        this.score += this.data[r][c] * 1000;
                        this.data[prevc][c] = 0;
                    }
                } else {
                    break;
                }
            }
        },
        getDowRow: function(r, c) {
            for (var i = r - 1; i > -1; i--) {
                if (this.data[i][c] != 0) {
                    return i;
                }
            }
            return -1;

        }
绑定键盘上下移动键
game.start()
        // console.log(game.getNextinRow());
    document.onkeydown = function(event) {
        if (event.keyCode == 37) {
            game.moveLeft()
        }
        if (event.keyCode == 39) {
            game.moveRight()
        }
        if (event.keyCode == 38) {
            game.moveUp()
        }
        if (event.keyCode == 40) {
            game.moveDow()
        }

2048的小游戏咱们就写到这儿，中间是还有一些小细节的，大家可以添加更多自己的元素，把游戏功能添加更多，如果有什么问题 可以评论，博主会耐心解答！

标签
#游戏
2048小游戏项目总结
weixin_44849651的博客
01-27 8540
2048小游戏项目总结 最近有在玩2048，所以写了个2048的代码 话不多说，先上截图和代码 游戏截图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,...
从零开始使用华为DevEco Studio编写2048小游戏
Brian_Leeee的博客
11-19 7655
从零开始使用华为DevEco Studio编写2048小游戏写在前面概述准备工作开发工具编写位置文件用途具体流程源代码（详解）写在后面 写在前面 概述 准备工作 开发工具 华为HarmonyOS的应用开发工具DevEco Studio下载地址 编写位置 文件用途 具体流程 源代码（详解） hml <div class="container"> <text class="scores"> 最高分：{
JSGAME:使用 Phaser JS 和多人游戏的 Javascript 自上而下游戏
07-14
什么是移相器项目模板？ 这是我创建的一个简单的项目模板，用于帮助为您的下一个游戏添加结构和自动化。 它包括以下内容： 用于安装 npm 依赖项的package.json 用于自动化构建任务和编译游戏的GruntFile.js src文件夹，您可以在其中放置游戏代码。 部署文件夹，所有代码都编译到其中，您可以推送到服务器 要开始使用，您需要做的就是下载的，即 、 和的最新版本。 安装 NodeJS 和 Grunt 您可以在其网站上得到的的NodeJS副本并安装它。 安装后，您将需要从命令行安装 grunt。 现在您可以通过键入以下内容来安装 Grunt 的命令行工具： > npm install - g grunt - cli 从这里开始，Grunt 应该通过命令行工作。 如果您从未安装过 Node 或 Grunt，请务必观看以下两个视频： 这两个视频帮助您了解我过去如何
用js代码制作2048小游戏
Bohn的博客
08-20 3804
2048小游戏（js） 1.先确定整体样式（4x4）（html，css） 以下为html代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" hr...
JsGame:Javascript游戏
04-02
JSGame 以下是供我学习Javascript的游戏： 更有趣的游戏：
js game (.＾-＾.)
m0_60808907的博客
01-02 1万+
try:新手,可能会有点小问题，欢迎指出！ var lc=10; var cl=12; var e=0; v=new Array(); for(var i=0;i<25;i++){ var a=Math.random()*(cl+1-lc)+lc点; a=a*1000; a=Math.round(a); a=a/1000; var x=v.indexOf(a); while(x>-1){ var a=Math.random()*(c
JavaScript实现2048小游戏，我终于赢了一把
编程界明世隐的博客
09-15 1万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 效果图 实现思路 编写页面和画布代码。 绘制背景。 绘制好全部卡片。 随机生成一个卡片（
javascript实现2048小游戏
热门推荐
funwj的博客
08-01 3万+
最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。 游戏相关截图：
JS_game.rar
10-26
使用JS开发的小游戏，包括超级玛丽，俄罗斯方块，贪吃蛇三个小游戏
前端开源库-jsgame
08-30
前端开源库-jsgameJSGame，JSGame是一个用JavaScript编写的二维游戏引擎。它提供内置的对象和功能，使编写HTML5游戏更容易。
2048游戏简单实现
Aimee_ice的博客
04-09 7504
前言 最近突然心血来潮想写一个网页小游戏，我看网上有很多人推荐写2048来练练手，遂开始写。目前为止，基本功能已经实现，只是没有添加相应的动画效果，待以后有机会补上（其实我就是动画这块太菜了 T_T） 前方长文预警！！！ 游戏截图 项目结构 这个项目结构挺简单的，应该也都看得懂，在此仅对js文件夹进行描述，其余的就不再赘述啦 （main.js是入口文件，move.js主...
JS与HTML、CSS实现2048小游戏（六）
池子的学习分享
12-15 4656
JS与HTML、CSS实现2048小游戏（六）前篇链接gameover界面优化重新开始——restartgame() 前篇链接 JS与HTML、CSS实现2048小游戏（一） JS与HTML、CSS实现2048小游戏（二） JS与HTML、CSS实现2048小游戏（三） JS与HTML、CSS实现2048小游戏（四） JS与HTML、CSS实现2048小游戏（五） gameover界面优化 在前面...
html5小游戏代码-2048游戏
weixin_45128635的博客
06-29 2万+
<!doctype html> <meta name="author" content="苏道涵"/> <meta name="keywords" content="2048"/> <meta http-equiv="content-Type" content="text/html;charset=gb2312"/> <html> &...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）
weixin_41306215的博客
07-26 6838
前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76 这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、 虽然是跟着视频做，但是还是经常出错 做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结 希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你 该游戏需要有HTML、CSS、JS和JQ基础 边做边思考每一步的来由 2048小游戏（一） ...
javascript实现前端小游戏2048
JiangHu_Java的博客
10-04 1700
javascript实现前端小游戏2048前言主要功能实现过程前端静态样式布置 前言 最近因为一些原因，研究了一下2048这个小游戏的代码，顺便给大家讲一下实现过程。 游戏截图： 主要功能 1、根据格子的合并，部分数字对应的格子颜色不尽相同； 2、初始化随机位置出现随机的2个数字为2或4； 3、每次合并一个格子只合并一次，如2 2 4 0，第一次合并后是4 4 0 0，而不是8 0 0 0； 4，判断所有格子是否能够向上下左右移动，没有空间或者对应方向的第一个格子数字和本身格子的数字不一样即移动不了；
【总结篇】js编写的2048小游戏开发（上：思路）
SuperZZQ_的博客
09-13 7527
2048是大家都熟悉的一款魔性小游戏，其操作简单，却极其有效地杀时间。本篇将详细讲解如何构建这款小游戏的开发思路、如何根据玩法进一步分析设计编程结构，适合有一定html、css、js、jquery语言基础的读者阅读。   一.游戏试玩       游戏玩法大家都很熟悉，每次可以选择上下左右中的一个方向滑动一次，所有数字方块都会向滑动的方向靠拢，每次滑动后空白的地方随机出现一个数字方块2或...
js2048小游戏-全网详细解析2048源码-2048小游戏html讲解
weixin_44959182的博客
11-18 2297
js2048小游戏-全网详细解析2048源码-2048小游戏html讲解！ 成功是留给有准备的人的。话不多多少我喜欢直接上代码，里面都有注释！如果大家有什么疑问可以留言交流。另外本人擅长：微信小程序、支付宝小程序、后台管理系统。如果大家有这边的项目也可以跟我合作。微信：wyk1364630428! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2048</ti
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值