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 -
            2025, 
            All Rights Reserved