jQuery编写锅打灰太狼小游戏

思路分析

  1. 要有开始和结束的方法
  2. 计算比分
  3. 时间的进度条
  4. 小灰灰和灰太狼显示
    1. 随机位置显示
    2. 打小灰灰减掉10分
    3. 打到灰太狼加上10分

计时器

首先规定这个进度条的长度然后开启定时器 在这宽度上进行递减

这是两层最下面的一层为 灰色

上面一层为带颜色的可以看出来正在走

时间走完后删除狼等图片

将重新开始的进行显示出来

function progressH(){
// 规定进度条宽度
$(".progress").css({
width:180
})
//开启定时器
var time = setInterval(function(){
//拿到进度条的宽度
var progH = $(".progress").width();
// 进度条递减
progH -= 1;
// 赋值回去
$(".progress").css({
width:progH
})
// 监听进度条没了 开启重新开始界面
if(progH <= 0){
// 已经走完了进度条
//关闭定时器
clearInterval(time);
// 删除狼的图片
stopl();
// 开启冲重新开始界面
$(".mask").stop().fadeIn(100);
// 结束后显示得到的分数
$(".mask>h3>span").text($(".score").text());
}
},100)
}

随机显示狼

用一个随机显示

是选择灰太狼还是小灰灰

选中后在随机选择个位置进行 慢慢进行添加到页面上

// 随机图片灰太狼的方法
function foridanim(){
// 灰太狼
var lang_1 = ['./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 lang_2 = ['./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 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 mart = Math.round(Math.random()*8);
// 创建一个图片
$wolfow = $("<img src='' class= 'limg'>");
console.log(arrPos[mart].left,arrPos[mart].top)
// 显示位置
$wolfow.css({
position:"absolute",
left:arrPos[mart].left,
top:arrPos[mart].top
})
// 获取随机狼
var lmart = Math.round(Math.random()) == 0?lang_1:lang_2;

// 设置动画
window.lindex = 0;
window.lindexend = 5;
// 设置定时器 更好图片
ltime = setInterval(function(){
// 第五张以后不要了
if(lindex > lindexend){
// 删除图片
$wolfow.remove();
// 关闭定时器
clearInterval(ltime);
foridanim();
lindex = 0
}
// 设置图片内容
$wolfow.attr("src",lmart[lindex]);
lindex ++;
},150);
// 添加到界面上
$(".centent").append($wolfow);
// 点击图片的游戏规则
gameRule($wolfow);

};

游戏规则

主要是进行分数的计算等操作

// 处理游戏规则
function gameRule($wolfow){
$($wolfow).one("click",function(){
// 修改索引
window.lindex = 5;
window.lindexend = 9;
// 拿到当前图片的地址
var $src = $(this).attr("src");
// 根据图片地址查看是灰太狼还是小
var flas = $src.indexOf("h") >= 0;
// 根据点击的图片来增减分数
if(flas){
// 点击的是灰太狼就给加10分
var scmun = parseInt($(".score").text()) + 10;
$(".score").text(scmun)
}else{
// 点击的是小灰灰就给-10分
var scmun = parseInt($(".score").text()) - 10;
$(".score").text(scmun)
}
})
};

资源下载

上一篇

node.js基础学习声明方式,对象函数等相关操作