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

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

准备

1.需掌握html css js
2.所用编译器Hbuilder

效果展示

[jQuery案例练习]——锅打灰太狼_第1张图片
[jQuery案例练习]——锅打灰太狼_第2张图片

开发思路

1)index.html



    
    狂拍灰太狼
    
    
    


0

游戏规则

游戏规则:

1.游戏时间:60s

2.拼手速,殴打灰太狼+10分

3.殴打小灰灰-10分

[关闭]

GAME OVER

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 = $("");
        // 随机获取图片的位置
		// 随机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,javascript,css3)