增加结束有趣提示，加上最大速度

crystalgh · May 13, 2014 · 03a45ed · 03a45ed
1 parent de74576
commit 03a45ed
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 6 deletions.
diff --git a/game.js b/game.js
@@ -115,6 +115,7 @@ var ClimbUp = function(){
 	this.branchs = [],
 	this.branchsSpeed = 5,
 	this.branchsVelocity = 0.005,
+	this.branchsSpeedMax = 25,
 	this.branchsNum = 1,
 
 	this.roleWidth = 40,
@@ -173,6 +174,7 @@ ClimbUp.prototype = {
 		this.branchs=[];
 		this.branchsInit.execute();
 		document.getElementById('gameover').style.display="none";
+		document.getElementById('score').innerText=this.score;
 		this.stopGame = false;
 	},
 	drawAll:function(){
@@ -196,7 +198,10 @@ ClimbUp.prototype = {
 			}
 		}
 		// 游戏加速
-		this.branchsSpeed += this.branchsVelocity;
+		if(this.branchsSpeed<this.branchsSpeedMax){
+			this.branchsSpeed += this.branchsVelocity;
+			// document.getElementById('speed').innerText=this.branchsSpeed;
+		}
 		//document.getElementById('speed').innerText=this.branchsSpeed.toFixed(2);
 
 	},
@@ -218,6 +223,8 @@ ClimbUp.prototype = {
 				// 游戏增分
 				this.score += this.scoreVelocity;
 				document.getElementById('score').innerText=this.score;
+				this.showFunnyInfo();
+
 				// climbUp.coinSound.play();
 				document.getElementById('coin-sound').play();
 				this.branchs=[];
@@ -232,6 +239,72 @@ ClimbUp.prototype = {
 		this.ctx.fillRect(this.roleX,this.roleY,this.roleWidth,this.roleHeight);
 		this.ctx.restore();
 	},
+	showFunnyInfo:function(){
+		var now = this.score;
+		var result = "平地";
+		if(now < 5){
+			result = "小别墅";
+		}
+		else if(now < 10){
+			result = "普通大厦";
+		}
+		else if(now < 20){
+			result = "高级大厦";
+		}
+		else if(now < 30){
+			result = "台北101";
+		}
+		else if(now < 40){
+			result = "吉隆波双子塔";
+		}
+		else if(now < 50){
+			result = "上海东方明珠";
+		}
+		else if(now < 60){
+			result = "安纳普尔纳峰";
+		}
+		else if(now < 70){
+			result = "南迦帕尔巴特峰";
+		}
+		else if(now < 80){
+			result = "马纳斯鲁峰";
+		}
+		else if(now < 90){
+			result = "道拉吉里峰";
+		}
+		else if(now < 100){
+			result = "卓奥友峰";
+		}
+		else if(now < 110){
+			result = "马卡鲁峰";
+		}
+		else if(now < 120){
+			result = "洛子峰";
+		}
+		else if(now < 130){
+			result = "干城章嘉峰";
+		}
+		else if(now < 140){
+			result = "乔戈里峰";
+		}
+		else if(now < 150){
+			result = "珠穆朗玛峰";
+		}
+		else if(now < 160){
+			result = "云层";
+		}
+		else if(now < 170){
+			result = "天堂";
+		}
+		else if(now < 180){
+			result = "地球表面";
+		}
+		else{
+			result = "外太空";
+		}
+
+		document.getElementById('funnyInfo').innerText=result;
+	},
 	// 碰撞检测
 	isCollide:function(){
 		var top = this.roleY;

diff --git a/index.html b/index.html
@@ -7,7 +7,10 @@
 </head>
 <body style="background-color: #000;">
 	<canvas id="game" width="500px" height="500px"></canvas>
-	<div id="gameover" style="display:none">game over<p id="showScore">恭喜你,你爬到了<span id="finalScore">0</span>楼！</p><a href="javascript:void(0)" id="restart">restart</a></div>
+	<div id="gameover" style="display:none">game over
+	<p id="showScore">恭喜你,你爬到了<span id="finalScore">0</span>楼！</p>
+	<p id="showInfo">你登上了<span id="funnyInfo">平地</span></p>
+	<a href="javascript:void(0)" id="restart">restart</a></div>
 	<!-- <div id="speed-wrap">当前速度: <span id="speed">0</span></div> -->
 	<div id="score-wrap">你在<span id="score">0</span>楼</div>
 	<script src="game.js"></script>

diff --git a/style.css b/style.css
@@ -16,15 +16,17 @@ body{margin:0;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-m
     transform: translateZ(0);}
 
 #gameover{position: absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);color: #fff;
-	width: 300px;height: 300px;background-color: rgba(177,32,58,0.8);line-height: 230px;text-align: center;font-size: 40px;
+	width: 300px;height: 300px;background-color: rgba(177,32,58,0.8);line-height: 190px;text-align: center;font-size: 40px;
 	transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
 #restart{position: absolute;text-decoration: none;color: #fff;display: block;font-size: 22px;top: 0;line-height: 30px;
-	top:80%;left:50%;-webkit-transform:translate(-50%,-50%);border: 1px solid #fff;padding: 4px 12px;border-radius: 8px;
+	top:78%;left:50%;-webkit-transform:translate(-50%,-50%);border: 1px solid #fff;padding: 4px 12px;border-radius: 8px;
 	transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;}
 #restart:hover{background-color: #ddd;color: #770000;}
-#showScore{position: absolute;top: 40px;text-align: center;width: 300px;font-size: 24px;margin: 0;}
+#showScore{position: absolute;top: 50px;text-align: center;width: 300px;font-size: 24px;margin: 0;}
 #finalScore{color: yellow;}
+#showInfo{position: absolute;top: 85px;text-align: center;width: 300px;font-size: 18px;margin: 0;}
+#funnyInfo{color: yellow;}
 
 #speed-wrap,#score-wrap{position: fixed;right: 0px;top: 0px;color: #fff;font-size: 16px;background-color: #770000;padding: 4px 8px;}
 #speed,#score{color: yellow;font-size: 16px;}
-#score-wrap{top: 0px;}
+#speed-wrap{top: 60px;}