麻烦你能帮我写一个困难点的消除网页小游戏吗
当然可以！以下是一个简单的消除游戏的代码示例：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消除游戏</title>
<style>
#game-board {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
.block {
width: 30px;
height: 30px;
border: 1px solid black;
display: inline-block;
margin: 2px;
cursor: pointer;
}
.selected {
background-color: red;
}
</style>
</head>
<body>
<h1>消除游戏</h1>
<div id="game-board"></div>
<button id="reset">重置</button>
<script src="game.js"></script>
</body>
</html>
JavaScript:
var gameBoard = document.getElementById("game-board");
var resetButton = document.getElementById("reset");
var colors = ["red", "blue", "green", "yellow", "purple"];
var blocks = [];
var selectedBlocks = [];
// 创建游戏板块
for (var i = 0; i < 100; i++) {
var block = document.createElement("div");
block.classList.add("block");
block.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
gameBoard.appendChild(block);
blocks.push(block);
// 将游戏板块添加点击事件
block.addEventListener("click", function() {
if (this.classList.contains("selected")) {
this.classList.remove("selected");
selectedBlocks.splice(selectedBlocks.indexOf(this), 1);
} else {
this.classList.add("selected");
selectedBlocks.push(this);
}
// 如果选中的方块数量为2，检查它们的颜色是否相同
if (selectedBlocks.length === 2) {
if (selectedBlocks[0].style.backgroundColor === selectedBlocks[1].style.backgroundColor) {
// 如果颜色相同，将它们从游戏板上删除
selectedBlocks.forEach(function(block) {
block.remove();
blocks.splice(blocks.indexOf(block), 1);
});
}
// 清除已选的方块
selectedBlocks.forEach(function(block) {
block.classList.remove("selected");
});
selectedBlocks = [];
}
});
}
// 重置游戏板
resetButton.addEventListener("click", function() {
gameBoard.innerHTML = "";
blocks = [];
selectedBlocks = [];
for (var i = 0; i < 100; i++) {
var block = document.createElement("div");
block.classList.add("block");
block.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
gameBoard.appendChild(block);
blocks.push(block);
block.addEventListener("click", function() {
if (this.classList.contains("selected")) {
this.classList.remove("selected");
selectedBlocks.splice(selectedBlocks.indexOf(this), 1);
} else {
this.classList.add("selected");
selectedBlocks.push(this);
}
if (selectedBlocks.length === 2) {
if (selectedBlocks[0].style.backgroundColor === selectedBlocks[1].style.backgroundColor) {
selectedBlocks.forEach(function(block) {
block.remove();
blocks.splice(blocks.indexOf(block), 1);
});
}
selectedBlocks.forEach(function(block) {
block.classList.remove("selected");
});
selectedBlocks = [];
}
});
}
});
这个游戏的基本思路是，创建一个包含100个随机颜色方块的游戏板，当用户点击方块时，将其添加到已选方块列表中。如果已选方块数量为2，就检查它们的颜色是否相同。如果颜色相同，将它们从游戏板上删除。每当用户点击“重置”按钮时，游戏板就会被重新生成
原文地址: https://www.cveoy.top/t/topic/cmPO 著作权归作者所有。请勿转载和采集!