Skip to content

Commit

Permalink
Fix conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
@gamalielhere
gamalielhere committed Dec 25, 2018
2 parents 699ea60 + b7a8e55 commit e8a3fc8
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 559 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/)
128 changes: 78 additions & 50 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,118 @@
/*BODY STUFFS*/
body {
text-align: center;
background-color: #0e0e0e;
font-family: "Press Start 2P", Arial, Serif;
}
body > h1 {
margin-top: -5px;
margin-bottom: -3px;
height: 100%;
margin: 0 !important;
position: relative;
text-align: center;
width: 100%;
}

/*BOARD*/
.game {
background-color: #3b3b62;
display: inline-block;
margin: 0 auto;
.initial-text {
border: 1px dashed #fafafa;
color: #fafafa;
display: flex;
flex-direction: column;
margin: auto;
left: 35%;
padding: 30px;
position: absolute;
top: 20%;
right: 35%;
}

#canvas {
visibility: hidden;
.initial-text > .initial-buttons {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}

.notification {
display: none;
background-color: black;
color: red;
.initial-text > .initial-buttons * {
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fafafa;
border-radius: 5px;
color: inherit;
cursor: pointer;
font-family: inherit;
padding: 15px;
width: 175px;
}

/*BUTTONS*/
button {
background-color: grey;
border: 1px solid black;
font-family: "Press Start 2P", Arial, Serif;
margin: 5px;
height: 45px;
width: 300px;
.initial-text > .initial-buttons *:hover {
background-color: #fafafa;
box-shadow: 2px 2px 2px #bcbaba;
color: #0e0e0e;
}

.content {
margin-top: 64px;
.initial-text > .initial-buttons > .controls,
.initial-text > .initial-buttons > .continue {
margin: 15px 0;
}

.resume {
.controls-info,
.highscores-container {
display: none;
text-align: left;
}

.reset {
.back,
.reset,
.continue {
display: none;
}

.playAgain {
display: none;
}

.settings {
display: inline-block;
.back {
margin-bottom: 20px;
}

.home {
display: none;
.header {
background-color: #0e0e0e;
height: 79px;
}

.pause {
.header-content {
align-items: center;
border-bottom: 1px solid #fafafa;
display: none;
justify-content: space-between;
padding: 0 10px;
}

.mobileButton {
display: none;
.header-content > h2 {
color: #fafafa;
}

.mobileButtonCenter {
text-align: center;
.header-content > .score {
color: #39b513;
}

.mobileButtonCenter button {
width: 80px;
.header-content > .timer {
color: #f94343;
}

.left--right button {
margin: 0 40px;
}
@media screen and (max-width: 600px) {
.initial-text {
left: 15%;
right: 15%;
}

@media screen and (max-width: 960px) {
.mobileButton {
.mobile {
display: block;
}

.content {
margin-top: 25px;
.desktop {
display: none;
}
}

@media screen and (min-width: 601px) {
.mobile {
display: none;
}

.desktop {
display: block;
}
}
110 changes: 59 additions & 51 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,61 @@
<!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>
</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="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>
<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" />
</head>

<body>
<div class="header">
<div class="header-content" id="header">
<h2>SNAKE</h2>
<div class="score">
Current Score: <span id="currentScore">0</span>
</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>
<div id="bonusFoodTimer"></div>
</div>
</div>
<div class="initial-text" id="infoContainer">
<h1>SNAKE</h1>
<div class="initial-buttons">
<button class="reset" id="reset"> RESET </button>
<button class="start" id="start"> START </button>
<button class="controls" id="controls"> CONTROLS </button>
<button class="continue" id="continue"> CONTINUE </button>
<button class="back" id="back"> BACK </button>
</div>
<div id="controlsInfo" class="controls-info">
<div class="desktop">
<div>W = Up</div>
<div>S = Down</div>
<div>A = Left</div>
<div>D = Right</div>
<div>SPACEBAR = Start/Pause</div>
</div>
<div class="mobile">
<div>Swipe up = Up</div>
<div>Swipe down = Down</div>
<div>Swipe left = Left</div>
<div>Swipe right = Right</div>
</div>
</div>
<div id="scoresInfo" class="controls-info">

</div>
</div>
<div class="content">
<div class="game">
<canvas id="canvas">
YOUR BROWSER DOESN'T SUPPORT CANVAS YET
</canvas>
</div>
</div>
<script src="js/main.js"></script>
</body>

</html>
Loading

0 comments on commit e8a3fc8

Please sign in to comment.