This type of game gives you some sort of launch mechanism for your HTML5 game with semi-realistic physics, and it has launched bullets (avians with anger or something else) to some sort of target.
Tanks, turrets, and shells
The most interesting thing about a game-style tank is the relationship between the tank, the turret, and the bullets it shoots.
The tank is a sprite, but the tank image does not include a turret. The turret is a separate sprite, intended to be connected to the tank and rotated on its own. When the player moves the tank, the turret moves with it. When the user rotates the turret, the turret rotates, but the tank does not.
The bullet is a third sprite, which appears when the user shoots the tank. The initial position of the bullet is determined by the position of the tank, and the initial movement angle of the bullet is determined by the angle of the turret.
Here is the code for the tank:
UserTank () function {
tTank = new Sprite (game, “greenTank.png”, 50, 25);
tTank.setSpeed (0);
tTank.setPosition (100, 550);
tTank.turret = new Sprite (game, “turret.png”, 50, 25);
tTank.bullet = new Bullet (tTank);
tTank.checkKeys = function () {
if (keysDown [K_A]) {
this.changeXby (-2);
}
if (keysDown [K_D]) {
this.changeXby (2);
}
// Always move turret with me.
this.turret.setPosition (this.x, this.y);
// Rotating turret
if (keysDown [K_W]) {
this.turret.changeImgAngleBy (-5);
if (this.turret.getImgAngle () <0) {
this.turret.setImgAngle (0);
} // End if
}
if (keysDown [K_S]) {
this.turret.changeImgAngleBy (5);
if (this.turret.getImgAngle ()> 90) {
this.turret.setImgAngle (90);
}
}
if (keysDown [K_SPACE]) {
this.bullet.fire ();
}
this.turret.update ();
this.bullet.checkGravity ();
this.bullet.update ();
} // final checkKeys
return tTank;
} // End tank
The tank design is slightly complicated by having a dependent turret sprite, and a bullet sprite. Here’s how to build this mixture of armored sprites well:
- Build the tank sprite first.
As with most examples in simpleGame, start with building a temporary sprite for the tank (called tTank).
- Build a turret sprite.
The turret is a second sprite. It is a tank property, as well as a stand-alone goblin. The turret is quite simple, so it can be a sprite warehouse. It does not have to be a complete subclass.
- Build a bullet sprite.
Each tank has a sprite and a bullet. The bullet will need some specific behavior, so it will be a subclass of the Sprite object. For now, just know that the tank will need a bullet. Note that the bullet will need to know which tank it belongs to.
- Read the keyboard.
The tank is currently set up to use the WASD keys for input.
- Move the tank left and right.
The left and right controls move the tank sprite itself. Move turret so its center is always the same as the center of the tank. This causes the turret to always move with the tank.
- Rotate the turret.
The up and down controls cause the turret to rotate. Set minimum and maximum values to keep the turret within a reasonable range of angles.
- Fire the bullet.
At the fire command (space bar by default), invoke the fire bullet method (). (Of course, you’ll need to write that in the bullet class.)
- Update the turret.
Up to now, all update () calls have occurred in the main update function (). However, the main game doesn’t really need to update the turret. Since the turret is part of the tank, updating the tank must update the turret. Since the checkKeys () method will occur every frame, update the turret to ensure it draws correctly.
- Move the bullet.
If a bullet is active, use the checkGravity () method to monitor its current course, taking gravity into account. If there is no currently active recipe, this line will be ignored.
- Update the bullet.
Again, the bullet feels like part of the tank, so it should be updated automatically.
How to build a bullet
The bullet class will be fired from a tank. The bullet is a surprisingly sophisticated class, as it requires a fire () method (which shoots the bullet based on the tank and turret situation) and a checkGravity () method (which brings the trajectory of the bullet back into space).
Here is the bullet class code:
Bullet function (owner) {
// Owner is the tank to own this bullet
tBullet = new Sprite (game, “bullet.png”, 5, 5);
tBullet.owner = owner;
tBullet.hide ();
tBullet.setBoundAction (DIE);
tBullet.fire = function () {
// Start at the center of my tank
//
Pointing in the direction of the turret tank this.setPosition (this.owner.x, this.owner.y);
this.setMoveAngle (this.owner.turret.getImgAngle ());
this.setSpeed (20);
this.show ();
} // End of fire
tBullet.checkGravity = function () {
this.addVector (180, 1);
} // End checkGravity
return tBullet;
} // End bullet
Here is the life story of a bullet in a game:
- Specify the proprietary tank.
When the game has multiple tanks they shoot each other (which he clearly needs), there should be a lot of bullets flying around. Each bullet will need to know which tank it belongs to so that it can fire from the right position in the right direction.
- Hide.
The bullet object is created right at the beginning of the game, but spends most of its life hidden invisibly. One of the first things to do is to hide the bullet so that it is visible only after it is fired.
- Set the border action to die.
Bullets typically die when they reach the end of the screen. The sprite is not removed from memory. It simply does not appear on the screen and does not respond to collisions. Setting the boundary action of DIE will cause the desired behavior.
- Fire from the position of the owner’s tank.
When the bullet is fired, place it in the position of the owner’s tank.
- Set the movement angle for the turret angle of the owner tank.
The main task of the tower is to indicate which angle is used as the initial trajectory of the projectile.
- Provide great speed of movement.
Bullets should move quickly, in order to set an initial speed of 20 pixels per frame. (Another control can be added to allow the user to change the initial speed if desired.)
- Reveal the bullet.
Call the show () bullet method to make the bullet appear on the screen.
- Check by gravity.
All this function is not gravitational compensation with the addVector () method.
