站长工具

有趣的前端小游戏

作者：kimi77

今天搬了一天的家，状态不是很好，分享一个小游戏给大家吧~

先介绍一下游戏规则：
1、点击play后，游戏会提供4中不同的昆虫供玩家进行选择，这四种昆虫分别为：蟑螂、蛛蛛、蚊子和苍蝇。
2、当玩家选择完昆虫后，游戏开始
3、游戏会随机的生成玩家选择的昆虫到电脑屏幕，玩家利用鼠标点击到则得一分。
4、游戏开始时屏幕上显示一只昆虫，随后逐渐增多，同时记录玩家游戏时长
5、一段时间后，弹出小惊喜给玩家

游戏部分截图如下：

- 开始游戏：

 

- 选择界面：

 


游戏开始：

 


一段时间后：

 


之后弹出惊喜给玩家：

 


没错，这个时候玩家应该已经发现昆虫是点不完的了，且会越点越多~（大概心态会崩，开始赞美开发者了）

下面老规矩，上代码：

首先是html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Catch The Insect</title>
</head>
<body>
<div class="screen">
<h1>Catch The Insect</h1>
<button class="btn" id="start-btn">Play Game</button>
</div>

<div class="screen">
<h1>What is your "favorite" insect?</h1>
<ul class="insects-list">
<li>
<button class="choose-insect-btn">
<p>Fly</p>
<img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>Mosquito</p>
<img
src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png"
alt="mosquito"
/>
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>Spider</p>
<img
src="http://pngimg.com/uploads/spider/spider_PNG12.png"
alt="spider"
/>
</button>
</li>
<li>
<button class="choose-insect-btn">
<p>Roach</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">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
<h5 id="message" class="message">
Are you annoyed yet? <br>
You are playing an impossible game!!
</h5>
</div>

<script src="script.js"></script>
</body>
</html>

 

紧接着是js部分：

const screens = document.querySelectorAll('.screen');
const choose_insect_btns = document.querySelectorAll('.choose-insect-btn');
const start_btn = document.getElementById('start-btn')
const game_container = document.getElementById('game-container')
const timeEl = document.getElementById('time')
const scoreEl = document.getElementById('score')
const message = document.getElementById('message')
let seconds = 0
let score = 0
let selected_insect = {}

start_btn.addEventListener('click', () => screens[0].classList.add('up'))

choose_insect_btns.forEach(btn => {
btn.addEventListener('click', () => {
const img = btn.querySelector('img')
const src = img.getAttribute('src')
const alt = img.getAttribute('alt')
selected_insect = { src, alt }
screens[1].classList.add('up')
setTimeout(createInsect, 1000)
startGame()
})
})

function startGame() {
setInterval(increaseTime, 1000)
}

function increaseTime() {
let m = Math.floor(seconds / 60)
let s = seconds % 60
m = m < 10 ? `0${m}` : m
s = s < 10 ? `0${s}` : s
timeEl.innerHTML = `Time: ${m}:${s}`
seconds++
}

