jQuery小游戏之锅打灰太郎

最新推荐文章于 2022-01-10 16:31:49 发布

轨道骑士

最新推荐文章于 2022-01-10 16:31:49 发布

阅读量334

点赞数 2

文章标签：经验分享恰饭程序人生

本文链接：https://blog.csdn.net/qq_43696174/article/details/105678253

版权

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锅拍灰太狼</title>
<link rel="stylesheet" type="text/css" href="css1.css"/>
<script src="../jquery.js"></script>
<script src="Untitled-1.js"></script>
</head>
<body>
<div class="container">
    <h1 class="score">0</h1>
    <div class="progress"></div>
    <button class="start">开始游戏</button>
    <div class="rules"><a href="#">游戏规则</a></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>

css代码：

@charset "utf-8";
/* CSS Document */
*{
    padding: 0;
    margin: 0;
}
.container{
    width: 320px;
    height: 480px;
    background: url("images/game_bg.jpg") no-repeat 0 0;
    margin: 50px auto;
    position: relative;
}
.container>h1{
    color: white;
    margin-left: 60px;
}
.container>.progress{
    width: 180px;
    height: 16px;
    background: url("images/progress.png") no-repeat 0 0;
    position: absolute;
    left: 63px;
    top: 66px;
}
.container>.start{
    width: 150px;
    /*高度加不加其实都行，因为有行高了嘛，把高度就给撑起来了*/
    height: 35px;
    line-height: 35px;
    /*这句就算不加文字也是居中的,因为是在按钮里*/
    text-align: center;
    background: linear-gradient(#E55C3D,#C50000);
    border: none;
    color: white;
    font-size: 20px;
    border-radius: 20px;
    position: absolute;
    top: 320px;
    /*绝对定位的元素left设为50%时，是已左上角为原点的，所以只要再使用margin属性添加负值补偿回来即可。便可左右居中*/
    left: 50%;
    margin-left: -75px;
}
.container>.rules{
    width: 100%;
    height: 20px;
    background: #ccc;
    position: absolute;
    bottom: 0;
    left: 0;
    /*这个就必须得加上了，div可不像按钮有有自动居中的效果*/
    text-align: center;
}
.container>.rule{
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
    /*由于container这个div里刚开始有个计分的h1，它是块元素，所以会站位，所以要绝对定位调这个蒙版的位置*/
    position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;
    display: none;
}
.rule>p{
    line-height: 50px;
    color: white;
}
.rule>a{
    color: red;
}
.container>.mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    padding-top: 200px;
    box-sizing: border-box;
    text-align: center;
    display: none;
}
.mask>h1{
    color: #f84f03;
    /*字体阴影，前两个参数是x，y轴偏移距离，第三个是模糊程度，0代表无模糊，第四个代表字体阴影的颜色*/
    text-shadow: 3px 3px 0 white;
}
.mask>.reStart{
    width: 150px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 20px;
    border-radius: 20px;
    border: none;
    position: absolute;
    top: 320px;
    left: 50%;
    margin-left: -75px;
    color: white;
    background: linear-gradient(#74ACCF,#007DDC);
	}

js代码：

// JavaScript Document
$(function () { 
  var wolftimer=null;
  //1、游戏规则的显示和隐藏
  $(".rules").click(function() {
    $(".rule").show();
	 });
   $(".close").click(function() {
    $(".rule").hide();
  });
   //2.1开始游戏单击事件
   $(".start").click(function () {
    $(this).hide();
	//2.2进度条动画
	 progressHandler();
	 //2.3灰太狼动画
	 WolfAnimation();
	});
   //3.重新开始
   $('.reStart').click(function(){
			$('.mask').hide();
			progressHandler();
			WolfAnimation();
			$('.score').text('0');
								});
});
 //进度条方法
function progressHandler() {
	
       var timer=setInterval(function () {
      var w=$('.progress').width()-3;
      $('.progress').css('width',w);
	  if(w<=0)
	  {
		  clearInterval(timer);
		  stopWolfAnimation()
		  $('.mask').show();
	  }
		},1000);
	     //恢复进度条（走完之后）
	   $('.progress').css('width',180);
 };
 //灰太狼动画
 function WolfAnimation(){
	 //1、定义两个数组，保存所有灰太狼和小灰灰的图片
      var wolf_0=['./images/h0.png','./images/h1.png','./images/h2.png', './images/h3.png','./images/h4.png',
        './images/h5.png','./images/h5.png','./images/h7.png','./images/h8.png','./images/h9.png',]
      var wolf_1=['./images/x0.png','./images/x1.png','./images/x2.png', './images/x3.png','./images/x4.png',
        './images/x5.png','./images/x5.png','./images/x7.png','./images/x8.png','./images/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'>");
	  //4、设置图片显示的位置，随机图片位置设置
	   var posIndex = Math.floor(Math.random()*9);
	    $wolfImage.css({
        position:"absolute",
        left:arrPos[posIndex].left,
        top:arrPos[posIndex].top
      });
	//5.图片地址设置
	//随机出现小灰灰和灰太狼
	 var wolftype=Math.random()<0.5?wolf_0:wolf_1;
	  var wolfIndex=0;
      var wolfIndexEnd=5;
	  wolftimer=setInterval(function () {
	$wolfImage.attr("src",wolftype[wolfIndex]);
	  wolfIndex++;	 					  
        if(wolfIndex>wolfIndexEnd){        
          clearInterval(wolftimer);
		   $('.wolfImage').remove();
         WolfAnimation();
        }
      },300);
	 //6.插入图片
	  $(".container").append($wolfImage); 
	  //7.处理游戏规则,只执行一次
	  $('.wolfImage').one('click',function(){
				var flag=$('.wolfImage').attr('src').indexOf('h');
				if(flag>0)
				{
					$('.score').text(parseInt($('.score').text())+10);
				}
				else{
					$('.score').text(parseInt($('.score').text())-10);
					}
				//拍打动画
				  wolfIndex=6;
       wolfIndexEnd=9;
				});
	 }
//停止动画
function stopWolfAnimation() {
      $(".wolfImage").remove();
      clearInterval(wolftimer);
  }

轨道骑士

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery小游戏之锅打灰太郎

HTML代码：<!doctype html><html><head><meta charset="utf-8"><title>锅拍灰太狼</title><link rel="stylesheet" type="text/css" href="css1.css"/><script src="....
复制链接

扫一扫