用JavaScript在HTML中编写一个消除游戏
以下是一个简单的消除游戏示例，使用HTML、CSS和JavaScript编写。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>消除游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
#board {
margin-top: 50px;
display: inline-block;
}
.tile {
width: 50px;
height: 50px;
margin: 5px;
display: inline-block;
cursor: pointer;
background-color: #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #999;
}
.tile.selected {
background-color: #f00;
}
.tile.matched {
background-color: #0f0;
cursor: default;
}
#score {
margin-top: 20px;
font-size: 24px;
}
#message {
margin-top: 20px;
font-size: 24px;
color: #f00;
display: none;
}
#reset {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#reset:hover {
background-color: #d00;
}
</style>
</head>
<body>
<h1>消除游戏</h1>
<div id="board"></div>
<div id="score">得分：0</div>
<div id="message">没有可消除的方块了！</div>
<button id="reset">重新开始</button>
<script src="game.js"></script>
</body>
</html>
CSS代码：
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
#board {
margin-top: 50px;
display: inline-block;
}
.tile {
width: 50px;
height: 50px;
margin: 5px;
display: inline-block;
cursor: pointer;
background-color: #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #999;
}
.tile.selected {
background-color: #f00;
}
.tile.matched {
background-color: #0f0;
cursor: default;
}
#score {
margin-top: 20px;
font-size: 24px;
}
#message {
margin-top: 20px;
font-size: 24px;
color: #f00;
display: none;
}
#reset {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#reset:hover {
background-color: #d00;
}
JavaScript代码：
// 定义方块类型
const TILE_TYPES = [
'red',
'blue',
'green',
'yellow',
'orange',
'purple'
];
// 获取页面元素
const boardEl = document.getElementById('board');
const scoreEl = document.getElementById('score');
const messageEl = document.getElementById('message');
const resetEl = document.getElementById('reset');
// 定义游戏状态
let tiles = [];
let selectedTiles = [];
let score = 0;
// 初始化游戏
initGame();
function initGame() {
// 生成方块
tiles = generateTiles(10);
// 显示方块
displayTiles();
// 绑定事件
boardEl.addEventListener('click', handleTileClick);
resetEl.addEventListener('click', resetGame);
}
// 生成指定数量的随机方块
function generateTiles(count) {
const result = [];
for (let i = 0; i < count; i++) {
const type = TILE_TYPES[Math.floor(Math.random() * TILE_TYPES.length)];
result.push({ type, matched: false });
}
return result;
}
// 显示方块
function displayTiles() {
boardEl.innerHTML = '';
for (let i = 0; i < tiles.length; i++) {
const tile = tiles[i];
const tileEl = document.createElement('div');
tileEl.className = 'tile';
tileEl.dataset.index = i;
tileEl.dataset.type = tile.type;
boardEl.appendChild(tileEl);
}
}
// 处理方块点击事件
function handleTileClick(event) {
const tileEl = event.target;
// 如果点击的不是方块，直接返回
if (!tileEl.classList.contains('tile')) {
return;
}
// 如果点击的方块已匹配或已选中，直接返回
if (tileEl.classList.contains('matched') || tileEl.classList.contains('selected')) {
return;
}
// 选中当前方块
selectTile(tileEl);
// 如果已选中两个方块，比较它们的类型
if (selectedTiles.length === 2) {
const tile1 = tiles[selectedTiles[0]];
const tile2 = tiles[selectedTiles[1]];
if (tile1.type === tile2.type) {
// 如果两个方块类型相同，标记它们为已匹配
tileEl.classList.add('matched');
document.querySelector(`.tile[data-index="${selectedTiles[0]}"]`).classList.add('matched');
selectedTiles = [];
score += 10;
scoreEl.innerText = `得分：${score}`;
// 如果所有方块都已匹配，显示游戏结束消息
if (tiles.every(tile => tile.matched)) {
messageEl.style.display = 'block';
}
} else {
// 如果两个方块类型不同，取消选中它们
setTimeout(() => {
unselectTile(tileEl);
unselectTile(document.querySelector(`.tile[data-index="${selectedTiles[0]}"]`));
selectedTiles = [];
}, 500);
score -= 5;
scoreEl.innerText = `得分：${score}`;
}
}
}
// 选中方块
function selectTile(tileEl) {
tileEl.classList.add('selected');
selectedTiles.push(parseInt(tileEl.dataset.index));
}
// 取消选中方块
function unselectTile(tileEl) {
tileEl.classList.remove('selected');
}
// 重置游戏
function resetGame() {
tiles = generateTiles(10);
displayTiles();
selectedTiles = [];
score = 0;
scoreEl.innerText = `得分：${score}`;
messageEl.style.display = 'none';
}
该游戏会在页面上生成10个随机颜色的方块，玩家需要点击两个相同颜色的方块以消除它们。每次成功消除两个相同颜色的方块会得到10分，每次错误选择会扣除5分。如果所有方块都已被消除，游戏结束。玩家可以点击“重新开始”按钮重新开始游戏。
原文地址: https://www.cveoy.top/t/topic/X0v 著作权归作者所有。请勿转载和采集!