用js实现2048游戏

最新推荐文章于 2023-11-14 11:38:02 发布
最新推荐文章于 2023-11-14 11:38:02 发布
阅读量1.4k 收藏 6
点赞数 2
分类专栏： JavaScript案例 文章标签： 纯js实现2048游戏 js实现2048原理 2048小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gl18792296581/article/details/100781128
版权

用js实现2048游戏


2048的实现逻辑：
它的本质就是二维数组的操作，只要二维数组完成就很简单了。

在这里插入图片描述
以上为水平向左：

水平说明操作的是二维数组的一行，而垂直操作的则是二位数组的一列。这样就可以将二维数组的操作变成遍历后对一维数组的操作。
向左说明数据的优先考虑的位置是从左开始的。这样就确定了一维数组的遍历开始的位置。

效果图

在这里插入图片描述
上下左右都类似，直接上完整代码，代码没优化，重复类似代码较多，所以比较长。

html+css

 <style>
        .cont {
            width: 290px;
            height: 290px;
            background: #eee;
            border: solid 2px #aaaaaa;
            margin: 20px auto;
            border-radius: 10px;
            position: relative;
        }

        .back-slide {
            width: 60px;
            height: 60px;
            background: pink;
            border-radius: 10px;
            position: absolute;
        }

        .fore-slide {
            width: 60px;
            height: 60px;
            background: #f55;
            border-radius: 10px;
            position: absolute;
            color: #fff;
            font-size: 40px;
            line-height: 60px;
            text-align: center
        }

        .mask {
            text-align: center;
            width: 290px;
            height: 290px;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .3);
            z-index: 999;
            display: none;
        }

        .mask h1 {
            text-align: center;
        }

        .mask .btn {
            width: 100px;
            height: 40px;
            border: 0;
            margin-top: 20px;
            border-radius: 10px;
            font-size: 18px;
        }

        .mask p {
            font-size: 30px;
            font-weight: bold;
            color: red;
        }

        .grade {
            margin: 20px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="cont">
        <div class="mask">
            <h1>游戏结束</h1>
            <button class="btn">重新开始</button>
            <p class="grade1">总分:0</p>
        </div>

    </div>
    <p class="grade">总分:0</p>
</body>

JS部分

<script>

    function Slide() {
        // 外层大盒子
        this.cont = document.querySelector(".cont");
        //游戏结束盒子
        this.mask = document.querySelector(".mask");
        //实时显示的总分盒子
        this.g = document.querySelector(".grade");
        // 游戏结束显示的总分盒子
        this.overg = document.querySelector(".grade1");
        //重新开始按钮
        this.btn = document.querySelector(".btn");
        // 主二维数组，存放数据
        this.pos = [];
        //用于判断每次按键后，是否有变化
        this.myarr = [];
        //用于将二维行列转换
        this.myarr1 = [];
        // 创建背景小方块
        this.createBack();
        //触发键盘事件
        this.keyDown();
        // 创建一个前景小方块，并重新渲染二维数组，显示所有前景小方块
        this.createFore();
        this.createFore();
        //重新开始
        this.restart();
        //总分
        this.grade = 0;
    }
    Slide.prototype = {
        keyDown: function () {
            document.onkeydown = function (e) {
                //键盘按下后，判断按下了那个键，并触发相应移动方法
                switch (e.keyCode) {
                    case 37: this.leftmove(); break;
                    case 38: this.upmove(); break;
                    case 39: this.rightmove(); break;
                    case 40: this.downmove(); break;
                }
                //将当前总分显示
                this.g.innerHTML = "总分：" + this.grade;
                // 调用游戏结束，进行判断，是否无路可走
                this.gameover();


            }.bind(this);
        },
        //游戏结束方法
        gameover: function () {
            // 获取所有前景小方块，等于16，证明以满，继续判断是否存在相邻方块相等的情况，如果没有，结束游戏
            var foreSlide = document.querySelectorAll(".fore-slide");
            var flag = 0;
            if (foreSlide.length == 16) {
                console.log(flag);
                for (var i = 0; i < 4; i++) {
                    for (var j = 0; j < 4; j++) {
                        // this.pos[i][j]
                        if (i == 0 && j == 0) {
                            if (this.pos[i][j] === this.pos[i][j + 1] || this.pos[i][j] === this.pos[i + 1][j]) {
                                flag = 1;

                            }
                        }
                        if (i == 3 && j == 3) {
                            if (this.pos[i][j] === this.pos[i][j - 1] || this.pos[i][j] === this.pos[i - 1][j]) {
                                flag = 1;
                            }
                        }
                        if (i == 0 && j == 3) {
                            if (this.pos[i][j] === this.pos[i][j - 1] || this.pos[i][j] === this.pos[i + 1][j]) {
                                flag = 1;
                            }
                        }
                        if (i == 3 && j == 0) {
                            if (this.pos[i][j] === this.pos[i][j + 1] || this.pos[i][j] === this.pos[i - 1][j]) {
                                flag = 1;
                            }
                        }
                        if (i == 0 && (j == 1 || j == 2)) {
                            if (this.pos[i][j] === this.pos[i][j + 1] || this.pos[i][j] === this.pos[i + 1][j] || this.pos[i][j] === this.pos[i][j - 1]) {
                                flag = 1;
                            }
                        }
                        if (i == 3 && (j == 1 || j == 2)) {
                            if (this.pos[i][j] === this.pos[i][j + 1] || this.pos[i][j] === this.pos[i - 1][j] || this.pos[i][j] === this.pos[i][j - 1]) {
                                flag = 1;
                            }
                        }
                        if (j == 0 && (i == 1 || i == 2)) {
                            if (this.pos[i][j] === this.pos[i][j + 1] || this.pos[i][j] === this.pos[i + 1][j] || this.pos[i][j] === this.pos[i - 1][j]) {
                                flag = 1;
                            }
                        }
                        if (j == 3 && (i == 1 || i == 2)) {
                            if (this.pos[i][j] === this.pos[i][j - 1] || this.pos[i][j] === this.pos[i + 1][j] || this.pos[i][j] === this.pos[i - 1][j]) {
                                flag = 1;
                            }
                        }
                    }
                }
                // 如果flag == 0，证明已经没有相邻相等的情况了，直接结束游戏，显示总分
                if (flag == 0) {
                    this.overg.innerHTML = "总分：" + this.grade;
                    this.mask.style.display = "block";
                }
            }

        },
        // 用于左移和上移，将二维数组拆分为4个一维数组，从小到大进行判断与改值
        getData: function (arr) {
            var i, nextI, len, m;
            len = arr.length;
            for (i = 0; i < len; i += 1) {
                nextI = -1;
                for (m = i + 1; m < len; m++) {
                    // 如果不为0，存到下一个中
                    if (arr[m] !== 0) {
                        nextI = m;
                        break;
                    }
                }
                if (nextI !== -1) {
                    // 如果当前为0 ，下一个有值，则将两个互换
                    if (arr[i] === 0) {
                        arr[i] = arr[nextI];
                        arr[nextI] = 0;
                        i -= 1;
                        //如果当前与下一个相等，将当前×2，下一个值为0，并将当前值加到总分上去
                    } else if (arr[i] === arr[nextI]) {
                        arr[i] = arr[i] * 2;
                        this.grade += arr[i];
                        arr[nextI] = 0;
                    }
                }
            }
        },
        // 与getData类似，这是用于右移和下移，从大到小进行判断
        getData1: function (arr) {
            var i, nextI, len, m;
            len = arr.length;
            for (i = 3; i >= 0; i--) {
                nextI = -1;
                for (m = i - 1; m >= 0; m--) {
                    if (arr[m] !== 0) {
                        nextI = m;
                        break;
                    }
                }
                if (nextI !== -1) {
                    if (arr[i] === 0) {
                        arr[i] = arr[nextI];
                        arr[nextI] = 0;
                        i += 1;
                    } else if (arr[i] === arr[nextI]) {
                        arr[i] = arr[i] * 2;
                        this.grade += arr[i];
                        arr[nextI] = 0;
                    }
                }
            }
        },
        // 左移方法
        leftmove: function () {
            // 将当前主二维数组的值存起来，最后与主二维数组判断是否有变化，没有变化则不进行任何操作
            this.myarr = [];
            for (var i = 0; i < 4; i++) {
                this.myarr.push([])
                for (var j = 0; j < 4; j++) {
                    this.myarr[i].push(this.pos[i][j]);
                }
            }
            // 将二维数组分为4个一维数组进行判断与操作，从小到大
            for (var i = 0; i < 4; i++) {
                this.getData(this.pos[i]);
            }
            // 与按键之前进行比较，如果有不同，则证明移动了，在调用createFore方法，创建一个新的随机前景小方块
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    if (this.myarr[i][j] != this.pos[i][j]) {
                        this.createFore();
                        i = 5;
                        j = 5;
                        break;
                    }
                }
            }
        },
        // 右移方法
        rightmove: function () {
             // 将当前主二维数组的值存起来，最后与主二维数组判断是否有变化，没有变化则不进行任何操作
            this.myarr = [];
            for (var i = 0; i < 4; i++) {
                this.myarr.push([])
                for (var j = 0; j < 4; j++) {
                    this.myarr[i].push(this.pos[i][j]);
                }
            }
            // 将二维数组分为4个一维数组进行判断与操作，从大到小
            for (var i = 0; i < 4; i++) {
                this.getData1(this.pos[i]);
            }
            // 与按键之前进行比较，如果有不同，则证明移动了，在调用createFore方法，创建一个新的随机前景小方块
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    if (this.myarr[i][j] != this.pos[i][j]) {
                        this.createFore();
                        i = 5;
                        j = 5;
                        break;
                    }
                }
            }
        },
        upmove: function () {
             // 将当前主二维数组的值存起来，最后与主二维数组判断是否有变化，没有变化则不进行任何操作
            this.myarr = [];
            for (var i = 0; i < 4; i++) {
                this.myarr.push([])
                for (var j = 0; j < 4; j++) {
                    this.myarr[i].push(this.pos[i][j]);
                }
            }
            // 将主数组行列转换存入myarr1中
            this.myarr1 = [];
            for (var i = 0; i < 4; i++) {
                this.myarr1.push([])
                for (var j = 0; j < 4; j++) {
                    this.myarr1[i].push(this.pos[j][i]);
                }
            }
            // 对myarr1进行判断与操作，从小到大
            for (var i = 0; i < 4; i++) {
                this.getData(this.myarr1[i]);
            }
            // 清空主数组，将myarr1的值一一存入主数组中
            this.pos = [];
            for (var i = 0; i < 4; i++) {
                this.pos.push([])
                for (var j = 0; j < 4; j++) {
                    this.pos[i].push(this.myarr1[j][i]);
                }
            }
            // 与按键之前进行比较，如果有不同，则证明移动了，在调用createFore方法，创建一个新的随机前景小方块
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    if (this.myarr[i][j] != this.pos[i][j]) {
                        this.createFore();
                        i = 5;
                        j = 5;
                        break;
                    }
                }
            }
        },
        downmove: function () {
             // 将当前主二维数组的值存起来，最后与主二维数组判断是否有变化，没有变化则不进行任何操作
            this.myarr = [];
            for (var i = 0; i < 4; i++) {
                this.myarr.push([])
                for (var j = 0; j < 4; j++) {
                    this.myarr[i].push(this.pos[i][j]);
                }
            }
            //不想复制了，与上类似
            this.myarr1 = [];
            for (var i = 0; i < 4; i++) {
                this.myarr1.push([])
                for (var j = 0; j < 4; j++) {
                    this.myarr1[i].push(this.pos[j][i]);
                }
            }
            //不想复制了，与上类似
            for (var i = 0; i < 4; i++) {
                this.getData1(this.myarr1[i]);
            }
            //不想复制了，与上类似
            this.pos = [];
            for (var i = 0; i < 4; i++) {
                this.pos.push([])
                for (var j = 0; j < 4; j++) {
                    this.pos[i].push(this.myarr1[j][i]);
                }
            }
            //不想复制了，与上类似
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    if (this.myarr[i][j] != this.pos[i][j]) {
                        this.createFore();
                        i = 5;
                        j = 5;
                        break;
                    }
                }
            }
        },
        createBack: function () {
            // 生成背景色
            for (var i = 0; i < 4; i++) {
                this.pos.push([])
                for (var j = 0; j < 4; j++) {
                    this.pos[i].push(0);
                    var div = document.createElement("div");
                    div.className = `back-slide back-slide-${i}-${j}`;
                    this.cont.appendChild(div)
                    div.style.left = j * (60 + 10) + 10 + "px";
                    div.style.top = i * (60 + 10) + 10 + "px";
                }
            }
        },
        createFore: function () {
            //创建一个前景小方块，
            while (true) {
                this.x = random(0, 3);
                this.y = random(0, 3);
                if (this.pos[this.x][this.y] == 0) {
                    break;
                }
            }
            //前景小方块内容在2，4之间随机
            this.pos[this.x][this.y] = Math.random() > 0.5 ? 2 : 4;
            // 获取所有前景小方块，并移除
            var foreSlide = document.querySelectorAll(".fore-slide");
            for (var k = 0; k < foreSlide.length; k++) {
                foreSlide[k].remove();
            }
            //对当前主二维数组中不等于0的位置创建前景色小方块
            for (var i = 0; i < this.pos.length; i++) {
                for (var j = 0; j < this.pos[i].length; j++) {
                    if (this.pos[i][j] != 0) {
                        var div = document.createElement("div");
                        div.className = `fore-slide fore-slide-${i}-${j}`;
                        this.cont.appendChild(div);
                        div.innerHTML = this.pos[i][j];
                        // 内容过大时，字体可能会过大，溢出盒子，将字体调小一点
                        if (this.pos[i][j] > 100) {
                            div.style.fontSize = "35px";
                        }
                        div.style.left = j * (60 + 10) + 10 + "px"
                        div.style.top = i * (60 + 10) + 10 + "px"
                    }
                }
            }
        },
        //重新开始
        restart: function () {
            // 单击重新开始按钮后，将主二维数组清0，总分清0，重新调用两次创建前景方块
            this.btn.onclick = function () {
                this.grade = 0;
                for (var i = 0; i < 4; i++) {
                    for (var j = 0; j < 4; j++) {
                        this.pos[i][j] = 0;
                    }
                }
                this.g.innerHTML = "总分：" + this.grade;
                this.mask.style.display = "none";
                this.createFore();
                this.createFore();
            }.bind(this);
        }
    }
    function random(max, min) {
        return Math.round(Math.random() * (max - min) + min);
    }
    var s = new Slide;
