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. JavaWeb程序利用Servlet的对SQLserver增删改查操作

    声明:学了几天终于将增删改查的操作掌握了,也发现了一些问题,所以总结一下. 重点:操作数据库主要用的是SQL语句跟其他无关. 一:前提知识:PreparedStatement PreperedStat ...

  2. Rsync for windows

    说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...

  3. Adobe Flash Player 因过期而遭遇阻止怎么办

    百度搜索"adobe flash player ppapi "并找到搜索结果中包含www.adobe.com的网址进行在线下载安装即可搞定这个问题[注意要对应你电脑系统中的浏览器, ...

  4. 软件工程（GZSD2015）第二次作业进度

    贵州师范大学软件工程第二次作业 徐 镇 王铭霞 张 英 涂江枫 张 燕 安 坤 周 娟 杨明颢 杨家堂 罗文豪 娄秀盛 周 娟 李盼 岳庆 张颖 李丽思 邓婷 唐洁 郑倩 尚清丽 陈小丽 毛茸 宋光能 ...

  5. 团队作业4——第一次项目冲刺（Alpha版本）1st day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 主界面以及游戏界面大体上完成了 界面内的功能正在写 2.登陆方面 QQ授权还未申请 申请完在登陆界面完成后实现用QQ ...

  6. 201521123067 《Java程序设计》第5周学习总结

    201521123067 <Java程序设计>第5周学习总结 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. ●在本 ...

  7. 201521123073《Java程序设计》第2周学习总结

    1. 本周学习总结 1.学习了枚举类型的应用: 枚举也可以象一般的类一样添加方法和属性,你可以为它添加静态和非静态的属性或方法,这一切都象你在一般的类中做的那样. public enum Season ...

  8. 201521123037 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. I/O流.本质上是一个数据序列:最基本的可处理数据单位为byte. 1.1 分类:输入流(读数据),输出流(写 ...

  9. 201521123087 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问)1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么 ...

  10. Hyperledger Fabric 1.0 从零开始（三）——环境构建（内网/准离线）

    有公网环境的服务器可以直接看 Hyperledger Fabric 1.0 从零开始(二)--环境构建(公网) ,本篇内容与上篇相似,只不过环境搭建需要在内网下,也就是网络被限制的情况下. 1:环境构 ...