<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Environmental Protection Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<audio id="bg-music" loop>
<source src="assests/background-music.mp3" type="audio/mpeg">
</audio>
<button id="music-control">Play Music</button>
<header>
<h1>Environmental Protection Game</h1>
<p>Drag the trash into the correct bin!</p>
</header>
<div class="game-container">
<div class="bins">
<div class="bin" id="recycle-bin" data-type="recycle">
<img src="assests/images/recycle.png" alt="Recycle Bin">
</div>
<div class="bin" id="other-bin" data-type="other">
<img src="assests/images/Other.png" alt="Other Bin">
</div>
<div class="bin" id="trash-bin" data-type="trash">
<img src="assests/images/trash.png" alt="Trash Bin">
</div>
</div>
<div class="items">
<div class="item" draggable="true" data-type="recycle">
<img src="assests/images/can.jpg" alt="Can">
</div>
<div class="item" draggable="true" data-type="other">
<img src="assests/images/banana.jpg" alt="Banana">
</div>
<div class="item" draggable="true" data-type="trash">
<img src="assests/images/apple.jpg" alt="Apple">
</div>
</div>
</div>
<div class="scoreboard">
<p>Score: <span id="score">0</span></p>
<p>Time left: <span id="time-left">60</span> seconds</p>
</div>
<script src="script.js"></script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
