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. 数据绑定技术一：GridView控件

    在网站或应用程序中,要显示数据信息,可用到ASP.NET提供的数据源控件和能够显示数据的控件. 一.数据源控件 数据源控件用于连接数据源.从数据源中读取数据以及把数据写入数据源. 1.数据源控件特点 ...

  2. webservice Dome--一个webservice的简单小实例

    1.理解:webservice就是为了实现不同服务器上不同应用程序的之间的通讯 2.让我们一步一步的来做一个webservice的简单应用 1)新建一个空的web应用程序,在程序上右键,新建项目,选择 ...

  3. java环境安装说明

    Java从安装到运行第一个程序 对于初学者来说,能否成功运行第一个Java程序,关系到这杯咖啡的口感. 作为才疏学浅的常年初学者,语言描述不清,还是上图吧! 一.安装JDK 打开网址http://ww ...

  4. 201521123002《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.提交函数实 ...

  5. 201521123025《java程序设计》第七周学习总结

    1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { r ...

  6. 201521123105 第六周Java学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法1.1 Object对象 ...

  7. 201521123037 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口: 接口简而言之是方法声明和常量值的集合,接口中所有的方法默认为public ...

  8. 201521123057 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...

  9. Ubuntu下PHP MySQL环境搭建-upcoming-ChinaUnix博客

    编程语言选择php5 , web服务器选择Apache2 ,后台数据库选择MySQL首先安装编译工具, 打开终端 sudo apt-get install build-essential autoco ...

  10. 控制结构(4) 局部化(localization)

    // 上一篇:状态机(state machine) // 下一篇:必经之地(using) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上一次,我们说到状态机结构( ...