Bladeren bron

Merge branch 'development' of github.com:snaky-particles/snaky-particles into development

Kevin Heinicke 10 jaren geleden
bovenliggende
commit
c826cf447d
3 gewijzigde bestanden met toevoegingen van 133 en 10 verwijderingen
  1. 60 0
      css/start.css
  2. 38 10
      js/controller.js
  3. 35 0
      start.html

+ 60 - 0
css/start.css

@@ -0,0 +1,60 @@
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden
+}
+
+
+a:link, a:visited {
+    display: block;
+    width: 120px;
+    font-weight: bold;
+    color: #FFFFFF;
+    background-color: #F44336;
+    text-align: center;
+    padding: 4px;
+    text-decoration: none;
+    text-transform: uppercase
+}
+
+a:hover, a:active {
+    background-color: #F88000
+}
+
+.head-container {
+	text-align: center;
+	font-size:48px;
+	color: #FFFFFF;
+    background-color: #F44336;
+	padding:1px 16px;
+	width: 100%
+}
+
+.container {
+	text-align: center;
+	color: #FFFFFF;
+    background-color: #F44336;
+	padding:1px 16px;
+	margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+	font-size:25px
+}
+
+.foot-container {
+	color: #FFFFFF;
+    background-color: #F44336;
+	padding:5px 25px;
+	width: 100%
+}
+
+.foot-left {
+	text-align: left;
+	font-size:18px;
+}
+.foot-right {
+	text-align: right;
+	font-size:18px;
+}

+ 38 - 10
js/controller.js

@@ -5,6 +5,7 @@ var Controller = function(){
 	this.collectibles = [];
 	this.views = [];
 	this.snake = new Snake(this.initial_length);
+	this.canTurn = true;
 	var pos0 = {x: -1, y: -1};
 	
 	var higgs = new Particle(pos0);
@@ -72,23 +73,49 @@ Controller.prototype.bind_events = function(){
     var c = this;
 	window.onkeydown = function(e){
 		var direction = null;
+		var dir = {x: c.snake.physicists[0].direction.x, y: c.snake.physicists[0].direction.y};
+
 		switch (e.keyCode){
 			case 37:
-				direction = {x: -1, y: 0};
-				break;
+			case 65:
+				if(dir.x == 1)
+					{
+						break;}
+				else {
+						direction = {x: -1, y: 0};
+						break;
+					}
 			case 38:
-				direction = {x: 0, y: -1};
-				break;
+			case 87:
+				if(dir.y == 1)
+					{
+						break;}
+				else {
+						direction = {x: 0, y: -1};
+						break;
+					}
 			case 39:
-				direction = {x: 1, y: 0};
-				break;
+			case 68:
+				if(dir.x == -1)
+					{
+						break;}
+				else {
+						direction = {x: 1, y: 0};
+						break;
+				}
 			case 40:
-				direction = {x: 0, y: 1};
-				break;
-
+			case 83:
+				if(dir.y == -1)
+					{
+						break;}
+				else {
+						direction = {x: 0, y: 1};
+						break;
+					}
 		}
-		if (direction){
+		if (direction && c.canTurn){
 			c.turn_snake(direction);
+			c.canTurn = false;
 		}
 	}
 }
@@ -105,6 +132,7 @@ Controller.prototype.tick = function(event){
         var next_cell = this.get_next_cell_position();
 		var next_cell_content = this.is_position_occupied(next_cell);
 		this.snake.move(next_cell);
+		this.canTurn = true;
 		if (next_cell_content && next_cell_content.collectible) this.snake.physicists[0].collect(next_cell_content.collectible);
         if(this.collectibles.length < 2){
 		    this.spawn_collectibles();

+ 35 - 0
start.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>SNAKY PARTCILE</title>
+</head>
+
+<link rel="stylesheet" href="./css/start.css">
+
+<body>
+
+<header class="head-container"> SNAKY PARTICLE </header>
+
+<article class="container">
+  <ul>
+    <li><a href="index.html">Start Game</a></li>
+    <li><a href="settings.html">Settings</a></li>
+    <li><a href="scorelist.html">Scorelist</a></li>
+    <li><a href="about.html">About</a></li>
+    <li><a href="end.html">Quit</a></li>
+  </ul>
+</article>
+
+
+<footer class="foot-container">
+  <div class="left">
+    <h6>Snaky Particle: An educational particle physics game.</h6>
+  </div>
+  <div align="right">
+    <h6>@CERN-Webfest 2015</h6>
+  </div>
+</footer>
+
+</body>
+
+</html>