2048小游戏

已于 2022-05-23 11:19:38 修改
阅读量340 收藏
点赞数 1
文章标签： javascript html 前端
于 2022-05-23 11:17:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HBinGG/article/details/124923809
版权

JavaScript实现2048小游戏

    .box {
        margin: 0 auto;
        padding: 50px;
    }

    #grid {
        margin: 0 auto;
        padding: 0;
        background-color: burlywood;
        width: fit-content;
        height: fit-content;
        border-collapse: collapse;
    }

    #grid tr td {
        padding: 3px;
    }

    .block {
        display: table-cell;
        width: 100px;
        height: 100px;
        text-align: center;
        vertical-align: middle;
        font-size: 32px;
        font-weight: bold;
        background-color: bisque;
        border: 0;
    }

    .level2 {
        background-color: bisque;
        color: burlywood;
    }

    .level4 {
        background-color: coral;
        color: chocolate;
    }

    .level8 {
        background-color: lightgoldenrodyellow;
        color: lightcyan;
    }

    .level16 {
        background-color: lightpink;
        color: lightsalmon;
    }

    .level32 {
        background-color: greenyellow;
        color: green;
    }

    .level64 {
        background-color: hotpink;
        color: indigo;
    }

    .level128 {
        background-color: lawngreen;
        color: lemonchiffon;
    }

    .level256 {
        background-color: lightblue;
        color: lightcoral;
    }

    .level512 {
        background-color: lightslategrey;
        color: mediumblue;
    }

    .level1024 {
        background-color: purple;
        color: red;
    }

    .level2048 {
        background-color: red;
        color: palegreen
    }

<body ondragstart='return false' oncontextmenu='self.event.returnValue=false'>
    <div class="box">
        <table id='grid'>

        </table>
    </div>
</body>

<script>
    let row = col = 4;
    let grid = null;

    window.onload = function () {
        startGame();
    }

    //游戏开始
    let startGame = function () {
        grid = init_grid();
        grid.forEach(s => {
            s.forEach(e => {
                e.num = 0;
                e.hasNum = false;
            })
        })
        guidNum();
        guidNum();
    }
    //初始化
    let init_grid = function () {
        //生成矩阵html <tr>--行标签 <td>--列标签
        let gridHtml = '';
        for (let i = 0; i < row; i++) {
            gridHtml += '<tr>'
            for (let j = 0; j < col; j++) {
                gridHtml += '<td><span class="block"></span></td>';
            }
            gridHtml += '<tr>'
        }
        //写入html
        document.getElementById('grid').innerHTML = gridHtml;

        //返回矩阵二维数组
        let blocks = document.getElementsByClassName('block');
        let grid = new Array();
        for (let i = 0; i < blocks.length; i++) {
            if (i % col === 0) {
                grid.push(new Array());
            }
            grid[parseInt(i / col)].push(blocks[i]);
        }
        return grid;
    };

    let canLeft = canRight = canUp = canDown = true;
    //随机生成数字
    function guidNum(code) {
        let randomRow = Math.floor(Math.random() * row), randomCol = Math.floor(Math.random() * col);
        let num = 0;
        let confirmIsFull = isFull();
        while (num == 0) {
            num = ((Math.floor(Math.random() * 10) % 2) + 1) * 2;
        }
        if (!confirmIsFull) {
            if (grid[randomRow][randomCol].hasNum) {
                guidNum();
            }
            else {
                grid[randomRow][randomCol].hasNum = true;
                grid[randomRow][randomCol].innerHTML = num;
                grid[randomRow][randomCol].num = num;
                grid[randomRow][randomCol].className = 'block level' + num;
                canLeft = canRight = canUp = canDown = true;
            }
        }
        else {
            switch (code) {
                case 38:
                    canUp = false;
                    break;
                case 40:
                    canDown = false;
                    break;
                case 37:
                    canLeft = false;
                    break;
                case 39:
                    canRight = false;
                    break;
            }
            if (!canLeft && !canRight && !canUp && !canDown) {
                alert('You Lose!');
            }
        }
    }

    //判断是否布满了
    function isFull() {
        let result = true;
        grid.forEach(list => {
            list.forEach(item => {
                if (item.hasNum != true) {
                    result = false;
                }
            })
        })
        return result;
    }

    document.onkeydown = function () {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 38) {
            console.log('上');
            up();
        }
        if (e && e.keyCode == 40) {
            console.log('下');
            down();
        }
        if (e && e.keyCode == 37) {
            console.log('左');
            left();
        }
        if (e && e.keyCode == 39) {
            console.log('右');
            right();
        }
        guidNum(e.keyCode);
    }

    function up() {
        for (let i = 0; i < row - 1; i++) {
            for (let j = 0; j < col; j++) {
                if (!grid[i][j].hasNum) {
                    if (grid[i + 1][j].hasNum) {
                        grid[i][j].hasNum = true;
                        grid[i][j].num = grid[i + 1][j].num;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i + 1][j].hasNum = false;
                        grid[i + 1][j].num = 0;
                        grid[i + 1][j].className = 'block';
                        grid[i + 1][j].innerHTML = '';
                    }
                }
                else {
                    if (grid[i][j].num == grid[i + 1][j].num) {
                        grid[i][j].num = grid[i][j].num * 2;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i + 1][j].hasNum = false;
                        grid[i + 1][j].num = 0;
                        grid[i + 1][j].className = 'block';
                        grid[i + 1][j].innerHTML = '';
                    }
                }
            }
        }
    }

    function down() {
        for (let i = row - 1; i >= 1; i--) {
            for (let j = 0; j < col; j++) {
                if (!grid[i][j].hasNum) {
                    if (grid[i - 1][j].hasNum) {
                        grid[i][j].hasNum = true;
                        grid[i][j].num = grid[i - 1][j].num;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i - 1][j].hasNum = false;
                        grid[i - 1][j].num = 0;
                        grid[i - 1][j].className = 'block';
                        grid[i - 1][j].innerHTML = '';
                    }
                }
                else {
                    if (grid[i][j].num == grid[i - 1][j].num) {
                        grid[i][j].num = grid[i][j].num * 2;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i - 1][j].hasNum = false;
                        grid[i - 1][j].num = 0;
                        grid[i - 1][j].className = 'block';
                        grid[i - 1][j].innerHTML = '';
                    }
                }
            }
        }
    }

    function left() {
        for (let j = 0; j < col - 1; j++) {
            for (let i = 0; i < row; i++) {
                if (!grid[i][j].hasNum) {
                    if (grid[i][j + 1].hasNum) {
                        grid[i][j].hasNum = true;
                        grid[i][j].num = grid[i][j + 1].num;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i][j + 1].hasNum = false;
                        grid[i][j + 1].num = 0;
                        grid[i][j + 1].className = 'block';
                        grid[i][j + 1].innerHTML = '';
                    }
                }
                else {
                    if (grid[i][j].num == grid[i][j + 1].num) {
                        grid[i][j].num = grid[i][j].num * 2;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i][j + 1].hasNum = false;
                        grid[i][j + 1].num = 0;
                        grid[i][j + 1].className = 'block';
                        grid[i][j + 1].innerHTML = '';
                    }
                }
            }
        }
    }

    function right() {
        for (let j = col - 1; j >= 1; j--) {
            for (let i = 0; i < row; i++) {
                if (!grid[i][j].hasNum) {
                    if (grid[i][j - 1].hasNum) {
                        grid[i][j].hasNum = true;
                        grid[i][j].num = grid[i][j - 1].num;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i][j - 1].hasNum = false;
                        grid[i][j - 1].num = 0;
                        grid[i][j - 1].className = 'block';
                        grid[i][j - 1].innerHTML = '';
                    }
                }
                else {
                    if (grid[i][j].num == grid[i][j - 1].num) {
                        grid[i][j].num = grid[i][j].num * 2;
                        grid[i][j].className = 'block level' + grid[i][j].num;
                        grid[i][j].innerHTML = grid[i][j].num;
                        grid[i][j - 1].hasNum = false;
                        grid[i][j - 1].num = 0;
                        grid[i][j - 1].className = 'block';
                        grid[i][j - 1].innerHTML = '';
                    }
                }
            }
        }
    }
