2048小游戏

最新推荐文章于 2024-08-09 09:53:08 发布
最新推荐文章于 2024-08-09 09:53:08 发布
阅读量351 收藏
点赞数 3
分类专栏： js做的小东西 文章标签： 游戏 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzsn_wjc/article/details/103556443
版权

2048JS

实现思路

  1. 先创建一个map矩阵，记录下标（同时要在每个块设置自定义属性）
  2. 封装一个随机产生块的函数（在这个函数里要进行游戏结束的判断）
  3. 根据键盘上下左右的按键控制移动方向（移动端可以通过触屏移动）
  4. 开始移动（下面是移动的步骤）
  5. 先全部往同一个方向移动
  6. 第一次移动完合并（每次根据不同的方向按不同规则来移动，合并的同时记录当前合并的块的数值及总分，并根据数值改变块的颜色）
  7. 合并完再执行一次上面说的移动的函数
  8. 封装改变颜色的函数

实现代码

（为了更好的理解代码，代码没有进行封装，有些地方有冗余的代码，有兴趣的小伙伴可以自行封装）

1.先创建需要使用的变量及初始化map
let wrap = document.querySelector('.wrap');//获取包裹的wrap
    let map = [];//存储记录2048的数值及位置
    let direction = null; //移动的方向
    let scroe = 0;
    //初始化map
    function mapInit(map) {
        for (var i = 0; i < 4; i++) {
            map[i] = [];
            for (var j = 0; j < 4; j++) {
                map[i][j] = 0;
            }
        }
        return map;
    }

    map = mapInit(map); //存储生成块的位置(初始化)
2.封装生成块的函数
function randomBlock(wrap) {
        let span = wrap.querySelectorAll('span');
        if (span.length == 16) {
            alert('游戏结束');
            return false;
        }
        //随机生成x，y,如果生成的位置已有重新生成
        do {
            var x = parseInt(Math.random() * 4);
            var y = parseInt(Math.random() * 4);
        } while (map[x][y]);
        //在当前生成的块位置设置一个初始值为2
        map[x][y] = 2;
        //新增一个span
        var box = document.createElement('span');
        //给span添加自定义属性x，y,及对应的count值
        box.setAttribute('x', x);
        box.setAttribute('y', y);
        box.setAttribute('num', 2);
        //生成块的位置
        x = (x * 100) + 14 + (12 * x);
        y = (y * 100) + 14 + (12 * y);
        box.style.left = y + 'px';
        box.style.top = x + 'px';
        box.innerText = 2;
        //添加进wrap里
        wrap.appendChild(box);
    }
3.全部往同一个方向移动
  //根据方向全部往一个方向移动
    function moveBox(direction) {
        let span = wrap.querySelectorAll('span');
        //遍历每个span块
        for (let i = 0; i < span.length; i++) {
            //获取每个span的x,y
            let x = Number(span[i].getAttribute('x'));
            let y = Number(span[i].getAttribute('y'));
            switch (direction) {
                case 'left':
                    //如果当前块位于最左边则
                    if (y == 0) {
                        continue;
                    } else {
                        //获取当前块左边有多少个块
                        let xBox = 0;
                        for (var j = 0; j < y; j++) {
                            if (map[x][j] != 0) {
                                xBox++;
                            }
                        }
                        //设置自定义属性y
                        span[i].setAttribute('y', xBox);
                        //移动
                        span[i].style.left = 14 + xBox * (100 + 12) + 'px';
                    }
                    break;
                case 'right':
                    //如果当前块位于最右边则
                    if (y == 3) {
                        continue;
                    } else {
                        //获取当前块右边有多少个块
                        let xBox = 0;
                        for (var j = 3; j > y; j--) {
                            if (map[x][j] != 0) {
                                xBox++;
                            }
                        }
                        //改变自定义属性y
                        span[i].setAttribute('y', 3 - xBox);
                        //移动
                        span[i].style.left = 14 + (3 - xBox) * (100 + 12) + 'px';
                    }
                    break;
                case 'top':
                    //如果当前块位于最上边则
                    if (x == 0) {
                        continue;
                    } else {
                        //获取当前块上边有多少个块
                        let yBox = 0;
                        for (var j = 0; j < x; j++) {
                            if (map[j][y] != 0) {
                                yBox++;
                            }
                        }
                        //改变自定义属性x
                        span[i].setAttribute('x', yBox);
                        //移动
                        span[i].style.top = 14 + yBox * (100 + 12) + 'px';
                    }
                    break;
                case 'bottom':
                    //如果当前块位于最下边则
                    if (x == 3) {
                        continue;
                    } else {
                        //获取当前块上边有多少个块
                        let yBox = 0;
                        for (var j = 3; j > x; j--) {
                            if (map[j][y] != 0) {
                                yBox++;
                            }
                        }
                        //改变自定义属性x
                        span[i].setAttribute('x', 3 - yBox);
                        //移动
                        span[i].style.top = 14 + (3 - yBox) * (100 + 12) + 'px';
                    }
                    break;
            }
        }
        //根据改变位置后的块修改map矩阵
        map = resetMap();
    }
