--- a/index.html +++ b/index.html @@ -5,12 +5,35 @@ <title>2048</title> <link href="style/main.css" rel="stylesheet" type="text/css"> + + <script src="js/hammer.min.js"></script> + <script src="js/keyboard_input_manager.js"></script> + <script src="js/html_actuator.js"></script> + <script src="js/grid.js"></script> + <script src="js/tile.js"></script> + <script src="js/game_manager.js"></script> + <script src="js/application.js"></script> + + <meta name="HandheldFriendly" content="True"> + <meta name="MobileOptimized" content="320"> + <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no"> </head> <body> <div class="container"> - <h1>2048</h1> + <div class="heading"> + <h1 class="title">2048</h1> + <div class="score-container">0</div> + </div> + <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p> <div class="game-container"> + <div class="game-message"> + <p></p> + <div class="lower"> + <a class="retry-button">Try again</a> + </div> + </div> + <div class="grid-container"> <div class="grid-row"> <div class="grid-cell"></div> @@ -39,20 +62,17 @@ </div> <div class="tile-container"> - <div class="tile tile-2 tile-position-1-1"> - 2 - </div> - <div class="tile tile-4 tile-position-2-3"> - 4 - </div> - <div class="tile tile-512 tile-position-3-2"> - 512 - </div> - <div class="tile tile-2048 tile-position-4-4"> - 2048 - </div> + </div> </div> + + <p class="game-explanation"> + <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong> + </p> + <hr> + <p> + Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a> + </p> </div> </body> </html>