分享一个最近很火的前端小游戏

作者前些时间看到一个找牛的小游戏，大概就是点击画面会发出动物叫声，根据声音大小来判断点击位置与牛的位置距离，以此来寻找隐藏的牛(点击到牛)，于是作者将其复刻（框架VUE）

接下来是源代码

<template><div class="what-calls" @click="getMousePos"><div class="score"><span class="text">得&nbsp;分&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;{{ score }}</span></div><el-image:style="TheStyle":src="require('@/assets/Cow.jpg')"fit="cover"id="img"@click="findhim"></el-image><audio src="@/assets/牛叫.mp3" ref="mp3"></audio></div>
</template>

<script>
export default {name: "what-calls",data() {return {TheStyle: {position: "relative",top: "0vh",left: "0vw",width: "20vh",height: "20vh",opacity: "0",},//屏幕大小pxclientX: 0,clientY: 0,//点击位置pxclickX: 0,clickY: 0,//图片位置pximgX: 0,imgY: 0,//点击距离图片距离百分比long: 0,//图片距离四个顶点的距离long_left_top: 0,long_left_bottom: 0,long_right_top: 0,long_right_bottom: 0,//图片到四个顶点的最长距离maxlong: 0,//得分score: 0,//previousprevious: 0,};},methods: {getMousePos(event) {let e = event;this.clickX = e.clientX;this.clickY = e.clientY;this.long = Math.sqrt(Math.pow(this.clickX - this.imgX, 2) +Math.pow(this.clickY - this.imgY, 2));let mp3 = this.$refs.mp3;if(1 - this.long / this.maxlong < 0.4){mp3.volume = 0.1}else if(1 - this.long / this.maxlong < 0.6){mp3.volume = 0.3}else if(1 - this.long / this.maxlong < 0.8){mp3.volume = 0.6}else if(1 - this.long / this.maxlong < 1){mp3.volume = 0.9}console.log(mp3.volume);if (mp3.paused) {mp3.play();} else {mp3.currentTime = 0;mp3.play();}},findhim() {//节流const now = Date.now();if (now - this.previous > 2000) {this.TheStyle.opacity = "1";this.score += 1;this.previous = now;setTimeout(() => {this.initialize();this.TheStyle.opacity = "0";}, 2000);}},initialize() {//计算屏幕宽高this.clientX = document.body.clientWidth;this.clientY = document.body.clientHeight;//随机生成图片位置let left = Math.round(Math.random() * 80 + 0);let top = Math.round(Math.random() * 55 + 0);this.TheStyle.top = top.toString() + "vh";this.TheStyle.left = left.toString() + "vw";//计算图片随机位置this.imgX = (left * this.clientX) / 100;this.imgY = (top * this.clientY) / 100;//计算图片至四个顶点的距离this.long_left_top = Math.sqrt(Math.pow(this.imgX, 2) + Math.pow(this.imgY, 2));this.long_left_bottom = Math.sqrt(Math.pow(this.imgX, 2) + Math.pow(this.clientY - this.imgY, 2));this.long_right_top = Math.sqrt(Math.pow(this.clientX - this.imgX, 2) + Math.pow(this.imgY, 2));this.long_right_bottom = Math.sqrt(Math.pow(this.clientX - this.imgX, 2) +Math.pow(this.clientY - this.imgY, 2));this.maxlong = Math.max(this.long_right_top,this.long_right_bottom,this.long_left_top,this.long_left_bottom);},},mounted() {this.initialize();this.$alert("游戏规则: 找到隐藏在大草原中的牛,点击屏幕,牛会发出叫声,点击的距离距离牛越近,牛的叫声会越大,找到藏在草原中的牛吧！","欢迎来到what-calls",{confirmButtonText: "试听一下(最大声牛叫!)",}).then(() => {let mp3 = this.$refs.mp3;mp3.play();});},
};
</script>

<style lang='less' scoped>
.what-calls {width: 100vw;height: 100vh;background-color: green;.score {position: relative;top: 2vh;left: 2vh;border-radius: 20px;width: 10vw;height: 8vh;background-color: white;z-index: 0;text-align: center;font-size: 1em;.text {line-height: 8vh;}}
}
</style>

分享一个最近很火的前端小游戏相关推荐

互动游戏对战平台推荐：盘点很火的互动小游戏多人对战平台
虽然是个妹子,但我超有游戏天赋呦!还记得我和表哥在20年前经常在家里用世嘉.ps等主机联机玩幽游白书.魂斗罗的日子,那份美好变成了我们这代人童年最宝贵的记忆,不管是对战的互相嘲讽还是与好友一同通关的瞬 ...
分享一个C语言矿井逃生迷宫小游戏【附源码】
用C语言写的一个迷宫小游戏,游戏玩法是通过鼠标控制帽子上的灯走出迷宫 // 定义常量 #define PI 3.141592653589 // 圆周率 #define UNIT_GROUND 0 // ...
【QML】分享一个纯QML实现的2048小游戏
随着QT6的问世,UI设计+Qt代码联动的设计方式在Qt Creator中已经变成了不可用状态(虽然可以手动打开),官方开始推广用QML来进行界面设计,当时蠢蠢欲动做了一个小游戏,忽然想起来分享一下, ...
分享一个谷歌浏览器在断网下的小游戏
1.前言平时我们如果看到这个页面心情一定会可不开心对吧,因为没网了呀. TIM截图20181016091344.png 但是不知道发现没有, 未连接到互联网几个字上,有一只可爱的小恐龙,咱们按下空格 ...
分享一个很酷很炫的html5特效网站源码
原创整理不易,转载请注明出处:分享一个很酷很炫的html5特效网站源码代码下载地址:http://www.zuidaima.com/share/1784027301841920.htm 在线演示:h ...
分享一个python采集中国福利彩票的小代码
分享一个python采集中国福利彩票的小代码分享一个python采集中国福利彩票的小代码能采集双色球,七乐彩,3D彩票任意一段时间的开奖号码,根据需求取消请求头注释,就能采集数据.(初学者请勿评价 ...
金榜提名前端小游戏教程（含冒泡，canvas烟花特效,适配pc,手机）内含源码
一年一次的高考是人生的第一个重要转折点,如果能重来一起进入时光机,高考前一天小编随便做了一个测一测命中注定大学的小小游戏.(vue前端小游戏,canvas动画) 效果图源代码 1.html代码 &l ...
弹力细胞，一个由JavaScript写的网页小游戏
弹力细胞 (BounceCell) 一个由JavaScript写的网页小游戏作为大一菜鸟,这是我第一次比较正式的写文章 [害臊] 游戏玩法通过鼠标或触屏控制屏幕底部的滑动弹板将发射的小球反弹出去撞 ...
使用Vue做一个可自动拼图的拼图小游戏（二）
背景以及最终效果在上一篇文章中我们已经写完了一个可以正常玩的拼图小游戏,但是这还没有结束,我们还要接着试一下让拼图游戏可以自己完成拼图. 在线体验本部分是这篇文章的第二部分,主要讲的是实现自动拼图 ...

分享一个最近很火的前端小游戏

分享一个最近很火的前端小游戏相关推荐

最新文章

热门文章