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. TypeScript入门知识二（参数新特性）

    一,参数类型 1.在参数的名称后面使用冒号来指定参数的类型,当赋值的不是指定类型数值时会报错. var myname: string = "zhang san"; 2.当你没有指定 ...

  2. JAVA基础-集合（一）

    一.结构 Collection接口为一些单列集合的根接口,其常用子接口为List接口.Set接口.List接口常用实现子类为ArrayList(数组)LinkedList(链表).Set接口常用实现子 ...

  3. poj 1014多重背包

    题意:给出价值为1,2,3,4,5,6的6种物品数量,问是否能将物品分成两份,使两份的总价值相等. 思路:求出总价值除二,做多重背包,需要二进制优化. 代码: #include<iostream ...

  4. ELM极限学习机

    极限学习机(Extreme Learning Machine) ELM,是由黄广斌提出来的求解神经网络算法.ELM最大的特点是对于传统的神经网络,尤其是单隐层前馈神经网络(SLFNs),ELM比传统的 ...

  5. 201521145048《java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 Q1.finally 题目4-2 1.1 截图你的提交结果( ...

  6. 201521123026《JAVA程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  7. 安装wampserve之前需要安装vc++2012.

    本人是64位系统下载了wampserver3.0.6之后安装好,启动报错缺少msvcr110.dll. 于是从网上下载了msvcr110.dll放到了windows的syswow64文件夹下,甚至还重 ...

  8. 详解go语言的array和slice 【二】

    上一篇已经讲解过,array和slice的一些基本用法,使用array和slice时需要注意的地方,特别是slice需要注意的地方比较多.上一篇的最后讲解到创建新的slice时使用第三个索引来限制sl ...

  9. 理解G1垃圾回收日志

    本篇文章主要介绍在-XX:+PrintGCDetails选项的情况下G1 GC log打印的信息.(注:本文假设读者对G1算法的基本原理已经有所了解) 下面是一段G1垃圾收集器相关的log信息 0.5 ...

  10. [python学习笔记] pyqt5下载与安装

    下载 命令安装 pip3 install PyQt5 但是我这里老安装失败 失败问题 host='pypi.python.org', port=443): Read timed out 方案1:加大命 ...