Simple JavaScript Game
This example shows how a simple game can be written in JavaScript.
tera.js
var gameTop = 200;
var gameWdth = 700;
var gameHght = 300;
var numalien = 10;
var nummis = 10;
var score = 0;
var dispStart= 0;
var dispEnd = gameWdth;
var scale = Math.floor(gameHght / 3);
var blkWdth = Math.floor(gameWdth / scale);
var numblks = Math.floor(gameWdth / blkWdth);
var maxSpeed = 50;
var offset = 0;
var offsetLim= 100;
var ship = null;
var land = null;
var objs = new Array();
var mile = new Array();
var nxtmis = 0;
var alienF = "tera-alien.gif";
var shipF = "tera-ship.gif";
var missL = "tera-rk-l.gif";
var missR = "tera-rk-r.gif";
var timer = null;
function setH(o, v) { o.style.height = v + "px"; }
function setY(o, v) { o.style.top = v + "px"; }
function setX(o, v) { o.style.left = (v - dispStart) + "px"; }
function setV(o, v) {
o.style.visibility = v ? "visible" : "hidden";
}
function setImage(o, f, w, h) {
o.innerHTML =
"<img src=\"" + f + "\" width=" + w + "px height=" + h + "px>";
}
function actor(e) {
function P_setH(v) { setH (this.htmlElem, v); }
function P_setY(v) { setY (this.htmlElem, v); }
function P_setX(v) { setX (this.htmlElem, v); }
function P_setV(v) { setV (this.htmlElem, v); }
function P_setI(f) { setImage(this.htmlElem, f, this.width, this.height); }
function P_motionX(v) {
return v + this.speed;
}
function P_motionY(v) {
return ++v;
}
function P_crash(retain, obj) {
this.crashed = true;
if (!retain)
this.visible = false;
}
function P_move() {
if (this.htmlElem == null)
return;
if (this.speed > 0)
--this.speed;
else
++this.speed;
if (this.fuel > 0)
--this.fuel;
if (this.fuel == 0)
this.crash(this.retain, null);
if (!this.crashed) {
if (this.visible && this.alt > (gameHght - terrainHeight(this.xpos)) )
this.crash(this.retain, null);
if (this.alt < this.height/2)
this.alt = this.height/2;
if ((this.xpos < (dispStart + this.width)) ||
(this.xpos > (dispEnd - this.width)))
this.visible = false;
else
this.visible = true;
for (var i = 0; i < objs.length; i++) {
if ((objs[i] == this) || objs[i].crashed)
continue;
if (objs[i].type == this.type)
continue;
if ((Math.abs(this.xpos - objs[i].xpos) < this.width) &&
(Math.abs(this.alt - objs[i].alt) < this.height)) {
this.crash(this.retain || objs[i].retain, objs[i]);
objs[i].crash(this.retain || objs[i].retain, this);
}
}
}
this.setV(this.visible);
this.setX(this.xpos - this.width/2);
this.setY(this.alt - this.height/2);
if (!this.crashed) {
this.alt = this.motionY(this.alt );
this.xpos = this.motionX(this.xpos);
}
}
this.setH = P_setH;
this.setY = P_setY;
this.setX = P_setX;
this.setV = P_setV;
this.setImage = P_setI;
this.crash = P_crash;
this.move = P_move;
this.motionX = P_motionX;
this.motionY = P_motionY;
this.alt = 0;
this.xpos = 0;
this.dir = 1;
this.fuel = 0;
this.speed = 0;
this.value = 0;
this.width = Math.floor(0.3 * scale);
this.height = Math.floor(0.3 * scale);
this.retain = false;
this.crashed = false;
this.visible = false;
this.htmlElem = e || null;
this.type = "actor";
}
function missile(e) {
function P_crash(retain, obj) {
if (obj)
score += obj.value;
this.crashed = true;
if (!retain)
this.visible = false;
}
this.crash = P_crash;
this.height = Math.floor(0.15 * scale);
this.htmlElem = e || null;
this.type = "missile";
}
missile.prototype = new actor();
function alien(e) {
function P_motionX(v) {
return v + Math.floor(Math.random() * 30) - 15;
}
function P_motionY(v) {
v = v + Math.floor(Math.random() * 16) - 8;
if (v > (gameHght - terrainHeight(this.xpos)) )
v -= this.height;
return v;
}
function P_crash(retain, obj) {
if (!this.crashed)
--numalien;
this.crashed = true;
if (!retain)
this.visible = false;
}
this.motionX = P_motionX;
this.motionY = P_motionY;
this.crash = P_crash;
this.alt = 100;
this.fuel = -1;
this.xpos = Math.floor(Math.random() * gameWdth);
this.value = 200;
this.visible = true;
this.htmlElem = e || null;
this.type = "alien";
this.setImage(alienF);
if (Math.abs(this.xpos - ship.xpos) < 100)
this.xpos += 200;
}
alien.prototype = new actor();
function terrainHeight(x) {
var r = (x * 0.0025) % (2 * Math.PI);
var height = Math.sin(r);
height += 0.25 * Math.cos(3 * r);
height += 0.3 * Math.sin(5 * r);
height = Math.floor(height * scale);
height = Math.abs(height);
if (height < 30) height = 30;
return height;
}
function f() {
dispStart = ship.xpos + offset - gameWdth/2;
dispEnd = dispStart + gameWdth;
for (var i = 0; i < numblks; i++) {
var h = terrainHeight(dispStart + blkWdth*i);
setH(land[i], h);
setY(land[i], gameHght - h);
}
if (ship.dir == 1) {
if (offset < gameWdth/2 - offsetLim)
offset += blkWdth;
}
else {
if (offset > offsetLim - gameWdth/2)
offset -= blkWdth;
}
for (var i = 0; i < objs.length; i++)
objs[i].move();
var s = document.getElementById("score");
s.innerHTML = "Score: " + score;
var d = document.getElementById("alienCount");
d.innerHTML = "Aliens: " + numalien;
if (ship.crashed || numalien <= 0)
clearInterval(timer);
if (ship.crashed)
alert("You Crashed!");
if (numalien == 0)
alert("You saved the world!!!");
}
© Andrew Scott 2006 -
2023,
All Rights Reserved