4.合并及改变颜色的函数

（合并要根据方向进行不同的方式的合并）

//合并
    function merge(direction) {
        let span = wrap.querySelectorAll('span');
        for (let i = 0; i < map.length; i++) {
            //如果是左边
            if (direction == 'left') {
                for (let j = 0; j < map[i].length - 1; j++) {
                    if (map[i][j] != 0 && map[i][j] == map[i][j + 1]) {

                        for (let k = 0; k < span.length; k++) {
                            //移除这个块
                            if (Number(span[k].getAttribute('x')) == i && Number(span[k].getAttribute('y')) == (j + 1)) {
                                wrap.removeChild(span[k]);
                            }
                            //改变这个块的数字及标签上对应的坐标
                            if (Number(span[k].getAttribute('x')) == i && Number(span[k].getAttribute('y')) == j) {
                                //计算块相加得到的数字
                                let numAdd = Number(map[i][j + 1]) + Number(map[i][j]);
                                //改变自定义属性num的值
                                span[k].setAttribute('num', numAdd)
                                span[k].innerText = numAdd;
                                //改变颜色
                                changeColor(span[k]);
                                //计算总分
                                scroe += numAdd;
                            }
                        }
                        j++;
                    }
                }
            }
            //如果是右边
            if (direction == 'right') {
                for (let j = 3; j >= 1; j--) {
                    if (map[i][j] != 0 && map[i][j] == map[i][j - 1]) {

                        for (let k = 0; k < span.length; k++) {
                            //移除这个块
                            if (Number(span[k].getAttribute('x')) == i && Number(span[k].getAttribute('y')) == (j - 1)) {
                                wrap.removeChild(span[k]);
                            }
                            //改变这个块的数字及标签上对应的坐标
                            if (Number(span[k].getAttribute('x')) == i && Number(span[k].getAttribute('y')) == j) {
                                let numAdd = Number(map[i][j - 1]) + Number(map[i][j]);
                                span[k].setAttribute('num', numAdd)
                                span[k].innerText = numAdd;
                                changeColor(span[k]);
                                scroe += numAdd;
                            }
                        }
                        j--;
                    }
                }
            }
            //如果是上边
            if (direction == 'top') {
                for (let j = 0; j < map.length - 1; j++) {

                    if (map[j][i] != 0 && map[j][i] == map[j + 1][i]) {

                        for (let k = 0; k < span.length; k++) {
                            //移除这个块
                            if (Number(span[k].getAttribute('x')) == j + 1 && Number(span[k].getAttribute('y')) == i) {
                                wrap.removeChild(span[k]);
                            }
                            //改变这个块的数字及标签上对应的坐标
                            if (Number(span[k].getAttribute('x')) == j && Number(span[k].getAttribute('y')) == i) {
                                let numAdd = Number(map[j + 1][i]) + Number(map[j][i]);
                                span[k].setAttribute('num', numAdd)
                                span[k].innerText = numAdd;
                                changeColor(span[k]);
                                scroe += numAdd;
                            }
                        }
                        j++;
                    }
                }
            }
            //如果是下边
            if (direction == 'bottom') {
                for (let j = 3; j >= 1; j--) {

                    if (map[j][i] != 0 && map[j - 1][i] == map[j][i]) {

                        for (let k = 0; k < span.length; k++) {
                            //移除这个块
                            if (Number(span[k].getAttribute('x')) == j - 1 && Number(span[k].getAttribute('y')) == i) {
                                wrap.removeChild(span[k]);
                            }
                            //改变这个块的数字及标签上对应的坐标
                            if (Number(span[k].getAttribute('x')) == j && Number(span[k].getAttribute('y')) == i) {
                                let numAdd = Number(map[j - 1][i]) + Number(map[j][i]);
                                span[k].setAttribute('num', numAdd)
                                span[k].innerText = numAdd;
                                changeColor(span[k]);
                                scroe += numAdd;
                            }
                        }
                        j--;
                    }
                }
            }
        }
        map = resetMap();
        moveBox(direction);
        document.querySelector('.score em').innerText = scroe;
        randomBlock(wrap);

    }
    //改变颜色
    function changeColor(dom) {
        let num = dom.getAttribute('num');
        switch (num) {
            case '2': dom.style.backgroundColor = '#eee4da'; break;
            case '4': dom.style.backgroundColor = '#ede0c8'; break;
            case '8': dom.style.backgroundColor = '#f2b179'; break;
            case '16': dom.style.backgroundColor = '#f59563'; break;
            case '32': dom.style.backgroundColor = '#f67c5f'; break;
            case '64': dom.style.backgroundColor = '#f65e3b'; break;
            case '128': dom.style.backgroundColor = '#edcf72'; break;
            case '256': dom.style.backgroundColor = '#edcc61'; break;
            case '512': dom.style.backgroundColor = '#edc850'; break;
            case '1024': dom.style.backgroundColor = '#edc53f'; break;
            case '2048': dom.style.backgroundColor = '#edc22e'; break;

        }
    }
