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

最新推荐文章于 2022-09-20 13:57:05 发布

卢哥老油条

最新推荐文章于 2022-09-20 13:57:05 发布

阅读量1.4k

点赞数 4

分类专栏：结构清晰制作游戏一学就会文章标签：游戏

本文链接：https://blog.csdn.net/fan_ge_/article/details/116026384

版权

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

摘要由CSDN通过智能技术生成

博主教你轻轻松松利用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: 10

最低0.47元/天解锁文章

卢哥老油条

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
6
评论
2048小游戏——简简单单利用js做出自己的游戏！！

博主教你轻轻松松利用js技巧写出属于自己的2048小游戏！！自己做出实现在页面中想必大家都听说过甚至玩过2048这款小游戏博主无聊时也会拿起手机或者在电脑上玩上几把但是大家有没有想过自己花费一点时间做出一个2048游戏会不会非常有成就感呢？废话不多说开始一.首先大家要整理一下逻辑。首先大家在打开电脑，准备敲代码写出游戏的时候，一定要先思考，该游戏的每一步应该用什么样的逻辑判断去表达，包括游戏的输赢判断条件是什么，有没有理清楚，建议没玩过的宝贝们可以下载一个去玩玩，是非常有必要的。
复制链接

扫一扫