仅需一维数组，JS实现2048，无限长宽

最新推荐文章于 2022-11-14 14:17:03 发布
最新推荐文章于 2022-11-14 14:17:03 发布
阅读量157 收藏
点赞数
分类专栏： 游戏 文章标签： html5 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33014695/article/details/120176298
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #cube {
            padding: 10px;
        }

        #info {
            width: 300px;
            border-radius: 5px;
            line-height: 80px;
            height: 80px;
            user-select: none;
            font-size: 40px;
            background-color: #0c5955;
            text-align: center;
            vertical-align: middle;
            color: white;
        }

        #cube > span {
            width: 80px;
            height: 80px;
            margin-left: 5px;
            margin-top: 5px;
            border-radius: 5px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 80px;
            background-color: #52c2bc;
            color: white;
            font-size: 30px;
            user-select: none;
            font-weight: bolder;
        }

        #cube > span.num2 {
            background-color: #2a938e;
        }

        #cube > span.num4 {
            background-color: #13487c;
        }

        #cube > span.num8 {
            background-color: #084441;
        }

        #cube > span.num16 {
            background-color: #0a312f;
        }

        #cube > span.num32 {
            background-color: #09b688;
        }

        #cube > span.num64 {
            background-color: #0b2c4d;
        }

        #cube > span.num128 {
            background-color: #2644ad;
        }

        #cube > span.num256 {
            background-color: #151f44;
        }

        #cube > span.num512 {
            background-color: #1969a9;
        }

        #cube > span.num1024 {
            background-color: #1ebb97;
        }

        #cube > span.num2048 {
            background-color: #00ffc3;
        }
    </style>
    <script>
        let numArray = [], line;
        let score, gameOver;
        let infoSpan, numInput;

        function init(a) {
            score = 0;
            line = a;
            numArray.length = Math.pow(line, 2);
            gameOver = false;
            reset();

        }

        function newMap() {
            let k = parseInt(numInput.value);
            if (!isNaN(k)) {
                if (k < 2) {
                    alert("玩什么呢？");
                } else {
                    init(k);

                }
            } else {
                alert("错误！")
            }
        }

        function reset() {
            for (let i = 0; i < numArray.length; i++) {
                numArray[i] = undefined;
            }
            gameOver = false;
            scoreRest();
            putNum();
            show();
        }

        function scoreCount(a) {
            score += a;
            infoSpan.innerHTML = score;
        }

        function scoreRest() {
            score = 0;
            infoSpan.innerHTML = 0;
        }

        window.onload = function () {

            numInput = document.getElementById("lineInput");
            infoSpan = document.getElementById("info").querySelector("span");
            init(4);
        }
        window.onkeydown = function (e) {
            console.log(gameOver)
            if (gameOver) {
                alert("失败了！请重来！");
                return;
            }
            switch (e.keyCode) {
                case 37:
                    toLeftKey();
                    putNum();
                    show();
                    break;
                case 38:

                    toUPKey();
                    putNum();
                    show();

                    break;
                case 39:
                    toRightKey();
                    putNum();
                    show();
                    break;
                case 40:
                    toBottomKey();
                    putNum();
                    show();
                    break;
            }
        }

        function show() {
            showFormat();
        }

        function getColorCube(k) {
            return `num${k}`;
        }

        function showFormat() {
            let c = "", d;

            for (let i = 0; i < line; i++) {
                for (let j = 0; j < line; j++) {
                    d = numArray[i * line + j];
                    if (d === undefined) {
                        c = c + "<span></span>" + "";
                    } else {
                        c = c + `<span class="${getColorCube(d)}">${d}</span>`
                    }


                }
                c += "<br/>";


            }

            document.getElementById("cube").innerHTML = c;


        }

        function putNum() {

            let k = [];
            for (let i = 0; i < numArray.length; i++) {
                if (numArray[i] === undefined) {
                    k.push(i);
                }
            }


            let t = rand(k);
            if (t) {
                if (t.length > 1) {
                    numArray[t[0]] = 2;
                    numArray[t[1]] = 2;
                } else {
                    numArray[t[0]] = 2;
                }
                if (k.length <= 2) {
                    if (!checkCantMove()) {
                        gameOver = true;
                        //为什么是显示后才显示效果，是因为按键后的运算大有延迟，这个先执行。
                        alert("你失败了！");

                    }
                }
            } else {
                console.log("I can't put anything!");
            }
        }

        function checkCantMove() {
            for (let i = 0; i < numArray.length; i++) {
                if (numArray[i] === undefined) {
                    return true;
                }
                if (i % line - 1 > -1) {
                    if (numArray[i] === numArray[i - 1]) {
                        return true;
                    }
                }
                if (i % line + 1 < line - 1) {
                    if (numArray[i] === numArray[i + 1]) {
                        return true;
                    }
                }
                if (i % line - line > -1) {
                    if (numArray[i] === numArray[i - line]) {
                        return true;
                    }
                }
                if (i % line + line < numArray.length) {
                    if (numArray[i] === numArray[i + line]) {
                        return true;
                    }
                }
            }
            return false;
        }

        function toUPKey() {
            let c = -1;
            for (let i = 0; i < line; i++) {
                for (let j = 1; j < line; j++) {
                    if (numArray[i + j * line] !== undefined) {
                        for (let k = 0; k < j; k++) {
                            if (numArray[i + (j - k - 1) * line] === undefined) {
                                c = i + (j - k - 1) * line;
                            } else {
                                if (numArray[i + (j - k - 1) * line] === numArray[i + j * line]) {
                                    numArray[i + (j - k - 1) * line] += numArray[i + j * line];
                                    numArray[i + j * line] = undefined;
                                    scoreCount(numArray[i + (j - k - 1) * line]);
                                    c = -1;
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                        if (c !== -1) {
                            numArray[c] = numArray[i + j * line];
                            numArray[i + j * line] = undefined;
                            c = -1;
                        }
                    }
                }
            }
        }

        function toBottomKey() {
            let c = -1;
            for (let i = 0; i < line; i++) {
                for (let j = line - 2; j > -1; j--) {
                    if (numArray[i + j * line] !== undefined) {
                        for (let k = 1; k < line - j; k++) {
                            if (numArray[i + (j + k) * line] === undefined) {
                                c = i + (j + k) * line;
                            } else {
                                if (numArray[i + (j + k) * line] === numArray[i + j * line]) {
                                    numArray[i + (j + k) * line] += numArray[i + j * line];
                                    numArray[i + j * line] = undefined;
                                    scoreCount(numArray[i + (j + k) * line]);
                                    c = -1;
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                        if (c !== -1) {
                            numArray[c] = numArray[i + j * line];
                            numArray[i + j * line] = undefined;
                            c = -1;
                        }
                    }
                }
            }
        }

        function toLeftKey() {
            let c = -1;
            for (let i = 0; i < line; i++) {
                for (let j = 1; j < line; j++) {
                    if (numArray[i * line + j] !== undefined) {
                        for (let k = 0; k < j; k++) {
                            if (numArray[i * line + j - k - 1] === undefined) {
                                c = i * line + j - k - 1;
                            } else {
                                if (numArray[i * line + j - k - 1] === numArray[i * line + j]) {
                                    numArray[i * line + j - k - 1] += numArray[i * line + j];
                                    numArray[i * line + j] = undefined;
                                    scoreCount(numArray[i * line + j - k - 1]);
                                    c = -1;
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                        if (c !== -1) {
                            numArray[c] = numArray[i * line + j];
                            numArray[i * line + j] = undefined;
                            c = -1;
                        }
                    }
                }
            }
        }

        function toRightKey() {
            let c = -1;
            for (let i = 0; i < line; i++) {
                for (let j = line - 2; j > -1; j--) {
                    if (numArray[i * line + j] !== undefined) {
                        for (let k = 1; k < line - j; k++) {
                            if (numArray[i * line + j + k] === undefined) {
                                c = i * line + j + k;
                            } else {
                                if (numArray[i * line + j + k] === numArray[i * line + j]) {
                                    numArray[i * line + j + k] += numArray[i * line + j];
                                    numArray[i * line + j] = undefined;
                                    c = -1;
                                    scoreCount(numArray[i * line + j + k]);
                                    break;
                                } else {
                                    break;
                                }
                            }
                        }
                        if (c !== -1) {
                            numArray[c] = numArray[i * line + j];
                            numArray[i * line + j] = undefined;
                            c = -1;
                        }
                    }
                }
            }
        }

        function rand(arr) {
            if (arr.length < 1) {

                return false;
            }
            if (arr.length < 2) {
                let arr2 = [...arr];
                let c = myRandom(0, arr2.length - 1);
                let a = arr2[c];
                return [a];
            } else {
                let arr2 = [...arr];
                let c = myRandom(0, arr2.length - 1);
                let a = arr2[c];
                arr2.splice(c, 1);
                c = myRandom(0, arr2.length - 1);
                let b = arr2[c];

                return [a, b];
            }

        }

        function myRandom(min, max) {
            return min + Math.floor((max - min + 1) * Math.random());

        }
    </script>
</head>
<body>
<div id="info">
    <span>0</span>
</div>
<div id="cube">

</div>
<button onclick="reset()">再来一局</button>
<button onclick="newMap()">新地图</button>
<label>
    <input id="lineInput" type="number" placeholder="请输入行数"/>
</label>


</body>
</html>

下载地址：

https://gitee.com/KatyLight/games/blob/master/2048-finnal.html

KatyLight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
项目实训- 基于unity的2D多人乱斗闯关游戏设计与开发（六、实现两类小地图）
weixin_45865669的博客
04-17 966
目录一、前言二、针对问题一三、针对问题二 一、前言 1、游戏二地图较大，场景复杂，于是建立一个小地图，在角色上方，显示部分地图内容 2、游戏四地图较小，摄像机可以显示全部地图，同时由于为pvp游戏，同时显示敌方位置 二、针对问题一 首先在canvas下创建一个空对象，并在其下方创建一个RawImage，是ui显示模块，将相机所渲染的显示在canvas上，并将其移动到对应的位置（这里运用了一个圆形的遮盖，令小地图是圆形） 在角色下创建一个相机，用来渲染地图，并调整大致位置，令其在角色的正上方 接下来创建
网页游戏开发基础——Canvas基本图形绘制
gllxbc的博客
06-27 1253
Canvas是HTML5新增的一个标签，你可以把它翻译为画布，通过它可以绘制二维或三维图形，有了它就可以不用安装flash而实现复杂的动画功能。
使用 HTML 5 Canvas 和 Raycasting 创建伪 3D 游戏
最新发布
weixin_46596227的博客
11-14 1279
随着最近浏览器性能的提高，除了像 Tic-Tac-Toe 这样的简单游戏之外，用 JavaScript 实现游戏变得更加容易。我们不再需要使用 Flash 来制作炫酷的效果，而且随着 HTML5 Canvas 元素的出现，创建外观漂亮的网页游戏和动态图形比以往任何时候都更容易。一段时间以来，我想实现的一款游戏或游戏引擎是一种伪 3D 引擎，例如 iD Software 在旧的德军总部 3D 游戏中使用的引擎。
微信小程序：实现canvas绘制地图及简单拖动
03-17
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
html小游戏linux,利用HTML5 <canvas>实现2048小游戏
weixin_31974659的博客
05-16 173
利用HTML5 实现2048小游戏//仅供学习用，请勿用于其他用途嗯，花一天写了一下，当做练手，后来发现其实用CSS3来做会比较轻松而且好看点...有机会就补上肯定没有原版的好看好操作，而且貌似封装得也不太行，将就着看看吧最后成品图：index.html:2048your browser doesn't support canvas!chesspieces.js:var Cp = {up : fu...
PHP实现一维数组转二维数组的方法
10-24
总结来说，PHP中实现一维数组到二维数组的转换主要是通过遍历一维数组，将每个元素（这里是一维数组）作为新数组添加到目标二维数组中。这种方法可以帮助我们更好地组织和处理复杂的数据结构，尤其在处理表格数据或...
JavaScript实现一维数组转化为二维数组
12-23
啥也不说了，上代码吧！...//每个子数组里的元素个数 var arr = [1,4,5,6,34,34,67,895,2456,87,9,5,23,884,56]; var Arr = new Array(Math.ceil(arr.length/num)); for(var i = 0; i<Arr.length;i++){
一维数组滤波_一维数组滤波_
10-02
文件名"一维数组滤波.vi"很可能是一个LabVIEW虚拟仪器（VI），它包含了实现上述滤波过程的程序代码和用户界面。在LabVIEW中，数据通常以图表或波形显示，用户可以通过直观的图形化编程来设计滤波算法。 使用LabVIEW...
2048canvas游戏
05-28
canvas版的2048小游戏，canvas版的2048小游戏，canvas版的2048小游戏，canvas版的2048小游戏，canvas版的2048小游戏
canvas 基础以及2048游戏实践
赵泽清的博客
11-20 492
canvas（画布）：顾名思义用来画画的容器 1. 点 context.moveTo(x,y)。这句代码的意思是 移动画笔至(x,y)这个点（单位是px）。这里是以 canvas 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。 2. 线 起点：context.moveTo(x,y)：同点 终点：context.lineTo(x,y)。这句的意思是从 上一笔的停止点...
js实现贪吃蛇游戏 canvas绘制地图
01-19
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 思路 400px * 400px的地图，每20px*20px分成单元格绘制蛇身 每次移动即更换尾 部 头部的颜色 全部代码 <!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> html, body { display:
自己用js和canvas写的my2048小游戏
04-13
自己用js和canvas写的2048，样式有点丑，可以设置调节。自己玩了两把，还行吧，能玩。想要瞅瞅源码的，可以下载看看，做好心理准备，丑陋的代码看着心慌。
canvas+js实现2048小游戏
01-16
通过使用多个二维数组，使用javascript在canvas对应坐标上绘制对应的数字，再通过JavaScript的事件监听来实现。
HTML5——canvas制作游戏2048
11-08
HTML5，canvas制作游戏2048
Python制作2048小游戏
qq_44793283的博客
02-18 4252
这个2048小游戏我们使用的是画布模块，通过实现测试出位置进行更改每个画图的区域进行颜色的改变的文字的修改，四个方位的操作产生数字变换，每次变化都需要重新判断画图区域，进行变化，实现界面的状态的切换。
html5的canvas绘制迷宫地图
weixin_33918114的博客
09-30 414
canvas标签一直是html5的亮点，用它可以实现很多东西。我想用它来绘画像迷宫那样的地图。借助到的工具有瓦片地图编辑器tiled（点击跳转到下载链接）。 如图：如果你想要画像这样的迷宫地图，如果不用canvas，可以通过dom操作拼接一个一个div，以达成这个效果。那样是不是很不合理？首先，页面上会存在大量的div，并且通过dom操作生成很耗性能，如果地图大了，会非常不流畅，非常卡。如果...
12、开源游戏-“胡子”地图绘制和游戏主循环设计
weixin_33895016的博客
04-08 125
2019独角兽企业重金招聘Python工程师标准>>> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值