Game Score







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



Game Score



❮ Previous
Next ❯



Push the buttons to move the red square:
















var myGameArea;
var myGamePiece;
var myObstacles = ;
var myscore;

function restartGame() {
document.getElementById("myfilter").style.display = "none";
document.getElementById("myrestartbutton").style.display = "none";
myGameArea.stop();
myGameArea.clear();
myGameArea = {};
myGamePiece = {};
myObstacles = ;
myscore = {};
document.getElementById("canvascontainer").innerHTML = "";
startGame()
}

function startGame() {
myGameArea = new gamearea();
myGamePiece = new component(30, 30, "red", 10, 75);
myscore = new component("15px", "Consolas", "black", 220, 25, "text");
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, type) {

this.type = type;
if (type == "text") {
this.text = color;
}
this.score = 0; this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
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();
document.getElementById("myfilter").style.display = "block";
document.getElementById("myrestartbutton").style.display = "block";
return;
}
}
if (myGameArea.pause == false) {
myGameArea.clear();
myGameArea.frameNo += 1;
myscore.score +=1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
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();
}
myscore.text="SCORE: " + myscore.score;
myscore.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();



Count The Score


There are many ways to keep the score in a game, we will show you how to
write a score onto the canvas.


First make a score component:




Example



var myGamePiece;
var myObstacles = ;
var myScore;

function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 160);
  myScore = new component("30px", "Consolas", "black", 280, 40, "text");
  myGameArea.start();
}




The syntax for writing text on a canvas element is different from drawing a rectangle.
Therefore we must call the component constructor using an additional argument,
telling the constructor that this component is of type "text".



In the component constructor we test if the component is of type "text", and use the
fillText method instead of the fillRect method:




Example



function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (this.type == "text") {
      ctx.font = this.width + " " + this.height;
      ctx.fillStyle = color;
      ctx.fillText(this.text, this.x, this.y);
    } else {
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
...
}










googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });






At last we add some code in the updateGameArea function that writes the score
onto the canvas. We use the frameNo property to count the score:



Example



function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            myGameArea.stop();
            return;
        }
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        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].speedX = -1;
        myObstacles[i].newPos();
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();

    myGamePiece.update();
}

Try it Yourself »






❮ Previous
Next ❯

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?