NaN.

Hands-on Project: Build Pocket Tanks using Javascript and HTML5 Canvas — Part 1: Setting up

Overview

During this Pocket Tanks Project, we will build a clone of the Pocket Tanks mobile app using Javascript and HTML5 Canvas.

Project Goals

Learn about HTML5 Canvas
Practice Javascript Objects
Get familiar with Event handlers and functions
Use Physics in real world applications and get a flare of Game Development

Our final project will look like this :

The multiplayer game starts with a random terrain and two tanks opposite to each other. User can move the tank by clicking the move buttons, set the angle of nozzle of the tank using + and - angle buttons, set the power using the power slider and attack by clicking on the fire button. On hitting the other player's tank, scores of the attacker will be updated. Both players will be given 10 shots to fire and in the end the player with highest score will win.

File Structure

For this project we will have the following files:

index.html
css (folder)

app.css
images (folder) Download images for the project here

javascript (folder)

terrain.js
tanks.js
fire.js
playerScores.js
eventListeners.js
main.js

Step 1: Set up the HTML file

We will start by creating the HTML template for our project i.e. index.html.

You probably know HTML from our Learn HTML & CSS course. If not don’t worry you can go and checkout and learn the basics of HTML and CSS here. We have linked our app.css file in the <head></head> and all our javascripts file at the bottom of body in the script tag.

<html>
<head>
  <title>Pocket Tanks</title>
  <link rel="shortcut icon" href="css/images/tanktop.ico">
  <link rel="stylesheet" type="text/css" href="css/app.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<canvas></canvas>
<div id="stats">
  <div class="player statBox">
    <p>Player : <br> <span id="name1">Player_1</span><br><p>Score : <span id="score1">0</span></p></p>
  </div>
  <div id="move" class="statBox">
    <p>Move</p>
    <button>&#8249;</button>
    <button>&#8250;</button>
  </div>
  <div id="fireAndPower">
    <button class="statBox">FIRE</button>
    <div id="power">
      <p>Power  : <input type="text" name="power" value=50></p>
      <div class="slidecontainer">
        <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
      </div>
    </div>
  </div>
 
  <div id="angle" class="statBox">
    <p>Angle</p>
    <button><i class="material-icons">add</i></button>
    <input type="text" name="angle_val" value=50>
    <button><i class="material-icons">remove</i></button>
  </div>
  
  <div class="player statBox" id="player2">
    <p>Player : <br> <span id="name2">Player_2</span><br><p>Score : <span id="score2">0</span></p></p>
  </div>
</div>
 
<div id="winnerBox">
  <span>Winner Name!</span>  
  <br>
  <button>Play Again?</button>
</div>
 
<script type="text/javascript" src="js/terrain.js"></script>
<script type="text/javascript" src="js/tanks.js"></script>
<script type="text/javascript" src="js/fire.js"></script>
<script type="text/javascript" src="js/eventListeners.js"></script>
<script type="text/javascript" src="js/playerScores.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html

There are a few other link tags inside <head></head> tag, one of them is for including google material icons to our project. The other link tag with rel="shortcut icon" is for the small little icon which you see next to the title of your project in your browser toolbar.

The HTML <canvas> element is used to draw graphics on a web page. The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images as we've seen in this course so far.

Your project should look like this after adding HTML. It's not very interesting right now, but we'll get there soon.

Step 2: Set up the CSS file

Let’s add some css now. If you are not familiar with CSS, you can go through our tutorials on CSS in Learn HTML & CSS course.

body{
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  height: 100vh;
  width: 100vw;
      background-size: cover;
}
 
canvas
{
    width: 100%;
    height: 80%;
    background:url(images/clouds.png) repeat-x;
    background-size:cover;
}
 
#stats
{
    background: url('images/statBackground.jpg');
    background-size: cover;
    height: 20%;
}
 
.statbox{
    margin-top: 1%;
    margin-left: 2%;
    float: left;
    background: linear-gradient(to right, #0074D9 , black);
    border: 0px solid gray;
    border-radius: 25px;
    color: white;
    box-shadow: 0 4px 8px 0 rgba(255,255,255,0.2);
    transition: 0.3s;
}
 
.statbox:hover {
    box-shadow: 0 8px 16px 0 rgba(255,255,255,0.2);
}
 
.player{
    height: 70%;
    width: 10%;
    padding-top: 15px;
    padding-left: 20px;
    font-size: 20px;
}
 
.player:nth-of-type(1){
    margin-left: 23%;
}
 
#name1,#name2{
    position: relative;
    top: 10px;
}
 