5.重构map矩阵的函数
//根据标签对应的位置重构map
    function resetMap() {
        let span = wrap.querySelectorAll('span');
        map = mapInit(map);
        for (var i = 0; i < span.length; i++) {
            let x = Number(span[i].getAttribute('x'));
            let y = Number(span[i].getAttribute('y'));
            map[x][y] = Number(span[i].getAttribute('num'));
        }
        return map;
    }
6.根据按键进行移动
//触屏控制移动方向
    document.ontouchstart = function (e) {
        var e = e || window.event;
        //获取开始触碰的坐标
        let xStart = e.touches[0].clientX;
        let yStart = e.touches[0].clientY;

        document.ontouchend = function (e) {
            var e = e || window.event;
            //获取触碰结束的坐标
            let xEnd = e.changedTouches[0].clientX;
            let yEnd = e.changedTouches[0].clientY;
            //坐标差
            let xDif = xEnd - xStart;
            let yDif = yEnd - yStart;
            //根据坐标差移动
            if (xDif >= 50) { direction = 'right'; toMove('right'); }
            else if (xDif <= -50) { direction = 'left'; toMove('left') }
            else if (yDif >= 50) { direction = 'bottom'; toMove('bottom') }
            else if (yDif <= -50) { direction = 'top'; toMove('top') }
        }

    }
    //键盘控制移动
    document.onkeydown = function (e) {
        var e = e || window.event;
        //获取span块的dom元素
        switch (e.keyCode) {
            case 37:
                direction = 'left';
                toMove('left');
                break;
            case 38:
                direction = 'top';
                toMove('top');
                break;
            case 39:
                direction = 'right';
                toMove('right');
                break;
            case 40:
                direction = 'bottom';
                toMove('bottom');
                break;
        }
    }
    //执行移动
    function toMove(direction) {
        //获取span块的dom元素
        switch (direction) {
            case 'left':
                moveBox('left');
                merge(direction);
                break;
            case 'top':
                moveBox('top');
                merge(direction);
                break;
            case 'right':
                moveBox('right');
                merge(direction);
                break;
            case 'bottom':
                moveBox('bottom');
                merge(direction);
                break;
        }
    }
html代码
<p>
        <span class="title">2048</span>
        <span class="score">
            <i>SCORE</i>
            <em>0</em>
        </span>
    </p>

    <div class="wrap">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
css样式
h1,h2,h3,h4,p,ul,li,body{
    margin: 0;
    padding: 0;
}

li{
    float: left;
    list-style: none;
}

i,em{
    font-style: normal;
}

p{
    display: flex;
    width: 456px;
    margin: 25px auto;
    justify-content: space-between;
    align-items: center;
}
p .title{
    font-size: 60px;
    color: #736d63;
    font-weight: 550;
}
p .score{
    width: 100px;
    height: 55px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: #b5aa9c;
    color: white;
}
p .score i{
    font-size: 12px;
}
p .score em{
    font-size: 20px;
    font-weight: 550;
}
.wrap{
    width: 448px;
    height: 448px;
    padding: 8px;
    background: #bdae9c;
    margin: auto;
    border-radius: 10px;
    position: relative;
}
.wrap ul{
    width: 100%;
    height: 100%;
}
.wrap ul li{
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin: 6px;
    background: #c5baad;
}
.wrap span{
    width: 100px;
    height: 100px;
    position: absolute;
    background: #eee4da;
    border-radius: 8px;
    line-height: 100px;
    text-align: center;
    font-size: 50px;
    font-weight: 550;
    transition: all 0.2s;
}
游戏截图

在这里插入图片描述

体验地址

http://39.106.60.168/www/2048/

