js实现2048

最新推荐文章于 2023-11-14 11:38:02 发布
最新推荐文章于 2023-11-14 11:38:02 发布
阅读量522 收藏
点赞数 1
分类专栏： 小白入行 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45120080/article/details/115451030
版权

js实现2048

样式部分

* {
    margin: 0px;
    padding: 0px;
}

.case {
    width: 450px;
    height: 600px;
    margin: 20px auto;
    /*overflow: hidden;*/
    position: relative;
    /*border: 1px solid red;*/
}

.above_box {
    width: 450px;
    height: 150px;
    margin: 0px auto;
    /*border: 1px solid red;*/
}

.logo {
    width: 350px;
    height: 150px;
    float: left;
}

.logo_num {
    color: #766f67;
    font-size: 60px;
    font-family: '微软雅黑';
    font-weight: bold;
}

.logo_font {
    color: #9B988F;
    float: left;
    font-size: 16px;
}

.above_box button {
    width: 100px;
    height: 50px;
    color: white;
    font-size: 15px;
    background-color: #8b7c65;
    /*border-radius: 10px: */
    border: none;
    margin-top: 10px;
    float: right;
}

.countScore {
    width: 100px;
    height: 70px;
    background-color: #8b7c65;
    color: white;
    float: right;
    margin-top: 10px;
}

.countScore p {
    /*float: right;
	width: 100px;
	height: 40px;
	background-color: #8b7c65;
	color: white;*/
    /*text-align: center; */
    line-height: 30px;
    text-align: center;
}

.countScore span {
    display: block;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.main_box {
    width: 450px;
    height: 450px;
    margin: 0px auto;
    /*border: 1px solid red;*/
    background-color: #bbada0;
    border-radius: 10px;
    /* position: absolute; */
}

.main_box2 {
    width: 450px;
    height: 450px;
    margin: 0px auto;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    font-size: 50px;
    color: white;
    text-align: center;
    line-height: 450px;
    /*z-index: 1;*/
}

.main_box2 button {
    width: 101px;
    height: 50px;
    color: white;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    position: absolute;
    top: 260px;
    left: 165px;
}

.game {
    z-index: 1;
}

.min_box {
    width: 100px;
    height: 100px;
    background-color: #ccc0b2;
    float: left;
    margin: 10px 0 0 10px;
    border-radius: 5px;
    font-size: 35px;
    line-height: 100px;
    text-align: center;
    color: #796f65;
}


/**/

.n2 {
    background-color: #aae3da
}

.n4 {
    background-color: #ede0c8
}

.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
}

.n2048 {
    background-color: #09c9c0
}

.n4096 {
    background-color: #a6c
}

.n8192 {
    background-color: #93c
}

.n2,
.n4 {
    color: #776e65
}

.n1024,
.n2048,
.n4096,
.n8192 {
    font-size: 40px
}

结构部分

<body>
    <div class="main_box">
        <div class="min_box" id="number00"></div>
        <div class="min_box" id="number01"></div>
        <div class="min_box" id="number02"></div>
        <div class="min_box" id="number03"></div>
        <div class="min_box" id="number10"></div>
        <div class="min_box" id="number11"></div>
        <div class="min_box" id="number12"></div>
        <div class="min_box" id="number13"></div>
        <div class="min_box" id="number20"></div>
        <div class="min_box" id="number21"></div>
        <div class="min_box" id="number22"></div>
        <div class="min_box" id="number23"></div>
        <div class="min_box" id="number30"></div>
        <div class="min_box" id="number31"></div>
        <div class="min_box" id="number32"></div>
        <div class="min_box" id="number33"></div>
    </div>

    <script src="2048-2.js"></script>
</body>

功能部分

左移

