Build a Google Chrome T-Rex Dinosaur Running Game in HTML5 CSS3 and Javascript Full Project For Beginners

Build a Google Chrome T-Rex Dinosaur Running Game in HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a chrome dinosaur running game in javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to create an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
    <head>
        <title>RAWRRRR!</title>
        <link rel="stylesheet" href="style.css"> 
    </head>
    <body>
        <!-- 
            Boilerplate to start the basic layout. 

            Making the canvas white will make our work space really obvious.
        -->
        <h1>Dinosaur Game!</h1>
        <canvas id="game" height="200" width="800"></canvas>
        <p class="controls">press space bar to start</p>

        <script src="js/helpers.js"></script>
        <script src="js/objects/game-object.js"></script>
        <script src="js/objects/cactus.js"></script>
        <script src="js/objects/dinosaur.js"></script>
        <script src="js/objects/background.js"></script>
        <script src="js/objects/score.js"></script>
        <script src="js/game.js"></script>
        <script>
            new Game({
                el: document.getElementById("game")
            });
        </script>
    </body>
</html>

 

 

Now you need to download the full source code of application from github repository as shown below

See also  Node.js Express Download CSV File From Array of Objects Using objects-to-csv Library Full Tutorial

 

DOWNLOAD SOURCE CODE

 

After downloading the source code you will see the following directory structure

 

 

 

 

If you open index.html file inside the browser you will see the following output

 

 

 

Leave a Reply