Blog

salesforce data migration services

15

Jan

The Crack the Code Workshop – Brick Game Decoded

game development,HTML,CSS,Bootstrap,Jquery,javascript - posted by Shruti Sridharan

You know what the best part of our training sessions at Dazeworks was? Without doubt, it was the session where we designed games using all that we learnt till then. It was exciting and at the same time, made us think and analyse – a challenge that we all loved. Here’s what we did.

We designed a single player game which is similar to our old Brick Game. In this game, the player has to save himself from getting hit by random cars that are generated. Once the player gets hit, he loses the game.

Check out the game on CodePen.

For designing this game, we used the following technologies:

  1. HTML
  2. CSS3
  3. Bootstrap
  4. Vanilla JavaScript
  5. JQuery

We designed the graphical interface of the game using HTML, CSS and Bootstrap and for the functionality we used Vanilla JavaScript and JQuery.

For building up this game, we used bottom-top approach, i.e. initially each individual functionality was built and were integrated in the end.

Flowchart

Brick Game

Fig: 1.1 Flowchart

As the first step, we designed the playground or the play area of 500px height and 400px width using the <div> tags in HTML and applied styles to it using CSS3 and Bootstrap.

Then we designed a player, which in our case is a red car using another <div> tag as a child of the playground <div>.

Player

Fig: 1.2 Player

Two functions were written for the Left and Right movement of the player’s block (red car). For this, we checked the left and right movements of the player with the help of keyCode property and used the .css() of jQuery to modify the value of left in the player’s class in the css file. The right or left movements were made by adding or subtracting 100px value to the current left value according to the key pressed.

Left Movement :

Right Movement :

 

Later, with the help of JavaScript, we created a function to develop the blocks(opponents).  .append() of jQuery was used to add the opponent blocks as new <div> tags as a child of the main <div> playground.

Creating Opponents :

Opponents

Fig: 1.3 Opponents

 

Another function was created to generate their positions randomly.  Math.random() was used to create the random position of the blocks. Finally these random values were substituted  to the current left attribute values using .css() function in jQuery.

Generating Random Positions :

For the movement of the blocks, another function was written in which the top values of the randomly generated blocks are gradually increased. With the help of .animate() of jQuery, we made the blocks fall from top to bottom. The speed of the movement and the type of movement are defined in the .animate() method.

Moving Opponents :

 

We then used an algorithm and wrote a function for detecting the collision. In the algorithm, we checked the left attribute value of the randomly generated blocks and the current left attribute value of the player. If they are equal and the top attribute value is greater than or equal to 400, then alert the player that he lost the game.

Collision Detection : 

Incrementing Points :

And finally we linked all these functionalities using ready() function in jQuery and the game starts on the click of the Start button.

Start Game : 

Game

Fig: 1.4 Game

Lost

Fig: 1.5 Player Loses the Game

 

So now you know why I said this was the best part! You could try it out too and make sure to drop a comment below on how it went.

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on Pinterest

Search

Stay in the loop with our Newsletter for the latest updates

* indicates required

Popular Tag's

Connect with Dazeworks