[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);
}
});
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
