Let us start eat

6f81ab12 · 张重言 · 6f81ab12
隐藏空白更改
内联并排

Showing with 214 addition and 0 deletion

game.html game.html +214 -0

未找到文件。
--- a/game.html
+++ b/game.html
+<!DOCTYPE html>
+<html>
+<head>
+	<title>贪吃蛇游戏</title>
+	<style type="text/css">
+	  .chicken-square{
+	  	background-color: black;
+			width: 5px;
+			height: 5px;
+			float: left;
+	  }
+		.square{
+			width: 5px;
+			height: 5px;
+			float: left;
+		}
+		#main{
+			height: 502px;
+			width: 502px;
+			border: 1px solid black;
+		}
+		.black-square{
+			background-color: black;
+			width: 5px;
+			height: 5px;
+			float: left;
+		}
+		.hide{
+			display: none;
+		}
+		.show{
+			display: block;
+		}
+		.red{
+			color: red;
+		}
+	</style>
+</head>
+<body>
+	<div id="main">
+		
+	</div>
+	<button id="start" onclick="load()">开始游戏</button>
+	<p>你的得分:<span id="score" class="red">0</span></p>
+	<script type="text/javascript">
+		function load(){
+			document.getElementById("start").className = "hide";
+			var player = {
+        name: "",
+        score: 0
+			};
+			var snake = {
+				body: [],
+				intervarID: 1,
+				status: true,
+				length: 1,
+				position: [30, 30],
+				direction: 1,
+				turnLeft: function(){
+					if(this.direction !== 3 && this.direction !== 1){
+						this.direction = 3
+					}else{
+						return false;
+					}
+				},
+				turnRight: function(){
+					if(this.direction !== 1 && this.direction !== 3){
+						this.direction = 1
+					}else{
+						return false;
+					}
+				},
+	      turnTop: function(){
+	      	if(this.direction !== 4 && this.direction !== 2){
+						this.direction = 4
+	      	}else{
+	      		return false;
+	      	}
+	      },
+	      turnDown: function(){
+	      	if(this.direction !== 2 && this.direction !== 4){
+						this.direction = 2
+	      	}else{
+	      		return false;
+	      	}
+	      },
+	      move: function(){
+	      	if (this.position[0] < 100 && this.position[0] > 1 && this.position[1] < 100 && this.position[1] > 1){
+		        switch(this.direction){
+		        	case 1:
+		        	  this.position[0] += 1
+		        	  this.change();
+		        	  break;
+		        	case 2:
+		        	  this.position[1] += 1
+		        	  this.change();
+		        	  break;
+		        	case 3:
+		            this.position[0] -= 1
+		            this.change();
+		            break;
+		          case 4:
+		            this.position[1] -= 1
+		            this.change();
+		            break;
+		        }
+	        }else{
+	        	window.clearInterval(this.intervarID);
+	        	alert("game over and your score is : " + player.score)
+	        	document.getElementById("start").className = "show";
+	        	return false;
+	        }
+	      },
+	      change: function(){
+          var x = this.position[0]
+      	  var y = this.position[1]
+      	  this.body.unshift([x,y])
+      	  this.body.pop()
+      	  this.draw();
+	      },
+	      draw: function(){      
+	        if(this.body[0][0] == chicken.position[0] && this.body[0][1] == chicken.position[1]){
+            switch(this.direction){
+            	case 1:
+            	  var x = this.position[0] - 1;
+                var y = this.position[1];
+                this.body.push([x,y]);
+                break;
+            	case 2:
+            	  var x = this.position[0];
+                var y = this.position[1] - 1;
+                this.body.push([x,y]);
+                break;
+            	case 3:
+            	  var x = this.position[0] + 1;
+                var y = this.position[1];
+                this.body.push([x,y]);
+                break;
+            	case 4:
+                var x = this.position[0];
+                var y = this.position[1] + 1;
+                this.body.push([x,y]);
+                break;
+            }
+            player.score += 1;
+            document.getElementById("score").innerHTML = player.score
+            chicken.init();
+	        }
+	        var squares = document.getElementsByClassName("black-square");
+	        for(var i = 0; i < squares.length; i ++){
+	        	squares[i].className = "square"
+	        }
+	        for(var i = 0; i < this.body.length; i++){
+		        var pos = (this.body[i][1]) * 100 + this.body[i][0];
+		      	document.querySelectorAll("#main>div")[pos-1].className = 'black-square';
+	      	}
+	      },
+	      cricle: function(x){
+          y = 50 + Math.sqrt(49*49 - Math.pow((50-x),2));
+          return parseInt(y);
+	      },
+	      init: function(){
+	      	this.body.push(this.position)
+	      	this.intervalID = window.setInterval(function(){snake.move()},80);
+	      	chicken.init();
+	      }
+			};
+			var map = {
+				height: 5,
+				width: 5,
+				init: function(){
+					document.getElementById("main").innerHTML = "";
+					for (var i = 1; i < 10001; i++){
+						var node = "<div class='square' id='" + i + "'></div>";
+					  document.getElementById("main").insertAdjacentHTML('beforeend', node);
+					}
+				}
+			};
+			var chicken = {
+				position: [1,1],
+        init: function(){
+        	var current_chicken = document.getElementsByClassName("chicken-square")[0]
+        	if(current_chicken){current_chicken.className = 'square'}
+        	this.position[0] = Math.floor(Math.random()*100);
+        	this.position[1] = Math.floor(Math.random()*100);
+        	var pos = (this.position[1]) * 100 + this.position[0];
+	      	document.querySelectorAll("#main>div")[pos-1].className = 'chicken-square';
+        }
+			};
+			map.init();
+      snake.init();
+      window.onkeydown = function() {
+      	console.log(event.keyCode)
+      	switch(event.keyCode){
+      		case 37:
+      		  snake.turnLeft();
+      		  break;
+      		case 38:
+      		  snake.turnTop();
+      		  break;
+      		case 39:
+      		  snake.turnRight();
+      		  break;
+      		case 40:
+      		  snake.turnDown();
+      		  break;
+      	}
+      }
+		}
+	</script>
+
+</body>
+</html>
\ No newline at end of file