html 2048小游戏【源码】

最新推荐文章于 2024-04-07 23:39:13 发布
最新推荐文章于 2024-04-07 23:39:13 发布
阅读量398 收藏 7
点赞数 10
文章标签： html 前端 javascript 游戏程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44640575/article/details/137459174
版权

游戏简介：

2048是一款简单而又上瘾的数字拼图游戏。游戏的目标是通过移动方块，合并相同数字的方块，最终达到数字2048。每一次移动都会在空白的方格中生成一个数字为2或4的方块，而移动方向可以选择上、下、左、右四个方向。游戏结束的条件是方格填满且无法继续移动，或者成功合成数字2048。2048的简单规则和挑战性的玩法吸引了众多玩家，让人沉迷其中。快来挑战自己的智力和策略，在有限的空间中创造最高的分数吧！

游戏界面：

在这里插入图片描述

运行效果：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html>
<head>
    <title>2048</title>
    <style>
        body {
            text-align: center;
            margin-top: 50px;
        }

        h1 {
            font-size: 50px;
            color: #776e65;
        }

        #gameContainer {
            margin-top: 50px;
            display: inline-block;
        }

        #score {
            font-size: 24px;
            margin-bottom: 10px;
            color: #776e65;
        }

        #gridContainer {
            width: 400px;
            height: 400px;
            border: 1px solid #bbada0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
            background-color: #faf8ef;
            padding: 10px;
        }

        .tile {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: bold;
            background-color: #eee4da;
            border-radius: 6px;
            color: #776e65;
        }

        #gameOverContainer {
            display: none;
            margin-top: 20px;
        }

        #gameOver {
            font-size: 36px;
            color: #776e65;
            margin-bottom: 10px;
        }

        #restartButton {
            font-size: 20px;
            padding: 8px 20px;
            border-radius: 6px;
            background-color: #8f7a66;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>2048</h1>

    <div id="gameContainer">
        <div id="score">Score: 0</div>
        <div id="gridContainer"></div>
        <div id="gameOverContainer">
            <div id="gameOver">Game Over!</div>
            <button id="restartButton">Restart</button>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const gridContainer = document.getElementById("gridContainer");
            const scoreDisplay = document.getElementById("score");
            const gameOverContainer = document.getElementById("gameOverContainer");
            const gameOver = document.getElementById("gameOver");
            const restartButton = document.getElementById("restartButton");

            const width = 4;
            let tiles = [];
            let score = 0;
            let gameOverFlag = false;

            // 初始化游戏
            function init() {
                score = 0;
                gameOverFlag = false;
                updateScore();
                gameOverContainer.style.display = "none";
                restartButton.removeEventListener("click", restart);
                while (gridContainer.firstChild) {
                    gridContainer.firstChild.remove();
                }
                tiles = new Array(width * width).fill(null);
                addTile();
                addTile();
                drawTiles();
            }

            // 随机在空位置添加方块
            function addTile() {
                const emptyTiles = tiles.reduce((acc, tile, index) => {
                    if (tile === null) {
                        acc.push(index);
                    }
                    return acc;
                }, []);

                if (emptyTiles.length > 0) {
                    const randomIndex = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
                    const value = Math.random() < 0.9 ? 2 : 4;
                    tiles[randomIndex] = value;
                }
            }

            // 绘制方块
            function drawTiles() {
                gridContainer.innerHTML = "";
                tiles.forEach((tile, index) => {
                    const tileElement = document.createElement("div");
                    tileElement.classList.add("tile");
                    if (tile !== null) {
                        tileElement.textContent = tile;
                        tileElement.classList.add(`tile-${tile}`);
                    }
                    gridContainer.appendChild(tileElement);
                });
            }

            // 更新得分
            function updateScore() {
                scoreDisplay.textContent = `Score: ${score}`;
            }

            // 移动方块
            function move(direction) {
                if (gameOverFlag) return;
                let hasChanged = false;

                switch (direction) {
                    case "up":
                        for (let col = 0; col < width; col++) {
                            for (let row = 1; row < width; row++) {
                                let currentIndex = col + row * width;
                                if (tiles[currentIndex] !== null) {
                                    let newIndex = currentIndex;
                                    while (newIndex >= width && tiles[newIndex - width] === null) {
                                        newIndex -= width;
                                    }
                                    if (newIndex - width >= 0 && tiles[newIndex - width] === tiles[currentIndex]) {
                                        tiles[newIndex - width] *= 2;
                                        tiles[currentIndex] = null;
                                        score += tiles[newIndex - width];
                                        hasChanged = true;
                                    } else if (newIndex !== currentIndex) {
                                        tiles[newIndex] = tiles[currentIndex];
                                        tiles[currentIndex] = null;
                                        hasChanged = true;
                                    }
                                }
                            }
                        }
                        break;
                    case "down":
                        for (let col = 0; col < width; col++) {
                            for (let row = width - 2; row >= 0; row--) {
                                let currentIndex = col + row * width;
                                if (tiles[currentIndex] !== null) {
                                    let newIndex = currentIndex;
                                    while (newIndex + width < width * width && tiles[newIndex + width] === null) {
                                        newIndex += width;
                                    }
                                    if (newIndex + width < width * width && tiles[newIndex + width] === tiles[currentIndex]) {
                                        tiles[newIndex + width] *= 2;
                                        tiles[currentIndex] = null;
                                        score += tiles[newIndex + width];
                                        hasChanged = true;
                                    } else if (newIndex !== currentIndex) {
                                        tiles[newIndex] = tiles[currentIndex];
                                        tiles[currentIndex] = null;
                                        hasChanged = true;
                                    }
                                }
                            }
                        }
                        break;
                    case "left":
                        for (let row = 0; row < width; row++) {
                            for (let col = 1; col < width; col++) {
                                let currentIndex = row * width + col;
                                if (tiles[currentIndex] !== null) {
                                    let newIndex = currentIndex;
                                    while (newIndex % width !== 0 && tiles[newIndex - 1] === null) {
                                        newIndex--;
                                    }
                                    if (newIndex % width !== 0 && tiles[newIndex - 1] === tiles[currentIndex]) {
                                        tiles[newIndex - 1] *= 2;
                                        tiles[currentIndex] = null;
                                        score += tiles[newIndex - 1];
                                        hasChanged = true;
                                    } else if (newIndex !== currentIndex) {
                                        tiles[newIndex] = tiles[currentIndex];
                                        tiles[currentIndex] = null;
                                        hasChanged = true;
                                    }
                                }
                            }
                        }
                        break;
                    case "right":
                        for (let row = 0; row < width; row++) {
                            for (let col = width - 2; col >= 0; col--) {
                                let currentIndex = row * width + col;
                                if (tiles[currentIndex] !== null) {
                                    let newIndex = currentIndex;
                                    while ((newIndex + 1) % width !== 0 && tiles[newIndex + 1] === null) {
                                        newIndex++;
                                    }
                                    if ((newIndex + 1) % width !== 0 && tiles[newIndex + 1] === tiles[currentIndex]) {
                                        tiles[newIndex + 1] *= 2;
                                        tiles[currentIndex] = null;
                                        score += tiles[newIndex + 1];
                                        hasChanged = true;
                                    } else if (newIndex !== currentIndex) {
                                        tiles[newIndex] = tiles[currentIndex];
                                        tiles[currentIndex] = null;
                                        hasChanged = true;
                                    }
                                }
                            }
                        }
                        break;
                }

                if (hasChanged) {
                    addTile();
                    drawTiles();
                    updateScore();
                    checkGameOver();
                }
            }

            // 检查游戏是否结束
            function checkGameOver() {
                const isFull = !tiles.includes(null);
                const canMove = checkMove();
                if (isFull && !canMove) {
                    gameOverFlag = true;
                    gameOverContainer.style.display = "block";
                    restartButton.addEventListener("click", restart);
                }
            }

            // 检查是否能够移动
            function checkMove() {
                for (let i = 0; i < tiles.length; i++) {
                    if (tiles[i] === null) {
                        return true;
                    }
                    if (i % width !== width - 1 && tiles[i] === tiles[i + 1]) {
                        return true;
                    }
                    if (i < tiles.length - width && tiles[i] === tiles[i + width]) {
                        return true;
                    }
                }
                return false;
            }

            // 重新开始游戏
            function restart() {
                init();
            }

            // 添加键盘按键监听事件
            document.addEventListener("keydown", function (event) {
                if (event.key === "ArrowUp" || event.key === "w") {
                    move("up");
                } else if (event.key === "ArrowDown" || event.key === "s") {
                    move("down");
                } else if (event.key === "ArrowLeft" || event.key === "a") {
                    move("left");
                } else if (event.key === "ArrowRight" || event.key === "d") {
                    move("right");
                }
            });

            // 初始化游戏
            init();
        });
    </script>
