HTML5+CSS+JavaScript如何实现捉虫小游戏设计和如何实现

捉虫小游戏 首页展示:选择昆虫:效果展示:有密集恐惧症的别玩哟、游戏永远不会停止 一直玩 项目源码结构: 图片和js以及css等基础文件代码实现主要源码展示:

捉虫小游戏

首页展示:

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现【有密集恐惧症的别玩哟】_css

选择昆虫:

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现【有密集恐惧症的别玩哟】_web网页设计实现_02

效果展示:

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现【有密集恐惧症的别玩哟】_javascript_03

有密集恐惧症的别玩哟、游戏永远不会停止 一直玩

项目源码结构:

图片和js以及css等基础文件代码实现

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现【有密集恐惧症的别玩哟】_javascript_04

主要源码展示:

index.html:引入图片和css文件以及js

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>insect-catch-game</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<div id="tab-container" class="tab-container">
<div class="tab-item active" data-value="en">en</div>
<div class="tab-item" data-value="zh">zh</div>
</div>
<div class="screen">
<h1 id="firstTitle">Catch The Insect</h1>
<button id="play" class="btn play">Play Game</button>
</div>
<div class="screen">
<h2 id="secondTitle">What is your "favorite" insect?</h2>
<ul id="inspect-list" class="inspect-list">
<li>
<div class="choose-btn">
<p>Fly</p>
<img src="img/fly_PNG3946.png" alt="fly">
</div>
</li>
<li>
<div class="choose-btn">
<p>mosquito</p>
<img src="img/mosquito_PNG18175.png" alt="mosquito" />
</div>
</li>
<li>
<div class="choose-btn">
<p>spider</p>
<img src="img/spider_PNG12.png" alt="spider" />
</div>
</li>
<li>
<div class="choose-btn">
<p>roach</p>
<img src="img/roach_PNG12163.png" alt="roach" />
</div>
</li>
</ul>
</div>
<div class="screen game-container" id="game-container">
<h3 id="time" class="time">Time:<span>00:00</span></h3>
<h3 class="score" id="score">Score:<span>0</span></h3>
<h5 id="message" class="message">
            Tell you a bad news, will you be angry? <br> Actually you are playing a game that never ends!!
<button class="btn continue-btn" id="continue">Continue Play</button>
<button