js实现2048小游戏源码

最新推荐文章于 2024-08-12 03:46:42 发布
最新推荐文章于 2024-08-12 03:46:42 发布
阅读量1.2k 收藏 13
点赞数 1
分类专栏： javascript从入门到放弃 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49200148/article/details/107323538
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .score {
            width: 500px;
            margin: 50px auto 0;
            font-size: 40px;
            font-weight: 700;
        }
        
        .main {
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: #bbada0;
            border-radius: 10px;
        }
        
        .main>div {
            width: 100px;
            height: 100px;
            margin: 20px 0 0 20px;
            background-color: #cdc1b4;
            float: left;
            border-radius: 5px;
            font-size: 40px;
            font-weight: 700;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
        
        .zhe {
            width: 500px;
            height: 300px;
            position: absolute;
            top: 102px;
            left: 50%;
            margin-left: -250px;
            z-index: 3;
            background: rgba(200, 200, 200, 0.5);
            text-align: center;
            font-size: 48px;
            font-weight: 700;
            color: #776e65;
            border-radius: 10px;
            padding-top: 200px;
            display: none;
        }
        
        .zhe input {
            margin-top: -480px;
            width: 120px;
            height: 40px;
            background: #8f7a66;
            border-radius: 5px;
            border: none;
            color: white;
            font-size: 20px;
        }
        
        .main>.n2 {
            background: #eee4da;
            color: #776e65;
        }
        
        .main>.n4 {
            background: #ede0c8;
            color: #776e65;
        }
        
        .main>.n8 {
            background: #f2b179;
            color: #f9f6f2;
        }
        
        .main>.n16 {
            background: #f59563;
            color: #f9f0cd;
        }
        
        .main>.n32 {
            background: #f67c5f;
            color: #f9f6ef;
        }
        
        .main>.n64 {
            background: #f65e3b;
            color: #f9f6f2;
        }
        
        .main>.n128 {
            background: #edcf72;
            color: #f6ebd5;
            font-size: 36px;
        }
        
        .main>.n256 {
            background: #edcc61;
            color: #f9f6f2;
            font-size: 36px;
        }
        
        .main>.n512 {
            background: #edc850;
            color: #f9f6f2;
            font-size: 36px;
        }
        
        .main>.n1024 {
            background: #edc53f;
            color: #f7f6f2;
            font-size: 30px;
        }
        
        .main>.n2048 {
            background: #edc22e;
            color: #f9f6f2;
            font-size: 30px;
        }
        
        .main>.n4096 {
            background: #a6c;
            color: #f9f6f2;
            font-size: 30px;
        }
        
        .main>.n8192 {
            background: #93c;
            color: #f9f6f2;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p class="score">SCORE:<span id="score01">0</span></p>
    <div class="main">
        <!-- 第一行 -->
        <div id="c00"></div>
        <div id="c01"></div>
        <div id="c02"></div>
        <div id="c03"></div>
        <!-- 第二行 -->
        <div id="c10"></div>
        <div id="c11"></div>
        <div id="c12"></div>
        <div id="c13"></div>
        <!-- 第三行 -->
        <div id="c20"></div>
        <div id="c21"></div>
        <div id="c22"></div>
        <div id="c23"></div>
        <!-- 第四行 -->
        <div id="c30"></div>
        <div id="c31"></div>
        <div id="c32"></div>
        <div id="c33"></div>
    </div>
    <!-- 遮罩层 -->

    <div class="zhe">
        <p>Game over!</p>
        SCORE: <span id="score02">0</span> <br>
        <input type="button" value="再试一次" onclick="zai()">
    </div>
    <script>
        var game = {
            data: [],
            score: 0, //分数
            status: 0, //是否结束
            gameover: 0,
            gamerunning: 1,

            // 开始
            start: function() {
                this.score = 0;
                this.data = [//这里咱们用一个数组来形容网格
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ]

                this.status = this.gamerunning;
                this.randomNum()
                this.randomNum()
                this.dataView()
            },
            // 随机数
            randomNum: function() {
                for (;;) {//创建一个死循环
                    var r = Math.floor(Math.random() * 4);
                    var c = Math.floor(Math.random() * 4);
                    if (this.data[r][c] == 0) {//满足随机坐标值为0退出死循环
                        var num = Math.random() > 0.2 ? 2 : 4;//在数组表格内随机生成一个2||4
                        this.data[r][c] = num;
                        break;
                    }
                }
            },
            // 更新表格样式
            dataView: function() {
                for (var r = 0; r < 4; r++) {
                    for (var c = 0; c < 4; c++) {
                        var div = document.getElementById("c" + r + c);
                        if (this.data[r][c] != 0) {
                            div.innerHTML = this.data[r][c];
                            div.className = "n" + this.data[r][c]//通过更改class方法更新方块样式
                        } else {
                            div.innerHTML = ""
                            div.className = ""
                        }
                    }
                }
                document.getElementById("score01").innerHTML = this.score; //设置分数
                // 监听状态
                if (this.status == this.gameover) {//死了之后的遮罩层状态
                    document.getElementById("score02").innerHTML = this.score;
                    document.getElementsByClassName("zhe")[0].style.display = "block"
                } else {
                    document.getElementsByClassName("zhe")[0].style.display = "none"
                }
            },
            // 判断死了没有
            isgameover: function() {
                for (var r = 0; r < 4; r++) {
                    for (var c = 0; c < 4; c++) {
                        // 没有结束的三种状态
                        //1、还有网格值为0
                        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: function() {
                var before = String(this.data) //移动之前
                for (var r = 0; r < 4; r++) {
                    this.moveLeftInRow(r);
                }
                var after = String(this.data) //移动之后
                if (before != after) {
                    this.randomNum()
                    if (this.isgameover()) {
                        this.status = this.gameover;

                    }
                    this.dataView()
                }
            },
            moveLeftInRow: function(r) { //单独处理每一行的逻辑
                for (var c = 0; c < 3; c++) {
                    var nextc = this.getNextInRow(r, c);
                    if (nextc != -1) {
                        if (this.data[r][c] == 0) {//当前格为0
                            this.data[r][c] = this.data[r][nextc];//后面不为0的替换
                            this.data[r][nextc] = 0;
                            c--;
                        } else if (this.data[r][c] == this.data[r][nextc]) {//当前格不为0、后面格值相同
                            this.data[r][c] *= 2;//当前格值*2
                            this.score += this.data[r][c]//分数加上去
                            this.data[r][nextc] = 0//后面格清0
                        }
                    } else {
                        break;
                    }
                }
            },
            getNextInRow: function(r, c) {
                for (var i = c + 1; i < 4; i++) {
                    if (this.data[r][i] != 0) {//判断当前格后面的值是否为0
                        return i//不为0返回格
                    }
                }
                return -1;
            },
            // 右移动
            moveRight: function() {
                var before = String(this.data) //移动之前
                for (var r = 3; r >= 0; r--) {
                    this.moveRightInRow(r);
                }
                var after = String(this.data) //移动之后
                if (before != after) {
                    this.randomNum()
                    if (this.isgameover()) {
                        this.status = this.gameover;

                    }
                    this.dataView()
                }
            },
            moveRightInRow: function(r) { //单独处理每一行的逻辑
                for (var c = 3; c >= 0; c--) {
                    var nextc = this.getNextInRowa(r, c);
                    if (nextc != -1) {
                        if (this.data[r][c] == 0) {
                            this.data[r][c] = this.data[r][nextc];
                            this.data[r][nextc] = 0;
                            c++;
                        } else if (this.data[r][c] == this.data[r][nextc]) {
                            this.data[r][c] *= 2;
                            this.score += this.data[r][c]
                            this.data[r][nextc] = 0
                        }
                    } else {
                        break;
                    }
                }
            },
            getNextInRowa: function(r, c) {
                for (var i = c - 1; i >= 0; i--) {
                    if (this.data[r][i] != 0) {
                        return i
                    }
                }
                return -1;
            },
            // 上移动
            moveTop: function() {
                var before = String(this.data) //移动之前
                for (var c = 0; c < 4; c++) {
                    this.moveTopInRow(c);
                }
                var after = String(this.data) //移动之后
                if (before != after) {
                    this.randomNum()
                    if (this.isgameover()) {
                        this.status = this.gameover;

                    }
                    this.dataView()
                }
            },
            moveTopInRow: function(c) { //单独处理每一列的逻辑
                for (var r = 0; r < 3; r++) {
                    var nextr = this.getNextInRowaa(r, c);
                    if (nextr != -1) {
                        if (this.data[r][c] == 0) {
                            this.data[r][c] = this.data[nextr][c];
                            this.data[nextr][c] = 0;
                            r--;
                        } else if (this.data[r][c] == this.data[nextr][c]) {
                            this.data[r][c] *= 2;
                            this.score += this.data[r][c]
                            this.data[nextr][c] = 0
                        }
                    } else {
                        break;
                    }
                }
            },
            getNextInRowaa: function(r, c) {
                for (var i = r + 1; i < 4; i++) {
                    if (this.data[i][c] != 0) {
                        return i
                    }
                }
                return -1;
            },
            // 下移动
            moveButtom: function() {
                var before = String(this.data) //移动之前
                for (var c = 3; c >= 0; c--) {
                    this.moveButtomInRow(c);
                }
                var after = String(this.data) //移动之后
                if (before != after) {
                    this.randomNum()
                    if (this.isgameover()) {
                        this.status = this.gameover;

                    }
                    this.dataView()
                }
            },
            moveButtomInRow: function(c) { //单独处理每一列的逻辑
                for (var r = 3; r >= 0; r--) {
                    var nextr = this.getNextInRowaaa(r, c);
                    if (nextr != -1) {
                        if (this.data[r][c] == 0) {
                            this.data[r][c] = this.data[nextr][c];
                            this.data[nextr][c] = 0;
                            r++;
                        } else if (this.data[r][c] == this.data[nextr][c]) {
                            this.data[r][c] *= 2;
                            this.score += this.data[r][c]
                            this.data[nextr][c] = 0
                        }
                    } else {
                        break;
                    }
                }
            },
            getNextInRowaaa: function(r, c) {
                for (var i = r - 1; i >= 0; i--) {
                    if (this.data[i][c] != 0) {
                        return i
                    }
                }
                return -1;
            },



        }

        game.start()

        document.onkeydown = function(e) {
            if (e.keyCode == 37) {
                game.moveLeft()
            }
            if (e.keyCode == 39) {
                game.moveRight()
            }
            if (e.keyCode == 38) {
                game.moveTop()
            }
            if (e.keyCode == 40) {
                game.moveButtom()
            }
        }
        zai = function() {
            game.start()

        }
    </script>
</body>

</html>
Romandisea
关注
专栏目录
JS2048小游戏代码.zip
05-23
JS2048小游戏代码，原生JS编写。玩法说明:键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束，回车键或点击重新开始游戏将会重置。
js2048小游戏-全网详细解析2048源码-2048小游戏html讲解
weixin_44959182的博客
11-18 2081
js2048小游戏-全网详细解析2048源码-2048小游戏html讲解！ 成功是留给有准备的人的。话不多多少我喜欢直接上代码，里面都有注释！如果大家有什么疑问可以留言交流。另外本人擅长：微信小程序、支付宝小程序、后台管理系统。如果大家有这边的项目也可以跟我合作。微信：wyk1364630428! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2048</ti
使用javascript写的游戏大全
最新发布
weixin_34534456的博客
08-12 844
使用JavaScript编写的游戏大全 JavaScript作为一种强大的编程语言，不仅用于网页开发，也为游戏开发提供了丰富的可能性。随着HTML5和Canvas的引入，开发者能够在浏览器中实现各种类型的游戏，从简单的休闲游戏到复杂的多人在线游戏。本文将介绍几种使用JavaScript编写的游戏，并提供相关代码示例。 1....
JavaScript版2048游戏源码
05-15
本源代码是用JavaScript模仿2048做的小游戏,有完整的2048游戏源码
2048小游戏完整源码
02-13
2048小游戏源码打包，可以在开发工具中正常打开。需要的可以下载来看看
JS2048小游戏代码.rar
01-04
JS2048小游戏代码，原生JS编写。 玩法说明: 键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束，回车键或点击重新开始游戏将会重置。
vue实现2048小游戏功能思路详解
08-27
总结来说，使用Vue.js实现2048小游戏涉及到的主要知识点包括Vue的组件化思想、数据绑定、事件监听、计算逻辑实现（如移动合并算法）、矩阵旋转以及游戏状态管理。通过这个项目，开发者不仅可以提升Vue.js的实战技能...
小程序版2048小游戏-项目源码-基于微信小程序开发框架的小游戏
03-27
此款小游戏采用了模块化的设计思路，将游戏逻辑与界面渲染分离，保证了代码的可读性和可维护性。前端使用了简洁明了的HTML和CSS技术，结合微信小程序框架，实现了流畅的动画效果和响应式布局。后端则采用了高效的...
Html5小游戏源代码H5小游戏源码JS开发网页小游戏开源源码大合集.zip
12-30
维京战争，一个都不能死，捕鱼达人，植物大战僵尸，3D魔方，青蛙吃苍蝇，蜘蛛纸牌，贪吃蛇，水果削除，2048中文版，大鱼吃小鱼，飞机大战，跑酷小游戏，贪吃蛇2.0,射击鸭子，激流勇进，天天消消乐，别踩白块，线条...
HTML+JS实现2048小游戏demo
05-05
HTML+JS实现的2048小游戏是一款基于网页的数字拼图游戏，它结合了HTML的结构、CSS的样式和JavaScript的动态交互功能。在这个游戏中，玩家需要通过上下左右滑动棋盘，使得相同数字的方块合并成更大的数字，最终目标是...
微信小游戏2048源码
03-15
微信小游戏2048源码 该程序主要难度在用户滑动屏幕时值相同的cell合并 将空格标为0（我代码中是用的""表示空格），假设棋盘如下： 0 2 0 2 0 0 0 0 0 0 0 2 0 0 0 0 步骤 通过touch相关的事件函数确定用户滑动方向...
微信小程序-2048小游戏源码
01-13
2018年最新的微信小程序-2048小游戏源码，大家可下载参考下。
js实现的2048游戏
09-06
js实现的2048小游戏。供初学者参考，代码有注释。供参考
JavaScript 2048 游戏实例代码(简单易懂)
11-24
废话不多说了，直接给大家贴代码了，觉得很满意直接拿去。 <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-" /> <title>无标题文档</title> <style> header{dis
JavaScript实现2048小游戏
02-26
JavaScript实现2048游戏源码
JS原生2048小游戏源码分享
林恒的博客
04-30 578
最近在学习算法方面的知识，看到了一个由算法主导的小游戏，这里给大家分享下代码： 效果： 代码： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048小游戏</...
js版2048附源码
ZHANGLIZENG的博客
04-01 2523
1.基于js的网页版2048游戏，git源码链接：https://github.com/zhangliqingyun/2048.git 2.项目目录结构图，jsp主页面展示游戏区，2048.css控制样式，需要引用jquery的一些属性和方法，animation.js、game.js、main.js、support.js为处理逻辑的js文件 ...
JavaScript实现2048小游戏，我终于赢了一把，前端开发须知
jixuczy的博客
03-30 979
break;default://默认颜色break;//计算坐标等this.cal();//执行绘制//是否绘制文字的处理=0){
JavaScript：2048游戏(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 221
JavaScript：2048游戏(附完整源码)
2048游戏源代码解析与实现
"这是一个关于2048游戏的源代码，包含了HTML、CSS和JavaScript的实现。源码中用于创建游戏界面和实现游戏逻辑。" 2048是一款基于数字的益智游戏，由意大利开发者Gabriele Cirulli于2014年开发。游戏的目标是通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值