预览

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>暴打灰太狼</title>
<link rel="stylesheet" type="text/css" href="js/Game.css"/>
</head>
<body>
<div id="from">

<audio id="audio" src="audio/audioMusic.mp3" autoplay="autoplay"></audio>
<div id="lables">
暴打灰太狼
</div>
<div id="bgHong">
<img src="data:images/bgHong.png"/>
</div>
<div id="bgHong2">
<img src="data:images/bjbj2.png"/>
</div>
</div>
<span class="score">0</span>
<div class="process"></div>
<div id="interface">
<a href="javascript:void(0)" id="btnSound" class="icon"> </a>
<input type="button" id="ScreenGameOne" value="">
<input type="button" id="ScreenGameTwo" value="">
<input type="button" id="ScreenGameThree" value="">
<div id="mouses">
<img src="data:images/bgGame.png" class="bgGame"/>
</div>
<div id="mousesTwo">
<img src="data:images/bgTwo.png" class="bgGame"/>
</div>
<div id="mousesThree">
<img src="data:images/bgThree.png" class="bgGame"/>
</div>
<div id="">
</div>
<div class="rule">
<p>游戏规则</p>
<p>1.第一关36秒分数达到80</p>
<p>2.第二关27秒分数达到100</p>
<p>3.第三关18秒分数达到120</p>
<p>4.拼手速，殴打灰太狼+10分</p>
<p>5.殴打小灰灰-10分</p>
<a href="javascript:void(0)">[关闭]</a>
</div>
<div class="mask">
<h1>GAME OVER</h1>
</div>
</div>
</body>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Game.js" type="text/javascript" charset="utf-8"></script>
</html>

CSS代码

*{
padding:0;
margin:0;
}
body{
margin: 0;
background-color: rgb(250,205,104);
}
div img{
margin-left: 25%;
width: 50%;
height: 55%;
margin-top: 90px;
}
#ScreenGameOne{
display: block;
position: absolute;
right: 70px;
top: 300px;
width: 200px;
height: 75px;
background-position: -58px -166px;
border: none;
background-color: rgba(0,0,0,0);
background-image: url(../images/Screen.png);
}
#ScreenGameOne:hover {
background-position: -58px -166px;
}
#ScreenGameTwo{
display: block;
position: absolute;
right: 70px;
top: 400px;
width: 200px;
height: 75px;
background-position: -58px -240px;
border: none;
background-color: rgba(0,0,0,0);
background-image: url(../images/Screen.png);
}
#ScreenGameTwo:hover {
background-position: -58px -240px;
}
#ScreenGameThree{
display: block;
position: absolute;
right: 70px;
top: 500px;
width: 200px;
height: 75px;
background-position: -58px -820px;
border: none;
background-color: rgba(0,0,0,0);
background-image: url(../images/Screen.png);
}
#ScreenGameThree:hover {
background-position: -58px -820px;
}
#btnSound {
display: block;
position: absolute;
right: 30px;
top: 30px;
width: 52px;
height: 52px;
background-position: -331px -132px;
background-image: url(../images/icon.png);
}
#btnSound.disabled {
background-position: -331px -80px;
}
#numberBefore{
position: absolute;
left: 252px;
top: 159px;
width: 80px;
height: 40px;
background-position: -22px -158px;
background-image: url(../images/icon.png);
}
.score{
display: block;
width: 100px;
position: relative;
font-size: 38px;
font-weight: bold;
left:345px;
top: 150px;
color: red;
}
.process{
background: url(../images/progress.png);
width: 180px;
height: 18px;
position: relative;
left: 44%;
top:120px;
}
#lables{
font-weight: bold;
color: rgb(254,117,0);
position: absolute;
width: 400px;
margin-left: 720px;
margin-top: 20px;
padding: 30px;
font-size: 50px;
border-radius: 10px;
background-size:400px 120px;
text-align: center;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
padding: 100px 0;
box-sizing: border-box;
position: absolute;
left: 0;
top:0;
display: none;
}
.mask>h1{
text-align: center;
margin-top: 80px;
color:red;
font-size: 38px;
font-weight: bold;
text-shadow: 2px 2px 0 white;
}
#mousesTwo{
display: none;
}
#mousesThree{
display: none;
}

