锅打灰太狼的jquery小游戏

刚学了jquery，有看到网上视频的案例，如何下载了素材自己也敲了一遍。然后我自己梳理一遍，算是总结复习吧。废话不多说，打地鼠都知道什么样子，接下来就讲讲代码的实现。
1、游戏顶部的进度条，那个开始按钮我就不说了，应该都会的
进度条的减少我们可以联想到是随着时间的变化，width在减少，如果能想到这边问题也就迎刃而解。

var progressWidth = $(".progress").width() //获取到满状态的时间宽度。
var timer = setinterval(function(){if(progressWidth > 0){ //有长度说明还没结束progressWidth -=2;$(".progress").width(progressWidth) }else{clearinterval(timer) //时间结束 关闭}
},300)

2、一共九个坑，图片出现的位置也就有九个。所以我定义了一个数组来存储这九个坑的位置。


```javascript
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"}];//也就是在这个容器里面插入图片，<div class="container"> 在这里动态插入图片 </div>function getImage(){var $img = $(<img src="" class="randomImage">)$img.css({position:"absolute"left:arrPos[0].lefttop:arrPos[0].top})那么如何做到随机来选取图片呢?Math.random()*8随机函数；0-8刚好九个数字Math.round()则数组【】内的数可以用randomIndex = Math.round(Math.random()*8)代码如下$img.css({position:"absolute"left:arrPos[randomIndex].lefttop:arrPos[randomIndex].top})}好的呆这里随机生成位置已经成功了。

3、灰太狼和小灰灰冒出来的过程其实是用定时器切换图片 逐帧动画```javascriptvar htl = ['./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 xhh = ['./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'];// 用数组来放逐帧动画 前五张是冒出来的动画，后面几张是被打的动画。
var timer2 = setinterval(function() {//所以我们只要前五张的动画var startIndex = 0;var endIndex = 5if(startIndex >endIndex){$(".randomImage").remove(); //如果超过了，移除图片getimage()  //重新获取图片}else{$img.attr('src',type[startIndex]) //一次次的渲染图片形成动画startIndex++}
},300)$(".container").append($img)
//至此，终于可以实现随机冒出动画。

4、点击变成殴打状态，并且加分。我在这边也翻了错误。

//调用这个方法可以改变分数，还可以改变动画1、改变分数很简单 ，定义count = 0 ， ++ 或 -- 就行2、改变动画？ >>>我也蒙了好久，后来看了视频才知道，前面我们用var startIndex = 0;var endIndex = 5 来控制播放哪几张， 所以这边换播放的图片不就OK了。把前面的局部变量换一个写法window.startIndex = 0;window.endIndex =5 ; 写在外面，这是全局变量。
function getCount($img){window.startIndex = 5;window.endIndex =9 ;var count = 0$img.one("click",function(){//one只击打一次//判断加或者减，截取src中的数据做比较，判断是哪个。var flag = $(this).attr("src").indexOf('h')>=0if(flag){count++}else{count--}})
}

至此核心部分终于回顾结束了。。。。第一次写，这个视频在b站的黑马jquery那边，李南江老师讲的很好，我只是个做习题然后复习的菜鸡。

在这里插入代码片

锅打灰太狼的jquery小游戏相关推荐

jQuery小游戏之锅打灰太郎
HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
[原创]中国象棋翻翻棋,休闲,对战,娱乐,小游戏,jQuery小游戏,下载即用,代码注释全（附源码）
ChessInvert 介绍中国象棋翻翻棋,休闲,对战,娱乐,小游戏,在线效果预览开源许可证使用 Apache-2.0 开源许可协议,商用请联系原创作者me. 使用说明引入jQuery,及j ...
jquery小游戏之接元宝
相信接元宝的游戏大家都很熟悉了,自从抓住神经猫火了之后,微信游戏越来越多,html5像人们料想的那样逐渐占据舞台.当然由于浏览器兼容的问题,html5的游戏依然只能在移动端大展拳脚,不过没关系.今天博 ...
jQuery小游戏——小鸟飞行闪躲
引言:主要应用jQuery的使用功能介绍:注册,登录,小鸟的移动,小鸟和怪物的碰撞--移除小鸟,小鸟吃金币,怪物的随机出现,控制怪物出现的数量,金币的随机出现,关卡设置,排行榜. 游戏演示: 首先我 ...
jQuery小游戏-弹弹球
效果展示: CSS样式: #box {width: 600px;height: 650px;border: 5px solid rgb(245, 164, 96);position: relativ ...
jQuery实现小游戏源代码--打灰太狼
注:该游戏是通过学习B站李南江老师jQuery后,再其基础上做的修正. 不多说,直接上代码:代码有详细的注释,应该不难看懂首先是HTML代码:值得一提的是,我这里引入的是jQuery1.12.4版本 ...
jQuery写经典游戏：锅打灰太狼
没看源代码,可能思路有些不一样,还做了如下优化: 1.增加了音效增加了狼儿钻回洞里的动画. 2.计分规则 3.设置了combo系统, 连续5个combo 时间+10S 4.打小灰灰会减分减时间 5 ...
每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
jquery青蛙过河小游戏源码
下载地址jquery实现的青蛙过河小游戏源码,js小游戏源码. dd:
jQuery实现别踩白块小游戏(简易版)
别踩白块分享这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...

锅打灰太狼的jquery小游戏

锅打灰太狼的jquery小游戏相关推荐

最新文章

热门文章