//world
var canvas;
var ctx;
var width = 600;
var height = 600;
var starfield;
var starX = 0;
var starY = 0;
var starY2 = -600;
//scoring
var score = 0;
var goal = 20;
var alive = true;
var lives = 1;
var gameStarted = false;
//Clear the canvas, this is required before each canvas frame update
function clearCanvas() {
ctx.clearRect(0, 0, width, height);
}
//Initialize image objects, canvas, and event listeners
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
enemy = new Image();
enemy.src = 'enemy.png';
ship = new Image();
ship.src = 'mariokart.png';
starfield = new Image();
starfield.src = 'starfield.jpg';
document.addEventListener('keydown', keyDown, true);
document.addEventListener('keyup', keyUp, false);
canvas.addEventListener('click', gameStart, false);
gameLoop();
}
//Used by an event listener. Removes the overall canvas listener once game has started.
function gameStart() {
gameStarted = true;
canvas.removeEventListener('click', gameStart, false);
}
//Game loop that calls all the functions needed to be updated
function gameLoop() {
clearCanvas();
drawStarfield();
if (alive && gameStarted && lives > 0) {
hitTest();
moveEnemies();
moveLaser();
drawEnemies();
drawShip();
drawLaser();
shipCollision();
}
scoreTotal();
//game = setTimeout(gameLoop, 1000 / 30); //not sure why 'game =' is included...
setTimeout(gameLoop, 1000 / 30); //this works too...
}
//Used to draw several text and shape objects for score, lives, and pre-game information.
function scoreTotal() {
ctx.font = 'bold 18px Lobster';
ctx.fillStyle = '#FF0000';
ctx.fillText('Score: ', 10, 55);
ctx.fillText(score, 70, 55);
ctx.fillText('Lives: ', 10, 30);
ctx.fillText(lives, 68, 30);
if (!alive) {
ctx.fillText('Game Over!', 245, (height / 2));
//Continue button
ctx.fillText('Click to Continue', 236, (height / 2) + 35);
canvas.addEventListener('click', continueButton, false);
}
//Pre-Game Text
if (!gameStarted) {
ctx.font = 'bold 50px Lobster';
ctx.fillText('Mario Racer', (width / 1.85) - 150, (height / 2)); //CHANGED THE TEXT AND WIDTH TO CATER FOR THE NEW WORD PREVIOUSLY WAS 2 (WIDTH)
ctx.font = 'bold 20px BlairMdITC TT';
ctx.fillText('Click to Play' , (width / 2.35) - 56, (height / 2) + 35); //CHANGED POSTIONING OF INSTRUCTIONS ORIGINAL (W/2) -100 (H / 2)+30
ctx.fillText('Use arrow keys to move', (width / 2.7) - 100, (height / 2.8) + 270); //CHANGED POSTIONING OF INSTRUCTIONS ORIGINAL (W/2) -100 (H / 2)+60
ctx.fillText('Use the Spacebar key to shoot', (width / 3.3) - 100, (height / 2.5) + 290); //CHANGED POSTIONING OF INSTRUCTIONS ORIGINAL (W/2) -100 (H / 2) +90
}
}
//Used by an event listener. Detects if mouse click is within a specific area.
function continueButton(e) {
if (cursorPos.x > (width / 2) - 53 && cursorPos.x < (width / 2) + 47 && cursorPos.y > (height / 2) + 10 && cursorPos.y < (height / 2) + 50) {
alive = true;
lives = 3;
reset();
canvas.removeEventListener('click', continueButton, false);
}
}
//Store x and y cursor position
function cursorPosition(x, y) {
this.x = x;
this.y = y;
}
//Check lives
function checkLives() {
lives -= 1;
if (lives < 0) {
reset();
} else if (lives == 0) {
alive = false;
}
}
//Finale// This checks to see if player score is >20 if so activates finale
function finale() {
var _img = document.getElementById('finale.png');
var newImg = new Image;
newImg.onload = function() {
_img.src = 'finale.png';
}
var img= new finale.png();
img.src = 'finale.png';
img.addEventListener("load", function() {
ctx.drawImage(image, 30, 30);
}, true);
}
//Reset enemies and player back to default position
function reset() {
var enemy_reset_x = 50;
ship_x = (width / 2) - 25;
ship_y = height - 75;
ship_w = 50;
ship_h = 57;
for (var i = 0; i < enemies.length; i++) {
enemies[0] = enemy_reset_x;
enemies[1] = -45;
enemy_reset_x = enemy_reset_x + enemy_w + 60;
}
}
//Draw a continuous, scrolling starfield (using two instances)
function drawStarfield() {
ctx.drawImage(starfield, starX, starY);
ctx.drawImage(starfield, starX, starY2);
if (starY > 600) {
starY = -599;
}
if (starY2 > 600) {
starY2 = -599;
}
starY += 1;
starY2 += 1;
}
//Initialize canvas when page is loaded
window.onload = init;
