Learn Canvas and JavaScript Animation by Creating a Vertical Shooter (PLAYER MOVEMENT) – Part 4

By GavinProgramming, Technology

Stage 4: Loading and moving our player

The code for moving our player sprite is very similar to the previous enemy and landscape code except that instead of having a calculated vertical velocity the movement will be based on a the user’s mouse coordinates from the mousemove event.

Let’s start with the main function that will load and draw our player. This new playerPlane() function should be added to the end of our JavaScript code:

function playerPlane(file, x, y, width, height) {
  this.health = 3;
  this.score = 0;
  this.playerFlash = false;
  this.playerInvulnerable = false;
  this.image = new Image();
  this.image.onload = function () {
    loadProgress = loadProgress + 1;
    loadingUpdate();
  };

  this.image.src = "images/" + file;
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.xdistance = 0;
  this.ydistance = 0;
  this.xm = 0;
  this.ym = 0;
  this.xcenter = 0;
  this.ycenter = 0;
  
  this.update = function () {
    this.xcenter = this.x + this.width / 2;
    this.ycenter = this.y + this.height / 2;
    if (!this.playerFlash) {
      ctx.drawImage(this.image,this.x,this.y,this.width,this.height);
    }
  };
}

 

Meaningful variable names

One method of improving the maintainability of your source code is to use meaningful variable names and subroutine names.At one time it was fashionable to use the variables i and n since they were easy to write and were the first letters of the word integer. Programmers would the continue through the alphabet so if i was taken they would use j and so on…

Today it is more important for a company to have code that can be easily understood and readable and therefore the use of meaningful variable names is encouraged. For example, if you saw a variable in a source code that was called i or counter, which one would you have a better idea of what it was for?

In JavaScript has a number of rules that must be followed when naming variables, these are:
1) They must start with a letter
2) The rest of the name can contain letters, numbers or underscore
3) No spaces
4) Must be unique (Within the variables scope …… we’ll talk about scope later!)
5) They cannot be a reserved word (eg IF).

Naming conventions
Even though there is a lot of freedom when naming variables, in actual fact many companies that you will work for will have guidelines for naming your variables. For example beginning the variable name with a prefix such as str for a string, int for an integer and b for a boolean value. EG bFlag, strName, intCounter, dblProfit. One common procedure for naming Objects is to use a capital as the first letter, lowercase for the rest of the word, then capitals for any other words in the name. This is called CamelCase eg DiskCopy1 or RedBoat. For methods or functions the name might start with a lowercase letter but any subsequent words in the name start with capitals. EG diskCopy1 or redBoat. Other naming conventions include placing an underscore between words like Disk_Copy1.

As with our other sprites we need to add a global variable, update the number of resources and edit our gameUpdate() loop etc.
For our global variables at the start of our code add line 6 and modify line 1:

var numResources = 7;
var loadProgress = 0;
var enemy1;
var enemy2;
var enemy3;
var player;

 

In our updateGame() run loop add the player.update(); line:

function updateGame() {
  requestID = requestAnimationFrame(updateGame);
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  landscape1.update();
  landscape2.update();
  landscape3.update();
  enemy1.update();
  enemy2.update();
  enemy3.update();
  player.update();
}

 

Our window.onload function needs a bit more code added because we want to add a mousemove event listener:

window.onload = function () {
  gameCanvas = document.getElementById("gameCanvas");
  gameCanvas.width = canvasWidth;
  gameCanvas.height = canvasHeight;
  ctx = gameCanvas.getContext("2d");

  landscape1 = new landscape("island1.gif", Math.random() * canvasWidth, -50, 200, 200, 0);
  landscape2 = new landscape("island2.gif", Math.random() * canvasWidth, -300, 200, 200, 800);
  landscape3 = new landscape("island3.gif", Math.random() * canvasWidth, -500, 200, 200, 1100);

  enemy1 = new enemy("enemy1.gif", Math.random() * canvasWidth, -80, 80, 80, 2000);
  enemy2 = new enemy("enemy2.gif", Math.random() * canvasWidth, -80, 80, 80, 3000);
  enemy3 = new enemy("enemy3.gif", Math.random() * canvasWidth, -80, 80, 80, 10000);

  player=new playerPlane("myplane.gif", canvasWidth / 2, canvasHeight / 2, 100, 100);

  gameCanvas.addEventListener('mousemove', function (event) { 
    var mousePos = getMousePos(gameCanvas, event);
    player.y = mousePos.y - player.height / 2;
    player.x = mousePos.x - player.width / 2;
  }, false);
};

 

You may have noticed that we use a getMousePos() function so we need to add this at the end of our code. This does a quick calculation in case the user has zoomed the screen etc:

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x:(evt.clientX-rect.left)/(rect.right-rect.left)*canvasWidth,
    y:evt.clientY-rect.top)/(rect.bottom-rect.top)*canvasHeight
  };
}

Move on to stage 5 –>
Jump to: [Vertical Shooter Post: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 ]

 

[1] Fewer system resources because function/block variables etc. are deleted when the function or block ends.