leftMove() {
        this.num = this.panduan();
        if(this.num==16) {
        this.moverl();
        }
        if(this.num<16||this.canmoverl==true){
            for (var r = 0; r < this.RN; r++) {
                for (var c = 0; c < this.RC; c++) {
                    //当前有值
                    if (this.data[r][c]) {
                        for (var i = c + 1; i < this.RC; i++) {
                            //当前位置后的c+1 值不为0时
                            if (this.data[r][i]) {
                                //后面有值
                                if (this.data[r][c] === this.data[r][i]) {
                                    this.data[r][c] *= 2;
                                    //把后面的值清空
                                    this.data[r][i] = 0;
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                    } else {
                        //判断其后是否有值
                        for (var j = c + 1; j < this.RC; j++) {
                            if (this.data[r][j]) {
                                this.data[r][c] = this.data[r][j];
                                this.data[r][j] = 0;
                                c--;
                                break;
                            }
                        }
                    }
                }
            }
            this.getRandom();
            this.updateView();
        }else{
           
        }
    }

右移

rightMove() {
        this.num = this.panduan();
        if(this.num==16) {
            this.moverl();
            }
        if(this.num<16||this.canmoverl==true){
            for (var r = 0; r < this.RN; r++) {
                for (var c = this.RC - 1; c >= 0; c--) {
                    //当前有值
                    if (this.data[r][c]) {
                        for (var i = c - 1; i >= 0; i--) {
                            //当前位置前的c-1 值不为0时
                            if (this.data[r][i]) {
                                //后面有值
                                if (this.data[r][c] === this.data[r][i]) {
                                    this.data[r][c] *= 2;
                                    //把后面的值清空
                                    this.data[r][i] = 0;
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                    } else {
                        //判断其后是否有值
                        for (var j = c - 1; j >= 0; j--) {
                            if (this.data[r][j]) {
                                this.data[r][c] = this.data[r][j]
                                this.data[r][j] = 0;
                                c++;
                                break;
                            }
                        }
                    }
                }
            }
            this.getRandom();
            this.updateView();
        }else{
           
        }
    }

上移

topMove() {
        this.num = this.panduan();
        if(this.num==16) {
            this.movetb();
            }
        if(this.num<16||this.canmovetb==true){ 
            for (var c = 0; c < this.RC; c++) {
                for (var r = 0; r < this.RN; r++) {
                    //当前位置有值
                    if (this.data[r][c]) {
                        for (var i = r + 1; i < this.RN; i++) {
                            //当期位置 r+1开始遍历为是否0 
                            if (this.data[i][c]) {
                                //下面有值
                                if (this.data[i][c] === this.data[r][c]) {
                                    this.data[r][c] *= 2;
                                    // 把下面的值清空 
                                    this.data[i][c] = 0;
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                        if(r==3){
                            break; 
                        }
                        //当前位置没值
                    } else {
                        // 判断其下面是否有值
                        for (var j = r + 1; j < this.RN; j++) {
                            if (this.data[j][c]) {
                                this.data[r][c] = this.data[j][c];
                                this.data[j][c] = 0;
                                r--;
                                break;
                            }
                        }
    
                    }
                }
            }
    
            this.getRandom();
            this.updateView();
        }else{
           
        }
    },

下移

 bottomMove() {
        this.num = this.panduan();
        if(this.num==16) {
            this.movetb();
            }
        if(this.num<16||this.canmovetb==true){ 
            for (var c = this.RC-1; c >=0; c--) {
                for (var r = this.RN-1; r >=0; r--) {
                    //当前位置有值
                    if (this.data[r][c]) {
                        for (var i = r - 1; i >=0; i--) {
                            //当期位置 r+1开始遍历为是否0 
                            if (this.data[i][c]) {
                                //下面有值
                                if (this.data[i][c] === this.data[r][c]) {
                                    this.data[r][c] *= 2;
                                    // 把下面的值清空 
                                    this.data[i][c] = 0;
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                        if(r==3){
                            break; 
                        }
                        //当前位置没值
                    } else {
                        // 判断其下面是否有值
                        for (var j = r - 1; j >=0; j--) {
                            if (this.data[j][c]) {
                                this.data[r][c] = this.data[j][c];
                                this.data[j][c] = 0;
                                r++;
                                break;
                            }
                        }
                        if(j==3){
                            break; 
                        }
                    }
                }
            }
    
            this.getRandom();
            this.updateView();
        }else{
          
        }
        
    },

判断格子是否满格

    panduan() {
        var num=0;
        for(var i = 0;i<this.RN;i++){
            for(var j=0;j<this.RC;j++){
                if(this.data[i][j]!=0){
                    num++
                }
            }
        }
        this.canmoverl =false;
        this.canmovetb =false;
        return num;

判断满格时是否可以移动

可否左右移动：

    moverl() {
        for(var i = 0;i<this.RN;i++){
            for(var j=0;j<this.RC;j++){
                if(this.data[i][j]==this.data[i][j+1]){
                   this.canmoverl =true;
                    break;
                }
            }
        }
    },

可否上下移动：

    movetb() {
        for(var i = 0;i<this.RN;i++){
            for(var j=0;j<this.RC;j++){
                if(this.data[j][i]==this.data[j+1][i]){
                   this.canmovetb =true;
                    break;
                }
            }
        }
    },
    
};

随机数生成函数

    getRandom() {
        var r, c;
        while (true) {
            r = parseInt(Math.random() * this.RN);
            c = parseInt(Math.random() * this.RC);

            if (this.data[r][c] != 0) {
            }else {
                this.data[r][c] = Math.random() < 0.5 ? 2 : 4;
                break;
            }
        }
    },

渲染视图函数

 updateView() {
        for (var r = 0; r < this.RN; r++) {
            for (var c = 0; c < this.RC; c++) {
                //this.data[r][c]
                //将页面不为0的数据渲染到页面中 
                if (this.data[r][c]) {
                    document.getElementById("number" + r + c).innerHTML = this.data[r][c];
                    //给到对应的背景颜色
                    document.getElementById('number' + r + c).className = 'min_box n' + (this.data[r][c]);

                } else {
                    // 当前位置值为0时清空背景颜色
                    document.getElementById('number' + r + c).innerHTML = "";
                    document.getElementById("number" + r + c).className = 'min_box';
                }
            }

        }
    },

初始状态函数

    start() {
        for (var i = 0; i < this.RN; i++) {
            this.data[i] = [];
            for (var j = 0; j < this.RC; j++) {
                this.data[i][j] = 0;
            }
        }

        this.getRandom();
        this.getRandom();
        this.updateView();
    },

常量定义

    RN: 4,
    RC: 4,
    data: [],
    num:0,
    canmoverl:false,
    canmovetb:false,
02广媳
关注
专栏目录
HTML+CSS+JavaScript实现2048游戏
weixin_43396749的博客
11-24 777
HTML+CSS+JavaScript实现2048游戏
JS实现2048小游戏
FeoniX
02-07 1959
JS实现2048小游戏简介效果展示代码实现 简介 2048是一款休闲益智类的数字叠加小游戏。 游戏存在4种模式，分别是 3 X 3宫格、4 X 4宫格(默认)、5 X 5宫格、6 X 6宫格，每种模式的目标数字分别是 1024、2048、4096、8192，达到目标数字即可赢得胜利。 您可以通过键盘的上、下、左、右四个方向键进行操作，数字会按方向移动，相邻的两个数字相同就会合并，组成更大的数字，每次移动或合并后会自动增加一个数字。 效果展示 代码实现 游戏UI部分index.html <!DOCT
javascript版 2048游戏
小飞鱼的专栏
06-15 732
2048 body,div,ul,li,p{padding:0;margin:0;border-radius:10px;} body{ font-family:"Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif; background:#FFFCEC; } .game_box{ margin:20
从JavaScriptMVC开始如何完成项目之压缩文件和生成帮助文档
hzylyl2402的专栏
04-13 140
1、压缩文件 在厨师手册程序中加载了很多资源，如果我们想下载这个程序，需要下载很多文件，所以MVC框架提供了把这么多文件压缩成一个文件的压缩工具。 压缩脚本 在压缩你的程序之前，需要在DOC控制台执行下面命令： C:\workspace\Cookbook&gt;js cookbook\scripts\build.js    steal/steal.js    ...    ignor...
原生JS实现2048
星云
10-24 612
按↑、→、↓、←控制所有方块移动（如果可能）。两个示数相同的方块将合并成一个方块，新方块示数等于两个方块示数之和。代码用了新语法，对浏览器版本有一定要求。
原生js实现2048
ShiningDays的博客
03-21 4063
js原生实现2048的代码
JavaScript实现2048小游戏
友人C君的博客
03-23 1155
首先要明白该游戏怎么玩，即 在 4*4 的16宫格中，您可以选择上、下、左、右四个方向进行操作，数字会按方向移动，相邻的两个数字相同就会合并，组成更大的数字，每次移动或合并后会自动增加一个数字。当16宫格中没有空格子，且四个方向都无法操作时，游戏结束。 首先，把16宫格看成是矩阵的形式 游戏开始时，随机生成两个数字，2或者4，出现在矩阵中任意位置 这部分是通过类名emptyI...
2048 js canvas实现2048小游戏及思路
最新发布
NEWonclick的博客
11-14 996
canvas动画原理假设一个元素x轴为0，运动到x = 100这样直接绘制是没有动画的x值递增，x值改变时清除画布再次绘制，x=100时运动结束这就是动画原理。
移动端 - 用JS实现2048小游戏
CodingmanNAN的博客
12-02 723
《2048》一款益智小游戏，游戏的规则十分简单，是时下一款简单易上手的数字小游戏，但又十分虐心。《2048》是一款单人在线和移动端游戏，由19岁的意大利人Gabriele Cirulli于2014年3月开发。
【javascript】2048小游戏
qq_63806300的博客
06-27 2255
2048是一款风靡全球的小游戏，具体的玩法就不多说了，最早于2014年Gabriele Cirulli在github发表的版本。不过此项目依赖于GULP。本文就用javascript写出一个较为完整的2048游戏。以下是本文实现的游戏界面：2048的实现可以分为3个部分：游戏界面绘制、分数逻辑和方向控制逻辑。
javascript实现2048游戏示例
10-25
2048游戏是一款流行的数字拼接游戏...以上就是根据给出的文件信息所能提取的关于使用JavaScript实现2048游戏的知识点。实际开发中，还可能需要考虑到更多的细节，例如动画效果的添加、分数统计、最佳分数保存和分享等。
HTML+JS实现2048小游戏demo
05-05
HTML+JS实现的2048小游戏是一款基于网页的数字拼图游戏，它结合了HTML的...以上就是HTML+JS实现2048小游戏的主要知识点。通过这个项目，开发者可以深入理解Web前端开发的基本技术，锻炼逻辑思维能力和问题解决能力。
Javascript实现的2048游戏
12-16
本篇文章将深入探讨如何使用JavaScript语言实现2048游戏的完整功能，并提供对源码的理解和解析。 首先，我们需要了解JavaScript的基础语法和DOM操作。JavaScript是一种解释型、弱类型的脚本语言，广泛应用于网页和...
js实现2048小游戏
08-10
《JS实现2048小游戏详解》 2048是一款简单却又极具挑战性的数字合成游戏，由意大利开发者Gabriele Cirulli于2014年推出。它以其独特的玩法和精巧的设计吸引了全球玩家的关注。在JavaScript开发领域，实现2048小游戏...
Less入门以及一些前端面试题
qq_45120080的博客
05-19 3403
Less入门Less是什么？如何安装？less变量赋值less封装函数less与sass的异同 Less是什么？ Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less
CSS定位和过度动画
qq_45120080的博客
12-30 1666
CSS定位前言CCS定位css定位分类相对定位 position：relative绝对定位 position：absolute子绝父相布局固定定位css新增的选择器功能过度动画transition结合案例案例内容案例实现思路实现步骤实现代码end 前言 在我们设计网页的时候，我们在给页面布局的时候想要移动元素可以使用浮动布局。但是当我们需要移动到指定位置的时候，使用浮动布局就无法达到效果，那么我们该怎么办呢？我们今天学习的知识就可以解决这个问题。不仅如此我们还可以做出一个小小的表白神器。 CCS定位 根据所
判断数组真伪的方法总汇
qq_45120080的博客
05-17 775
右手就行-数组真伪API前言什么是伪数组。创建伪数组和真数组实例。对象隐式原型的构造函数判断.toString()方法Object.prototype.toString.call方法instanceof判断Array.isArray()判断数组方法来判断isPrototypeOf 前言 在js中数组类型大家应该都不陌生，那你是否知道数组其实是有真假之分的呢？ 什么是伪数组。 伪数组：1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解
使用HTML5自制视频控件
qq_45120080的博客
04-05 668
使用HTML5自制视频控件前言静态样式实现js的dom元素获取播放、暂停功能暂停时弹出广告进度条功能计时功能实现声音控件总结 前言 随着网络时代的到来，人们的生活也是相当便利，例如：当我们点击一个视频时，视频就会开始播放。在这个例子中，有没有大胆想过我们常用的播放，暂停，音量控制，进度条等等，这些功能我们自己来实现呢？如果你有这个想法，那么我的这篇文章就可以帮您实现。 静态样式实现 标签部分： <div id="father"> <video src="birds.
使用JavaScript实现2048游戏的思路与代码解析
"本文主要介绍了如何使用JavaScript实现2048小游戏，包括基本思路、主要逻辑和关键代码段。文章提到实现2048游戏的代码总共约300行，其中JavaScript、CSS和HTML各占一部分。项目还利用了underscore.js的template方法...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值