html+css+js写个游戏代码
时间: 2023-08-27 18:06:41 浏览: 52
好的,我给你一个简单的扫雷游戏的代码示例,使用 HTML、CSS 和 JavaScript 实现。
HTML 代码:
```html
<div id="game-board"></div>
```
CSS 代码:
```css
#game-board {
width: 200px;
height: 200px;
display: flex;
flex-wrap: wrap;
}
.square {
width: calc(200px / 10);
height: calc(200px / 10);
border: 1px solid black;
box-sizing: border-box;
cursor: pointer;
}
.square.clicked {
background-color: lightgray;
}
.square.mine {
background-color: red;
}
```
JavaScript 代码:
```javascript
const board = document.getElementById("game-board");
let squares = [];
let minePositions = [];
// 创建游戏面板
function createBoard(size) {
for (let i = 0; i < size * size; i++) {
const square = document.createElement("div");
square.classList.add("square");
square.setAttribute("data-index", i);
square.addEventListener("click", handleClick);
board.appendChild(square);
squares.push(square);
}
}
// 随机生成地雷位置
function generateMines(size, count) {
const totalSquares = size * size;
while (minePositions.length < count) {
const randomIndex = Math.floor(Math.random() * totalSquares);
if (!minePositions.includes(randomIndex)) {
minePositions.push(randomIndex);
}
}
}
// 处理点击事件
function handleClick(event) {
const square = event.target;
const index = parseInt(square.getAttribute("data-index"));
if (minePositions.includes(index)) {
square.classList.add("mine");
alert("游戏结束!");
} else {
square.classList.add("clicked");
}
}
createBoard(10);
generateMines(10, 10);
```
以上就是一个简单的扫雷游戏代码示例,你可以根据这个示例进行修改和扩展。