写一个枪战游戏的html
<!DOCTYPE html>
<html>
<head>
<title>枪战游戏</title>
<style>
body {
background-color: #222222;
color: #FFFFFF;
font-family: Arial, sans-serif;
}
<pre><code> h1 {
text-align: center;
margin-top: 50px;
}
#game-board {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.square {
width: 50px;
height: 50px;
background-color: #CCCCCC;
margin: 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
cursor: pointer;
box-shadow: 0px 0px 5px #FFFFFF;
}
.square:hover {
background-color: #AAAAAA;
}
.square.active {
background-color: #FF0000;
box-shadow: 0px 0px 10px #FFFFFF;
}
#scoreboard {
margin-top: 50px;
display: flex;
justify-content: space-around;
}
#scoreboard p {
font-size: 20px;
margin: 0;
}
#scoreboard p span {
font-weight: bold;
}
#start-button {
display: block;
margin: 50px auto;
padding: 10px 20px;
background-color: #FFFFFF;
color: #222222;
font-size: 20px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 0px 5px #FFFFFF;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
#start-button:hover {
background-color: #222222;
color: #FFFFFF;
box-shadow: 0px 0px 10px #FFFFFF;
}
</style>
</code></pre>
</head>
<body>
<h1>枪战游戏</h1>
<div id="game-board">
<!-- 游戏板块 -->
</div>
<div id="scoreboard">
<p>得分: <span id="score">0</span></p>
<p>时间: <span id="time">0</span> 秒</p>
<p>命中率: <span id="accuracy">0</span>%</p>
</div>
<button id="start-button">开始游戏</button>
<pre><code><script>
let score = 0;
let time = 0;
let accuracy = 0;
let totalShots = 0;
let hitShots = 0;
let gameStarted = false;
let gameTimer;
const gameBoard = document.getElementById('game-board');
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const accuracyDisplay = document.getElementById('accuracy');
const startButton = document.getElementById('start-button');
function createBoard() {
for (let i = 0; i < 16; i++) {
const square = document.createElement('div');
square.classList.add('square');
square.addEventListener('mousedown', shoot);
gameBoard.appendChild(square);
}
}
function resetBoard() {
clearInterval(gameTimer);
score = 0;
time = 0;
accuracy = 0;
totalShots = 0;
hitShots = 0;
scoreDisplay.innerText = score;
timeDisplay.innerText = time;
accuracyDisplay.innerText = accuracy;
gameStarted = false;
startButton.innerText = '开始游戏';
const squares = document.querySelectorAll('.square');
squares.forEach(square => {
square.classList.remove('active');
});
}
function startGame() {
if (gameStarted) {
resetBoard();
}
gameStarted = true;
startButton.innerText = '重置游戏';
gameTimer = setInterval(() => {
time++;
timeDisplay.innerText = time;
}, 1000);
}
function shoot() {
if (!gameStarted) {
return;
}
totalShots++;
if (this.classList.contains('active')) {
score++;
hitShots++;
}
scoreDisplay.innerText = score;
accuracy = Math.floor((hitShots / totalShots) * 100);
accuracyDisplay.innerText = accuracy;
const squares = document.querySelectorAll('.square');
squares.forEach(square => {
square.classList.remove('active');
});
const randomSquare = squares[Math.floor(Math.random() * squares.length)];
randomSquare.classList.add('active');
}
createBoard();
startButton.addEventListener('click', startGame);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/Glg 著作权归作者所有。请勿转载和采集!