</script>
_心之所向_
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript实现2048小游戏，我终于赢了一把
编程界明世隐的博客
09-15 1万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 效果图 实现思路 编写页面和画布代码。 绘制背景。 绘制好全部卡片。 随机生成一个卡片（
JS实现2048小游戏
FeoniX
02-07 1922
JS实现2048小游戏简介效果展示代码实现 简介 2048是一款休闲益智类的数字叠加小游戏。 游戏存在4种模式，分别是 3 X 3宫格、4 X 4宫格(默认)、5 X 5宫格、6 X 6宫格，每种模式的目标数字分别是 1024、2048、4096、8192，达到目标数字即可赢得胜利。 您可以通过键盘的上、下、左、右四个方向键进行操作，数字会按方向移动，相邻的两个数字相同就会合并，组成更大的数字，每次移动或合并后会自动增加一个数字。 效果展示 代码实现 游戏UI部分index.html <!DOCT
2048 js canvas实现2048小游戏及思路
NEWonclick的博客
11-14 924
canvas动画原理假设一个元素x轴为0，运动到x = 100这样直接绘制是没有动画的x值递增，x值改变时清除画布再次绘制，x=100时运动结束这就是动画原理。
移动端 - 用JS实现2048小游戏
CodingmanNAN的博客
12-02 680
《2048》一款益智小游戏，游戏的规则十分简单，是时下一款简单易上手的数字小游戏，但又十分虐心。《2048》是一款单人在线和移动端游戏，由19岁的意大利人Gabriele Cirulli于2014年3月开发。
HTML+CSS+JavaScript实现2048游戏
weixin_43396749的博客
11-24 731
HTML+CSS+JavaScript实现2048游戏
js实现2048小游戏
hcute的博客
08-25 460
2048小游戏 2048小游戏（带动画效果） 所用语言html、css、JavaScript 通过上下左右进行控制，实现了移动、合并等功能 github地址 线上测试地址 效果图 实现功能 1.新建游戏 先清空方格和分数，再随机两个位置，生成2或者4数字 2.移动数字 移动包括：上、下、左、右 监控键盘事件keyCode 例如：用户向上时，从每一行开始遍历，当遍历到某个小方格有数字时，就判断它上方有没有其他数字，如果也有，就让他们合并，然后标记一下，因为一个方格只能合并一次。 其他方向类比。 3.新出现的
【javascript】2048小游戏
qq_63806300的博客
06-27 1872
2048是一款风靡全球的小游戏，具体的玩法就不多说了，最早于2014年Gabriele Cirulli在github发表的版本。不过此项目依赖于GULP。本文就用javascript写出一个较为完整的2048游戏。以下是本文实现的游戏界面：2048的实现可以分为3个部分：游戏界面绘制、分数逻辑和方向控制逻辑。
javascript实现2048小游戏
热门推荐
funwj的博客
08-01 3万+
最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。 游戏相关截图：
2023-04-14 使用纯JS实现一个2048小游戏
GAARA
04-14 1818
一.实现思路 1.2048的逻辑 2.移动操作的过程中会有三种情况 二.代码部分:分为初始化部分和移动部分 1.初始化部分 1.1.生成第一个方块: 1.2.生成第二个方块: 2.移动过程部分: 三.实现代码 1.HTML部分 2.CSS部分 3.JS部分 3.1.game对象的属性 3.2.game对象的start方法 3.3.game对象的randomNum方法 3.4.game对象的dataView方法 3.5.game对象的isGameOver方法 3.6.game对象中设置移动的方法(以左移动为例
用javascript实现简版2048小游戏
bs775926015的博客
04-05 1794
** 1、2048小游戏玩法和规则 ** 2048是一款休闲小游戏。 2048界面有16宫格，可以用键盘方向键选择上下左右四个方向进行操作，如果有相邻的两个数字相同就会合并，相加组成新数字，并且每次移动或合并后界面会自动增加一个数字。 当16宫格中没有空格子，且四个方向都无法操作时，游戏会结束。目的是合并出2048这个数字，获得更高分数。 2、游戏界面截图 3、2048游戏实现原理 1、游戏界面由16宫格组成，可以看成是矩阵的形式。 2、在HTML中给每个格子添加类名以及属性，来记录每个格子的位置。 3、
用javascript实现2048游戏的开发
04-26
用javascript开发2048游戏，实现2048游戏的基本功能。
Javascript实现的2048游戏
12-16
《JavaScript实现的2048游戏详解》 2048是一款广受欢迎的数字拼图游戏，玩家通过上下左右滑动屏幕，使相同数字的方块合并，目标是达到2048这个数字。本篇文章将深入探讨如何使用JavaScript语言实现2048游戏的完整...
javascript实现2048游戏示例
10-25
主要介绍了javascript实现2048游戏示例,需要的朋友可以参考下
JavaScript 实现 2048 小游戏
11-30
本项目为使用JavaScript实现2048小游戏。游戏玩法：在 4*4 的16宫格中，您可以选择上、下、左、右四个方向进行操作，数字会按方向移动，相邻的两个数字相同就会合并，组成更大的数字，每次移动或合并后会自动增加一...
vue实现2048小游戏功能思路详解
08-27
在本文中，我们将深入探讨如何使用 Vue.js 实现2048这个游戏。2048是一款基于数字的益智游戏，玩家需要通过滑动屏幕来合并数字，目标是创建一个2048的方块。 首先，我们使用Vue CLI来初始化项目，这将为我们提供一...
[毕业设计]VB.NET网络聊天应用开发及其优化(源代码+论文+开题报告+答辩PPT).zip
08-03
[毕业设计]VB.NET网络聊天应用开发及其优化(源代码+论文+开题报告+答辩PPT)
带直播电商功能，可以DIY前端，可以H5和小程序一般商城常用功能齐全
08-03
第一次接触这个系统，感觉和微擎有点像。也是一个主体，也很多插件的那种。 测试了下。安装成功了，站长亲测没有问题，一切都挺完善的，不过系统比较庞大，可能新手熟悉起来要一定的过程。 站长整理了一份简要的搭建说明，以及调试说明。
RT-Thread温湿度检测示例
08-03
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
ChatGPT研究框架.pptx
最新发布
08-03
ChatGPT研究框架.pptx
用js写一个2048游戏
04-05
以下是一些关于用JavaScript实现2048游戏的参考资源，供您参考： - 2048游戏的JavaScript实现：https://github.com/gabrielecirulli/2048 - 用原生JavaScript实现2048游戏：...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值