I Spy Game: Test Your Observation Skills
<!DOCTYPE html>
<html>
<head>
<title>I Spy Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>I Spy Game</h1>
</header>
<main>
<div id="game-container">
<section class="image-container">
<img src="" alt="" id="image">
<p id="item-name"></p>
</section>
<section id="timer-container">
<p id="timer">60</p>
</section>
<section id="score-container">
<p id="score">0</p>
</section>
<button id="new-game-btn">New Game</button>
</div>
</main>
<footer>
<script src="app.js"></script>
</footer>
</body>
</html>
<pre><code>
</code></pre>
<ul>
<li>{
box-sizing: border-box;
margin: 0;
padding: 0;
}</li>
</ul>
<p>body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}</p>
<p>header {
margin: 50px 0;
}</p>
<p>h1 {
text-align: center;
}</p>
<p>main {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
}</p>
<p>#game-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}</p>
<p>.image-container {
position: relative;
margin-bottom: 20px;
}</p>
<p>#item-name {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 5px;
}</p>
<p>#timer-container, #score-container {
margin-bottom: 20px;
}</p>
<p>#new-game-btn {
margin-top: 20px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}</p>
<p>#new-game-btn:hover {
background-color: #3e8e41;
}</p>
<p>#timer, #score {
font-size: 40px;
font-weight: bold;
margin: 0;
}</p>
<p>#timer {
color: #e60000;
}</p>
<p>#score {
color: #4CAF50;
}</p>
<pre><code>
</code></pre>
<p>const items = [
{ name: 'apple', img: 'https://www.gstatic.com/webp/gallery/1.jpg' },
{ name: 'banana', img: 'https://www.gstatic.com/webp/gallery/2.jpg' },
{ name: 'carrot', img: 'https://www.gstatic.com/webp/gallery/3.jpg' },
{ name: 'grape', img: 'https://www.gstatic.com/webp/gallery/4.jpg' },
{ name: 'orange', img: 'https://www.gstatic.com/webp/gallery/5.jpg' },
{ name: 'pineapple', img: 'https://www.gstatic.com/webp/gallery/6.jpg' },
{ name: 'strawberry', img: 'https://www.gstatic.com/webp/gallery/7.jpg' },
{ name: 'watermelon', img: 'https://www.gstatic.com/webp/gallery/8.jpg' }
];</p>
<p>let currentItem;
let score = 0;
let timer = 60;
let timerId;</p>
<p>const image = document.getElementById("image");
const itemName = document.getElementById("item-name");
const scoreEl = document.getElementById("score");
const timerEl = document.getElementById("timer");
const newGameBtn = document.getElementById("new-game-btn");</p>
<p>function startGame() {
currentItem = getRandomItem();
image.src = currentItem.img;
image.alt = currentItem.name;
itemName.textContent = currentItem.name;
score = 0;
timer = 60;
scoreEl.textContent = score;
timerEl.textContent = timer;
newGameBtn.style.display = "none";
timerId = setInterval(updateTimer, 1000);
}</p>
<p>function getRandomItem() {
return items[Math.floor(Math.random() * items.length)];
}</p>
<p>function updateTimer() {
timer--;
timerEl.textContent = timer;
if (timer === 0) {
clearInterval(timerId);
itemName.textContent = "Time's up!";
newGameBtn.style.display = "block";
}
}</p>
<p>function checkItem(e) {
if (e.target.alt === currentItem.name) {
score++;
scoreEl.textContent = score;
startGame();
}
}</p>
<p>image.addEventListener("click", checkItem);
newGameBtn.addEventListener("click", startGame);</p>
<pre><code></code></pre>
原文地址: https://www.cveoy.top/t/topic/nWGJ 著作权归作者所有。请勿转载和采集!