« »

Today in this post, jsB@nk want to present to you a simple JavaScript application made by HTML5; name of this web-based JavaScript game is Asteroid, and tips to play: we just need to use the arrow keys to move your character (triangle-shape spacecraft) to avoid asteroids moving randomly on around.

Especially, this JavaScript Asteroid game is built totally with HTML5 techniques (by using canvas object) - a good JavaScript example code to help us to reach this new technology easily.

Learn more about HTML5 through other JavaScript article tutorials, other JavaScript example codes on the jsB@nk:
- JavaScript Image Rotation script with CANVAS in HTML5
- Awesome Canvas Drawer with HTML5
- HOT New JavaScript APIs with HTML5
- 12 Awesome and Creative JavaScript Games you should try

Label: HTML5 JavaScript game, JavaScript Asteroid game, JavaScript canvas game, asteroid game online, asteroid game download, JavaScript application, web-based JavaScript game, HTML5 techniques, canvas

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
CSS
JavaScript
HTML
Print

demo.html

Copy All x2

<style type="text/css"> 
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
* {
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
  -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

body {
  margin: 0px;
}
canvas {
  display: block;
  background-color: #113;
}
</style>

Copy All x2

<script type="text/javascript">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
var Vector2 = function (x,y) {
  this.x= x || 0; 
  this.y = y || 0; 
};

Vector2.prototype = {

  reset: function ( x, y ) {

    this.x = x;
    this.y = y;

    return this;

  },

  toString : function (decPlaces) {
     decPlaces = decPlaces || 3; 
    var scalar = Math.pow(10,decPlaces); 
    return "[" + Math.round (this.x * scalar) / scalar + ", " + Math.round (this.y * scalar) / scalar + "]";
  },
  
  clone : function () {
    return new Vector2(this.x, this.y);
  },
  
  copyTo : function (v) {
    v.x = this.x;
    v.y = this.y;
  },
  
  copyFrom : function (v) {
    this.x = v.x;
    this.y = v.y;
  },  
  
  magnitude : function () {
    return Math.sqrt((this.x*this.x)+(this.y*this.y));
  },
  
  magnitudeSquared : function () {
    return (this.x*this.x)+(this.y*this.y);
  },
  
  normalise : function () {
    
    var m = this.magnitude();
        
    this.x = this.x/m;
    this.y = this.y/m;

    return this;  
  },
  
  reverse : function () {
    this.x = -this.x;
    this.y = -this.y;
    
    return this; 
  },
  
  plusEq : function (v) {
    this.x+=v.x;
    this.y+=v.y;
    
    return this; 
  },
  
  plusNew : function (v) {
     return new Vector2(this.x+v.x, this.y+v.y); 
  },
  
  minusEq : function (v) {
    this.x-=v.x;
    this.y-=v.y;
    
    return this; 
  },

  minusNew : function (v) {
     return new Vector2(this.x-v.x, this.y-v.y); 
  },  
  
  multiplyEq : function (scalar) {
    this.x*=scalar;
    this.y*=scalar;
    
    return this; 
  },
  
  multiplyNew : function (scalar) {
    var returnvec = this.clone();
    return returnvec.multiplyEq(scalar);
  },
  
  divideEq : function (scalar) {
    this.x/=scalar;
    this.y/=scalar;
    return this; 
  },
  
  divideNew : function (scalar) {
    var returnvec = this.clone();
    return returnvec.divideEq(scalar);
  },

  dot : function (v) {
    return (this.x * v.x) + (this.y * v.y) ;
  },
  
  angle : function (useRadians) {
    
    return Math.atan2(this.y,this.x) * (useRadians ? 1 : Vector2Const.TO_DEGREES);
    
  },
  
  rotate : function (angle, useRadians) {
    
    var cosRY = Math.cos(angle * (useRadians ? 1 : Vector2Const.TO_RADIANS));
    var sinRY = Math.sin(angle * (useRadians ? 1 : Vector2Const.TO_RADIANS));
  
    Vector2Const.temp.copyFrom(this); 

    this.x= (Vector2Const.temp.x*cosRY)-(Vector2Const.temp.y*sinRY);
    this.y= (Vector2Const.temp.x*sinRY)+(Vector2Const.temp.y*cosRY);
    
    return this; 
  },  
    
  equals : function (v) {
    return((this.x==v.x)&&(this.y==v.x));
  },
  
  isCloseTo : function (v, tolerance) {  
    if(this.equals(v)) return true;
    
    Vector2Const.temp.copyFrom(this); 
    Vector2Const.temp.minusEq(v); 
    
    return(Vector2Const.temp.magnitudeSquared() < tolerance*tolerance);
  },
  
  rotateAroundPoint : function (point, angle, useRadians) {
    Vector2Const.temp.copyFrom(this); 
    //trace("rotate around point "+t+" "+point+" " +angle);
    Vector2Const.temp.minusEq(point);
    //trace("after subtract "+t);
    Vector2Const.temp.rotate(angle, useRadians);
    //trace("after rotate "+t);
    Vector2Const.temp.plusEq(point);
    //trace("after add "+t);
    this.copyFrom(Vector2Const.temp);
    
  }, 
  
  isMagLessThan : function (distance) {
    return(this.magnitudeSquared()<distance*distance);
  },
  
  isMagGreaterThan : function (distance) {
    return(this.magnitudeSquared()>distance*distance);
  }
  
  
  // still AS3 to convert : 
  // public function projectOnto(v:Vector2) : Vector2
  // {
  //     var dp:Number = dot(v);
  // 
  //     var f:Number = dp / ( v.x*v.x + v.y*v.y );
  // 
  //     return new Vector2( f*v.x , f*v.y);
  //   }
  // 
  // 
  // public function convertToNormal():void
  // {
  //   var tempx:Number = x; 
  //   x = -y; 
  //   y = tempx; 
  //   
  //   
  // }    
  // public function getNormal():Vector2
  // {
  //   
  //   return new Vector2(-y,x); 
  //   
  // }
  // 
  // 
  // 
  // public function getClosestPointOnLine ( vectorposition : Point, targetpoint : Point ) : Point
  // {
  //   var m1 : Number = y / x ;
  //   var m2 : Number = x / -y ;
  //   
  //   var b1 : Number = vectorposition.y - ( m1 * vectorposition.x ) ;
  //   var b2 : Number = targetpoint.y - ( m2 * targetpoint.x ) ;
  //   
  //   var cx : Number = ( b2 - b1 ) / ( m1 - m2 ) ;
  //   var cy : Number = m1 * cx + b1 ;
  //   
  //   return new Point ( cx, cy ) ;
  // }
  // 

};

Vector2Const = {
  TO_DEGREES : 180 / Math.PI,    
  TO_RADIANS : Math.PI / 180,
  temp : new Vector2()
  };
(function () {

var spareBullets = [];

window.Bullet = function (ctx, x, y, angle) {
  // this is rather nasty - so I'm not sure why I'm doing it...
  if (this === window) {
    if (spareBullets.length) {
      var bullet = spareBullets.pop();
      bullet.init(x, y, angle);
      bullet.fresh = false;
      return bullet;
    } else {
      return new Bullet(ctx, x, y, angle);
    }
  }
  
  this.ctx = ctx;

  // initialise
  this.init(x, y, angle);
  return this;
};

Bullet.prototype = {
  init: function (x, y, angle) {
    this.fresh = true;
    this.pos = new Vector2(x,y);
    this.vel = new Vector2(Bullet.speed,0);

    this.vel.rotate(angle);

    this.enabled = true;    

    // 15 is the length of the ship
    this.pos.plusEq(this.vel.clone().normalise().multiplyEq(15));    
  },
  
  checkEnabled: function ()  {
    var ctx = this.ctx;
    
    if (this.enabled == false) {
      return;
    }
    
    if (this.pos.x < 0 || this.pos.x > ctx.canvas.width) this.enabled = false;

    if (this.pos.y < 0 || this.pos.y > ctx.canvas.height) this.enabled = false;
    
    if (this.enabled == false) {
      spareBullets.push(this);
    }
  },
  
  update: function () {
    this.pos.plusEq(this.vel);     
    this.checkEnabled();
    return this;    
  },
  
  draw: function () {
    var ctx = this.ctx,
        pos = this.pos;
        
    ctx.save();
    ctx.lineWidth = 2; 
    ctx.strokeStyle = "#fff"; 
    ctx.beginPath(); 
    ctx.arc(pos.x, pos.y, 2, 0, Math.PI*2, true); 
    ctx.stroke();
    ctx.restore();
    return this;    
  }
};

// static
Bullet.speed = 5;

})();


Asteroid = function (x,y,radius)
{
  this.pos = new Vector2(x,y); 
  this.vel = new Vector2(0,0); 
  
  this.points; 
  

  this.enabled = true; 
  
  
  // temp vector to calculate distance from circle in hitTest
  this.diff = new Vector2(0,0); 
  
  this.reset = function (radius) {
    this.points = []; 
    this.radius = radius; 
    
    var temp = new Vector2(radius, 0);
    
    for (var angle = 0; angle<360; angle+= random(0, 45)) {
      temp.reset(random(radius / 2, radius),0); 
      temp.rotate(angle);
      
      this.points.push(temp.clone()); 
    }
  
    
  };
  
  this.reset(radius); 
  
  this.update = function(canvas) {
    
    this.pos.plusEq(this.vel); 

    if(this.pos.x+this.radius < 0) this.pos.x = canvas.width+this.radius; 
    else if (this.pos.x-this.radius > canvas.width) this.pos.x = -this.radius; 
      
    if(this.pos.y+this.radius < 0) this.pos.y = canvas.height+this.radius; 
    else if (this.pos.y-this.radius > canvas.height) this.pos.y = -this.radius; 
        
  };
  
  this.draw = function(ctx) {
    ctx.save(); 
    ctx.translate(this.pos.x, this.pos.y); 
    ctx.strokeStyle = "#fff";
    ctx.fillStyle = '#000';
    ctx.lineWidth = 2; 
    ctx.beginPath(); 
  
    for(var i = 0; i<this.points.length; i++) {
      
      var p = this.points[i % this.points.length]; 
      ctx.lineTo(p.x, p.y); 
      
    }
    
    ctx.closePath(); 
    ctx.fill();
    ctx.stroke();
    ctx.restore(); 
  };
  
  this.hitTest = function(x,y) {
    
    this.diff.copyFrom(this.pos); 
    this.diff.x-=x; 
    this.diff.y-=y; 
    
    var distanceSq = (this.diff.x * this.diff.x) + (this.diff.y*this.diff.y);
    return distanceSq < (this.radius * this.radius);
    
  };
  
};

ShipMoving = function(x,y) {
  this.pos = new Vector2(x,y); 
  this.angle = 0; 
  this.vel = new Vector2(0,0); 
  this.temp = new Vector2(0,0); 
  
  this.thrustPower = 0.1; 
  this.rotateSpeed = 5; 
  
  this.thrusting = false;
  this.invulnerable = false;
  this.thrustAmount = 0;
  
  this.dead = [];  

  this.update = function() {
    this.pos.plusEq(this.vel); 
  };
  
  this.thrust = function() {
    this.temp.reset(this.thrustPower,0); 

    this.temp.rotate(this.angle); 
    this.vel.plusEq(this.temp); 
  };
  
  this.rotateLeft = function() {
    this.angle -= this.rotateSpeed; 
  };
  
  this.rotateRight = function() {
    this.angle += this.rotateSpeed; 
  };
  
  this.hit = function () {
    var n = 20;
    while (n--) {
      this.dead.push(new Vector2(random(3, 6), 0));
      this.dead[this.dead.length - 1].rotate(Math.random() * Math.PI * 2, true);
    }
  };
  
  this.isdead = function () {
    return !!this.dead.length;
  };
  
  this.draw = function(c) {    
    c.save();
    c.translate(this.pos.x, this.pos.y); 
    c.rotate(this.angle * Vector2Const.TO_RADIANS);

    if (this.invulnerable == false && !this.isdead()) {
      c.lineWidth = 4; 

      if (this.thrustAmount) {
        c.beginPath();
        c.moveTo(-11, -3);
        c.lineTo(-11, 3);
        c.lineTo(-12 -this.thrustAmount, 0);
        c.closePath(); 
        c.fillStyle = 'hsla(3, 100%, 50%, 0.9)';
        c.fill();      
        c.strokeStyle = 'hsla(32, 100%, 50%, 0.7)';
        c.stroke();
      }
    
      c.lineWidth = 2; 
      c.strokeStyle = "#fff"; 
    
      c.beginPath();
      c.moveTo(-10, -10);
      c.lineTo(-10, 10);
      c.lineTo(14, 0);
      c.closePath(); 
      c.stroke();      
    } else if (this.dead.length) {
      var i = this.dead.length;
      c.lineWidth = 2; 
      c.fillStyle = 'hsla(1, 100%, 50%, 0.75)'; 
      while (i--) {
        this.dead[i].multiplyEq(1.05);

        c.beginPath();
        c.arc(this.dead[i].x, this.dead[i].y, 2, 0, Math.PI * 2, true);
        c.closePath(); 
        c.fill();
      }
    }
    
    if (this.thrusting && this.thrustAmount < 10) {
      this.thrustAmount++;
    } else if (this.thrustAmount > 0) {
      this.thrustAmount--;
    }
    
    c.restore();
  };
}; 
// canvas element and 2D context

var canvas = document.createElement('canvas'),
  c = canvas.getContext('2d'),
  touch = 'createTouch' in document;

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.body.appendChild(canvas);

c.strokeStyle = "#ffffff";

var mouseX, mouseY, 
  halfWidth = canvas.width/2, 
  halfHeight = canvas.height/2,
  bullets = [],
  spareAsteroids = [],
  ship = new ShipMoving(halfWidth, halfHeight),
  thrusting = false,
  rotateLeft = false, 
  rotateRight = false,
  grad = c.createLinearGradient(0, 0, 0, canvas.height),
  asteroids = [],
  trail = 0.85;
  

grad.addColorStop(0, 'hsla(240,80%,2%,' + trail + ')');
grad.addColorStop(1, 'hsla(240,100%,15%,' + trail + ')');

timer = setInterval(draw, 1000/35); 

for (var i = 0; i < (touch ? 5 : 10); i++) {
  asteroids.push(new Asteroid(random(0, canvas.width), random(0, canvas.height), 50));
  asteroids[i].vel.reset(1,0).rotate(random(0,360));
}


function draw() {
  c.fillStyle = '#000'; //grad;
  c.fillRect(0,0,canvas.width, canvas.height); 
  
  var bullet;
  for (var i=0; i<bullets.length; i++) {
    bullet = bullets[i];
    if (bullet.enabled) {
      bullet.update();
      bullet.draw();
    }
  }

  for (i = 0; i < asteroids.length; i++) {  
    var asteroid = asteroids[i], 
        hit = false;
    
    if (!ship.invulnerable && !ship.isdead() && asteroid.hitTest(ship.pos.x, ship.pos.y)) {
      // you lose!
      ship.hit();
    }
    
    if(!asteroid.enabled) continue; 
    
    if (!ship.isdead()) {
      for (var j = 0; j < bullets.length; j++) {
        if (bullets[j].enabled) {
          hit = asteroid.hitTest(bullets[j].pos.x, bullets[j].pos.y);
          if (hit) {
            bullets[j].enabled = false;
            break;
          }        
        }
      }      
    }
    
    if (hit) {
      if (asteroid.radius < 15) {
        asteroid.enabled = false; 
      } else {
        asteroid.reset(asteroid.radius/2);
        asteroid.vel.reset(random(-5,5),random(-5,5));
      
        makeNewAsteroid(asteroid.pos.x, asteroid.pos.y, asteroid.radius).vel.reset(random(-5,5),random(-5,5));
        makeNewAsteroid(asteroid.pos.x, asteroid.pos.y, asteroid.radius).vel.reset(random(-5,5),random(-5,5));
      }
    } else {
      asteroid.update(canvas);
      asteroid.draw(c); 
    }
  }

  if (ship.thrusting) ship.thrust(); 
  if (rotateLeft) ship.rotateLeft(); 
  if (rotateRight) ship.rotateRight(); 

  ship.update(); 

  if (ship.pos.x<0) ship.pos.x = canvas.width; 
  else if (ship.pos.x>canvas.width) ship.pos.x = 0;

  if (ship.pos.y<0) ship.pos.y = canvas.height; 
  else if (ship.pos.y>canvas.height) ship.pos.y = 0; 

  ship.draw(c);
}

function makeNewAsteroid(x, y, radius) {
  var newasteroid; 
  
  if (spareAsteroids.length > 0) {
    newasteroid = spareAsteroids.pop(); 
    newasteroid.pos.set(x, y); 
    newasteroid.radius = radius;   
  } else {
    newasteroid = new Asteroid(x, y, radius); 
    asteroids.push(newasteroid); 
  }
  
  return newasteroid;
}

function fire() {
  if (ship.isdead()) {
    return;
  }
  
  // only allow n bullets
  var limit = 5,
      i = bullets.length;
  
  while (i--) {
    if (bullets[i].enabled) {
      limit--;
    }
  }
  
  if (limit !== 0) {
    var bullet = Bullet(c, ship.pos.x, ship.pos.y, ship.angle);
    if (bullet.fresh) bullets.push(bullet);    
  }  
}

canvas.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );

