[jQuery案例练习]——锅打灰太狼

准备

1.需掌握html css js

2.所用编译器Hbuilder

效果展示

开发思路

1）index.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>狂拍灰太狼</title><link rel="stylesheet" href="css/index.css"><script src="./js/jquery-1.12.4.min.js"></script><script src="./js/index.js"></script>
</head>
<body>
<div class="container"><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>

2）index.css

/* 清除浏览器样式 */
*{margin: 0;padding: 0;
}
/* 页面框架 */
.container{width: 320px;height: 480px;/* background：图像地址  不重复 水平位置0  垂直位置0 */background:url(../img/game_bg.jpg) no-repeat 0 0;/* 外边距 上下50px 左右居中 */margin: 50px auto;position: relative;
}
.container>h1{color: white;margin-left:60px;
}
/* 进度条 */
.container>.progress{width: 180px;height:16px;background: url(../img/progress.png) no-repeat 0 0;position: absolute;top:66px;left:63px;
}
/* 开始游戏——按钮 */
.container>.start{width:150px;line-height:35px;text-align:center;color: white;/* linear-gradient 线性渐变 */background: linear-gradient(#ff4500,#ff0000);/* 圆角边框 */border-radius:20px;/* 去边框样式 */border:none;/* 字体大小 */font-size: 20px;/* 按钮位置 */position: absolute;top: 320px;left: 50%;margin-left: -75px;
}
/* 游戏规则 */
.container>.rules{width: 100%;height: 20px;background: #ccc;/* 水平居中 */text-align: center;/* 位置 */position: absolute;left: 0;bottom: 0;
}
.container>.rule{width: 100%;height: 100%;background: rgba(0,0,0,0.5);padding-top:100px ;box-sizing: border-box;text-align: center;/* 隐藏 */display: none;/* 位置 */position: absolute;left: 0;top: 0;
}
.rule>p{/* 垂直居中 */line-height: 50px;color:white;
}
.rule>a{color: red;text-decoration: none;
}
/* 游戏结束页面 */
.container>.mask{width: 100%;height: 100%;background: rbga(0,0,0,0.5);padding-top:200px ;/* 盒模型- padding+border+content*/box-sizing: border-box;/* 水平居中 */text-align: center;/* 隐藏 */display: none;/* 位置 */position: absolute;top:0;left: 0;
}
.mask>h1{color: #ff4500;text-shadow: 3px 1px 0 #ff0000;font-size: 40px;
}
.mask>button{width: 150px;line-height: 35px;text-align: center;color: white;background: linear-gradient(#ff4500,#ff0000);border-radius: 20px;border: none;font-size: 20px;position: absolute;top: 320px;left: 50%;margin-left: -75px;
}

3）index.js

（1）动画效果

1.图片加载
2.进度条加载
3.游戏结束时停止执行动画效果

（2）随机位置

1.生成随机位置
2.在对应的位置显示相应图片

（3）游戏逻辑

1.实现如何可以点击图片的逻辑
2.实现如何判断拍到的是灰太狼还是小灰灰

//1.动画效果
//2.随机位置
//3.游戏逻辑
$(function () {// 1.监听游戏规则的点击$(".rules").click(function () {// 监听rule,淡入      $(".rule").stop().fadeIn(100);});// 2.监听关闭按钮的点击$(".close").click(function () {//监听rule,淡出$(".rule").stop().fadeOut(100);});// 3.监听开始游戏按钮的点击$(".start").click(function () {//start按钮淡出$(this).stop().fadeOut(100);// 调用处理进度条的方法progressHandler();// 调用处理灰太狼动画的方法startWolfAnimation();});// 4.监听重新开始按钮的点击$(".reStart").click(function () {//game over淡出$(".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();}}, 300);}var wolfTimer;// 定义一个专门处理灰太狼动画的方法function startWolfAnimation() {// 1.定义两个数组保存所有灰太狼和小灰灰的图片//灰太狼var wolf_1=['./img/h0.png','./img/h1.png','./img/h2.png','./img/h3.png','./img/h4.png','./img/h5.png','./img/h6.png','./img/h7.png','./img/h8.png','./img/h9.png'];//小灰灰var wolf_2=['./img/x0.png','./img/x1.png','./img/x2.png','./img/x3.png','./img/x4.png','./img/x5.png','./img/x6.png','./img/x7.png','./img/x8.png','./img/x9.png'];// 2.定义一个数组保存所有可能出现的位置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"}];// 3.创建一个图片var $wolfImage = $("<img src='' class='wolfImage'>");// 随机获取图片的位置// 随机0-8之间的数var posIndex = Math.round(Math.random() * 8);// 4.设置图片显示的位置$wolfImage.css({position: "absolute",//随机取到的数确定其出现的位置left:arrPos[posIndex].left,top:arrPos[posIndex].top});// 随机获取数组类型var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;// 5.设置图片的内容window.wolfIndex = 0;window.wolfIndexEnd = 5;wolfTimer = setInterval(function () {if(wolfIndex > wolfIndexEnd){$wolfImage.remove();// 关闭定时器clearInterval(wolfTimer);startWolfAnimation();}// 改变图片的类型 小灰灰or灰太狼// arrt()返回wolfImage的属性值$wolfImage.attr("src", wolfType[wolfIndex]);//让动画更为流畅wolfIndex++;}, 600); // 6.将图片添加到界面上$(".container").append($wolfImage);// 7.调用处理游戏规则的方法gameRules($wolfImage);}//定义一个游戏规则的方法function gameRules($wolfImage) {//one()运行一次$wolfImage.one("click",function () {// 修改索引window.wolfIndex = 5;window.wolfIndexEnd = 9;// 拿到当前点击图片的地址var $src = $(this).attr("src");// 根据图片地址判断是否是灰太狼var flag = $src.indexOf("h") >= 0;// 根据点击的图片类型增减分数if(flag){// +10$(".score").text(parseInt($(".score").text()) + 10);}else{// -10$(".score").text(parseInt($(".score").text()) - 10);}});}//停止游戏动画方法function stopWolfAnimation() {$(".wolfImage").remove();clearInterval(wolfTimer);}
});

素材

有需求可自取

[jQuery案例练习]——锅打灰太狼相关推荐

jQuery写经典游戏：锅打灰太狼
没看源代码,可能思路有些不一样,还做了如下优化: 1.增加了音效增加了狼儿钻回洞里的动画. 2.计分规则 3.设置了combo系统, 连续5个combo 时间+10S 4.打小灰灰会减分减时间 5 ...
手风琴jQuery案例
此案例为手风琴jQuery案例,即是列表缩放使用jQuery方法使用点击事件完成此案例,以下将开始此次学习; 建立案例所需要的元素 <ul class="menu"> ...
一步步教你做“锅打灰太狼”
今天给大家分享做一个小游戏"锅打灰太狼". 首先,我们先来完成一个开始游戏的界面上代码 //HTML代码 <div class="boss">&l ...
【jQuery案例】自动轮播图
[jQuery案例] 自动轮播图使用jQuery实现了图片自动轮播有左右按钮和底部小圆点选择功能源代码如下: <!DOCTYPE html> <html lang=" ...
【jQuery笔记】狂拍灰太狼案例笔记
狂拍灰太狼使用 jQuery 语法实现的新浪微博页面我要实现的功能: 点击开始游戏按钮,开始游戏游戏有时间进度条游戏结束以后可以点击重新开始按钮,重新开始游戏有游戏规则点击灰太狼加 10 ...
[jQuery基础] jQuery案例 -- 狂拍灰太狼
狂拍灰太狼(补充音效) 案例效果展示案例构架 1.背景图片 2.得分选项 3.时间进度条 4.游戏规则的点开以及关闭 5.开始游戏选项和重新开始选项案例思路布局html页面的基本样式设置得分 ...
jQuery案例（底部导航图片切换）
作为一个代码新手,最近我又学习了一些jQuery的相关知识,所以今天就做了一个小案例.如下: 通过点击图标切换并点亮图标,现在我们就开始做吧 ,首先说一下思路: 我是通过事件委托的方式做的,大致思路就 ...
jQuery初识 - jQuery案例练习
jQuery事件委托什么是事件委托请别人帮忙做事情,然后将做完的结果反馈给我们在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jQuery会遍历所有找到的元素,给 ...
[jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题
qq音乐案例案例效果展示案例效果结构划分整体布局歌曲条目部分顶部栏底部栏歌词显示部分案例实现功能 a. QQ音乐播放器静态页面布局 * 页面整体布局规划和实现 * 页面顶部布局和静态效 ...
[jQuery基础] jQuery案例 -- 新浪微博
新浪微博案例思路主要说说JavaScript的思路随时要监听内容的输入有内容输入添加,按钮可以点击没有内容输入禁止点击按钮监听点击发布按钮拿到用户输入的内容根据内容创建节点插入微 ...

[jQuery案例练习]——锅打灰太狼

[jQuery案例练习]——锅打灰太狼

准备

1.需掌握html css js

2.所用编译器Hbuilder

效果展示

开发思路

1）index.html

2）index.css

3）index.js

（1）动画效果

（2）随机位置

（3）游戏逻辑

素材

有需求可自取

[jQuery案例练习]——锅打灰太狼相关推荐

最新文章

热门文章