打地鼠小游戏（HTML5+CSS+JS）

文章目录

打地鼠小游戏（HTML5+CSS+JS）
- 预设有两个文件（htlm和css）加一个文件夹(放图片)
- 设置基本界面
- - （1）背景图
  - （2）开始按钮
  - （3）放置16个洞老鼠随机出现
  - 设置倒计时功能
  - 打老鼠------计分设置
- 最终效果图
- 目前没有解决的问题

预设有两个文件（htlm和css）加一个文件夹(放图片)

html文件就是编写这个游戏界面，css文件放置其表现的形式

专门建立一个文件夹，放置背景图，老鼠，洞的图片

下图为我所设置的基本内容：

设置基本界面

（1）背景图

在index.css文件先设置主要游戏界面大小800px * 500px（放置16个洞）

*{magin:0px;padding: 0px;
}
.area{width: 800px;height: 500px;/* border: 1px solid red; */margin: 0px auto;
}
body{background-image: url(./image/background.png);
}

（2）开始按钮

<button class='box' id='tel_btn' >开始游戏
</button>

功能：按下触发事件，开启游戏

.css文件 --按钮呈现形式

.box{position: absolute;bottom: 10px;left: 640px;width: 250px;height: 60px;font-size: 40px;font-family: "arial black";background-color: #ecaf;
}

（3）放置16个洞老鼠随机出现

这里利用jQuery，首先介绍一下如何引入这个库，（本次没有将其下载到本地，而引用微软的在线的地址）

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

var hole = "<div class='hole'><img src='./image/mole.svg' alt='' /></div>"//利用循环将16个洞添加到游戏主区域中var holenum = 16;for(var i=0;i<holenum;i++){$(".area").append(hole);}function range(m,n){var arr=[];for(var j = m;j<=n;j++){arr.push(j);}return arr;}var time = setInterval(function(){//每次随机出现1-4只小鼠var num = Math.ceil(Math.random()*4);var arr2 = range(0,15);for(var i=0;i<num;i++){//在0-15的范围内生成一个随机数字var randNum = Math.floor(Math.random()*arr2.length);//将每次出现的小老鼠的编号取出使用eq()，并且删除（防止重复出现）var mouse = $('img').eq(arr2.splice(randNum,1));//获取小老鼠的编号后判断它的状态//：hidden ------> 匹配所有的不可见元素if(mouse.is(":hidden")){//淡入淡出，淡入，speed为100毫秒，监听器调用回调函数淡出mouse.fadeIn(100,function(){//2秒后消失$(this).delay(2000).fadeOut();})}}},1000)

在为了让洞排列整齐，这里我们配置.css文件时，将洞设置为相对的位置

.hole{width: 180px;height: 130px;margin-top: 30px;margin-right: 20px;float:left;border-radius: 50%;background-image: url(image/dirt.svg);object-fit: cover;position: relative;
}
.hole img{display: none;//先隐藏地鼠position: absolute;width:150px; height:150px;width="100%" height="100%"
}

.css文件设置

.hole img{display: none;//先隐藏地鼠position: absolute;width:150px; height:150px;width="100%" height="100%"
}

设置倒计时功能

（1）设置游戏时长变量second为10s，利用函数setInterval() 方法会不停地调用函数使得second自减一，直到为0，将上一次的调用setInterval() 传回来的time直送入clearInterval() 函数关闭游戏

（2）借鉴发送验证短信，按下开始游戏按钮，该按钮就失效，并显示剩下几秒生效

var second = 10;
var time2 = setInterval(function(){second--;
if(second>=0){$(".second span").html(second);$('#tel_btn').addClass("disabled");$('#tel_btn').attr("disabled", true);$('#tel_btn').html("重新游戏(" + second + ")");
else{clearInterval(time);               $('.area').html('<h1>游戏结束!</h1>');$('#tel_btn').attr("disabled", false);$('#tel_btn').html("重新游戏");}
},1000)

打老鼠------计分设置

$('.hole img').click(function(){$(this).hide();var score = parseInt($('.score span').html())+1;$('.score span').html(score);
});

先设置点击前隐藏老鼠，每点击一次就记1分

.css文件设置秒钟和分数字体和位置

.second{position: absolute;top:20px;left: 20px;font-size: 28px;
}
.score{position: absolute;top:70px;left: 20px;font-size: 28px;
}

最终效果图

目前没有解决的问题

没法按下重新游戏，再次运行游戏

详细见GitHub

打地鼠小游戏（HTML5+CSS+JS）相关推荐

“限时分享“ 本地80个小游戏 HTML+CSS+JS源码分享
开源项目集合 1. "限时分享" 本地80个小游戏 HTML+CSS+JS源码分享 2. "限时分享" 别错过了,最全的微信小程序源码收集分享里面有80款小游 ...
简单的五子棋小游戏(html+css+js)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>五子棋 ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
JavaScript实现打地鼠小游戏
##前言: 打地鼠小游戏相信大家都玩过,地鼠会从一个个地洞中不经意的探出一个脑袋,我们要做的就是在地鼠出来的时候拖动鼠标去打它,当打到地鼠时,会加分,打到不是地鼠时,会减分,是一个很考验手速和眼力的小 ...
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡 css部分 *{margin: 0;padding:0;}body{min-height:100vh;overflo ...
用DW敲-打地鼠小游戏
相信大部分的道友们都玩过打地鼠的游戏吧,游戏的机制非常简单,所以今天我就分享一个极其不完善的打地鼠小游戏的代码给大家. 为什么是极其不完善的呢?因为该有的功能基本有,不该有的功能当然没有啦! 说人话部 ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
html框架有什么作用,使用HTML5+CSS+JS框架有那些好处
使用HTML5+CSS+JS框架有那些好处 2017-12-08 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架.CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么 ...

打地鼠小游戏（HTML5+CSS+JS）

打地鼠小游戏（HTML5+CSS+JS）

文章目录

预设有两个文件（htlm和css）加一个文件夹(放图片)

设置基本界面

（1）背景图

（2）开始按钮

（3）放置16个洞老鼠随机出现

设置倒计时功能

打老鼠------计分设置

最终效果图

目前没有解决的问题

打地鼠小游戏（HTML5+CSS+JS）相关推荐

最新文章

热门文章

打地鼠小游戏（HTML5+CSS+JS）

打地鼠小游戏（HTML5+CSS+JS）

文章目录

预设有两个文件（htlm和css）加一个文件夹(放图片)

设置基本界面

（1）背景图

（2）开始按钮

（3）放置16个洞 老鼠随机出现

设置倒计时功能

打老鼠------计分设置

最终效果图

目前没有解决的问题

打地鼠小游戏（HTML5+CSS+JS）相关推荐

最新文章

热门文章

（3）放置16个洞老鼠随机出现