document.addEventListener( 'touchstart', onTouchStart, false );
document.addEventListener( 'touchmove', onTouchMove, false );
document.addEventListener( 'touchend', onTouchEnd, false );

var swipe = [];

if (touch) {
  ship.thrustPower = 0.5;
}

function onTouchStart(e) {
  swipe = [];
  
  if (e.touches.length == 1) {
    // rotate & fire
    var v = new Vector2(e.touches[0].pageX-canvas.width/2, e.touches[0].pageY-canvas.height/2);
    ship.angle = v.angle();
    fire();
  } else if (e.touches.length == 2) {
    ship.thrusting = true;
    ship.thrust();
  } else if (e.touches.length == 3) {
    ship.invulnerable = true;
  }
}

function onTouchMove(e) {
  e.preventDefault();
} 

// window.addEventListener('devicemotion', function(event) {
//   var v = new Vector2(event.accelerationIncludingGravity.x, event.accelerationIncludingGravity.y);
//   ship.angle += v.angle() * 0.05;
// }, false);


function onTouchEnd(e) { 
  ship.thrusting = false;
  ship.invulnerable = false;
} 

function onKeyDown(e) {  
  if(e.keyCode == 38) ship.thrusting = true;
  else if (e.keyCode == 40) ship.invulnerable = true;
  else if(e.keyCode == 37) rotateLeft = true; 
  else if (e.keyCode == 39) rotateRight = true;
  else if (e.which == 32) fire();
}
function onKeyUp(e) {
  if (e.keyCode == 38) ship.thrusting = false;
  else if (e.keyCode == 40) ship.invulnerable = false;
  else if(e.keyCode == 37) rotateLeft = false; 
  else if (e.keyCode == 39) rotateRight = false;
}

