Permalink
Browse files

game done

  • Loading branch information...
dawong8 committed Jan 10, 2019
0 parents commit 6261afa648614c7144dac638d8ccc7965ac0a12f
Showing with 822 additions and 0 deletions.
  1. +187 −0 css/style.css
  2. +37 −0 index.html
  3. +598 −0 js/app.js
@@ -0,0 +1,187 @@
@import url('https://fonts.googleapis.com/css?family=Thasadith');
body {
background: #FAF8EE;
color: #8E7966;
font-family: 'Thasadith', sans-serif;
}
.hide {
display: none !important;
}
#startscreen {
/* display:flex;
justify-content: center;*/
margin: 0 auto;
text-align: center;
}
.title {
font-size: 50px;
}
.instructionsModal{
position: fixed;
margin: 0 20%;
top: 100px;
height: 400px;
width: 60%;
background: #8E7966;
font-size: 30px;
color: #FAF8EE;
padding-top: 10px;
}
#X {
border: solid 5px #FAF8EE;
color: #FAF8EE;
}
.instructionsModal p{
padding: 0 10%;
}
.blur {
filter: blur(5px);
}
input[type="submit"], button {
background: none;
margin: 0 20px 0 10px;
width: 100px;
height: 50px;
font-size: 50px
color: #8E7966;
font-family: 'Thasadith', sans-serif;
border: solid 5px #8E7966 ;
border-radius: 45px;
}
input[type="submit"]:hover, button:hover {
opacity: 0.75;
}
#game {
/*align-items: center; this is useless ?*/
}
#lose-screen {
display: flex;
justify-content: center;
/*background: white;*/
/*opacity: 0.75; */
/*width: 100%; */
/*height: 1vh;*/
/*align-items: center;*/
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 15px;
grid-auto-rows: minmax(125px, 125px);
/*position: fixed;*/
margin: 0 30%;
width: 40%;
background: #B9AB9F;
border-radius: 5px;
border: solid 15px #B9AB9F;
/* height: 500px;
width: 500px;*/
}
.cell {
background: #CBBEB3;
border-radius: 5px;
padding: 10px;
text-align: center;
/*border: solid 10px #B9AB9F;*/
/*grid-column: 3;
grid-row: 4;*/
}
[class^="value-"], div[class*=" value-"] {
background: #EFC948;
font-size: 65px; /* Adjust font size */
}
.value-2 {
background: #EEE4DA !important;
font-size: 75px !important;
}
.value-4 {
background: #EDE0C7 !important;
font-size: 75px !important;
}
.value-8 {
background: #E9B381 !important;
font-size: 75px !important;
}
.value-16 {
background: #E9996C !important;
font-size: 75px !important;
}
.value-32 {
background: #E78266 !important;
font-size: 75px !important;
}
.value-64 {
background: #E95937 !important;
font-size: 75px !important;
}
.value-128 {
background: #F8CF75 !important;
/*font-size: 65px; */
}
/* homepage animations */
.rain, .rain8, .rain4, .rain128 {
position: fixed;
top: -100px;
left: 20px;
width: 50px;
height: 50px;
font-size: 45px !important;
border: solid 7px #B9AB9F;
opacity: 0.5;
}
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>2048</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.ui.js"> </script>
</head>
<body>
<div id="startscreen" class="hide">
<h1 class="title">2048</h1>
<p> Game was originally created by Gabriele Cirulli. This is a recreation. </p>
<form id="submit-play"><input type="submit" name="play" value="PLAY"></form>
<br>
<button id="instructions"> INSTRUCTIONS </button>
<div class="instructionsModal hide">
<button id="X"> CLOSE </button>
<p> Use the Arrow Keys to move the Tiles. Tiles with the same value can be combined if they are next to each other. After each turn, a new tile will spawn randomly. Move the tiles to earn a score of 2048. <br> However, You can score more than 2048, the game ends only when you are out of moves or decide to quit.</p>
</div>
</div>
<div id="game" class="hide"> <form> <button id="quit"> QUIT</button> </form></div>
<div id="lose-screen" class="hide"> <h2> Out of moves. You lose. </h2></div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Oops, something went wrong.

0 comments on commit 6261afa

Please sign in to comment.