</body>
</html>
编码旅者
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2048小游戏源码
11-29
该资源为2048小游戏的html源码，亲测可用，有需要的童鞋请积极下载哦!
html编写2048
10-09
html5编写2048游戏很适合新手阅读，并且做了相应的注释
用html做2048
02-06
2048html版！目前虽然有些卡顿，但是挺好玩的，想想还是挺划算的，双击Test_2048.html即可开始2048，加油！！！
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）
weixin_41306215的博客
07-26 5831
前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76 这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、 虽然是跟着视频做，但是还是经常出错 做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结 希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你 该游戏需要有HTML、CSS、JS和JQ基础 边做边思考每一步的来由 2048小游戏（一） ...
html 2048小游戏【源码详解（一）】
最新发布
qq_44640575的博客
04-07 1073
这里先讲一下2048小游戏的界面设计，包含，主要是用拆分的思想进行。完整代码可以先看主页的上一篇。篇幅3500字。
html + css + js使用HBuilder开发工具做2048益智游戏
灰灰老师
07-11 1万+
html + css + js使用HBuilder开发工具做2048益智游戏 今天使用html + css + js给同学们做了一个简易版的2048益智游戏，希望大家按照步骤勤加练习，在编码的坑里早日踏上康庄大道，祝前程似锦！ 效果图： 开发思路： 一、使用HBuilder工具创建空白html项目 创建项目时路径尽量不要有中文路径 二、创建js和css文件备用 项目目录： 三、书写html标签 引入css和js文件： 书写html标签： html标签的代码，直接放在标签中即可: &l
html+css+JavaScript实现*{2048}小游戏,单机游戏（代码）
2302_81218205的博客
12-25 926
新游戏
只用html+js+css实现2048小游戏（带源码）
xtb666666的博客
07-23 1969
游戏截图： 对应的html代码： <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <h1> 通过四个方向键移动 </h1> <div class="container text-center" id="2048"> </div> <script> $(document).ready(function ()
2048小程序源码（html网页小游戏）
weixin_42511443的博客
11-29 2253
给大家推荐一个小游戏的源码吧，本人亲测过，是可以直接跑起来的！！！ 话不多说，丢下下载链接：https://download.csdn.net/download/weixin_42511443/10816676 解压之后，会发现一个html文件，浏览器直接打开就可以用了 还等什么，马上下载吧！...
html+css+javascript实现小游戏2048（详解，附源代码）
baiqi123456的博客
08-05 6680
html+css+javascript实现小游戏2048（详解，附源代码） 上下左右的移动原理相同，这里只详细说明向上移动的方法 这里的上下左右由wasd四个键控制 html部分 先创建好2048的一个静态布局 zuiwaibian：一个大的框框，整体的游戏界面。 caidan：用于显示当前得分的区域。 a1，a2，a3，a4：是第一行的小方块。 b1，b2，b3，b4：是第二行的小方块。 c1，c2，c3，c4：是第三行的小方块。 d1，d2，d3，d4：是第四行的小方块。 <div id="zui
2048html游戏源码分享
10-16
有兴趣写html游戏的，可以参考一下网页版的2048的源码！
2048游戏的游戏代码程序
08-29
2048游戏的HTML其中里面有大量的循环算法程序，可以供初学者借鉴
吃包子html小游戏源码
12-18
吃包子html小游戏源码
猜数字小游戏源码html
12-18
猜数字小游戏源码html
html-五子棋小游戏-源码
09-07
一款基于原生HTML+JS的前端五子棋小游戏，解压即可体验，并且含有源码可进行而开
2048小游戏HTML网页版源码共享.zip
12-16
2048小游戏HTML网页版源码共享
HTML小游戏2—— 2048网页版（附完整源码）
热门推荐
前端好玩的小案例、游戏、工具
10-24 1万+
本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 2048网页版小游戏 本节示例将会实现如下所示的效果： 在线演示地址：https://code.haiyong.site/moyu/2048.html 源码也可在文末免费获取
2048小游戏html制作,[ 逻辑锻炼] 用 JavaScript 做一个小游戏 ——2048 （详解版）
weixin_29404509的博客
05-31 777
前言这次使用了 vue 来编写 2048，主要目的是温习一下 vue。但是好像没有用到太多 vue 的东西，==！ 估计可能习惯了不用框架吧之前由于时间关系没有对实现过程详细讲解，本次会详细讲解下比较绕的函数由于篇幅问题简单的函数就不做详解了实现功能数字合并当前总分计算没有可移动的数字时不进行任何操作没有可移动，可合并的数字，并且不能新建时游戏失败达到 2048 结束游戏用到的知识ES6vue 部...
2048小游戏源码html,css
06-06
2048小游戏源码html, css是指用HTML和CSS编写的2048小游戏的源代码。2048小游戏是一种数字拼图游戏，通过移动方块来合并数字，最终得到2048这个数字。通过编写HTML和CSS源代码，可以自己创造2048小游戏的界面和样式。 在HTML源代码中，包含了网页的整体框架、网页内容和脚本等。通过HTML标记语言，可以构建网页的各种元素，如标题、段落、按钮等。在2048小游戏中，可以利用HTML元素构建游戏界面、方格和数字等元素。 CSS是指层叠样式表，用来控制HTML元素的外观和样式，包括文字颜色、背景颜色、边框等。通过CSS样式可以改变游戏面板、数字方块的颜色和字体等，让游戏更加美观和吸引人。 结合HTML和CSS源代码，可以实现2048小游戏的各种效果和样式。通过对源代码的理解和修改，可以定制自己的2048小游戏，并加入自己的创意和元素。这对于想要学习HTML和CSS的人来说，是一个很好的实践和练习机会。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值