HTML实现2048小游戏

于 2024-08-18 09:56:07 发布
阅读量185 收藏 2
点赞数 2
文章标签： javascript html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65134936/article/details/141255401
版权

游戏概述

 

实现一个基本的2048游戏涉及综合运用HTML、CSS和JavaScript这三种关键技术。

 

HTML用于构建游戏的结构框架，包括游戏容器、网格布局以及可能的用户交互元素（如按钮或得分显示）。

 

CSS则负责美化游戏界面，通过样式表定义网格的样式、瓷砖的外观、动画效果以及整体布局的视觉呈现。

 

JavaScript则是游戏逻辑的核心，它处理用户的输入（如键盘事件监听），控制游戏状态的更新（如瓷砖的移动和合并），以及动态地更新DOM以反映游戏状态的变化。

 

通过这三者的紧密协作，可以创建出一个既美观又富有挑战性的2048游戏。

 

使用工具

 

本篇文章有用到GPT代码更正，国内可稳定使用，感兴趣的大佬可以试试。

 

传送门：ChatGPT-4o

 

实现步骤

 

 

HTML结构

代码部分：

<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>

 

解释：

  • gameContainer: 包含整个游戏的容器。
  • score: 显示当前分数。
  • gridContainer: 游戏的主要区域，包含瓷砖。
  • gameOverContainer: 游戏结束时显示的消息和重启按钮。

 

 

CSS样式

 

代码部分：

body {
    text-align: center;
    margin-top: 50px;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

#gridContainer {
    width: 360px;
    height: 360px;
    border: 1px solid #8b8b8b;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
    background-color: #dcdcdc;
    padding: 10px;
}

.tile {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    font-weight: bold;
    border-radius: 6px;
    width: 80px;
    height: 80px;
    color: #fff;
}

 

解释：

 

  • body: 设置页面的基本样式，包括字体、背景颜色和对齐方式。
  • gridContainer: 使用 CSS Grid 布局创建了一个 4x4 的网格，定义了网格的宽度、高度以及瓷砖之间的间距。
  • .tile: 定义了瓷砖的样式，包括大小、颜色和字体。

 

 

JavaScript逻辑

 

初始化

 

function init() {
    score = 0;
    gameOverFlag = false;
    updateScore();
    gameOverContainer.style.display = "none";
    resetGrid();
    tiles = Array(width * width).fill(null);
    addTile();
    addTile();
    drawTiles();
}

解释：

  • 初始化游戏状态：重置分数和游戏结束标志。
  • resetGrid(): 清空现有的网格。
  • addTile(): 添加两个初始瓷砖。
  • drawTiles(): 绘制当前的瓷砖状态。

 

 

 

添加瓷砖

 

