<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Catch The Insect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 第一屏 -->
<div class="screen">
<h1>消灭昆虫游戏</h1>
<button class="btn" id="start-btn">开始</button></button>
</div>
<!-- 第二屏 -->
<div class="screen">
<h1>你"最想消灭"的昆虫是什么?</h1>
<ul class="insects-list">
<li>
<button class="choose-insect-btn">
<p>苍蝇</p>
<img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>蚊子</p>
<img src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png" alt="mosquito" />
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>蜘蛛</p>
<img src="http://pngimg.com/uploads/spider/spider_PNG12.png" alt="spider" />
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>蟑螂</p>
<img src="http://pngimg.com/uploads/roach/roach_PNG12163.png" alt="roach" />
</button>
</li>
</ul>
</div>
<!-- 第三屏 -->
<div class="screen game-container" id="game-container">
<h3 id="time" class="time">时间: 00:00</h3>
<h3 id="score" class="score">得分: 0</h3>
<h5 id="message" class="message">
你生气了吗? <br>
你在玩一个不可能的游戏!!
</h5>
</div>
<script src="script.js"></script>
</body>
</html>
day50-Insect Catch Game(捉虫游戏)
70 浏览量
2023-07-30
20:52:38
上传
评论
收藏 4KB RAR 举报
格式化小拓
- 粉丝: 403
- 资源: 53
最新资源
- vscode-1.64.1.tar源码文件
- vscode-1.64.0.tar源码文件
- vscode-1.52.0.tar源码文件
- Music-Player +PlayerActivity+ rockplayer+ SeeJoPlayer 播放器JAVA源码
- vscode-1.46.0.tar源码文件
- 最近很火植物大战僵尸杂交版2.08苹果+安卓+PC+防闪退工具V2+修改工具+高清工具+通关存档整合包更新
- 超级好用的截图工具PixPin,可录制Gif图
- Screenshot_2024-05-21-17-06-42-64_2332cb9b27b851b548ba47a91682926c.jpg
- 毕业设计参考 - 基于树莓派、OpenCV及Python的人脸识别
- node-v18.20.2-linux-arm64
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