HTML2048小游戏（最新版）

比上一篇文章的2048更好一点。控制方法：WASD键（小写）或页面上四个按钮

效果图如下：源代码在图片后面

源代码

·HTML·

 <!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
        <div id="controls">
            <button id="up">W</button>
            <button id="left">A</button>
            <button id="down">S</button>
            <button id="right">D</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>复制

·CSS·

 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #faf8ef;
}
 
#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
#game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    background-color: #bbada0;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}
 
.tile {
    width: 80px;
    height: 80px;
    background-color: #cdc1b4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}
 
#controls {
    display: flex;
    gap: 10px;
}
 
button {
    width: 60px;
    height: 60px;
    font-size: 20px;
    border-radius: 10px;
    background-color: #8f7a66;
    color: white;
    border: none;
    cursor: pointer;
}
 
button:hover {
    background-color: #9f8b76;
}复制

·JavaScript·

 document.addEventListener('DOMContentLoaded', () => {
    const boardSize = 4;
    let board = [];
    let score = 0;
 
    const gameBoard = document.getElementById('game-board');
    const buttons = {
        up: document.getElementById('up'),
        down: document.getElementById('down'),
        left: document.getElementById('left'),
        right: document.getElementById('right')
    };
 
    function initBoard() {
        for (let i = 0; i < boardSize * boardSize; i++) {
            const tile = document.createElement('div');
            tile.classList.add('tile');
            gameBoard.appendChild(tile);
        }
        board = Array.from(document.querySelectorAll('.tile'));
        generateTile();
        generateTile();
        updateBoard();
    }
 
    function generateTile() {
        let emptyTiles = board.filter(tile => !tile.textContent);
        if (emptyTiles.length > 0) {
            let randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
            randomTile.textContent = Math.random() < 0.9 ? '2' : '4';
        }
    }
 
    function updateBoard() {
        board.forEach(tile => {
            const value = tile.textContent;
            tile.style.backgroundColor = getTileColor(value);
        });
    }
 
    function getTileColor(value) {
        switch (value) {
            case '2': return '#eee4da';
            case '4': return '#ede0c8';
            case '8': return '#f2b179';
            case '16': return '#f59563';
            case '32': return '#f67c5f';
            case '64': return '#f65e3b';
            case '128': return '#edcf72';
            case '256': return '#edcc61';
            case '512': return '#edc850';
            case '1024': return '#edc53f';
            case '2048': return '#edc22e';
            default: return '#cdc1b4';
        }
    }
 
    function move(direction) {
        switch (direction) {
            case 'up': moveUp(); break;
            case 'down': moveDown(); break;
            case 'left': moveLeft(); break;
            case 'right': moveRight(); break;
        }
        generateTile();
        updateBoard();
    }
 
    function moveUp() {
        for (let i = 0; i < boardSize; i++) {
            let column = [];
            for (let j = 0; j < boardSize; j++) {
                column.push(board[i + j * boardSize].textContent);
            }
            let newColumn = slideTiles(column);
            for (let j = 0; j < boardSize; j++) {
                board[i + j * boardSize].textContent = newColumn[j];
            }
        }
    }
 
    function moveDown() {
        for (let i = 0; i < boardSize; i++) {
            let column = [];
            for (let j = 0; j < boardSize; j++) {
                column.push(board[i + j * boardSize].textContent);
            }
            let newColumn = slideTiles(column.reverse()).reverse();
            for (let j = 0; j < boardSize; j++) {
                board[i + j * boardSize].textContent = newColumn[j];
            }
        }
    }
 
    function moveLeft() {
        for (let i = 0; i < boardSize; i++) {
            let row = [];
            for (let j = 0; j < boardSize; j++) {
                row.push(board[i * boardSize + j].textContent);
            }
            let newRow = slideTiles(row);
            for (let j = 0; j < boardSize; j++) {
                board[i * boardSize + j].textContent = newRow[j];
            }
        }
    }
 
    function moveRight() {
        for (let i = 0; i < boardSize; i++) {
            let row = [];
            for (let j = 0; j < boardSize; j++) {
                row.push(board[i * boardSize + j].textContent);
            }
            let newRow = slideTiles(row.reverse()).reverse();
            for (let j = 0; j < boardSize; j++) {
                board[i * boardSize + j].textContent = newRow[j];
            }
        }
    }
 
    function slideTiles(tiles) {
        let newTiles = tiles.filter(tile => tile);
        for (let i = 0; i < newTiles.length - 1; i++) {
            if (newTiles[i] === newTiles[i + 1]) {
                newTiles[i] = (parseInt(newTiles[i]) * 2).toString();
                newTiles[i + 1] = '';
            }
        }
        newTiles = newTiles.filter(tile => tile);
        while (newTiles.length < boardSize) {
            newTiles.push('');
        }
        return newTiles;
    }
 
    buttons.up.addEventListener('click', () => move('up'));
    buttons.down.addEventListener('click', () => move('down'));
    buttons.left.addEventListener('click', () => move('left'));
    buttons.right.addEventListener('click', () => move('right'));
 
    document.addEventListener('keydown', (e) => {
        switch (e.key) {
            case 'w': move('up'); break;
            case 's': move('down'); break;
            case 'a': move('left'); break;
            case 'd': move('right'); break;
        }
    });
 
    initBoard();
});复制

HTML2048小游戏（最新版）

比上一篇文章的2048更好一点。控制方法：WASD键（小写）或页面上四个按钮

效果图如下：源代码在图片后面

源代码

·HTML·

·CSS·