function addTile() {
    const emptyTiles = tiles.map((tile, index) => tile === null ? index : null).filter(index => index !== null);

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

 

解释：

  • 查找空位置：创建一个包含所有空位置索引的数组。
  • 随机添加：在空位置随机添加一个值为 2 或 4 的瓷砖。

 

 

绘制瓷砖

 

function drawTiles() {
    resetGrid();
    tiles.forEach(tile => {
        const tileElement = document.createElement("div");
        tileElement.classList.add("tile");
        if (tile !== null) {
            tileElement.textContent = tile;
            tileElement.classList.add(`tile-${tile}`);
        }
        gridContainer.appendChild(tileElement);
    });
}

解释：

 

  • 清空网格：每次重新绘制时清空网格。
  • 创建瓷砖元素：为每个瓷砖创建一个新的 div 元素并设置其样式和内容。

 

 

 

移动逻辑

 

function move(direction) {
    if (gameOverFlag) return;
    let hasChanged = false;

    const moveTile = (currentIndex, newIndex) => {
        if (tiles[newIndex] === null) {
            tiles[newIndex] = tiles[currentIndex];
            tiles[currentIndex] = null;
            hasChanged = true;
        } else if (tiles[newIndex] === tiles[currentIndex]) {
            tiles[newIndex] *= 2;
            tiles[currentIndex] = null;
            score += tiles[newIndex];
            hasChanged = true;
        }
    };

    // Define moveUp, moveDown, moveLeft, moveRight

    switch (direction) {
        case "up":
            moveUp();
            break;
        case "down":
            moveDown();
            break;
        case "left":
            moveLeft();
            break;
        case "right":
            moveRight();
            break;
    }

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

解释：

 

  • 检查变动：检测移动是否改变了网格。
  • 移动函数：定义不同方向的移动逻辑，合并相同的瓷砖。

 

 

 

检查游戏结束

代码部分:

 

function checkGameOver() {
    if (!tiles.includes(null) && !checkMove()) {
        gameOverFlag = true;
        gameOverContainer.style.display = "block";
        restartButton.addEventListener("click", restart, { once: true });
    }
}

 

解释：

  • 游戏结束条件：当没有空格且不能移动时，游戏结束。
  • 显示游戏结束信息：并提供重启按钮。

 

 

重启游戏

function restart() {
    init();
}

重新初始化游戏：调用 init() 函数，重置游戏状态。

 

 

事件监听

document.addEventListener("keydown", event => {
    switch (event.key) {
        case "ArrowUp":
        case "w":
            move("up");
            break;
        case "ArrowDown":
        case "s":
            move("down");
            break;
        case "ArrowLeft":
        case "a":
            move("left");
            break;
        case "ArrowRight":
        case "d":
            move("right");
            break;
    }
});
  • 键盘事件：监听方向键和 WASD 键来移动瓷砖。

 

 

运行界面：

 

d7a5f6905ea24856b904f350387c249c.png

 

 

 以下是完整代码：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048 Game</title>
    <style>
        body {
            text-align: center;
            margin-top: 50px;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

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

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

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

        #gridContainer {
            width: 360px;
            height: 360px;
            border: 1px solid #8b8b8b;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 5px;
            background-color: #dcdcdc;
            padding: 10px;
        }

        .tile {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: bold;
            border-radius: 6px;
            width: 80px;
            height: 80px;
            color: #fff;
        }

        .tile-2 { background-color: #f78c6b; }
        .tile-4 { background-color: #f7b26b; }
        .tile-8 { background-color: #f7d06b; }
        .tile-16 { background-color: #f4f76b; }
        .tile-32 { background-color: #a3f76b; }
        .tile-64 { background-color: #6bf7c4; }
        .tile-128 { background-color: #6baff7; }
        .tile-256 { background-color: #a26bf7; }
        .tile-512 { background-color: #f76bf7; }
        .tile-1024 { background-color: #f76b9f; }
        .tile-2048 { background-color: #f76b6b; }

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

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

        #restartButton {
            font-size: 20px;
            padding: 8px 20px;
            border-radius: 6px;
            background-color: #444;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #restartButton:hover {
            background-color: #666;
        }
    </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", () => {
            const gridContainer = document.getElementById("gridContainer");
            const scoreDisplay = document.getElementById("score");
            const gameOverContainer = document.getElementById("gameOverContainer");
            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";
                resetGrid();
                tiles = Array(width * width).fill(null);
                addTile();
                addTile();
                drawTiles();
            }

            function resetGrid() {
                gridContainer.innerHTML = "";
            }

            function addTile() {
                const emptyTiles = tiles.map((tile, index) => tile === null ? index : null).filter(index => index !== null);

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

            function drawTiles() {
                resetGrid();
                tiles.forEach(tile => {
                    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;

                const moveTile = (currentIndex, newIndex) => {
                    if (tiles[newIndex] === null) {
                        tiles[newIndex] = tiles[currentIndex];
                        tiles[currentIndex] = null;
                        hasChanged = true;
                    } else if (tiles[newIndex] === tiles[currentIndex]) {
                        tiles[newIndex] *= 2;
                        tiles[currentIndex] = null;
                        score += tiles[newIndex];
                        hasChanged = true;
                    }
                };

                const moveUp = () => {
                    for (let col = 0; col < width; col++) {
                        for (let row = 1; row < width; row++) {
                            let currentIndex = col + row * width;
                            while (currentIndex >= width && tiles[currentIndex] !== null) {
                                moveTile(currentIndex, currentIndex - width);
                                currentIndex -= width;
                            }
                        }
                    }
                };

                const moveDown = () => {
                    for (let col = 0; col < width; col++) {
                        for (let row = width - 2; row >= 0; row--) {
                            let currentIndex = col + row * width;
                            while (currentIndex + width < width * width && tiles[currentIndex] !== null) {
                                moveTile(currentIndex, currentIndex + width);
                                currentIndex += width;
                            }
                        }
                    }
                };

                const moveLeft = () => {
                    for (let row = 0; row < width; row++) {
                        for (let col = 1; col < width; col++) {
                            let currentIndex = row * width + col;
                            while (currentIndex % width !== 0 && tiles[currentIndex] !== null) {
                                moveTile(currentIndex, currentIndex - 1);
                                currentIndex--;
                            }
                        }
                    }
                };

                const moveRight = () => {
                    for (let row = 0; row < width; row++) {
                        for (let col = width - 2; col >= 0; col--) {
                            let currentIndex = row * width + col;
                            while ((currentIndex + 1) % width !== 0 && tiles[currentIndex] !== null) {
                                moveTile(currentIndex, currentIndex + 1);
                                currentIndex++;
                            }
                        }
                    }
                };

                switch (direction) {
                    case "up":
                        moveUp();
                        break;
                    case "down":
                        moveDown();
                        break;
                    case "left":
                        moveLeft();
                        break;
                    case "right":
                        moveRight();
                        break;
                }

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

            function checkGameOver() {
                if (!tiles.includes(null) && !checkMove()) {
                    gameOverFlag = true;
                    gameOverContainer.style.display = "block";
                    restartButton.addEventListener("click", restart, { once: true });
                }
            }

            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", event => {
                switch (event.key) {
                    case "ArrowUp":
                    case "w":
                        move("up");
                        break;
                    case "ArrowDown":
                    case "s":
                        move("down");
                        break;
                    case "ArrowLeft":
                    case "a":
                        move("left");
                        break;
                    case "ArrowRight":
                    case "d":
                        move("right");
                        break;
                }
            });

            init();
        });
    </script>
</body>
</html>

 

通过这篇文章，你可以了解如何从头开始构建一个简单的 2048 游戏，包括 HTML、CSS 和 JavaScript 的使用。

希望你能从中学习到有用的知识！

 

感谢阅读！！！

 

草莓屁屁我不吃
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现2048小游戏，我终于赢了一把
编程界明世隐的博客
09-15 1万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 效果图 实现思路 编写页面和画布代码。 绘制背景。 绘制好全部卡片。 随机生成一个卡片（
html实现2048小游戏,2048.html
weixin_30909915的博客
05-31 5104
2048#gridPanel{width:480px;height:480px;margin:0 auto;background-color:#bbada0;border-radius:10px;position:relative;}.grid,.cell{width:100px;height:100px;border-radius:6px;}.grid{float:left;margin:16p...
html实现2048小游戏,html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）...
weixin_36208265的博客
05-31 2534
续上一小节，我们可以发现每一个grid-cell上的数字初始时并不在格子里。这些数字可以随着玩家的操作而移动​我们可以想象：初始时每一个格子上的数为0，他们并不显示 ↓只有当grid-cell上的数字不为0，才会显示出来，这个数字有自己的颜色属性，和独有的文字我们把grid-cell上面的数字元素设置成 number-cell ，之前我们定义的var board二维数组，就是存储这些数字元素的值n...
java实现2048小游戏
热门推荐
MengMan‘s博客
07-20 1万+
学习Java基础有一段时间了，一直想做个小的桌面程序练下手，最近自己有点时间用Java写了一个2048的桌面程序，和大家分享一下！！！ 游戏效果展示： 1、设计思想 AppFrame.java 游戏的启动类，只调用了一个MainFrame的构造方法 MainFrame.java 游戏的界面类，在构造方法中做了所有的初始化操作 MyKeyListener 游戏的控制类，继承自Jav
HTML+CSS+JS实现2048经典小游戏（附完整源码）
猿小白的博客
06-05 1565
2048 小游戏的目标是通过合并数字单元格，最终在 4x4 的棋盘上创建一个值为 2048 的单元格。
vue实现2048小游戏功能思路详解
08-27
总结来说，使用Vue.js实现2048小游戏涉及到的主要知识点包括Vue的组件化思想、数据绑定、事件监听、计算逻辑实现（如移动合并算法）、矩阵旋转以及游戏状态管理。通过这个项目，开发者不仅可以提升Vue.js的实战技能...
html实现扫雷小游戏
11-16
html实现扫雷小游戏源码，实现windows系统的扫雷的基本功能，直接点击index.html运行。具体效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/127886480
HTML+JS实现2048小游戏demo
05-05
HTML+JS实现的2048小游戏是一款基于网页的数字拼图游戏，它结合了HTML的结构、CSS的样式和JavaScript的动态交互功能。在这个游戏中，玩家需要通过上下左右滑动棋盘，使得相同数字的方块合并成更大的数字，最终目标是...
微信小程序经典2048小游戏实现版
03-16
标题中的“微信小程序经典2048小游戏实现版”指的是基于微信小程序平台开发的一个游戏应用，它是对流行数字拼图游戏2048的改编。2048游戏的规则简单，玩家通过上下左右滑动屏幕，使得数字方块合并，每次合并相同数字...
Javascript编写2048小游戏
10-23
### Javascript编写2048小游戏知识点详解 #### 1. 游戏2048简介 2048是一款简单上手的数字拼图游戏。玩家通过上下左右滑动屏幕来移动板块上的数字格子，相同数字的格子在碰撞时会合并成它们的和。游戏的目标是创建...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 281
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1111
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 346
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 170
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
使用 Node.js 和 Express 框架通过网页访问GPIO和嵌入式 Linux 系统中使用 GSM/3G/4G 模块
m0_45463480的博客
08-17 649
想要快速开发嵌入式 Linux 网络应用，控制硬件 GPIO，从而使得用户能够远程控制和监控系统。主要目的是向读者展示开发使用文件系统控制 GPIO 的 Node 代码、创建用户有好的界面、以及运行基于 Express 框架使用 AJAX 通客户端进行通信的网络服务器。为了理解客户端应用，建议先了解 HTML+CSS、jQuery 和 AJAX 知识。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 966
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 564
NVDLA专题4：具体模块介绍——Convolution DMA
一些有趣的XSS注入GAME
最新发布
qq_67758645的博客
08-17 624
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 387
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
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、付费专栏及课程。

余额充值