html 代码 first.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
<link rel="stylesheet" href="first.css">
</head>
<body>
 
<section>
 
</section>
<!-- 添加积分器 -->
<span id="count">得分 为0</span>
<!-- 添加音频 hidden="true" -->
<audio src="audio/music.mp3" loop="true"autoplay="autoplay" loop="loop"></audio>
<div id="dazhong"></div>
<script src="jquery.js"></script>
<script src="first.js"></script>
</body>
</html>
 
 
 
 

css代码 first.css

html{
height: 100%;
}
body{
height: 100%;
background-image: url('./image/bg.jpg');
display: flex;
justify-content: center;
/* align-items: center; */
position: relative;
}
section{
width: 760px;
height: 400px;
margin-top: 100px;
}
section div{
width: 160px;
height: 140px;
display: inline-block;
margin-right: 30px;
position: relative;
}
.hole{
display: inline-block;
width:160px;
position: absolute;
bottom: 0;
z-index: 1;
}
.mouse{
width:100px;
z-index: 10;
position: absolute;
bottom:25px;
left: 30px;
 
}
#count{
display:block;
width:110px;
height: 40px;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 40px;
background-color:brown;
color: white;
position: absolute;
top:200px;
left: 10px;
}

js代码 first.js

for(var i=1;i<17;i++){
$('section').append('<div></div>');
 
}
$('section div').append("<img class='hole' src='image/hole.png' >");
$('section div').append('<img class="mouse" src="data:image/mouse.png">');
// 设置初始状态地鼠都没出现
$('.mouse').hide();
//袋鼠出现
// [1,4] [0, 3)
// 随机出现的袋鼠数目 [1 16] (0, 15] 向上取整
var num
//
//袋鼠位置[0 15] 索引 index
var index
var object;
setInterval(function(){
num=Math.ceil(Math.random()*2);
for(var i=1; i<=num ;i++){
//随机出现的袋鼠位置[0 15] 索引
index=Math.floor(Math.random()*16);
object=$('section div:nth-of-type('+(index+1)+') .mouse')
 
object.slideDown();
object.delay(2000).slideUp();
}
 
},1000);
//鼠标锤子 图形
$('.mouse').hover(function(){
$(this).css({
cursor:'url("./image/cursor-down.png"), auto'
});
},function(){
$('body').css({
cursor:'url("./image/cursor.png") ,auto'
});
});
// score 记录敲到地鼠的分数
var score=0;
$('.mouse').click(function(){
score+=10;
$(this).hide('fast');
$(" <span id='count'>得分 为"+score+"</span>").replaceAll('span');
$('#dazhong').append('<audio src="audio/dazhong.wav" autoplay="autoplay" ></audio>');
setTimeout(function(){
$('#dazhong').empty();
},1000);
});
 
 
 

　　

用html+css+js做打地鼠小游戏的更多相关文章

  1. 原生js做h5小游戏之打砖块

    前言 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...

  2. 原生js完成打地鼠小游戏

    :这是首页,有简单模式和地狱模式两种模式进行选择 这是选择完模式之后的游戏界面:30秒一局游戏倒计时,每打中一只老鼠加一分,没砸中减一分,没砸不加不减 首先准备几张图片 html代码: <!-- ...

  3. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  4. 使用PixiJS做一个小游戏

    PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...

  5. 使用JS实现2048小游戏

    JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...

  6. html+css+js实现网页拼图游戏

    代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...

  7. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

  8. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  9. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

随机推荐

  1. 大型网站的 HTTPS 实践（一）—— HTTPS 协议和原理

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt387 1 前言 百度已经于近日上线了全站 HTTPS 的安全搜索,默认会将 ...

  2. poj 1882完全背包变形

    题意:给出一个上限硬币数量s,给出n套硬币价值,求一套硬币能用不大于s数量的硬币组成从1开始连续的区间价值,其中,如果其最大值相同,输出数量小的和价值小的. 思路:很明显的完全背包,纠结后面最大值相同 ...

  3. Java虚拟机的内存结构

    我们都知道虚拟机的内存划分了多个区域,并不是一张大饼.那么为什么要划分为多块区域呢,直接搞一块区域,所有用到内存的地方都往这块区域里扔不就行了,岂不痛快.是的,如果不进行区域划分,扔的时候确实痛快,可 ...

  4. Android微信登录、分享、支付

    转载需要著名出处: http://blog.csdn.net/lowprofile_coding/article/details/78004224 之前写过微信登录分享支付第一版: http://bl ...

  5. 【Java线程】Java内存模型总结

    学习资料:http://www.infoq.com/cn/articles/Java-memory-model-1 Java的并发采用的是共享内存模型(而非消息传递模型),线程之间共享程序的公共状态, ...

  6. 201521123056 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.1 instanceof 测试一个对象是否是某个类的实例,即使左边是右边类的子类的实例对 ...

  7. 201521123012 《Java程序设计》第三周学习总结

    一.本章学习总结 1.面对对象:(1)类 <1>属性 [1]外部类 [2]内部类 <2>方法 [1]j静态 [2]非静态 (2)对象 <1>创建对象 <2&g ...

  8. Git与码云(Git@OSC)入门-如何在实验室和宿舍同步你的代码(1)

    0.几个基本概念 本地仓库:本机上某个存放代码的仓库. 远程仓库:码云服务器上的代码仓库. 重要提醒:当我们在本地操作(新增.删除.修改)文件.目录时,并将其提交(commit),就是提交到了本地仓库 ...

  9. 201521123038 《Java程序设计》 第九周学习总结

    201521123038 <Java程序设计> 第九周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 ...

  10. 201521123052 《Java程序设计》 第13周学习总结

    1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 返回的IP地 ...