From a26d659402073103b590bb0ea28c1634d75712b8 Mon Sep 17 00:00:00 2001 From: Leo Ahnn Date: Fri, 9 Sep 2016 18:31:45 -0400 Subject: [PATCH 1/8] working on snake --- script.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ snake.html | 22 ++++++++++++++++++ styles.css | 0 3 files changed, 89 insertions(+) create mode 100644 script.js create mode 100644 snake.html create mode 100644 styles.css diff --git a/script.js b/script.js new file mode 100644 index 0000000..0e4085e --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +// js scripts + +// snake constructor +function Snake() { + this.length = 1; + this.head = new Section(); +} + +function Section(nextSection) { + next: nextSection; +} + +// + + +view = { + init: function() { + // + } +} + +gridModel = { + + grid: [], + init: function(size) { + for (var i = 0; i < size; i++) { + this.grid.push([]); + for (var j = 0; j < size; j++) { + this.grid[i].push(null); + } + } + }, + placeFood: function() { + do { + var x = Math.random(this.grid.length) + var y =Math.random(this.grid.length) + } + while { + // x or y is occupied by snake. + } + }, + moveSnake: function() { + + } + +} + +controller = { + + init: function() { + interval = setInterval(gridModel.moveSnake(), 200); + view.init(); + }, + + gameOver: function() { + clearInterval(interval); + } + +} + + + + +$(document).ready(function() { + + +}) diff --git a/snake.html b/snake.html new file mode 100644 index 0000000..42fde58 --- /dev/null +++ b/snake.html @@ -0,0 +1,22 @@ + + + + + + Snake! + + + + + + + + +
+ +
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e69de29 From 4c86852ae2e99d9437703f4f1005b69da6b0ef31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CMatthew?= Date: Fri, 9 Sep 2016 15:59:37 -0700 Subject: [PATCH 2/8] finish basic model --- script.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 72 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 0e4085e..11cc512 100644 --- a/script.js +++ b/script.js @@ -4,6 +4,8 @@ function Snake() { this.length = 1; this.head = new Section(); + this.headX = 3; + this.headY = 3; } function Section(nextSection) { @@ -22,6 +24,7 @@ view = { gridModel = { grid: [], + init: function(size) { for (var i = 0; i < size; i++) { this.grid.push([]); @@ -29,31 +32,95 @@ gridModel = { this.grid[i].push(null); } } + gridModel.placeSnake(); }, + placeFood: function() { do { - var x = Math.random(this.grid.length) - var y =Math.random(this.grid.length) - } - while { + var x = Math.random(this.grid.length); + var y =Math.random(this.grid.length); + } while { // x or y is occupied by snake. } }, - moveSnake: function() { + placeSnake: function() { + var x = this.snake.headX; + var y = this.snake.headY; + this.grid[x][y] = this.snake.head; + }, + + initSnake: function() { + this.snake = new Snake(); + return this.snake; + }, + + moveSnake: function() { + var x = this.snake.headX; + var y = this.snake.headY; + switch(controller.currentDirection) { + case "left": + x -= 1; + break; + + case "right": + x += 1; + break; + + case "up": + y += 1; + break; + + case "down": + y -= 1; + break; + + default: return; + }; + this.snake.headX = x; + this.snake.headY = y; + placeSnake(); } } controller = { + currentDirection: "none", + init: function() { + this.setEventListeners(); interval = setInterval(gridModel.moveSnake(), 200); view.init(); }, gameOver: function() { clearInterval(interval); + }, + + setEventListeners: function() { + $(document).keydown(function(e) { + switch(e.which) { + case 37: // left + this.currentDirection = "left"; + break; + + case 38: // up + this.currentDirection = "up"; + break; + + case 39: // right + this.currentDirection = "right"; + break; + + case 40: // down + this.currentDirection = "down"; + break; + + default: return; // exit this handler for other keys + } + e.preventDefault(); // prevent the default action (scroll / move caret) + }); } } From 2de8c0a1a5ea3e4021281e52dfc8a8668e6640fb Mon Sep 17 00:00:00 2001 From: Leo Ahnn Date: Fri, 9 Sep 2016 19:38:31 -0400 Subject: [PATCH 3/8] working on snake --- script.js | 118 ++++++++++++++++++++--------------------------------- snake.html | 7 ++-- styles.css | 24 +++++++++++ 3 files changed, 71 insertions(+), 78 deletions(-) diff --git a/script.js b/script.js index 11cc512..2f62f29 100644 --- a/script.js +++ b/script.js @@ -4,8 +4,6 @@ function Snake() { this.length = 1; this.head = new Section(); - this.headX = 3; - this.headY = 3; } function Section(nextSection) { @@ -16,15 +14,34 @@ function Section(nextSection) { view = { - init: function() { - // + + render: function() { + var gridSize = controller.getGridSize(); + for (var i = 0; i < gridSize; i++) { + var $row = $('
'); + $row.addClass('row'); + $row.prependTo('#game-grid'); + for (var j = 0; j < gridSize; j++) { + var $cell = $('
'); + // if grid is empty + var cellContent = controller.getGridCell(j,i) + if (cellContent === "food") { + $cell.addClass("food"); + } else if (cellContent === "snake") { + $cell.addClass("snake"); + } + $cell.addClass('cell'); + $cell.attr('id', String(j) + "-" + String(i)); + $cell.appendTo($row); + } + } } + } gridModel = { grid: [], - init: function(size) { for (var i = 0; i < size; i++) { this.grid.push([]); @@ -32,103 +49,56 @@ gridModel = { this.grid[i].push(null); } } - gridModel.placeSnake(); }, - placeFood: function() { do { - var x = Math.random(this.grid.length); - var y =Math.random(this.grid.length); - } while { + var x = Math.random(this.grid.length) + var y = Math.random(this.grid.length) + } + while (false) { // x or y is occupied by snake. } + grid[x][y] = "food"; }, - - placeSnake: function() { - var x = this.snake.headX; - var y = this.snake.headY; - this.grid[x][y] = this.snake.head; - }, - - initSnake: function() { - this.snake = new Snake(); - return this.snake; - }, - moveSnake: function() { - var x = this.snake.headX; - var y = this.snake.headY; - switch(controller.currentDirection) { - case "left": - x -= 1; - break; - - case "right": - x += 1; - break; - - case "up": - y += 1; - break; - - case "down": - y -= 1; - break; - - default: return; - }; - this.snake.headX = x; - this.snake.headY = y; - placeSnake(); + } } controller = { - currentDirection: "none", - init: function() { - this.setEventListeners(); + gridModel.init(10); interval = setInterval(gridModel.moveSnake(), 200); - view.init(); + view.render(); }, gameOver: function() { clearInterval(interval); }, - setEventListeners: function() { - $(document).keydown(function(e) { - switch(e.which) { - case 37: // left - this.currentDirection = "left"; - break; - - case 38: // up - this.currentDirection = "up"; - break; - - case 39: // right - this.currentDirection = "right"; - break; - - case 40: // down - this.currentDirection = "down"; - break; + getGridSize: function() { + return gridModel.grid.length; + }, - default: return; // exit this handler for other keys - } - e.preventDefault(); // prevent the default action (scroll / move caret) - }); + getGridCell: function(x, y) { + var cell = gridModel.grid[x][y]; + if (cell === "food") { + return "food"; + } else if (cell) { + return "snake"; + } else { + return null; + } } + } $(document).ready(function() { - - + controller.init(); }) diff --git a/snake.html b/snake.html index 42fde58..d643373 100644 --- a/snake.html +++ b/snake.html @@ -4,16 +4,15 @@ Snake! - - + + - -
+
diff --git a/styles.css b/styles.css index e69de29..43b9baf 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,24 @@ +* { + margin: 0; + padding: 0; + line-height: 0; +} + +.cell { + height: 20px; + width: 20px; + border: solid black 1px; + display: inline-block; +} + +.snake { + background-color: darkgreen; +} + +.food { + background-color: red; +} + +.row { + display: block; +} From 2548374e982d12b1752693611d06855a28a71554 Mon Sep 17 00:00:00 2001 From: Leo Ahnn Date: Fri, 9 Sep 2016 19:48:44 -0400 Subject: [PATCH 4/8] working on snake --- script.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++---- styles.css | 4 +-- 2 files changed, 75 insertions(+), 7 deletions(-) diff --git a/script.js b/script.js index 2f62f29..3205bc7 100644 --- a/script.js +++ b/script.js @@ -4,6 +4,8 @@ function Snake() { this.length = 1; this.head = new Section(); + this.headX = 3; + this.headY = 3; } function Section(nextSection) { @@ -16,6 +18,7 @@ function Section(nextSection) { view = { render: function() { + $('#game-grid').empty(); var gridSize = controller.getGridSize(); for (var i = 0; i < gridSize; i++) { var $row = $('
'); @@ -24,7 +27,7 @@ view = { for (var j = 0; j < gridSize; j++) { var $cell = $('
'); // if grid is empty - var cellContent = controller.getGridCell(j,i) + var cellContent = controller.getGridCell(j, i) if (cellContent === "food") { $cell.addClass("food"); } else if (cellContent === "snake") { @@ -49,7 +52,10 @@ gridModel = { this.grid[i].push(null); } } + this.snake = new Snake(); + gridModel.placeSnake(); }, + placeFood: function() { do { var x = Math.random(this.grid.length) @@ -60,8 +66,40 @@ gridModel = { } grid[x][y] = "food"; }, - moveSnake: function() { + placeSnake: function() { + var x = this.snake.headX; + var y = this.snake.headY; + this.grid[x][y] = this.snake.head; + }, + + + moveSnake: function() { + var x = this.snake.headX; + var y = this.snake.headY; + switch (controller.currentDirection) { + case "left": + x -= 1; + break; + + case "right": + x += 1; + break; + + case "up": + y += 1; + break; + + case "down": + y -= 1; + break; + + default: + return; + }; + this.snake.headX = x; + this.snake.headY = y; + placeSnake(); } } @@ -69,8 +107,14 @@ gridModel = { controller = { init: function() { - gridModel.init(10); - interval = setInterval(gridModel.moveSnake(), 200); + gridModel.init(20); + this.setEventListeners(); + interval = setInterval(this.playGame, 200); + view.render(); + }, + + playGame: function() { + gridModel.moveSnake() view.render(); }, @@ -91,9 +135,33 @@ controller = { } else { return null; } - } + }, + + setEventListeners: function() { + $(document).keydown(function(e) { + switch (e.which) { + case 37: // left + this.currentDirection = "left"; + break; + case 38: // up + this.currentDirection = "up"; + break; + case 39: // right + this.currentDirection = "right"; + break; + + case 40: // down + this.currentDirection = "down"; + break; + + default: + return; // exit this handler for other keys + } + e.preventDefault(); // prevent the default action (scroll / move caret) + }); + } } diff --git a/styles.css b/styles.css index 43b9baf..5a74f17 100644 --- a/styles.css +++ b/styles.css @@ -5,8 +5,8 @@ } .cell { - height: 20px; - width: 20px; + height: 10px; + width: 10px; border: solid black 1px; display: inline-block; } From ededab8006b173b07c8df3b5be31aa904630e3ed Mon Sep 17 00:00:00 2001 From: Leo Ahnn Date: Fri, 9 Sep 2016 19:54:27 -0400 Subject: [PATCH 5/8] moving snake in view --- script.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 3205bc7..6b7204f 100644 --- a/script.js +++ b/script.js @@ -99,13 +99,15 @@ gridModel = { }; this.snake.headX = x; this.snake.headY = y; - placeSnake(); + gridModel.placeSnake(); } } controller = { + currentDirection: null, + init: function() { gridModel.init(20); this.setEventListeners(); @@ -141,19 +143,20 @@ controller = { $(document).keydown(function(e) { switch (e.which) { case 37: // left - this.currentDirection = "left"; + controller.currentDirection = "left"; + console.log(controller); break; case 38: // up - this.currentDirection = "up"; + controller.currentDirection = "up"; break; case 39: // right - this.currentDirection = "right"; + controller.currentDirection = "right"; break; case 40: // down - this.currentDirection = "down"; + controller.currentDirection = "down"; break; default: From a27f95215702dabc6119730b6eaba0ba8219f46e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CMatthew?= Date: Fri, 9 Sep 2016 16:55:23 -0700 Subject: [PATCH 6/8] test pair pull --- styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles.css b/styles.css index 5a74f17..10bd683 100644 --- a/styles.css +++ b/styles.css @@ -22,3 +22,5 @@ .row { display: block; } + +/* THIS IS MATT"S COMMIT */ \ No newline at end of file From d13f18e4df0cff233312174b79f4582025771ebb Mon Sep 17 00:00:00 2001 From: Leo Ahnn Date: Fri, 9 Sep 2016 19:59:05 -0400 Subject: [PATCH 7/8] moving head --- script.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/script.js b/script.js index 6b7204f..b6e1a8f 100644 --- a/script.js +++ b/script.js @@ -77,6 +77,7 @@ gridModel = { moveSnake: function() { var x = this.snake.headX; var y = this.snake.headY; + this.moveTail(x, y); switch (controller.currentDirection) { case "left": x -= 1; @@ -100,6 +101,10 @@ gridModel = { this.snake.headX = x; this.snake.headY = y; gridModel.placeSnake(); + }, + + moveTail: function(x, y) { + this.grid[x][y] = null; } } From 6d246d0bea5a6d87275fbfd46a9724e111ed1305 Mon Sep 17 00:00:00 2001 From: Leo Ahnn Date: Mon, 12 Sep 2016 20:05:07 -0400 Subject: [PATCH 8/8] working snake --- snake.html => index.html | 0 script.js | 88 +++++++++++++++++++++++++++------------- styles.css | 28 ++++++++----- 3 files changed, 77 insertions(+), 39 deletions(-) rename snake.html => index.html (100%) diff --git a/snake.html b/index.html similarity index 100% rename from snake.html rename to index.html diff --git a/script.js b/script.js index b6e1a8f..394acff 100644 --- a/script.js +++ b/script.js @@ -1,19 +1,11 @@ // js scripts // snake constructor -function Snake() { +function Snake(x, y) { this.length = 1; - this.head = new Section(); - this.headX = 3; - this.headY = 3; + this.body = [[x,y]]; } -function Section(nextSection) { - next: nextSection; -} - -// - view = { @@ -38,6 +30,11 @@ view = { $cell.appendTo($row); } } + }, + + showGameOver: function() { + $gameOverMessage = $('

Game over man!

'); + $gameOverMessage.insertBefore('#game-grid'); } } @@ -45,6 +42,8 @@ view = { gridModel = { grid: [], + food: [], + init: function(size) { for (var i = 0; i < size; i++) { this.grid.push([]); @@ -52,32 +51,42 @@ gridModel = { this.grid[i].push(null); } } - this.snake = new Snake(); + this.snake = new Snake(3,3); gridModel.placeSnake(); + gridModel.placeFood(); }, placeFood: function() { do { - var x = Math.random(this.grid.length) - var y = Math.random(this.grid.length) + var x = Math.floor(Math.random() * this.grid.length) + var y = Math.floor(Math.random() * this.grid.length) } - while (false) { - // x or y is occupied by snake. + while(this.grid[x][y] === "snake"); + this.grid[x][y] = "food"; + this.food = [x,y]; + }, + + checkFood: function(x,y) { + if(this.food[0] === x && this.food[1] === y) { + console.log("chomp"); + this.placeFood(); + return true; } - grid[x][y] = "food"; + return false; }, placeSnake: function() { - var x = this.snake.headX; - var y = this.snake.headY; - this.grid[x][y] = this.snake.head; + var snakeBody = this.snake.body + for(var i = 0; i < snakeBody.length; i++) { + this.grid[snakeBody[i][0]][snakeBody[i][1]] = "snake"; + } }, moveSnake: function() { - var x = this.snake.headX; - var y = this.snake.headY; - this.moveTail(x, y); + var snakeBody = this.snake.body; + var x = snakeBody[snakeBody.length-1][0]; + var y = snakeBody[snakeBody.length-1][1]; switch (controller.currentDirection) { case "left": x -= 1; @@ -100,13 +109,19 @@ gridModel = { }; this.snake.headX = x; this.snake.headY = y; + if(!controller.checkBounds(x,y)){ + return; + }; + this.snake.body.push([x,y]); + if(gridModel.checkFood(x,y)){ + gridModel.snake.length++; + } else { + var oldSnake = gridModel.snake.body.shift(); + gridModel.grid[oldSnake[0]][oldSnake[1]] = null; + } gridModel.placeSnake(); }, - moveTail: function(x, y) { - this.grid[x][y] = null; - } - } controller = { @@ -127,6 +142,21 @@ controller = { gameOver: function() { clearInterval(interval); + view.showGameOver(); + }, + + checkBounds: function(x,y) { + var bounds = controller.getGridSize(); + if (x >= bounds || y >= bounds || x < 0 || y < 0) { + controller.gameOver(); + return false; + } + return true; + }, + + getSnakeCoords: function() { + var snakeBody = gridModel.snake.body; + return snakeBody[snakeBody.length-1]; }, getGridSize: function() { @@ -148,19 +178,22 @@ controller = { $(document).keydown(function(e) { switch (e.which) { case 37: // left + if (controller.currentDirection == "right") { break; } controller.currentDirection = "left"; - console.log(controller); break; case 38: // up + if (controller.currentDirection == "up") { break; } controller.currentDirection = "up"; break; case 39: // right + if (controller.currentDirection == "left") { break; } controller.currentDirection = "right"; break; case 40: // down + if (controller.currentDirection == "up") { break; } controller.currentDirection = "down"; break; @@ -174,7 +207,6 @@ controller = { - $(document).ready(function() { controller.init(); }) diff --git a/styles.css b/styles.css index 10bd683..7f070fc 100644 --- a/styles.css +++ b/styles.css @@ -1,26 +1,32 @@ * { - margin: 0; - padding: 0; - line-height: 0; + margin: 0; + padding: 0; + line-height: 0; } .cell { - height: 10px; - width: 10px; - border: solid black 1px; - display: inline-block; + height: 10px; + width: 10px; + border: solid black 1px; + display: inline-block; } .snake { - background-color: darkgreen; + background-color: darkgreen; } .food { - background-color: red; + background-color: red; } .row { - display: block; + display: block; } -/* THIS IS MATT"S COMMIT */ \ No newline at end of file +.game-over { + margin-top: 16px; +} + +#game-grid { + margin: 32px; +}