Game Controllers

---

Push the buttons to move the red square:

var myGameArea;
var myGamePiece;

function startGame() {
myGameArea = new gamearea();
myGamePiece = new component(30, 30, "red", 10, 75);
myGameArea.start();
}

function gamearea() {
this.canvas = document.createElement("canvas");
this.canvas.width = 320;
this.canvas.height = 180;
document.getElementById("canvascontainer").appendChild(this.canvas);
this.context = this.canvas.getContext("2d");
this.start = function() {
this.interval = setInterval(updateGameArea, 20);
}
this.clear = function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}

function updateGameArea() {
myGameArea.clear();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
myGamePiece.update();
}

function moveup(e) {
myGamePiece.speedY = -1;
}

function movedown() {
myGamePiece.speedY = 1;
}

function moveleft() {
myGamePiece.speedX = -1;
}

function moveright() {
myGamePiece.speedX = 1;
}

function clearmove(e) {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
startGame();

---

Get in Control

Now we want to control the red square.

Add four buttons, up, down, left, and right.

Write a function for each button to move the component in the selected
direction.

Make two new properties in the component constructor, and call them
speedX
and speedY. These properties are being used as speed indicators.

Add a function in the component constructor, called
newPos(), which uses the speedX and speedY
properties to change the component's position.

The newpos function is called from the updateGameArea function before drawing
the component:

---

---

Stop Moving

If you want, you can make the red square stop when you release a button.

Add a function that will set the speed indicators to 0.

To deal with both normal screens and touch screens, we will add code for both
devices:

---

Keyboard as Controller

We can also control the red square by using the arrow keys on the keyboard.

Create a method that checks if a key is pressed, and set the key
property of the myGameArea object to the key code. When the key is
released, set the key property to false:

Then we can move the red square if one of the arrow keys are pressed:

---

Multiple Keys Pressed

What if more than one key is pressed at the same time?

In the example above, the component can only move horizontally or vertically.
Now we want the component to also move diagonally.

Create a
keys array for the myGameArea object, and insert one element
for each key that is pressed, and give it the value true , the
value remains true untill the key is no longer pressed, the value becomes
false in the keyup event listener function:

---

Using The Mouse Cursor as a Controller

If you want to control the red square by using the mouse cursor,
add a method in myGameArea object that updates the x and y
coordinates of the mouse cursor:.

Then we can move the red square using the mouse cursor:

---

Touch The Screen to Control The Game

We can also control the red square on a touch screen.

Add a method in the myGameArea object that uses the x and y coordinates of where
the screen is touched:

 Then we can move the red square if the user touches the screen,
by using the same code as we did for the mouse cursor:

---

Controllers on The Canvas

We can also draw our own buttons on the canvas, and use them as controllers:

Add a new function that figures out if a component, in this case a button, is clicked.

Start by adding event listeners to check if a mouse button is clicked (mousedown and mouseup).
To deal with touch screens, also add event listeners to check if the screen is
clicked on (touchstart and touchend):

Now the myGameArea object has properties that tells us the x-
and y-coordinates of a click. We use these properties to check if the click was
performed on one of our blue buttons.

The new method is called clicked, it is a method of the
component constructor, and it checks if the
component is being clicked.

 In the updateGameArea function, we take the neccessarry actions
if one of the blue buttons is clicked: