add files

leeenx · Sep 21, 2017 · 6c77922 · 6c77922
1 parent 562cb1c
commit 6c77922
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/css/snake.css b/src/css/snake.css
@@ -5,7 +5,7 @@ html,body {
 	height: 100%;
 	margin: 0;
 	padding: 0; 
-	background-color: #ccc;
+	background-color: #aaa;
 }
 
 .snake-game {
@@ -23,3 +23,127 @@ html,body {
 	height: auto; 
 }
 
+.snake-controller {
+	position: absolute; 
+	top: 60%;
+	left: 0; 
+	width: 100%;
+}
+
+.snake-switch {
+	position: absolute; 
+	width: 50px; 
+	height: 53px; 
+	background: url(../images/switch@2x.png) 0 0 no-repeat; 
+	background-size: 100% 100%; 
+	top: 150px;
+	right: 30px; 
+	border: 0 none; 
+	appearance: none; 
+	-webkit-appearance: none; 
+	outline: 0; 
+}
+
+.snake-trigger {
+	position: absolute; 
+	width: 50px; 
+	height: 50px; 
+	background: url(../images/pause@2x.png) 0 0 no-repeat; 
+	background-size: 100% 100%; 
+	top: 150px;
+	left: 30px; 
+	border: 0 none; 
+	appearance: none; 
+	-webkit-appearance: none; 
+	outline: 0; 
+}
+.snake-trigger:checked {
+	background-image: url(../images/play@2x.png);
+}
+
+.snake-direction {
+	position: absolute; 
+	left: 50%; 
+	top: 0;
+	width: 160px; 
+	height: 160px; 
+	margin-left: -80px; 
+	border: 2px solid #414042; 
+	background-color: #414042; 
+	border-radius: 100%; 
+	overflow: hidden; 
+	transform: rotateZ(45deg);
+	-webkit-transform: rotateZ(45deg); 
+}
+
+.snake-up, .snake-right, .snake-down, .snake-left {
+	position: absolute; 
+	width: 80px; 
+	height: 80px; 
+	background-color: #ddd; 
+}
+
+.snake-up::after, 
+.snake-right::after, 
+.snake-down::after, 
+.snake-left::after {
+	content: ''; 
+	position: absolute; 
+	left: 40px; 
+	top: 40px; 
+	width: 10px; 
+	height: 10px; 
+	border-width: 2px 0 0 2px; 
+	border-color: #414042; 
+	border-style: solid; 
+	transform-origin: left top; 
+	-webkit-transform-origin: left top; 
+}
+
+.snake-up {
+	top: -1px; 
+	left: -1px; 
+}
+
+.snake-right {
+	top: -1px; 
+	right: -1px; 
+}
+.snake-right::after {
+	transform: rotate(90deg); 
+	-webkit-transform: rotate(90deg); 
+}
+
+.snake-down {
+	bottom: -1px; 
+	right: -1px; 
+}
+
+.snake-down::after {
+	transform: rotate(180deg); 
+	-webkit-transform: rotate(180deg); 
+}
+
+.snake-left {
+	bottom: -1px; 
+	left: -1px; 
+}
+
+.snake-left::after {
+	transform: rotate(270deg); 
+	-webkit-transform: rotate(270deg); 
+}
+
+.snake-direction.up .snake-up, 
+.snake-direction.right .snake-right, 
+.snake-direction.down .snake-down, 
+.snake-direction.left .snake-left 
+{
+	background-color: rgba(188, 188, 188, .7); 
+}
+
+
+
+
+
+
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/script/.DS_Store b/src/script/.DS_Store
diff --git a/src/script/lib/.DS_Store b/src/script/lib/.DS_Store
diff --git a/src/snake.html b/src/snake.html
@@ -9,6 +9,16 @@
 
 <body>
 	<div class="snake-game"></div>
+	<div class="snake-controller">
+		<div class="snake-direction">
+			<div class="snake-up"></div>
+			<div class="snake-right"></div>
+			<div class="snake-down"></div>
+			<div class="snake-left"></div>
+		</div>
+		<input type="checkbox" class="snake-trigger" checked="checked"> 
+		<input type="button" class="snake-switch">
+	</div>
 </body>
 <script src="script/lib/pixi.js"></script>
 <script src="script/snake.js"></script>
@@ -65,8 +75,6 @@
 // 吃到东西
 snakeGame.event.on("eat", (food) => {
 	console.log("吃到食物，当前长度: " + snakeGame.length); 
-	// 提速
-	snakeGame.speed = 1.5 + snakeGame.length / 10
 }); 
 
 // 吃到东西前
@@ -76,15 +84,74 @@
 
 /* E 游戏的事件 */
 
+// 禁止页面滚动提高体验
+// document.body.addEventListener("touchmove", (e) => e.preventDefault() ); 
+
 /* S 控制游戏 */
-window.addEventListener("keydown", (e) => { 
-	switch(e.keyCode) {
-		case 37: snakeGame.turn("left"); break; 
-		case 38: snakeGame.turn("up"); break; 
-		case 39: snakeGame.turn("right"); break; 
-		case 40: snakeGame.turn("down"); break; 
+{
+	let controller = document.querySelector(".snake-direction"), 
+	curDirection, 
+	{top, left, width, height} = controller.getBoundingClientRect(), 
+	x = left + width / 2, 
+	y = top + height / 2, 
+	deg45 = Math.PI / 4, 
+	deg90 = Math.PI / 2, 
+	deg135 = Math.PI / 2 + deg45, 
+	deg180 = Math.PI, 
+	deg225 = Math.PI + deg45, 
+	deg270 = Math.PI + deg90, 
+	deg315 = Math.PI * 2 - deg45; 
+
+	controller.addEventListener("touchstart", ({targetTouches: [{pageX, pageY}]}) => {
+		checkDirection(pageX - x, pageY - y); 
+	});
+
+	controller.addEventListener("touchmove", ({targetTouches: [{pageX, pageY}]}) => {
+		checkDirection(pageX - x, pageY - y); 
+	}); 
+
+	controller.addEventListener("touchend", ({changedTouches: [{pageX, pageY}]}) => {
+		curDirection = undefined; 
+		controller.className = 'snake-direction'; 
+	}); 
+
+	let checkDirection = function(x, y) {
+		let radian = Math.asin( y / Math.sqrt( Math.pow(x, 2) + Math.pow(y, 2)) ); 
+		// 1~2区间
+		if(x > 0 && y < 0 || x > 0 && y > 0) {
+			radian += deg90; 
+		}
+		// 3~4区间
+		else if(x < 0 && y > 0 || x < 0 && y < 0) {
+			radian = deg270 - radian; 
+		}
+
+		let direction = "up"; 
+		if(radian > deg45 && radian < deg135) {
+			direction = "right";
+		}
+		else if(radian > deg135 && radian < deg225) {
+			direction = "down";
+		}
+		else if(radian > deg225 && radian < deg315) {
+			direction = "left";
+		} 
+		console.log(direction); 
+		direction === curDirection || snakeGame.turn(curDirection = direction, controller.className = "snake-direction " + direction); 
 	}
-}); 
+
+	let keyboradUpdate = ({keyCode}) => { 
+		switch(keyCode) {
+			case 37: snakeGame.turn("left"), controller.className = "snake-direction left"; break; 
+			case 38: snakeGame.turn("up"), controller.className = "snake-direction up"; break; 
+			case 39: snakeGame.turn("right"), controller.className = "snake-direction right"; break; 
+			case 40: snakeGame.turn("down"), controller.className = "snake-direction down"; break; 
+		}
+	}
+	window.addEventListener("keydown", keyboradUpdate); 
+	window.addEventListener("keyup", () => controller.className = "snake-direction");
+}
+
 /* E 控制游戏 */
 
 </script>