·JavaScript·

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!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>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div id="game-container">
	<div id="game-board"></div>
	<div id="controls">
	<button id="up">W</button>
	<button id="left">A</button>
	<button id="down">S</button>
	<button id="right">D</button>
	</div>
	</div>
	<script src="script.js"></script>
	</body>
	</html>

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Arial', sans-serif;
	}

	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #faf8ef;
	}

	#game-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	#game-board {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 10px;
	background-color: #bbada0;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 20px;
	}

	.tile {
	width: 80px;
	height: 80px;
	background-color: #cdc1b4;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
	}

	#controls {
	display: flex;
	gap: 10px;
	}

	button {
	width: 60px;
	height: 60px;
	font-size: 20px;
	border-radius: 10px;
	background-color: #8f7a66;
	color: white;
	border: none;
	cursor: pointer;
	}

	button:hover {
	background-color: #9f8b76;
	}

	document.addEventListener('DOMContentLoaded', () => {
	const boardSize = 4;
	let board = [];
	let score = 0;

	const gameBoard = document.getElementById('game-board');
	const buttons = {
	up: document.getElementById('up'),
	down: document.getElementById('down'),
	left: document.getElementById('left'),
	right: document.getElementById('right')
	};

	function initBoard() {
	for (let i = 0; i < boardSize * boardSize; i++) {
	const tile = document.createElement('div');
	tile.classList.add('tile');
	gameBoard.appendChild(tile);
	}
	board = Array.from(document.querySelectorAll('.tile'));
	generateTile();
	generateTile();
	updateBoard();
	}

	function generateTile() {
	let emptyTiles = board.filter(tile => !tile.textContent);
	if (emptyTiles.length > 0) {
	let randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
	randomTile.textContent = Math.random() < 0.9 ? '2' : '4';
	}
	}

	function updateBoard() {
	board.forEach(tile => {
	const value = tile.textContent;
	tile.style.backgroundColor = getTileColor(value);
	});
	}

	function getTileColor(value) {
	switch (value) {
	case '2': return '#eee4da';
	case '4': return '#ede0c8';
	case '8': return '#f2b179';
	case '16': return '#f59563';
	case '32': return '#f67c5f';
	case '64': return '#f65e3b';
	case '128': return '#edcf72';
	case '256': return '#edcc61';
	case '512': return '#edc850';
	case '1024': return '#edc53f';
	case '2048': return '#edc22e';
	default: return '#cdc1b4';
	}
	}

	function move(direction) {
	switch (direction) {
	case 'up': moveUp(); break;
	case 'down': moveDown(); break;
	case 'left': moveLeft(); break;
	case 'right': moveRight(); break;
	}
	generateTile();
	updateBoard();
	}

	function moveUp() {
	for (let i = 0; i < boardSize; i++) {
	let column = [];
	for (let j = 0; j < boardSize; j++) {
	column.push(board[i + j * boardSize].textContent);
	}
	let newColumn = slideTiles(column);
	for (let j = 0; j < boardSize; j++) {
	board[i + j * boardSize].textContent = newColumn[j];
	}
	}
	}

	function moveDown() {
	for (let i = 0; i < boardSize; i++) {
	let column = [];
	for (let j = 0; j < boardSize; j++) {
	column.push(board[i + j * boardSize].textContent);
	}
	let newColumn = slideTiles(column.reverse()).reverse();
	for (let j = 0; j < boardSize; j++) {
	board[i + j * boardSize].textContent = newColumn[j];
	}
	}
	}

	function moveLeft() {
	for (let i = 0; i < boardSize; i++) {
	let row = [];
	for (let j = 0; j < boardSize; j++) {
	row.push(board[i * boardSize + j].textContent);
	}
	let newRow = slideTiles(row);
	for (let j = 0; j < boardSize; j++) {
	board[i * boardSize + j].textContent = newRow[j];
	}
	}
	}

	function moveRight() {
	for (let i = 0; i < boardSize; i++) {
	let row = [];
	for (let j = 0; j < boardSize; j++) {
	row.push(board[i * boardSize + j].textContent);
	}
	let newRow = slideTiles(row.reverse()).reverse();
	for (let j = 0; j < boardSize; j++) {
	board[i * boardSize + j].textContent = newRow[j];
	}
	}
	}

	function slideTiles(tiles) {
	let newTiles = tiles.filter(tile => tile);
	for (let i = 0; i < newTiles.length - 1; i++) {
	if (newTiles[i] === newTiles[i + 1]) {
	newTiles[i] = (parseInt(newTiles[i]) * 2).toString();
	newTiles[i + 1] = '';
	}
	}
	newTiles = newTiles.filter(tile => tile);
	while (newTiles.length < boardSize) {
	newTiles.push('');
	}
	return newTiles;
	}

	buttons.up.addEventListener('click', () => move('up'));
	buttons.down.addEventListener('click', () => move('down'));
	buttons.left.addEventListener('click', () => move('left'));
	buttons.right.addEventListener('click', () => move('right'));

	document.addEventListener('keydown', (e) => {
	switch (e.key) {
	case 'w': move('up'); break;
	case 's': move('down'); break;
	case 'a': move('left'); break;
	case 'd': move('right'); break;
	}
	});

	initBoard();
	});

HTML2048小游戏（最新版）

比上一篇文章的2048更好一点。 控制方法：WASD键（小写）或页面上四个按钮

效果图如下： 源代码在图片后面

源代码

·HTML·

·CSS·

·JavaScript·

微信扫一扫：分享

比上一篇文章的2048更好一点。控制方法：WASD键（小写）或页面上四个按钮

效果图如下：源代码在图片后面