JS/jQuery代码

核心代码

$(function(){
//1.定义两个数组保存所有灰太狼和小灰灰的图片
var pritrue1=['./images/h0.png','./images/h1.png','./images/h2.png','./images/h3.png','./images/h4.png','./images/h5.png','./images/h6.png','./images/h7.png','./images/h8.png','./images/h9.png'];
var pritrue2=['./images/x0.png','./images/x1.png','./images/x2.png','./images/x3.png','./images/x4.png','./images/x5.png','./images/x6.png','./images/x7.png','./images/x8.png','./images/x9.png'];
//2.定义一个数组保存所有可能出现的位置
var address=[
{left:"185px",top:"160px"},
{left:"415px",top:"160px"},
{left:"650px",top:"160px"},
{left:"150px",top:"260px"},
{left:"415px",top:"255px"},
{left:"645px",top:"255px"},
{left:"140px",top:"380px"},
{left:"410px",top:"380px"},
{left:"675px",top:"380px"}
];
var pritrueTimer;
var pritruePos;
var pritrueType;
//处理灰太狼运动的方法
function startMouseAnimation(){
pritruePos=Math.round(Math.random()*8);
pritrueType=Math.round(Math.random()*2)===1?pritrue1:pritrue2;
//生成灰太狼dom对象
var $mouseImg=$("<img src='' class='mouseImg' alt='' >");
$mouseImg.css({
position:"absolute",
left:address[pritruePos].left,
top:address[pritruePos].top,
display:"none",
width:120,
height:120
});
//声明全局变量，次数是算var声明添加
window.pritrueIndex =0;
window.pritrueIndexEnd =5;
//将图片添加到界面容器中
$("#mouses").append($mouseImg);
$mouseImg.fadeIn(300);
pritrueTimer=setInterval(function(){
if(pritrueIndex>pritrueIndexEnd){
$mouseImg.stop().remove();
clearInterval(pritrueTimer);
startMouseAnimation();
}
$mouseImg.attr("src",pritrueType[pritrueIndex]);
pritrueIndex++;
},200);
}）

完整资源:https://download.csdn.net/download/weixin_51515266/19872410

jQuery暴打灰太狼小游戏相关推荐

jQuery实现拍打灰太狼小游戏
要图片的同学可以私聊我~ html部分: <!DOCTYPE html> <html lang="en"><head><meta char ...
每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
jQuery实现Windows扑克牌小游戏代码
下载地址jQuery实现Windows扑克牌小游戏代码,使用jQuery基于CSS3制作的WINDOWS7系统电脑自动的蜘蛛纸牌游戏. dd:
使用jquery—Canvas实现html5小游戏——《坦克大战》
目录 1.项目背景 2.项目展示 3.设计思路 3.1.坦克移动 3.2.坦克开火 3.3.击中坦克 4.实现代码 5.总结 1.项目背景 2021年春节期间在家无聊,正好又学过一些前端的知识,因此就 ...
C语言开发数字华容道实现,jQuery实现数字华容道小游戏(实例代码)
数字华容道 *{ padding: 0px; margin: 0px; } #btns>button{ width: 100px; height: 30px; border: none; bac ...
jQuery实现一个农场小游戏
jQuery实现一个农场小游戏效果图: 样式代码: <style>*{margin: 0;}.iBg{/*背景*/width:1000px;height: 100%;position:a ...
jQuery实现飞机大战小游戏
jQuery实现飞机大战小游戏一.效果图二.核心代码 1.创建地图 2.用户选择飞机界面 3.设置背景循环 4.创建飞机 5.创建敌机 6.敌机移动 7.设置敌机爆炸 8.创建子弹 9.检测子弹的 ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
jquery制作html小游戏,JQuery手速测试小游戏实现思路详解
(-1)写在前面我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个 ...
Jquery简单实现2048小游戏
Jquery实现2048小游戏思路整理 1.搭建基础的UI界面 2048需要4*4的表格,所我们要先搭建基础的UI界面:可以使用表格,然后再对基础的单元格进行样式设置: <body>< ...

jQuery暴打灰太狼小游戏

预览

HTML代码

CSS代码

JS/jQuery代码

核心代码

jQuery暴打灰太狼小游戏相关推荐

最新文章

热门文章