实战项目-2048小游戏

最新推荐文章于 2022-12-16 09:19:17 发布
最新推荐文章于 2022-12-16 09:19:17 发布
阅读量386 收藏 3
点赞数
分类专栏： 笔记 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55788590/article/details/115918138
版权

在这里插入图片描述

html+css代码

<!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 auto;
            padding: 0;
        }
        :root,body{
            width: 100%;
            height: 100%;
        }
        .content{
            /* width: 800px; */
            width: 100%;
            height: 100%;
            text-align: center;
            background-color: #FAF8EF;
            font-family: Arial;
        }
        .top{
            width: 440px;
            padding: 20px;
        }
        .mid{
            width: 440px;
            background-color: #bbada0;
            text-align: center;
            padding: 5px;
            border-radius: 1.5%;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #ccc0b3;
            float: left;
            margin: 5px;
        }
        .tofs{
            font-size: 70px;
            text-align: left;
            color: #776E65;
        }
        .top span{
            display: inline-block;
            font-size: 18px;
            /* float: right; */
            width: 70px;
            height: 40px;
            background-color: aliceblue;
            text-align: center;
            padding: 10px;
            background-color: #BBADA0;
            /* margin-top: -10px; */
            color: aliceblue;
            border-radius: 3px;
        }
        .span1{
            margin-left: 90px;
            margin-right: 10px;
        }
        .btn1{
            width: 120px;
            height: 35px;
            background-color: #8F7A66;
            border-radius: 3px;
            border: 0;
            color: aliceblue;
            margin-top: 20px;
            margin-left: 230px;
            /* text-align: right; */
        }
        .clear{
            clear: both;
        }
        .son{
            font-size: 60px;
            text-align: center;
            line-height: 100px;
        }
        .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}
        .over{
            font-size: 50px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: none;
            background-color: rgba(33, 55, 56, 0.3);
            
        }
        .pp {
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            position: absolute;
            margin-top: -100px;
            margin-left: -150px;
            background-color: rgb(123, 132, 156);
            padding: 20px;
        }
        .btn2{
            width: 120px;
            height: 55px;
            background-color: #ad937b;
            border-radius: 3px;
            border: 0;
            color: aliceblue;
        }
        .score01 {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="top">
            <p class="tofs">2048<span class="span1">SCORE <br><b class="score01">0</b></span><span>BEST  <br>0</span> </p>
            
            <p><button class="btn1">New Game</button></p>
        </div>
        <div class="mid">
            <div class="son c00" id="c00"></div>
            <div class="son c01" id="c01"></div>
            <div class="son c02" id="c02"></div>
            <div class="son c03" id="c03"></div>

            <div class="son c10" id="c10"></div>
            <div class="son c11" id="c11"></div>
            <div class="son c12" id="c12"></div>
            <div class="son c13" id="c13"></div>

            <div class="son c20" id="c20"></div>
            <div class="son c21" id="c21"></div>
            <div class="son c22" id="c22"></div>
            <div class="son c23" id="c23"></div>

            <div class="son c30" id="c30"></div>
            <div class="son c31" id="c31"></div>
            <div class="son c32" id="c32"></div>
            <div class="son c33" id="c33"></div>
            <div class="clear"></div1>
        </div>
        <div class="over">
            <div class="pp">
                <p>Game Over!</p>
                <p>SCORE:<span class="score02">0</span></p>
                <p><button class="btn2">Try again</button></p>
            </div>
        </div>
    </div>
</body>
<script src="js.js"></script>
</html>

js功能代码

var game = {
    score : 0,  //游戏得分
    status : 1, // 游戏状态
    gameover : 0,// 游戏结束状态
    gamerunning : 1, // 游戏开始状态
    data : [],
    start : function(){
        this.status = this.gamerunning
        this.data = []
        this.score = 0
        // 生成二维数组，放置保存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()
        console.log(this.data);
        this.dataView()
    },
    randomNum : function(){
        while(true){
            var x = null,y = null,z = null;
            x = this.getRandom(0,3);
            y = this.getRandom(0,3);
            z = Math.random() < 0.8 ? 2 : 4
            
            if(this.data[x][y] == 0){
                this.data[x][y] = z
                break;
            }

        }
    },
    // 获取随机数
    getRandom : function (min,max){
        return Math.floor(Math.random() * (max - min + 1)) + min
    },
    // 试图渲染
    dataView : function(){
        for(var x = 0;x < 4;x++){
            for(var y = 0;y < 4;y++){
                var div = document.getElementById("c" +x+y)
                if(this.data[x][y] !=0){
                    div.innerHTML = this.data[x][y]
                    div.className = "son n"+this.data[x][y]
                }else{
                    div.innerHTML = "";
                    div.className = "son";
                }
            }
        }
        // 找到得分id，设置分数
        document.getElementsByClassName("score01")[0].innerHTML = this.score
        // 判断状态
        if(this.status == this.gameover){
            document.getElementsByClassName("score02")[0].innerHTML = this.score;
            document.getElementsByClassName("over")[0].style.display = "block"
        }else{
            document.getElementsByClassName("over")[0].style.display = "none"
        }
    },
    isGameover : function(){
        for(var x = 0;x < 4;x++){
            for(var y = 0;y < 4;y++){
                if(this.data[x][y] == 0){
                    return false
                }
                if(x < 3){
                    if(this.data[x][y] == this.data[x+1][y]){
                        return false
                    }
                }
                if(y < 3){
                    if(this.data[x][y] == this.data[x][y+1]){
                        return false
                    }
                }
            }
        }
        return true;
    },
    // 往左移动
    moveLeft : function(){
        var before = String(this.data)
        for(var x = 0;x < 4;x++){
            this.moveLeftRow(x)
        }
        var after = String(this.data)
        if(before != after){
            // 点击后随机生成一个新的数
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveLeftRow : function(x){
        for(var y = 0; y < 3;y++){
            var nexty = this.getNextinRow(x,y)
            if(nexty != -1){
                if(this.data[x][y] == 0){
                    this.data[x][y] = this.data[x][nexty]
                    this.data[x][nexty] = 0
                    y--;
                }else if(this.data[x][y] == this.data[x][nexty]){
                    this.data[x][y] = this.data[x][y]*2
                    this.score += this.data[x][y]
                    this.data[x][nexty] = 0;
                }
            }else{
                break;
            }
        }
    },
    getNextinRow : function(x,y){
        for(var i = y + 1;i < 4;i++){
            // 如果数据不为0，表示找到了，返回i，i对应的是当前数据的列下标
            if(this.data[x][i] != 0){
                return i;
            }
        }
        return -1;//如果当前行找不到不为0的数据则返回-1标识
    },
    // 往右移动
    moveRight : function(){
        var before = String(this.data)
        for(var x = 0;x < 4;x++){
            this.moveRightRow(x)
        }
        var after = String(this.data)
        if(before != after){
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveRightRow : function(x){
        for(var y = 3;y > 0;y--){
            var nexty = this.getNextinRowRight(x,y)
            if(nexty != -1){
                if(this.data[x][y] == 0){
                    this.data[x][y] = this.data[x][nexty]
                    this.data[x][nexty] = 0
                    y++;
                }else if(this.data[x][y] == this.data[x][nexty]){
                    this.data[x][y] = this.data[x][y]*2
                    this.score += this.data[x][y]
                    this.data[x][nexty] = 0
                }
            }else{
                break;
            }
        }
    },
    getNextinRowRight : function(x,y){
        for(var i = y-1;i > -1;i--){
            if(this.data[x][i] != 0){
                return i;
            }
        }
        return -1;
    },
    // 向下移动
    moveBottom : function(){
        var before = String(this.data)
        for(var y = 0;y < 4;y++){
            this.moveBottomRow(y)
        }
        var after = String(this.data)
        if(before != after){
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveBottomRow : function(y){
        for(var x = 3;x > 0;x--){
            var nextx = this.getNextinRowBottom(x,y)
            
            if(nextx != -22){
                if(this.data[x][y] == 0){
                    this.data[x][y] = this.data[nextx][y]
                    this.data[nextx][y] = 0
                    x++;
                }else if(this.data[x][y] == this.data[nextx][y]){
                    this.data[x][y] = this.data[x][y]*2
                    this.score += this.data[x][y]
                    this.data[nextx][y] = 0
                }
            }else{
                break;
            }
        }
    },
    getNextinRowBottom : function(x,y){
        for(var i = x-1;i > -1;i--){
            if(this.data[i][y] != 0){
                console.log("a");
                return i;
            }
        }
        return -22;
    },
    // 向上移动
    moveTop : function(){
        var before = String(this.data)
        for(var y = 0;y < 4;y++){
            this.moveTopRow(y);
        }
        var after = String(this.data)
        if(before != after){
            this.randomNum()
            if(this.isGameover()){
                this.status = this.gameover
            }
            this.dataView()
        }
    },
    moveTopRow : function(y){
        for(var x = 0;x<3;x++){
            var nextx = this.getNextinRowTop(x,y)
            if(nextx != -1){
                if(this.data[x][y] ==0){
                    this.data[x][y] = this.data[nextx][y]
                    this.data[nextx][y] = 0
                    x--;
                }else if(this.data[x][y] == this.data[nextx][y]){
                    this.data[x][y] = this.data[x][y]*2
                    this.score += this.data[x][y]
                    this.data[nextx][y] = 0;
                }
            }else{
                break;
            }
        }
    },
    getNextinRowTop : function(x,y){
        for(var i = x+1;i < 4;i++){
            if(this.data[i][y] != 0){
                return i
            }
        }
        return -1
    }
}
game.start()
document.onkeydown = function(event){
    if(event.keyCode == 37){
        game.moveLeft()
    }
    if(event.keyCode == 39){
        game.moveRight()
    }
    if(event.keyCode == 38){
        game.moveTop()
    }
    if(event.keyCode == 40){
        console.log(123123);
        game.moveBottom()
    }
}
var over = document.getElementsByClassName("over")[0]
var again = document.getElementsByClassName("btn2")[0]
again.onclick = function(){
    game.start()
    console.log(over);
    game.status = game.gamerunning
    document.getElementsByClassName("over")[0].style.display = "none"
}

完成展示效果：
在这里插入图片描述

风有多温柔.
关注
专栏目录
小项目——2048小游戏
MOON5555的博客
12-06 1418
很久之前，在学完C语言的时候，老师留下了一个作业，问大家有没有玩过2048，让自己做一个2048的小项目，然后就各种查阅资料，自己做了一个小小的2048小游戏，用W——S——A——D实现上下左右的移动，下面是代码实现部分。 代码实现： #include #include #include #include int code[4][4]={0,0,0,0,0,0,0,0,0,0
2048小游戏
qq_42402803的博客
04-08 583
2048小游戏—java 使用 IntelliJ IDEA，JAVA语言编写 忽然想起去年做的实训项目2048的小游戏，作为一个不够美但追求美的菜鸡，致力于把一切工程和项目都搞得花里胡哨的，so在这里po上自己的“创作”，图片和音乐素材均来源于网络，侵删。 项目主要包含的就是监听事件，加上按钮的播放，和碰撞事件。 效果图 底图是半透明的动图，可以在网上找一下有关函数，然后修改一下参数就可以了！ ...
2048小游戏实战开发
王飞
08-10 1385
2048游戏构建页面游戏对象构建游戏初始化取随机数监听键盘事件更新页面视图操作逻辑判断游戏是否失败判断游戏是否胜利显示游戏成功失败页面 构建页面 首先我们构建前台页面，该页面上有按钮，和16个放格,每个放格不同的样式 <div class="gameui" id="gameui"> <div id="c00" class="cell"></div> &...
使用egret开发的2048源码
10-19
使用egret开发的2048源码
2048小游戏（java+SqlServer2012）
瞎扯淡小基地
07-14 1017
期末汇总 代码：https://github.com/myxwww/2048-java-sqlserver2012.git 效果： 菜单部分 游戏规则部分 用户注册部分 点击提交后后台： 数据库表中情况： 游戏面板模块： 左移后: 右移后： 上移后： 下移后： 游戏结束后： 游戏结束后数据库中： ...
【python深度学习实战项目】-2048小游戏
最新发布
06-30
python深度学习实战项目——2048小游戏 【你们肯定不知道为了这个******游戏，我******】
python基础项目-2048小游戏.doc
11-09
本文将介绍如何使用Python语言和Tkinter库制作一个简单的2048小游戏。2048是一款基于数字合并的益智游戏，玩家通过移动数字方块，使得相同数字的方块合并，最终目标是生成2048这个数字。下面我们将按照游戏界面的...
Android小项目--2048小游戏，看完没有不懂的
m0_66264134的博客
01-23 531
} else if (offsetX < -MIN_DIS) { return 1; } else { return -1; } } else {// Y轴移动 if (offsetY > MIN_DIS) { return 2; } else if (offsetY < -MIN_DIS) { return 3; } else { return -1; } } } 2. Cell类的设计：Cell用来表示游戏中的小格子 Cell表示游戏中移动的小格子，格子的颜色、显示数字等属性都在对象
c++项目实战--扫雷小游戏源码
09-28
这是本人课程业余时间自己编程完成的一个扫雷小游戏，使用c++语言编程，图形方面的操作运用了easyx。我觉得这个资源比较适合刚完成c语言课程学习的同学，课堂上教的更多是理论上的知识，实战项目的操作开发还需要...
C语言项目实战源码-课程设计源码-毕业设计源码-c语言连连看游戏
06-01
"C语言项目实战源码-课程设计源码-毕业设计源码-c语言连连看游戏"就是这样一个绝佳的学习资源，它提供了一个完整的连连看游戏的源代码，可以帮助学生深入理解C语言的游戏开发过程。 连连看游戏，作为一款深受喜爱的...
2048小游戏完整源码
02-13
2048小游戏源码打包，可以在开发工具中正常打开。需要的可以下载来看看
数据结构课程设计-2048
m0_62840741的博客
12-16 561
2048的游戏规则是玩家通过方向键，控制4*4的方格中的数字方块整体移动，当两个带有相同数字的方块在移动过程中碰撞时，这两个方块便会合并成为一个数字方块，且数值变为两者之和，并得到数值为和的分数。⑴ 当前游戏的所有信息均放置于内存当中，玩家在游玩结束后得到的分数并不会被记录，希望你能通过文件存储的方式实现“排行榜”功能，将玩家每次游玩得到的分数记录在文件中。如果玩家合并出了值为2048的数字方块，游戏胜利。在游戏运行过程中，需要在内存中保存游玩的状态，也就是4*4的方格，可以设计以下结构保存关卡信息。
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）
weixin_41306215的博客
07-26 6229
前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76 这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、 虽然是跟着视频做，但是还是经常出错 做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结 希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你 该游戏需要有HTML、CSS、JS和JQ基础 边做边思考每一步的来由 2048小游戏（一） ...
“2048”游戏项目技术招标书
qq_52245245的博客
10-08 1416
本文描述了基于Java语言和Android开发的2048小游戏项目的基本技术和基本内容建设
【Android】基于GridLayout的Game2048开发
cungudafa的博客
12-29 943
目录一、2048游戏的玩法二、 游戏的开发（一）游戏的布局（二）实现游戏的主类（三）游戏触控的交互设计（四）实现卡片类Card.java（五）在GameView中添加游戏卡片（六）在GameView中添加随机数（七）在MainActivity中实现重启游戏的按钮功能（八）实现2048的游戏逻辑（九）游戏的计分（十）检查游戏结束三、Github源码 一、2048游戏的玩法 二、 游戏的开发 （一）游...
CTF（一）
Hack
11-18 6715
    进入夺旗页面，发现是一个js编写的2048游戏，但是感觉不是玩2048这么简单， 查看源码 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;
mysql导入限制_解决MySQL导入数据库文件最大限制2048KB的修改办法
weixin_34524593的博客
01-18 803
技术仓库引子：今天为进行服务器空间的转移~~~先顺利将Mysql数据库用myadmin导出~~然后在新服务器上建好后，然后进行导入！可是因为MySQL数据库的.sql文件大于2MB。所以在导入时就提示说超过2048KB的错误，不让导入….于是就引出了此文的解决办法，呵呵解决办法：1、打开php.ini。找到 upload_max_filesize 、 memory_limit 、 post_max...
使用Python实现2048小游戏
"使用Python制作2048小游戏的实践" 在学习Python的过程中，通过实践制作2048小游戏是一个很好的练手机会。这个小游戏基于Tkinter库构建，旨在实现一个简单的可视化版本，允许玩家通过键盘操作进行数字方块的滑动和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值