function createInsect() {
const insect = document.createElement('div')
insect.classList.add('insect')
const { x, y } = getRandomLocation()
insect.style.top = `${y}px`
insect.style.left = `${x}px`
insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`

insect.addEventListener('click', catchInsect)

game_container.appendChild(insect)
}

function getRandomLocation() {
const width = window.innerWidth
const height = window.innerHeight
const x = Math.random() * (width - 200) + 100
const y = Math.random() * (height - 200) + 100
return { x, y }
}

function catchInsect() {
increaseScore()
this.classList.add('caught')
setTimeout(() => this.remove(), 2000)
addInsects()
}

function addInsects() {
setTimeout(createInsect, 1000)
setTimeout(createInsect, 1500)
}

function increaseScore() {
score++
if(score > 19) {
message.classList.add('visible')
}
scoreEl.innerHTML = `Score: ${score}`
}

 

最后是css部分：

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

* {
box-sizing: border-box;
}

body {
background-color: #516dff;
color: #fff;
font-family: 'Press Start 2P', sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
text-align: center;
}

a {
color: #fff;
}

h1 {
line-height: 1.4;
}

.btn {
border: 0;
background-color: #fff;
color: #516dff;
padding: 15px 20px;
font-family: inherit;
cursor: pointer;
}

.btn:hover {
opacity: 0.9;
}

.btn:focus {
outline: 0;
}

.screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
transition: margin 0.5s ease-out;
}

.screen.up {
margin-top: -100vh;
}

.insects-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
padding: 0;
}

.insects-list li {
margin: 10px;
}

.choose-insect-btn {
background-color: transparent;
border: 2px solid #fff;
color: #fff;
cursor: pointer;
font-family: inherit;
width: 150px;
height: 150px;
}

.choose-insect-btn:hover {
background-color: #fff;
color: #516dff;
}

.choose-insect-btn:active {
background-color: rgba(255, 255, 255, 0.7);
}

.choose-insect-btn img {
width: 100px;
height: 100px;
object-fit: contain;
}

.game-container {
position: relative;
}

.time,
.score {
position: absolute;
top: 20px;
}

.time {
left: 20px;
}

.score {
right: 20px;
}

.message {
line-height: 1.7;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
padding: 20px;
z-index: 100;
text-align: center;
opacity: 0;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -150%);
transition: transform 0.4s ease-in;
}

.message.visible {
transform: translate(-50%, 150%);
opacity: 1;
}

.insect {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
position: absolute;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.3s ease-in-out;
}

.insect.caught {
transform: translate(-50%, -50%) scale(0);
}

.insect img {
width: 100px;
height: 100px;
}

 

最后，祝大家玩的愉快~

本文转载于网络 如有侵权请联系删除

相关文章

  • ubuntu ssh configue Google Authenticator

    先安装ssh-serverapt-getinstallopenssh-server复制安装GoogleAuthenticatorgitclonegit@github.com:google/google-authenticator-libpam.git #安装依赖工具 apt-getinstallautoconfautomakelibtool apt-get-yinstalllibpam0g-dev ./bootstrap.sh ./configure make sudomakeinstall Doyouwantauthenticationtokenstobetime-based(y/n)y https://www.google.com//chart?chs=200x200&chld=M|0&cht=qr&chl=otpauth://totp/jolestar@xxxxx%3Fsecret%xxxxxxxx Yournewsecretkeyis:xxxxxx Yourverificationcodeisxxxxx Youremergencyscratchco

  • python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)

    有没有一种方法可以为Django项目中的每个应用程序创建多个自定义错误模板,我的意思是,在我的项目中,我有3个应用程序,每个应用程序将显示3种不同的custom404错误.现在,我在后台应用程序和前台显示相同的404错误页面.最佳答案创建一个自定义errorview并将其分配给根urls.py中的handler404变量：fromdjango.views.defaultsimportpage_not_found defmy_error_404(request,exception): template_name='404.html' ifrequest.path.startswith('/backoffice/'): template_name='backoffice/404.html' elifrequest.path.startswith('/frontoffice/'): template_name='frontoffice/404.html' returnpage_not_fou

  • codeforces 1374D（数学）

    题意描述Youaregivenanarrayaconsistingofnpositiveintegers.Initially,youhaveanintegerx=0.Duringonemove,youcandooneofthefollowingtwooperations:Chooseexactlyoneifrom1tonandincreaseaibyx(ai:=ai+x),thenincreasexby1(x:=x+1). Justincreasexby1(x:=x+1). Thefirstoperationcanbeappliednomorethanoncetoeachifrom1ton.Yourtaskistofindtheminimumnumberofmovesrequiredtoobtainsuchanarraythateachitselementisdivisiblebyk(thevaluekisgiven).Youhavetoanswertindependenttestcases.给定n个数字，你有一个x，可以对x进行两种操作，询问最少的操作次数，使得n个数都为k的倍数。思

  • 给你的MyBatis-Plus装上批量插入的翅膀

    前言大家有用过MyBatis-Plus（简称MP）的都知道它是一个MyBatis的增强工具,旨在MyBatis的基础上只做增强不做改变,为简化开发、提高效率而生。特点无侵入：只做增强不做改变，引入它不会对现有工程产生影响，如丝般顺滑损耗小：启动即会自动注入基本CURD，性能基本无损耗，直接面向对象操作强大的CRUD操作：内置通用Mapper、通用Service，仅仅通过少量配置即可实现单表大部分CRUD操作，更有强大的条件构造器，满足各类使用需求支持Lambda形式调用：通过Lambda表达式，方便的编写各类查询条件，无需再担心字段写错支持主键自动生成：支持多达4种主键策略（内含分布式唯一ID生成器-Sequence），可自由配置，完美解决主键问题支持ActiveRecord模式：支持ActiveRecord形式调用，实体类只需继承Model类即可进行强大的CRUD操作支持自定义全局通用操作：支持全局通用方法注入（Writeonce,useanywhere）内置代码生成器：采用代码或者Maven插件可快速生成Mapper、Model、Service、Controller层代码，支持模板

  • 【Rust 日报】2020-04-22 佐治亚理工学院 CS-3210 课程实验：用 Rust 为树莓派写一个操作系统

    1-OrbTk0.3.1-alpha2RustUI工具库OrbTk发布新版本.OrbTk的目标是快速、易用以及跨平台.灵感来自于Flutter、React、Yew.https://github.com/redox-os/orbtk2-【博客】在web中使用wgpu-rsgfx-rs是一个致力于低GPU编程的Rust项目.wgpu-rs是基于gfx-rs并且更安全、更可用并且可移植性更强.https://gfx-rs.github.io/2020/04/21/wgpu-web.html3-感谢ron的作者reddit上有人发帖为ron疯狂打call.在他业余的项目中他一直被JSON的一些限制所困扰：map中的key必须是字符串不可以添加评论最后一个item之后不能跟逗号ron很好的解决了这些问题.https://www.reddit.com/r/rust/comments/g5rlt5/thank_you_for_ron_rusty_object_notation/4-佐治亚理工学院CS-3210课程实验：用Rust为树莓派写一个操作系统https://tc.gts3.org/cs321

  • 禅道项目管理软件 为提交Bug页面添加“优先级”字段

    by:授客QQ：1033553122测试环境：禅道项目管理软件7.1.stable版本备注：仅适合windows版本，linux下，直接在页面管理后台安装官方插件就好了步骤1、xampp->zentao->module->bug目录下，新建ext/view目录，如下步骤2、xampp->zentao->module->bug->ext->view目录下，找到create.html.php，复制到上述ext/view目录下步骤3、修改xampp->zentao->module->bug->ext->view目录下的create.html.php文件1）修改开头处的文件包含修改前修改后2）修改文件尾的文件包含修改前：修改后：3）文件中间，适当位置(如图)，添加如下代码 代码如下：

  • 如何在静态页面上使用markdown排版 原

    ”Markdown是一种轻量级标记语言，创始人是约翰·格鲁伯（JohnGruber）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的HTML文档。”,转换成html最方便的方式是用插件我找了几个插件，最后觉得还是atome的markdown-preview-enhanced插件比较好用，预览界面简洁美观，效果如下：首先安装markdown-preview-enhanced插件(安装成功后会在扩展中显示，点击Toggle可以实时看效果)如果把显示的效果放到外面静态页面中，在markdowpreview界面右键-HTML-HTML(offline)导出html，导出的html中包含着样式，我们可以把样式单独放在一个文件中，供其他页面使用markdown-preview-enhanced插件的语法与markdown基本一样，主要区别是代码块，如果要高亮，需要在```后增加代码的类型，如css，javascript，html等详细语法说明：标题#这是<h1>一级标题 ##这是<h2>二级标题 ###这是<h3>三级标题 ####这是<h

  • 恶意域名的阻止：Quad9DNS服务

    这个被称为Quad9(在服务获得的9.9.9.9互联网协议地址之后)的免费公共域名服务系统，旨在阻止与僵尸网络，网络钓鱼攻击和其他恶意Internet主机相关的域名该服务和那些不运行自己的DNS黑名单和白名单服务的组织，以帮助减少网络犯罪与任何其他公共DNS服务器(例如Google's)一样工作，除了它不会为通过威胁源识别的站点返回名称解析服务总量。Quad9由全球网络联盟执法和研究机构建立(GCA)-an组织、与IBM和合作数据包交换所联合推出。　　GCA总裁兼首席运营官PhilRettinger在接受s采访时说：“任何地方的人都可以使用它。他说，这个服务将是相对隐私敏感的，而不会记录发出DNS请求的地址，我们将只保留地理位置数据。为了跟踪与特定恶意域名。我们匿名数据，牺牲隐私。　　有关恶意域名的相关来源于19个威胁源，其中之一就是IBM的X-Force。GCA首席技术顾问AdnanBaykal表示，该服务以任何格式发布这些威胁源，然后将其转换成一个数据库，再将其重复数据删除。Quad9还会生成一个永不禁止的域白名单。它使用了一百万个被请求的域名列表。在开发过程中，Quad

  • OTA“多角恋”：携程闪电入股同程、途牛

    OTA“多角恋”：携程闪电入股同程、途牛 2014年04月30日16:38　来源：南方都市报　参与互动(0)       　　“携程将把景点门票的现付业务接入同程，并向同程投资超过2亿美金，支持同程独立IPO。”4月28日晚间，同程网CEO吴志祥以发布内部邮件的形式，“向大家报告一个好消息。” 　　而就在十来天前，同程旅游刚与艺龙旅行网签署了战略合作协议。据业内知情人士透露，伴随此次入股，携程与同程之间签署了一份“缓冲期”协议。即一年后，同程将选择与艺龙继续携手，还是转而选择与携程合作。 　　携程左手牵同程，右手伸向途牛。旅游网29日公开的发行增补文件还显示，携程将投1500万美元，入股途牛，并将获得一个途牛董事会席位。 　　携程突击入股同程、途牛，然而早前携程与去哪儿合并的谈判会否继续？“我们不予评论。”携程回应称。   　　“多角恋爱”大戏 　　“整个合作在两个小时内确定，一周内完成了合约起草签订。”同程网CEO吴志祥说，4月19日当晚，携程和同程双方高层团队见面，没有人会想到这么快能签约完成。 　　按照

  • 仿新浪微盾客户端项目简介一

    最经公司的项目需要实现类似于新浪微盾功能的功能，因此我把这个实战的demo的经历分享给大家。 新浪微盾是啥子玩意？ 微盾是由新浪网推出的一款产生一次性动态密码的产品，可以用于新浪旗下各服务，包括新浪微博，新付通，SAE等。可有效提高帐号安全性。 说白了，就是为了提高账号的安全性的，来实现的一套“加密”的工具。他分硬件和软件两种。文件硬件图如下： 这个是不是和大家使用的u盾很像吗？ 而他的Android版效果图如下： 这也是，我们要在以后的教程中要实现的最终结果。

  • 解决audio控制播放音量

    在写手机端项目时，可能会遇到使用audio播放音乐，那么怎样控制audio默认播放的音量呢？下面时解决办法 volume属于是控制audio播放音乐的音量，其范围0-1，1表示音量最大 getVideo()//调用 functiongetVideo(){ document.getElementById("baaaefbb-audios").volume=0.2; } 复制 　直接这样写就可以了~  

  • java--基础

    java的介绍 java技术体系 jdk的组成 java跨平台的原理 安装jdk后在命令框(cmd)的检验命令 记得配置环境变量(path和java_home) IDEA集成开发环境 IDEA项目结构组成 使用步骤 常用快捷键 第一行代码 packagecom.heima; publicclasshelloworld{ publicstaticvoidmain(String[]args){ System.out.println("helloword"); } } 复制

  • 数据结构基础知识

    数据结构之链表 数据结构之栈和队列 数据结构之二叉树 数据结构之排序 数据结构之递归 　　　　作者：李潘 　　　　出处：http://wing011203.cnblogs.com/ 　　　　本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

  • Windows环境下的Chocolatey安装使用

    Chocolatey是一个软件包管理工具，类似于Ubuntu下面的apt-get,不过是运行在Windows环境下面 电脑 Powershell 方法/步骤 安装 Chocolatey的安装需要： Powershell Internet链接 下面的操作在Windows7上面应该是没有问题的。以“管理员方式”打开一个命令行工具，输入下面的命令： @powershell-NoProfile-ExecutionPolicyunrestricted-Command"iex((new-objectnet.webclient).DownloadString('https://chocolatey.org/install.ps1'))"&&SETPATH=%PATH%;%systemdrive%\chocolatey\bin 经过一段时间的等待，Chocolatey安装完毕。 使用   举个栗子，你如果想安装7Zip，你可以在命令行输入： cinst7Zip 就会自动安装这个压缩软件。 安装Node.js,输入： cinst

  • node

    1、在vscode中打开一个js文件，如index.js 2、打开VSCode的终端，执行命令：nodeindex.js，即可把Node.js运行起来 注1:Node和Chrome的全局变量基本上是一样的，如 Date、Math、setTimeout、setInterval 等： 注2:当然，也是有一些变量是和Chrome不一样的，比如 document、window 等 注3:有一些变量是Node.js里面独有的，比如 process、__dirname、__filename等： node中特有的全局变量 1）__dirname是当前运行脚本所在位置 2）__filename当前脚本目录所在位置 3）process是进程对象，它记载了Node.js运行的一些信息，比如Node的version（版本号）、platform（操作系统）、env（环境变量）、argv（用户敲击的进程，命令行会用到）等等。复制 总结： Node.js是运行在服务端的JavaScript，让我们类似使用JavaScript控制浏览器的方式控制整个计算机。在

  • Hbase各种查询总结

        运用hbase好长时间了，今天利用闲暇时间把Hbase的各种查询总结下，以后有时间把协处理器和自定义File总结下。     查询条件分为： 　　1、统计表数据 　　2，hbase简单分页 　　3，like查询 　　4 ， AND查询 　　5 ， OR查询 　　6 ，rowkey的 in查询 　　7 ，正则查询 上代码先。 packagecom.query; importjava.io.IOException; importjava.util.ArrayList; importjava.util.Iterator; importjava.util.List; importorg.apache.hadoop.conf.Configuration; importorg.apache.hadoop.hbase.CellUtil; importorg.apache.hadoop.hbase.HBaseConfiguration; i

  • iOS 协议delegate分六步

    第一步：声明协议          在RootView.h中，         @protocol协议名<基类>       方法       @end @protocolRootViewDelegate<NSObject> -(void)presentToViewController; @end 第二步：声明代理人      在RootView.h中 //必须是assign,为了防止两个对象之间的循环引用 @property(nonatomic,assign)id<RootViewDelegate>rootDelegate; （属性）。。。。 @end 第三步：执行协议方法 在RootView.m中 -(void)

  • windows系统触摸板使用总结

    1、单指操作操作： 　  单指进行单击，相当于使用鼠标左键； 2、双指操作： 　　双指进行单击，相当于使用鼠标右键。     将两个手指放在触摸板上，通过上下滑动可实现屏幕的上下滚动，方便浏览网页、文章时使用；     两只手指左右前进或者后退（只适用于chrome浏览器）     左右滑动可进行图片前后顺序的切换，方便查看相册内的照片。     将两个手指放在触摸板上，双指进行滑动拉伸或收缩的操作，可实现页面的放大或缩小。 3、三指操作：       将三根手指放在触摸板上，向上滑动可查看目前所有打开的程序及时间线记录。     将三根手指放在触摸板上，向下滑动，即可让所有窗口最小化，瞬间回到桌面。     将三只手指放在触摸板上，向左/右轻划并且保持不动会唤出所有窗口

  • Elasticsearch--地理搜索

    目录地理位置索引空间搜索映射定义示例基于距离的排序边界框过滤距离的限制任意地理形状搜索点包络线多边形多个多边形把形状保存到索引中 地理位置索引 空间搜索映射定义 elasticsearch中使用geo_point类型定义地理位置。 示例 下面是一些示例数据： location字段是geo_point类型的，可以使用字符串，数字或者一个对象来提供经纬度。注意使用字符串和数组来提供经纬度时，经度和纬度参数有不同的顺序。最后一条记录使用地理散列值，详细描述见http://en.wikipedia.org/wiki/Geohash 使用坐标进行查询的方式有多种 基于距离的排序 按照与给定地点的距离进行排序。 { "query":{ "match_all":{ } }, "sort":[ { "_geo_distance":{ "location":"48.1312,2.356", "unit":"km" } } ] } 复制 使用_geo_distance表明按照距离进行排序，unit的值有：km(公里),mi(英里)。 边界框过滤 当需要在地图上显示结果，或者允许用户标记地图区域来搜索时

  • python,flask,regex,url,route

      http://stackoverflow.com/questions/5870188/does-flask-support-regular-expressions-in-its-url-routing   EventhoughArminbeatmetothepunchwithanacceptedanswerIthoughtI'dshowanabbreviatedexampleofhowIimplementedaregexmatcherinFlaskjustincaseanyonewantsaworkingexampleofhowthiscouldbedone.   fromflaskimportFlaskfromwerkzeug.routingimportBaseConverter app=Flask(__name__)classRegexConverter(BaseConverter):def__init__(self,url_map,*items): super(RegexConverter,self).__init__(url_map) se

  • java基础之IO操作

    IO操作       ·文件类的使用（File）       ·IO中流的基本使用（字符流、字节流、内存流、打印流）       ·System类对IO的支持       ·对象序列化的问题 在整个的IO操作中，流的操作分为两种：         ·字节流                   字节输出流：OutputStream              &nbs

相关推荐

推荐阅读