vue实现九宫格打地鼠小游戏

效果展示：

在这里插入图片描述

1.首先实现九宫格的布局，当然也可以用很多布局和语法简化代码欢迎大家在评论区讨论哦，这里就用最基础的。

<template><div class="holes"><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div><div class="hole"><img src="/images/Shixun/mouse.png" class="mouse"><img src="/images/Shixun/boom.png" class="boom" alt=""><img src="/images/Shixun/hole.png" alt=""></div></div>
</template>

2.用css调整布局效果和对应的鼠标点击效果

<style  scoped>*{margin: 0;padding: 0;
}
.holes{width: 602px;height: 602px;margin: 10px auto;border: 1px solid #000;display: flex;flex-wrap: wrap;
}
.holes:hover{//鼠标经过变化cursor: url('/images/Shixun/hammer.ico'),auto;
}
.holes:active{//鼠标点击变化cursor: url('/images/Shixun/hammerdown.ico'),auto;
}
.hole{width: 200px;height: 200px;outline: 1px solid red;position: relative;
}
.hole>img{width: 100%;height: 100%;position: absolute;
}
.hole>img.mouse{width: 150px;height: 150px;z-index: 2;top: 15px;left: 25px;display: none;
}
.hole .boom{z-index: 2;display: none;
}
</style>

3.然后实现 1）随机跳出来和消失的小老鼠 2）点击出现小鼠消失和击倒效果

<script>
export default {data(){return{}},methods:{displayMouse(){let hole=document.querySelectorAll('.hole')let siteNum1=Math.floor(Math.random()*9)let siteNum2=Math.floor(Math.random()*9+2)hole[siteNum1].querySelector('.mouse').style.display='block'hole[siteNum2].querySelector('.mouse').style.display='none'},clickMouse(){let mouse=document.querySelectorAll('.mouse')for(let i=0;i<mouse.length;i++){mouse[i].addEventListener('click',function(){var that= thisthat.style.display='none'console.log(that.nextElementSibling);that.nextElementSibling.style.display='block'setTimeout(()=>{that.nextElementSibling.style.display='none'},1000)})}}},mounted(){setInterval(this.displayMouse, 2000);this.clickMouse();}
}
</script>

需要图片素材的可以私信我哦

vue实现九宫格打地鼠小游戏相关推荐

python打地鼠代码_vue实现打地鼠小游戏
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下效果图如下: 代码如下: 打地鼠游戏 {{n}}号地鼠设置参数速度: 总数: 开始统计分数面板总数: {{TOT ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
敲地鼠java_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
java android 打地鼠_Android实现打地鼠小游戏
本文实例为大家分享了Android实现打地鼠小游戏的具体代码,供大家参考,具体内容如下实现结果代码实现 playmouse.java package com.example.playmouse; ...
如何用python制作五子棋游戏_Python制作打地鼠小游戏
原文链接 Python制作小游戏(二十一)mp.weixin.qq.com 效果展示打地鼠小游戏https://www.zhihu.com/video/1200492442610450432 简介 ...
android实现九宫格拼图小游戏
贴一下效果图接下来随便用一张图片就好以下是全代码自定义View GameView类 import android.content.Context; import android.graphics ...
Github项目分享——Vue随机刷装备小游戏
Vue随机刷装备小游戏项目地址 https://github.com/Couy69/vue-idle-game 游戏设计通过副本获得装备与金币装备分为四个等级:破旧.普通.神器.史诗主角默认每 ...
【180730】WinForm打地鼠小游戏源码
本源码是采用WinForm进行开发的一个并非简单的打地鼠小游戏,有动画效果哈!有打地鼠.计分.过关等功能. 菜单功能: 1.运行游戏后,输入玩家姓名,点击开始 2.用鼠标点击从洞中钻出的地鼠给予打击 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...

vue实现九宫格打地鼠小游戏

vue实现九宫格打地鼠小游戏相关推荐

最新文章

热门文章