How to create 2048 Game - WPB Tutorials

Saturday, 24 February 2018

How to create 2048 Game


2048 Game

Contents to your web root and reference the Stylesheet files required in the <head></head> of your document
<link href="style/main.css" rel="stylesheet" />


Next generate your code, 2048 game source code sample or just use this format and source to suit
Code:
<div class="container"> <div class="heading"> <h1 class="title">2048</h1> <div class="scores-container"> <div class="score-container">0</div> <div class="best-container">0</div> </div> </div> <div class="above-game"> <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p> <a class="restart-button">New Game</a> </div> <div class="game-container"> <div class="game-message"> <p></p> <div class="lower"> <a class="keep-playing-button">Keep going</a> <a class="retry-button">Try again</a> </div> </div> <div class="grid-container"> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> <div class="grid-row"> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> <div class="grid-cell"></div> </div> </div> </div> </div>


Contents to your web root and reference the javascript files required in the <body></body> of your document
Code:
<script src="js/bind_polyfill.js"></script> <script src="js/classlist_polyfill.js"></script> <script src="js/animframe_polyfill.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/local_storage_manager.js"></script> <script src="js/game_manager.js"></script> <script src="js/application.js"></script>

No comments:

Post a Comment

HTML Elements