Game Obstacles

---

Push the buttons to move the red square:

var myGameArea;
var myGamePiece;
var myObstacles = ;

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.pause = false;
this.frameNo = 0;
this.start = function() {
this.interval = setInterval(updateGameArea, 20);
}
this.stop = function() {
clearInterval(this.interval);
this.pause = true;
}
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.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom otherbottom) || (myright otherright)) {
crash = false;
}
return crash;
}
}

function updateGameArea() {
var x, y, min, max, height, gap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
}
}
if (myGameArea.pause == false) {
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(100)) {
x = myGameArea.canvas.width;
y = myGameArea.canvas.height - 100;
min = 20;
max = 100;
height = Math.floor(Math.random()*(max-min+1)+min);
min = 50;
max = 100;
gap = Math.floor(Math.random()*(max-min+1)+min);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
myGamePiece.update();
}
}

function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}

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();

---

Add Some Obstacles

Now we want to add some obstacles to our game.

Add a new component to the gaming area. Make it green, 10px wide, 200px high,
and place it 300px to the right and 120px down.

Also update the obstacle component in every frame:

---

---

Hit The Obstacle = Game Over

In the example above, nothing happens when you hit the obstacle. In a game,
that is not very satisfying.

How do we know if our red square hits the obstacle?

Create a new method in the component constructor, that checks if the
component crashes with another component. This method should be called every
time the frames updates, 50 times per second.

Also add a stop() method to the myGameArea object,
which clears the 20 milliseconds interval.

---

Moving Obstacle

The obstacle is of no danger when it is static, so we want it to move.

Change the property value of myObstacle.x at
every update:

---

Multiple Obstacles

How about adding multiple obstacles?

For that we need a property for counting frames, and a method for execute something at a given frame rate.

The everyinterval function returns true if the current framenumber
corresponds with the given interval.

To define multiple obstacles, first declare the obstacle variable as an
array.

Second, we need to make some changes in the updateGameArea function.

In the updateGameArea function we must loop through every obstacle to see if
there is a crash. If there is a crash, the updateGameArea function
will stop, and no more drawing is done.

The updateGameArea function counts frames and adds an obstacle for every
150th
frame.

---

Obstacles of Random Size

To make the game a bit more difficult, and fun, we will send in obstacles of random sizes, so that the red square must move up and down to
not crash.