.player p:nth-of-type(1){
    margin: 0;
    padding: 0;
}
 
#move{
    width: 6%;
    text-align: center;
    height: 50%;
    padding-top: 8px;
}
 
#move p{
    margin: 3px;
}
 
#move button{
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    color: black;
    background-color: #f1f1f1;
    border: 0px solid black;
    top: 12px;
    height: 35%;
    width: 30%;
}
 
#move button:hover{
    background-color: #ccc;
}
 
#move button:active{
    background-color: #ccc; 
    animation: bounceleft .3s alternate ease infinite;
}
 
#move button+button:active{
    background-color: #ccc; 
    animation: bounceright .3s alternate ease infinite;
}
 
button:focus{outline: 0;}
 
#fireAndPower{
    width: 8%;
    float: left;
    margin-top: 1%;
    margin-left: 2%;
}
 
#fireAndPower button{
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    height: 28%;
    background: linear-gradient(to right, red , black);
    box-shadow: 0 9px #999;
    transition: initial;
}
 
#fireAndPower button:hover{
    background: linear-gradient(to right, #cc0000, black);
}
 
#fireAndPower button:active{
    background-color: #cc0000;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}
 
#angle{
    width: 7%;
    text-align: center;
    height: 50%;
    padding-top: 5px;
}
 
#angle button{
    margin: 0;
    padding: 0;
    margin-top: 5%;
    font-size: 100%;
    width: 25%;
    height: 25%;
    color: white;
    cursor: pointer;
    border:none;
    background: none;
}
 
#angle input{
    vertical-align: top;
    background: none;
    border: none;
    margin: 0;
    margin-top: 10%;
    padding: 0;
    width: 25%;
    height: 25%;
    font-size: 100%;
    color: white;
    text-align: center;
}
 
#angle p{
    margin: 0;
    margin-top: 10px;
}
 
#power p{
    margin: 0;
    font-size: 100%;
}
 
#power{
    width: 105%;
    text-align: center;
    height: 40%;
    padding-top: 8px;
    margin-top: 53%;
 
    background: linear-gradient(to right, #0074D9 , black);
    border: 0px solid gray;
    border-radius: 25px;
    color: white;
    box-shadow: 0 4px 8px 0 rgba(255,255,255,0.2);
    transition: 0.3s;
}
 
#power input[type="text"]{
    position: relative;
    background: none;
    border: none;
    width: 25%;
    height: 28%;
    font-size: 98%;
    color: white;
    text-align: center;
}
 
.slidecontainer{
    position: relative;
    top: 20%;
    width: 90%;
    margin: 0 auto;
}
 
.slider{
    -webkit-appearance: none;
    width: 90%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
 
.slider:hover {
    opacity: 1;
}
 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #202020;
    cursor: pointer;
}
 
#winnerBox{
    display: none;
    background: rgba(255,255,255,0.9);
    position: relative;
    text-align: center;
    font-size: 50px;
    width: 30%;
    margin: 0 auto;
    top: 25%;
    padding: 5%;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
}
 
#winnerBox button {
    background: none;
    color: black;
    border: 1px solid #EB4D4D;
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s, color 0.3s;
}
 
#winnerBox button:hover { background: #EB4D4D; color: white; }
#winnerBox button:focus { outline: none; }
 
@-webkit-keyframes bounceright {
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(8px); }
}
 
@-webkit-keyframes bounceleft {
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(-8px); }
}
 
@-webkit-keyframes clouds {
    from{ background-position: 0px; }
    to{ background-position: -1200px; }
}

Notice that we have set the display property of the div with id winnerBox to none. We will use that later to show the winner of the game.

After adding this css to your app.css file, now your project should look like this :

Step 3: Set up the Javascript file

Now we will add Javascript to our project. Before moving ahead we should strategize what we want to do and then implement it. Below are the main objectives that we want to achieve :

Draw a random terrain everytime we play
Place two tanks: one each for both players
Implement Firing functionality
Add Event Listeners to buttons and slider so that they actually work
Update scores and winningState

We’ll start by creating a random terrain in the next part.

Category: Web Development