Question

我对使用HTML进行编码非常陌生，我正在尝试为我的高中英语课重新创建一个简单版本的Whack a Mole。游戏似乎运行良好，直到它到达＃34;游戏结束＆＃34;部分，问题开始发生，我不太确定发生了什么并导致错误。另外2个物体（衣领和尾巴）不会缩放到其他物体上。谢谢你的阅读。

＆＃13;

<html>
	<head>
			<link rel="icon" type="image/png" href="puppic.ico">
			<title>Pet a Pup!</title>
		<style>

			body{ background-image:url(mountain.png); width:100%; height:100%; overflow:hidden; }
			 	
			
			.dog{
				background-color:rgb(185, 122, 87);
				border-radius:80px 80px 75px 75px;
				height:46.5%;
				width:10%;
				position:absolute;
				top: 100%;
				background-image:url(dog2.png);
				background-size:100%;
				background-repeat:no-repeat;
				background-position:0% 5%;
			}
		
			.left_ear{
				background-color:rgb(142, 88, 60);
				border-radius:80px 80px 65px 65px;
				position:absolute;
				float:left;
				min-width: 32%;
				padding-top: 50%;
				right:-13%;
			}
		
			.right_ear{
				background-color:rgb(142, 88, 60);
				border-radius:80px 80px 65px 65px;
				position:absolute;
				float:right;
				min-width: 32%;
				padding-top: 50%;
				left:-13%;
			}

			.bottom_left_paw{
				background-color:rgb(182, 114, 78);
				border-radius:80px 80px 100px 100px;
				position:absolute;
				float:right;
				min-width: 25%;
				padding-top: 60%;
				left:0%;
				bottom:-10%;
			}

			.bottom_right_paw{
				background-color:rgb(182, 114, 78);
				border-radius:80px 80px 100px 100px;
				position:absolute;
				float:left;
				min-width: 25%;
				padding-top: 60%;
				right:0%;
				bottom:-10%;
			}
			.top_left_paw{
				background-color:rgb(182, 114, 78);
				border-radius:100px 100px 80px 80px;
				position:absolute;
				float:right;
				min-width: 25%;
				padding-top: 60%;
				left:-20%;
				transform: rotate(-40deg);
				bottom:35%;
			}

			.top_right_paw{
				background-color:rgb(182, 114, 78);
				border-radius:100px 100px 80px 80px;
				position:absolute;
				float:left;
				min-width: 25%;
				padding-top: 60%;
				right:-20%;
				transform: rotate(40deg);
				bottom:35%;
			}

			.stomach{
				background-color:rgb(230, 207, 166);
				border-radius:100px 100px 100px 100px;
				position:absolute;
				float:left;
				min-width: 50%;
				height: 12%;
				padding-top: 50%;
				left: 25.5%;
				bottom:11%;
				border-radius: 70%;
			}

			.collar{
				border-radius:100px 100px 100px 100px;
				position:absolute;
				padding-top: 0%;
				float:left;
				min-width: 110px;
  				height: 110px;
  				box-shadow: 10px 10px 0 0 rgb(207, 16, 26);
 				border-radius: 30px 30px 140px 30px;
				left: 10%;
				transform: rotate(45deg);
				bottom:49%;
			}

			.tail{
				position:absolute;
   				width: 0;
  				height: 0;
   				border-top: 60px solid #875438;
   				border-left: 10px solid transparent;
   				border-right: 150px solid transparent;
				left: 47%;
				bottom:6%;
				z-index:-1;
			}

		#dog1 { left: 10%; }
		#dog2 { left: 45%; }
		#dog3 { left: 80%; }
   
    			.try_again {
       				cursor: pointer;
   			}

			.score{font-family:impact; font-size:3.5vw; position:absolute; right:5%; z-index:3;}
			
		</style>
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		
		<script>

			jQuery(document).ready(function(){
				
				var add = 0;
     				var gameStarted = false;

				function game_over(){
					gameStarted = false;
					jQuery('.dog').animate({'top':'100%'},500);
					jQuery('.score').html('GAME OVER');
					jQuery('.score').append('<div class="try_again">TRY AGAIN</div>');
				}
				function start(){
        				gameStarted = true;
					add = 0;
					jQuery('.score').html('Score: ' + add);
					jQuery('.dog').animate({'top':'0%'},3500,function(){
						game_over();
						jQuery('.try_again').click(function(){start();});
					}); 
				}			

				jQuery('.dog').click(function(){
					if (!gameStarted) return;
					jQuery(this).css('background-image','url(dog1.png)');
					jQuery(this).stop().animate({'top':'100%'},1700, function(){	
						add = add - (-1);					
						jQuery('.score').html('Score: ' + add);
						jQuery(this).css('background-image','url(dog2.png)');
            					jQuery(this).animate({'top':'0%'},2500,function(){
                     				game_over();
                     				jQuery('.try_again').click(function(){start();});
              					  }); 
					});
				});
				start();
			});

		</script>

	</head>

	<body>

		<div class="score">Score: 0</div>

		<div class="dog" id="dog1">
			<div class="left_ear"></div>
			<div class="right_ear"></div>
			<div class="top_left_paw"></div>
			<div class="top_right_paw"></div>
			<div class="bottom_left_paw"></div>
			<div class="bottom_right_paw"></div>
			<div class="stomach"></div>
			<div class="collar"></div>
			<div class="tail"></div>
		</div>
		<div class="dog" id="dog2">
			<div class="left_ear"></div>
			<div class="right_ear"></div>
			<div class="top_left_paw"></div>
			<div class="top_right_paw"></div>
			<div class="bottom_left_paw"></div>
			<div class="bottom_right_paw"></div>
			<div class="stomach"></div>
			<div class="collar"></div>
			<div class="tail"></div>
		</div>
		<div class="dog" id="dog3">
			<div class="left_ear"></div>
			<div class="right_ear"></div>
			<div class="top_left_paw"></div>
			<div class="top_right_paw"></div>
			<div class="bottom_left_paw"></div>
			<div class="bottom_right_paw"></div>
			<div class="stomach"></div>
			<div class="collar"></div>
			<div class="tail"></div>
		</div>
		

	</body>

		<audio controls autoplay loop volume="0.1">
			<source src="Doggo1.mp3">
		
  		</audio>
</html>

＆＃13;

Game Over系统无法正常运行

0 个答案: