diff --git a/snake.css b/snake.css
new file mode 100644
index 0000000..60d6040
--- /dev/null
+++ b/snake.css
@@ -0,0 +1,18 @@
+body{
+ text-align: center;
+ background-color: black;
+}
+
+#board{
+ width: calc(95% - 2px);
+ margin-top: 5%;
+ border: 1px white solid;
+ /*border-radius: 4px;*/
+}
+
+@media only screen and (min-width: 1000px) {
+ #board{
+ width: 1000px;
+ /*border-radius: 8px;*/
+ }
+}
diff --git a/snake.html b/snake.html
new file mode 100644
index 0000000..a512098
--- /dev/null
+++ b/snake.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/snake.js b/snake.js
new file mode 100644
index 0000000..b28f630
--- /dev/null
+++ b/snake.js
@@ -0,0 +1,189 @@
+window.onload=function(){
+ block_size = 4;
+ block_space = 1;
+ fps = 20;
+ ms_in_sec = 1000;
+ setup()
+};
+
+function setup(){
+ var canvas = document.getElementById("board");
+ var canvas_context = canvas.getContext('2d');
+ var snek = new Snek(2, 2, Direction.Right, canvas_context, "red");
+ target = new Block(Math.floor(Math.random() * (canvas.width/(block_size + block_space) - 1)),
+ Math.floor(Math.random() * (canvas.height/(block_size + block_space) - 1)),
+ canvas_context, "green");
+
+ game = window.setInterval(function(){update(canvas, canvas_context, snek)}, ms_in_sec/fps);
+ window.addEventListener("keypress", function(e){take_input(snek, e)}, false);
+}
+
+function take_input(snek, e){
+ var keyCode = e.key;
+ if (keyCode == "w" && (snek.get_direction() == Direction.Right || snek.get_direction() == Direction.Left)){
+ snek.set_direction(Direction.Up);
+ } else if (keyCode == "s" && (snek.get_direction() == Direction.Right || snek.get_direction() == Direction.Left)){
+ snek.set_direction(Direction.Down);
+ } else if (keyCode == "a" && (snek.get_direction() == Direction.Up || snek.get_direction() == Direction.Down)){
+ snek.set_direction(Direction.Left);
+ } else if (keyCode == "d" && (snek.get_direction() == Direction.Up || snek.get_direction() == Direction.Down)){
+ snek.set_direction(Direction.Right);
+ }
+};
+
+function update(canvas, canvas_context, snek){
+ paint_background(canvas, canvas_context);
+ target.paint();
+ snek.paint();
+ snek.move();
+ snek.trim();
+ target = snek.check(target);
+};
+
+function paint_background(canvas, canvas_context){
+ canvas_context.fillStyle = "white";
+ canvas_context.fillRect(0,0, canvas.width, canvas.height);
+ paint_board(canvas, canvas_context);
+};
+
+function paint_board(canvas, canvas_context){
+ canvas_context.fillStyle = "grey";
+ for (var i=0; i < canvas.width; i += block_size + block_space){
+ for(var j=0; j < canvas.height; j += block_size + block_space){
+ canvas_context.fillRect(i, j, block_size, block_size);
+ }
+ }
+};
+
+const Direction = {
+ Right: "Right",
+ Left: "Left",
+ Up: "Up",
+ Down: "Down"
+};
+
+class Block{
+ constructor(x, y, board, color){
+ this.x = x * (block_size + block_space);
+ this.y = y * (block_size + block_space);
+ this.board = board;
+ this.color = color;
+ }
+
+ get_color(){
+ return this.color;
+ }
+
+ get_block_x(){
+ return this.x/(block_size + block_space);
+ }
+
+ get_block_y(){
+ return this.y/(block_size + block_space);
+ }
+
+ get_true_x(){
+ return this.x;
+ }
+
+ get_true_y(){
+ return this.y;
+ }
+
+ get_board(){
+ return this.board;
+ }
+
+ prime_color(){
+ this.board.fillStyle = this.color;
+ }
+
+ paint(){
+ this.prime_color();
+ this.board.fillRect(this.x, this.y, block_size, block_size);
+ }
+}
+
+class Snek{
+ constructor(x, y, direction, board, color){
+ this.head = new Block(x, y, board, color);
+ this.tail = [];
+ this.length = 3;
+ this.alive = 0;
+ this.direction = direction;
+ }
+
+ get_direction(){
+ return this.direction;
+ }
+
+ set_direction(direction){
+ this.direction = direction;
+ }
+
+ paint(){
+ this.head.paint();
+
+ for(var i=0; i < this.tail.length; i++){
+ this.tail[i].paint();
+ }
+ }
+
+ move(){
+ var new_x = this.head.get_block_x();
+ var new_y = this.head.get_block_y();
+
+ if (this.direction == Direction.Right) {
+ new_x = this.head.get_block_x() + 1;
+ } else if (this.direction == Direction.Left) {
+ new_x = this.head.get_block_x() - 1
+ } else if (this.direction == Direction.Up) {
+ new_y = this.head.get_block_y() - 1
+ } else {
+ new_y = this.head.get_block_y() + 1;
+ }
+
+ this.tail.unshift(this.head);
+ this.head = new Block(new_x, new_y, this.head.get_board(), this.head.get_color());
+ }
+
+ trim(){
+ while (this.tail.length > this.length){
+ this.tail.pop();
+ }
+ }
+
+ head_is_in_tail(){
+ for(var i=0; i < this.tail.length; i++){
+ if(this.tail[i].get_block_x() == this.head.get_block_x() &&
+ this.tail[i].get_block_y() == this.head.get_block_y()){
+ return true;
+ }
+ }
+ return false;
+ }
+
+ head_is_out_of_bounds(){
+ return this.head.get_true_x() < 0 || this.head.get_true_y() < 0 ||
+ this.head.get_true_x() > this.head.get_board().canvas.width ||
+ this.head.get_true_y() > this.head.get_board().canvas.height;
+ }
+
+ check(){
+ this.alive++;
+ if (target.get_block_x() == this.head.get_block_x() && target.get_block_y() == this.head.get_block_y()){
+ this.length++;
+ var canvas_context = this.head.get_board();
+ var canvas = canvas_context.canvas;
+ return new Block(Math.floor(Math.random() * (canvas.width/(block_size + block_space) - 1)),
+ Math.floor(Math.random() * (canvas.height/(block_size + block_space) - 1)),
+ canvas_context, "green");
+ } else if (this.head_is_in_tail() || this.head_is_out_of_bounds()){
+ clearInterval(game);
+ window.removeEventListener("keypress", function(e){take_input(this, e)}, true);
+ setup();
+ }
+ return target;
+ }
+};
+