likes
comments
collection
share

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现这是我参与11月更文挑战的第10天，活动详情查看：202

作者站长头像
站长
· 阅读数 16

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的健身网页制作，画面精明，非常适合初学者学习使用。

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现这是我参与11月更文挑战的第10天，活动详情查看：202

选择昆虫：

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现这是我参与11月更文挑战的第10天，活动详情查看：202

效果展示：

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现这是我参与11月更文挑战的第10天，活动详情查看：202

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

项目源码结构：

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

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现这是我参与11月更文挑战的第10天，活动详情查看：202

主要源码展示：

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 class=``"btn restart-btn"` `id=``"restart"``>Restart Play</button>`
`</h5>``</div>``</body>`
`<script src=``"./data.js"``></script>`
`<script src=``"./script.js"``></script>`

`</html>

部分style.css样式布局

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

* {

margin: 0;
padding: 0;
box-sizing: border-box;

}
body {

color: #fff;
text-align: center;
font-family: 'Press Start 2P', sans-serif;
overflow: hidden;
background: linear-gradient(135deg, #9cc8e9 10%, #0b6be0 90%);
min-height: 100vh;

}
.screen {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
posit
overflow: hidden;
}
.screen.hidden {
margin-top: -100vh;
}
.screen h1,
.screen h2 {
letter-spacing: 2px;
margin-bottom: 1rem;
line-eight: 1.5;}

.screen .btn {
background: linear-gradient(135deg, #dfe0e2 10%, #f6f7f7 90%);
outline: none;
border-radius: 8px;
padding: .8rem 4rem;
color: #2396ef;
display: inline-block;
border: 1px solid transparent;
letter-spacing: 2px;
cursor: pointer;
font-size: 18px;

}
.screen .btn.play {
margin-top: 1rem;
}

部分作品来自于网络收集、侵权立删 

大家点赞、收藏、关注、评论啦 打卡 文章 更新 93/  100天

转载自:https://juejin.cn/post/7028943312534896677
评论
请登录