养猪骚年�
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
c++制作小游戏2048
weixin_43116971的博客
11-02 5560
2048小游戏完整代码
javascript实现2048小游戏
热门推荐
funwj的博客
08-01 3万+
最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。 游戏相关截图：
2048小游戏C++板来啦！
PingdiGuo_guo的博客
02-15 4377
C++板2048游戏实现，超详细有趣喔~~关注主播不迷路喔！
python小游戏 2048小游戏设计与实现
WEB_DC的博客
01-08 2673
🔥 Hi，各位同学好呀，这里是L学长！🥇今天向大家分享一个今年(2022)最新完成的毕业设计项目作品python小游戏毕设 2048小游戏设计与实现 (源码)🥇 学长根据实现的难度和等级对项目进行评分(最低0分，满分5分)难度系数：3分工作量：3分创新点：4分今天我们用python实现一个2048小游戏。游戏规则“使用方向键移动方块，两个数字相同的方块撞在一起后，将会合并为一个数字是原来两倍的新方块。游戏的时候尽可能多地合并这些数字方块就行了。简介。
Javascript编写2048小游戏
10-23
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。
2048小游戏.zip
07-22
《2048小游戏开发详解》 2048小游戏是一款简单却极具挑战性的数字合成游戏，由Gabriele Cirulli在2014年创造。它以其独特的玩法和简洁的设计吸引了全球无数玩家的喜爱。在这个项目中，我们将探讨如何使用前端技术...
2048小游戏编写思路
conniesarah的博客
06-22 9129
有点难 关键知识点 下面请各位读者先学习一下该游戏中涉及到的几个关键知识点，有了这些必备条件，我们才好讲解 2048 游戏的设计思路。 1) 改变文本颜色 2048 游戏设置的格子边框颜色为湖蓝色，其中的数字颜色设有淡绿色、绿色等，所有的这些设置都涉及到如何改变文本的输出颜色，请大家猛击《彩色版的C语言，让文字更漂亮》了解详情。 2) 键盘监听 在2048 游戏中，玩家可通过 W\A\S\D 或者方向键来控制数字的移动方向，具体实现方法请大家猛击《C语言非阻塞式键盘监听》了解详情。 3) 获取随机数 204
Unity自带的UGUI ScrollView刷新不及时问题
最新发布
weixin_43932372的博客
08-09 114
如上所示，当我想刷新Unity中的一个ScrollView的列表后，将这个列表瞬间移至底部。但是上述这三行代码会出现一个问题：存在ScrollView列表中的东西还未刷新完，就执行了移至底部的方法，导致最终的效果与预期不符。那怎么让它在刷新完成之后再进行后续的操作？
统一游戏增强运行库，集合了多种游戏运行所必需的库文件的软件包
ITdgr的博客
08-09 122
该运行库集合了多种游戏运行所需的库文件，能够自动检测并安装或更新所需的运行库，从而确保用户在安装和运行游戏时不会遇到因缺少必要组件而导致的问题。统一游戏增强运行库不仅继承了.NET离线运行库合集的组件，还添加了其他PC必备的运行库，使得用户可以更加方便地管理和维护他们的系统。这种整合方式大大减少了用户在安装和管理各种运行库时的复杂性，提高了整体的用户体验。总之，统一游戏增强运行库通过提供一个全面、易于使用的解决方案，帮助用户轻松应对现代游戏和应用程序对运行库的需求，确保系统的稳定性和兼容性。
Cpp实验：继承和多态
lengmei1的博客
08-07 382
1. 掌握如何编写基类，如何通过继承基类的属性和函数编写派生类；2. 掌握如何在派生类成员函数中调用基类的成员函数；3. 了解虚函数和多态的应用；4. 了解随机整数的获得方式：伪随机和真随机数。软件：Windows7或Windows 10，Code Blocks硬件：个人计算机。
Unity物理模块 之 ​2D碰撞器
2301_77947509的博客
08-08 519
2D碰撞器
Unity dots IJobParallelFor并行的数据写入问题
u014716849的博客
08-05 334
上面的写法会报ReadWriteBuffers are restricted to only read & write the element at the job index错误，这是出于性能和线程安全的考虑，Unity Job System限制了每个Job只能访问或修改由Job索引指定的单个元素,因此这里非index索引下的数据写入收到了限制。
使用Python实现2048小游戏
"使用Python制作2048小游戏的实践" 在学习Python的过程中，通过实践制作2048小游戏是一个很好的练手机会。这个小游戏基于Tkinter库构建，旨在实现一个简单的可视化版本，允许玩家通过键盘操作进行数字方块的滑动和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值