Skip to content

Commit

Permalink
Initial cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@gamalielhere
gamalielhere committed Dec 24, 2018
1 parent 035ae87 commit 3ef0fd2
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 112 deletions.
22 changes: 0 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
# SNAKE GAME

![SNAKE PHOTO](http://i.imgur.com/bJZMrbL.png)


SNAKE is a classic game where you play as the snake and you feed yourself with the food that randomly pops around the board. My variation of the game speeds up the snake the more food you eat.


Expand All @@ -25,22 +22,3 @@ SNAKE is a classic game where you play as the snake and you feed yourself with t
* Move snake with your arrow keys.
* Collect as much food as you can.
* **DON'T DIE**

### DESIGN APPROACH
My design approach is basically reviving a retro game. I used "Press Start 2P" as font to add that 8-bit old classic game look.
![SNAKE WIREFRAME](http://i.imgur.com/Yckp5UY.jpg)
#### Basically like any game, it starts out with a home page:
![HOME PAGE](http://i.imgur.com/yKt7Yp7.jpg)
#### Goes to the game and lets you play:
![SNAKE PHOTO](http://i.imgur.com/bJZMrbL.png)
#### Until you die:
![DEAD SCREEN](http://i.imgur.com/aMsXWpH.jpg)

### USER STORIES

All of my user stories can be found in my [Trelloboards](https://trello.com/b/TTtZgl3z)

# CODE
[The code can be found here](https://github.com/gamalielhere/snake)

[And the hosted game site can be found here](http://gamalielhere.github.io/snake/)
95 changes: 47 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SNAKE</title>
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css"/>
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
</head>
<body>
<div class="content">
<h1>SNAKE</h1>
<h1><span class="currentScore"></span></h1>
<div class="game">
<canvas id="canvas">
YOUR BROWSER DOESN'T SUPPORT CANVAS YET
</canvas>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>SNAKE</title>
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
</head>

<body>
<div class="content">
<h1>SNAKE</h1>
<h1><span class="currentScore"></span></h1>
<div class="game">
<canvas id="canvas">
YOUR BROWSER DOESN'T SUPPORT CANVAS YET
</canvas>
</div>
<div class="notification">
<h1>YOU DIED!</h1>
<h3 class="score"></h3>
</div>
<div class="buttons">
<!-- <button class="playAgain" onclick="playAgain();"> PLAY AGAIN!</button>
<button class="start" onclick="startGame();">START</button> -->
<div class="mobileButton">
<div class="mobileButtonCenter">
<button onclick="mobileUp();"> UP </button>
</div>
<div class="notification">
<h1>YOU DIED!</h1>
<h3 class="score"></h3>
<div class="mobileButtonCenter left--right">
<button onclick="mobileLeft();"> LEFT </button>
<button onclick="mobileRight();"> RIGHT </button>
</div>
<div class="buttons">
<button class="playAgain" onclick="playAgain();"> PLAY AGAIN!</button>
<button class="start" onclick="startGame();">START</button>
<div class="mobileButton">
<div class="mobileButtonCenter">
<button onclick="mobileUp();"> UP </button>
</div>
<div class="mobileButtonCenter left--right">
<button onclick="mobileLeft();"> LEFT </button>
<button onclick="mobileRight();"> RIGHT </button>
</div>
<div class="mobileButtonCenter">
<button onclick="mobileDown();"> DOWN </button>
</div>
</div>
<button class="home" onclick="homeButton();">HOME</button>
<button class="reset" onclick="resetGame();">RESET</button>
<button class="pause" onclick="pauseGame();">PAUSE</button>
<button class="resume" onclick="resumeGame();">RESUME</button>
<button class="mute" onclick="muteGame();">Music: <span class="musicSetting"> On</span></button>
<h1>HIGHSCORE: <span id="highScore"></span> </h1>
<div class="mobileButtonCenter">
<button onclick="mobileDown();"> DOWN </button>
</div>
</div>
<audio src="assets/run.mp3" id="run" loop></audio>
<audio src="assets/dying.mp3" id="die"></audio>
<audio src="assets/eat.wav" id="eat"></audio>
<script src="js/script.js"></script>
</body>
</html>
<!-- <button class="home" onclick="homeButton();">HOME</button>
<button class="reset" onclick="resetGame();">RESET</button>
<button class="pause" onclick="pauseGame();">PAUSE</button>
<button class="resume" onclick="resumeGame();">RESUME</button> -->
<h1>HIGHSCORE: <span id="highScore"></span> </h1>
</div>
</div>
<script src="js/script.js"></script>
</body>

</html>
56 changes: 14 additions & 42 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
(function() {
(function () {
// Create canvas
const canvas = document.getElementById("canvas");
if (window.outerWidth > 960) {
canvas.width = Math.round(window.outerWidth / 3);
canvas.height = Math.round(window.outerWidth / 3);
} else {
canvas.width = Math.round(window.outerWidth / 1.15);
canvas.height = Math.round(window.outerWidth / 1.15);
}

canvas.width = Math.round(window.outerWidth - 30);
canvas.height = Math.round(window.outerWidth - 30);
const canvasContext = canvas.getContext("2d"),
canvasWidth = canvas.width,
canvasHeight = canvas.height;
Expand All @@ -21,10 +15,7 @@
canvasFill = "black";

// Music Variables
const run = document.getElementById("run"),
die = document.getElementById("die"),
eat = document.getElementById("eat"),
musicSetting = document.getElementsByClassName("musicSetting");
const run = document.getElementById("run");
let muted = false;

// Button Variables
Expand Down Expand Up @@ -170,9 +161,6 @@
playAgainButton[0].style.display = "inline-block";
homeButton[0].style.display = "inline-block";
userScoreContainer[0].innerHTML = `TOTAL SCORE: ${score}`;
run.pause();
run.currentTime = 0;
die.play();
}
updateScore();
}
Expand Down Expand Up @@ -339,15 +327,15 @@
}

// Public functions
window.startGame = function(e) {
window.startGame = function (e) {
startTheGame();
canvas.style.visibility = "visible";
startButton[0].style.display = "none";
resetButton[0].style.display = "inline-block";
pauseButton[0].style.display = "inline-block";
};

window.resetGame = function() {
window.resetGame = function () {
startTheGame();
startButton[0].style.display = "none";
resumeButton[0].style.display = "none";
Expand All @@ -356,7 +344,7 @@
playAgainButton[0].style.display = "none";
};

window.resumeGame = function() {
window.resumeGame = function () {
startButton[0].style.display = "none";
resumeButton[0].style.display = "none";
resetButton[0].style.display = "inline-block";
Expand All @@ -365,7 +353,7 @@
loopGame = setInterval(render, speed);
};

window.pauseGame = function() {
window.pauseGame = function () {
clearInterval(loopGame);
run.pause();
startButton[0].style.display = "none";
Expand All @@ -375,7 +363,7 @@
playAgainButton[0].style.display = "none";
};

window.playAgain = function() {
window.playAgain = function () {
startTheGame();
canvas.style.visibility = "visible";
gameContainer[0].style.display = "inline-block";
Expand All @@ -388,7 +376,7 @@
homeButton[0].style.display = "none";
};

window.homeButton = function() {
window.homeButton = function () {
window.location.reload();
};

Expand All @@ -405,32 +393,16 @@
}
});

window.mobileLeft = function() {
window.mobileLeft = function () {
direction = "left";
};
window.mobileRight = function() {
window.mobileRight = function () {
direction = "right";
};
window.mobileUp = function() {
window.mobileUp = function () {
direction = "up";
};
window.mobileDown = function() {
window.mobileDown = function () {
direction = "down";
};

window.muteGame = function() {
if(muted) {
musicSetting[0].innerHTML = "On";
muted = false;
run.muted = false;
die.muted = false;
eat.muted = false;
} else {
musicSetting[0].innerHTML = "Off";
muted = true;
run.muted = true;
die.muted = true;
eat.muted = true;
}
};
})();

0 comments on commit 3ef0fd2

Please sign in to comment.