function onMouseMove(event) {
  mouseX = event.offsetX;
  mouseY = event.offsetY;
}

function random(v1, v2){
  return ((Math.random()*(v2-v1))+v1);  
}

setTimeout(function () {
  window.scrollTo(1, 0);
}, 1000);
</script>

Copy All x2

<canvas height="609" width="1139"></canvas>

Comment (2)
Write

by iPhone development, 21/01/2013 05:01 PM
Reply

WOw this is a great game HTML 5 has powered the basic html and given it new heights along with javascript html 5 can be used to create and do more complex tasks than before.

by Mobile app development, 17/05/2013 06:05 PM
HTML5 Reply

Really HTML5 is playing key role in typical task.

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

AIVideo-App.com
Generate your business videos by AI with voice or just text

chatGPTaz.com
Talk to ChatGPT by your mother language

AppAIVideo
Your first FREE AI Video App

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE

Faceswap AI Online
Swap Faces Video, Photo & GIFs Instantly with Powerful AI Tools - Faceswap AI Online FREE

Temu Free $500 for New Users
Claim Free Temu $500 Credit via Affiliate & Influencer Program

Free TikTok Ads Credit
Master TikTok Ads for Your Business Marketing

Dall-E-OpenAI.com
Generate creative images automatically with AI

chatGPT4.win
Talk to ChatGPT by your mother language

