jQuery实现拍打灰太狼小游戏

要图片的同学可以私聊我~

html部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="style.css"><script src="../jquery/jquery-3.4.1.min.js"></script><script src="index.js"></script>
</head><body>
<div class="box"><h1 class="score">0</h1><div class="progress"></div><button class="start">开始游戏</button><div class="rules">游戏规则</div><div class="rule"><p>游戏规则</p><p>1.游戏时间：60s</p><p>2.拼手速,殴打灰太狼+10分</p><p>3.殴打小灰灰-10分</p><a href="#" class="close">[关闭]</a></div><div class="mask"><h1>GAME OVER</h1><button class="reStart">重新开始</button></div>
</div>   </body></html>

css部分：

* {margin: 0;padding: 0;
}.box {width: 320px;height: 480px;background: url(imgLang/game_bg.jpg) no-repeat 0 0;margin: 50px auto;position: relative;
}.box>h1 {color: white;margin-left: 60px;
}.box>.progress {width: 180px;height: 16px;background: url(imgLang/progress.png) no-repeat 0 0;position: absolute;top: 66px;left: 63px;
}.box>.start {width: 150px;line-height: 35px;text-align: center;color: white;background: linear-gradient(#E55C3D, #C50000);border-radius: 20px;border: none;font-size: 20px;position: absolute;top: 320px;left: 50%;margin-left: -75px;
}.box>.rules {width: 100%;height: 20px;background: #ccc;position: absolute;bottom: 0;left: 0;text-align: center;
}.box>.rule {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);position: absolute;top: 0;left: 0;padding-top: 100px;box-sizing: border-box;text-align: center;display: none;}.rule>p {line-height: 50px;color: white;
}.rule>a {color: red;
}
.box>.mask{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);position: absolute;top: 0;left: 0;padding-top: 200px;box-sizing: border-box;text-align: center;display: none;
}
.mask>h1{color:#ff4500;text-shadow: 3px 3px 0 #fff;font-size: 40px;
}
.mask>.reStart{width: 150px;line-height: 35px;text-align: center;color: white;background: linear-gradient(#74ACCF, #007DDC);border-radius: 20px;border: none;font-size: 20px;position: absolute;top: 320px;left: 50%;margin-left: -75px;
}

js部分：

$(function () {//监听游戏规则的点击$('.rules').click(function () {$('.rule').stop().fadeIn(100); //执行动画之前先停止上一个动画})//监听关闭按钮的点击$('.close').click(function () {$('.rule').stop().fadeOut(100);})//监听开始游戏的点击$('.start').click(function () {$(this).stop().fadeOut(100);//调用处理进度条的方法progressHandler();//调用灰太狼动画startWolfAnimation();})//监听重新开始的点击$('.reStart').click(function () {$(".mask").stop().fadeOut(100);//调用处理进度条的方法progressHandler();//调用灰太狼动画的方法startWolfAnimation();})//定义一个专门处理进度条的方法function progressHandler() {//重新设置进度条宽度$('.progress').css({width: 180})//开启定时器处理进度条var timer = setInterval(function () {//拿到进度条当前的宽度var progressWidth = $('.progress').width();//减少当前的宽度progressWidth -= 1;//重新给进度条赋值宽度$('.progress').css({width: progressWidth})//监听进度条是否走完if (progressWidth <= 0) {//关闭定时器clearInterval(timer); //不关定时器重新开始按钮就没有用//显示重新开始界面$('.mask').stop().fadeIn(100);//关闭灰太狼动画stopWolfAnimation();}}, 100)}var wolfTimer; //如果在开始动画函数里面定义变量，停止灰太狼方法访问不到function startWolfAnimation() {//定义两个数组保存所有灰太狼和小灰灰的图片var wolf_1 = ['imgLang/h0.png', 'imgLang/h1.png', 'imgLang/h2.png', 'imgLang/h3.png', 'imgLang/h4.png', 'imgLang/h5.png', 'imgLang/h6.png', 'imgLang/h7.png', 'imgLang/h8.png', 'imgLang/h9.png'];var wolf_2 = ['imgLang/x0.png', 'imgLang/x1.png', 'imgLang/x2.png', 'imgLang/x3.png', 'imgLang/x4.png', 'imgLang/x5.png', 'imgLang/x6.png', 'imgLang/x7.png', 'imgLang/x8.png', 'imgLang/x9.png'];//定义一个数组保存所有可能出现的位置var arrPos = [{left: "100px",top: "115px"},{left: "20px",top: "160px"},{left: "190px",top: "142px"},{left: "105px",top: "193px"},{left: "19px",top: "221px"},{left: "202px",top: "212px"},{left: "120px",top: "275px"},{left: "30px",top: "295px"},{left: "209px",top: "297px"}];//创建一个图片var $wolfImage = $("<img src='' class='wolfImage'>");//随机获取图片的位置var posIndex = Math.round(Math.random() * 8);//设置图片显示位置$wolfImage.css({position: "absolute",left: arrPos[posIndex].left,top: arrPos[posIndex].top});//随机获取数组类型 wolf_1或者wolf_2灰太狼或者小灰灰var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;window.wolfIndex = 0;//定义一个全局变量 外面就可以调用了window.wolfIndexEnd=5;//设置图片内容 动画从h1-h5或者x1-x5wolfTimer = setInterval(function () {if (wolfIndex > wolfIndexEnd) { //拍打之前的动画$wolfImage.remove();clearInterval(wolfTimer);//继续开始下一个灰太狼startWolfAnimation();}$wolfImage.attr("src", wolfType[wolfIndex]);wolfIndex += 1;}, 300)$(".box").append($wolfImage);//调用处理游戏规则的方法gameRules($wolfImage);//把wolfImage传进来}function gameRules($wolfImage){$wolfImage.one("click",function(){//One 不管一次性点多少次，都只算一次分数//修改索引window.wolfIndex=5;window.wolfIndexEnd=9;//拿到当前点击的图片地址var $src=$(this).attr("src");//根据地址判断是否是灰太狼var flag=$src.indexOf("h")>=0;//如果没有找到h字符，则返回-1，flag的值就为false//根据点击的图片类型增减分数if(flag){//+10//字符串转换为数字进行加减,再放进text里面$('.score').text(parseInt($('.score').text())+10);}else{//-10$('.score').text(parseInt($('.score').text())-10);}})}function stopWolfAnimation() {$('.wolfImage').remove();clearInterval(wolfTimer);}/*随机数0-1    0-8Math.round()作用是四舍五入0  * 8 = 0   == 00.1* 8 = 0.8 == 10.2* 8 = 1.6 == 20.3* 8 = 2.4 == 20.4* 8 = 3.2 == 30.5* 8 = 4.0 == 40.6* 8 = 4.8 == 50.7* 8 = 5.6 == 60.8* 8 = 6.4 == 60.9* 8 = 7.2 == 71* 8 =  8    == 8*/
})

jQuery实现拍打灰太狼小游戏相关推荐

每个人都能制作的简易版狂拍灰太狼小游戏（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实现拍打灰太狼小游戏

jQuery实现拍打灰太狼小游戏相关推荐

最新文章

热门文章