</script>

在这里插入图片描述运行效果请添加图片描述

HBinGG
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web版2048小游戏
05-03
web版的2048小游戏（html,js,jquery实现）
Pygame简易版2048小游戏：超详细解说，看完还不会可以剁手了（附完整源码）
xy258009的博客
01-30 8013
导语 哈喽！大家好，我是栗子，感谢大家的支持！ 新的一天，新气象，程序猿们的日常开始敲敲敲，改改改——今天给大家来一款简单的小游戏！ 2048小游戏——准确的来说确实是一个简单版本的！ 呐呐呐 ，主要是担心很多小伙伴儿直接上界面版本的看不懂，所以做了这款简单的2048，先看这 篇简单版本的吧！ 正文 为了搞懂这个游戏的规则，小编去直接下载了一款2048的小游戏，上手玩了一波！ 然后.........完全停不下来！23333~ 玩法：用手指或键盘上下左右滑动，将两个相同的数字..
2048小游戏逻辑代码（易懂）
cmh1999_12_19的博客
12-19 3041
2048主要是逻辑清晰，我这个是jQuery写的，但是不管是什么用什么写，其实都是这个逻辑， 代码没有删减，复制粘贴即可运行
2048/html小游戏
07-29
2048 游戏中，对于每次产生的新的数字所处位置，是随机的，通过产生随机数来完成，这次设计的 2048 游戏，由于其并不是产生 2048 即为结束标志，所以对于此游戏来说，玩家甚至可合并处 4096 、8192、16384 等。 游戏一旦开始，唯一的正常结束标志就是：16 个格子全部被数字占用，且无论做哪种方向的移动，数字之间都无法完成合并，此时，游戏无法继续，视为结束的标志
Javascript编写2048小游戏
10-23
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。
2048小游戏.zip
07-22
前端开发2048小游戏，纯html+css+js，欢迎大家阅读交流，如果代码有什么不足，希望大家指正
2048小游戏完整源码
02-13
2048小游戏源码打包，可以在开发工具中正常打开。需要的可以下载来看看
2048小游戏-2048.war
04-26
2048，非常小的一个包，可以用来测试。当然，工作累了玩玩也可以。
2048html小游戏
03-21
2048小游戏代码，原生JS编写的。玩法说明:键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束，回车键或点击重新开始游戏将会重置。
javascript实现2048小游戏
热门推荐
funwj的博客
08-01 3万+
最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。 游戏相关截图：
用python实现2048小游戏
weixin_42668123的博客
09-04 2万+
2048游戏规则：简单的移动方向键让数字叠加，并且获得这些数字每次叠加后的得分，当出现2048这个数字时游戏胜利。同时每次移动方向键时，都会在这个4*4的方格矩阵的空白区域随机产生一个数字2或者4，如果方格被数字填满了，那么就GameOver了 import curses from itertools import chain from random import choice class ...
2048小游戏python
最新发布
08-24
总的来说，编写2048小游戏需要考虑游戏界面的初始化和刷新、方块的生成和移动、游戏结束的判断等方面。通过使用Python面向对象的编程思想，我们可以比较方便地实现这个小游戏。 ### 回答3： 2048是一款流行的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值