First AI Product from Elon Musk - Grok/UN.com
Speak to Grok AI Chatbot with Your Language

Tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

iPhoneKer.com
Save up to 630$ when buy new iPhone 16

Buy Tesla Optimus Robot
Order Your Tesla Bot: Optimus Gen 2 Robot Today for less than $20k

Cool Domains for Sale!

chatGPT2.fun AIvideo-app.com index.services lend.services chatGPTaz.com ApexBTC.com javascriptON.com system.money CreditCard.rip CryptoKD.com gomymobi.com gomy.mobi XMQV.com ChatTotal.com war.money GrokUN.com eChainBank.com hearf.com Card.rip MetaTru.com chatGPT4.win ChainTutor.com AI-Trading-Bot.com Dall-E-OpenAI.com ABP3.com JavaScriptBank.com CTRCoin.com gomymobi.com ZWVQ.com pornID.net gomy.mobi

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

27/05/2011
Remy Sharp [more]
11,308
2
1
0
0.06 KBytes

Creative HTML5 and JavaScript Asteroid Game - JID: 2615 - Language: English

5/5 1 votes / 11,308 previews / 2 comment 27/05/2011 Today in this post, jsB@nk want to present to you a simple ...Creative HTML5 and JavaScript Asteroid Game - JID: 2615 - Creative HTML5 and JavaScript Asteroid Game - Language: English

thebartstop[3] Cao Phong babe1907

Let's be first member to do this

thebartstop