Firework test

HTML <body>

CSS <style>

JS <script> (jQuery supported)

"use strict"

function Particle(){
  var scope = this;
  this.game;
  this.drawer;
  
  this.x = 0;
  this.y = 0;
  
  this.dx = 0;
  this.dy = 0;
  
  this.life = 80;
  this.type = 1;
  
  this.color = "rgba(255, 255, 192";
}

Particle.prototype.init = function (game){
  this.game = game;
  this.drawer = game.drawer;
}

Particle.prototype.tick = function (){
  --this.life;
  if (this.life < 0){
    return false;
  }
  this.x += this.dx;
  this.y += this.dy;
  this.dy -= this.game.grav + this.dy/15;
  this.dx -= this.dx/15;
  this.draw();
  return true;
}
  
Particle.prototype.draw = function (){
  if (this.type == 1){
    //dump(this.color);
    if (this.life > 30){
      this.drawer.fillStyle = this.color+", 1)";
    } else {
      this.drawer.fillStyle = this.color+", "+Math.min(this.life/30, 1)+")";
    }
  }
  this.drawer.fillRect(this.x, this.y, 1, 1);
}

function Shot(){
  var scope = this;
  this.game;
  this.drawer;
  
  this.x = 0;
  this.y = 0;
  
  this.dx = 0;
  this.dy = 0;
  
  this.life = 0;
  this.type = 1;
  this.size = 0;
  this.draw_type = 1;
  
  this.color = "rgba(0, 0, 192";
}

Shot.prototype.init = function (game){
  this.game = game;
  this.drawer = game.drawer;
}

Shot.prototype.tick = function (){
  --this.life;
  if (this.life < 0){
    if (this.type & 1){// basic burst
      var color = "rgba("+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random());
      for (var num=0;num<this.size*20;num++){
        var partic = new Particle();
        partic.init(this.game);
        partic.x = this.x;
        partic.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*3*Math.random()/1.5;
        partic.dx = this.dx + r*Math.sin(t);
        partic.dy = this.dy + r*Math.cos(t);
        partic.life = 40 + 40*Math.random();
        partic.color = color;
        this.game.particles.push(partic);
      }
    }
    /*setTimeout(function (){
      	scope.game.audio.play_sound("pop", "firework");
      }, 500);*/
    return false;
  } else {
    if (this.type & 2){//streamer
      if (true || Math.random() < 0.1){
        var partic = new Particle();
        partic.init(this.game);
        partic.x = this.x;
        partic.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*Math.random()/5;
        partic.dx = this.dx + r*Math.sin(t);
        partic.dy = this.dy + r*Math.cos(t);
        partic.life = 20 + 20*Math.random();
        partic.color = this.color;
        this.game.particles.push(partic);
      }
    }
  }
  this.x += this.dx;
  this.y += this.dy;
  this.dy -= this.game.grav;
  this.draw();
  return true;
}

Shot.prototype.draw = function (){
  if (this.draw_type == 1){
    this.drawer.fillStyle = "rgba(255, 255, 180, 1)";
    this.drawer.beginPath();
    this.drawer.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false);
    this.drawer.fill();
    this.drawer.fillStyle = "rgba(255, 255, 255, 1)";
    this.drawer.beginPath();
    this.drawer.arc(this.x, this.y, 0.5, 0, 2 * Math.PI, false);
    this.drawer.fill();
  }
}

function Shell(){
  var scope = this;
  this.game;
  this.drawer;
  
  this.x = 0;
  this.y = 0;
  
  this.dx = 0;
  this.dy = 0;
  
  this.life = 0;
  this.type = 1;
  this.size = 0;
  this.draw_type = 0;
}

Shell.prototype.init = function (game){
  this.game = game;
  this.drawer = game.drawer;
}

Shell.prototype.tick = function (){
  --this.life;
  if (this.life < 0){
    if (this.type & 1){// basic burst
      var color = "rgba("+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random());
      for (var num=0;num<this.size*10;num++){
        var partic = new Particle();
        partic.init(this.game);
        partic.x = this.x;
        partic.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*3*Math.random()/1.5;
        partic.dx = this.dx + r*Math.sin(t);
        partic.dy = this.dy + r*Math.cos(t);
        partic.life = 40 + 40*Math.random();
        partic.color = color;
        this.game.particles.push(partic);
      }
    }
    if (this.type & 4){// basic burst
      var color = "rgba("+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random());
      for (var num=0;num<this.size*10;num++){
        var partic = new Particle();
        partic.init(this.game);
        partic.x = this.x;
        partic.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*3*Math.random()/1.5;
        partic.dx = this.dx + r*Math.sin(t);
        partic.dy = this.dy + r*Math.cos(t);
        partic.life = 40 + 40*Math.random();
        partic.color = color;
        this.game.particles.push(partic);
      }
    }
    if (this.type & 8){// basic burst
      var color = "rgba("+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random());
      for (var num=0;num<this.size*10;num++){
        var partic = new Particle();
        partic.init(this.game);
        partic.x = this.x;
        partic.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*3*Math.random()/1.5;
        partic.dx = this.dx + r*Math.sin(t);
        partic.dy = this.dy + r*Math.cos(t);
        partic.life = 40 + 40*Math.random();
        partic.color = color;
        this.game.particles.push(partic);
      }
    }
    if (this.type & 16){// basic burst
      var color = "rgba("+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random());
      for (var num=0;num<this.size*80;num++){
        var partic = new Particle();
        partic.init(this.game);
        partic.x = this.x;
        partic.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*6*Math.random()/1.5;
        partic.dx = this.dx + r*Math.sin(t);
        partic.dy = this.dy + r*Math.cos(t);
        partic.life = 40 + 40*Math.random();
        partic.color = color;
        this.game.particles.push(partic);
      }
    }
    if (this.type & 2){// multi burst
      for (var num=0;num<this.size;num++){
        var shot = new Shot();
        shot.init(this.game);
        shot.x = this.x;
        shot.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*Math.random()/2;
        shot.dx = this.dx + r*Math.sin(t);
        shot.dy = this.dy + r*Math.cos(t);
        shot.size = this.size/4;
        shot.life = 40+20*Math.random();
        shot.type = Math.floor(1+Math.random()*2);
        shot.draw_type = Math.floor(Math.random()*2);
        shot.color = "rgba("+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random());
        this.game.shots.push(shot);
      }
    }
    if (this.type & 32){// multi burst
      for (var num=0;num<this.size*2;num++){
        var shot = new Shot();
        shot.init(this.game);
        shot.x = this.x;
        shot.y = this.y;
        var t = 2*Math.PI*Math.random();
        var r = this.size*Math.random();
        shot.dx = this.dx + r*Math.sin(t);
        shot.dy = this.dy + r*Math.cos(t);
        shot.size = this.size/4;
        shot.life = 40+20*Math.random();
        shot.type = Math.floor(1+Math.random()*2);
        shot.draw_type = Math.floor(Math.random()*2);
        shot.color = "rgba("+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random())+", "+Math.ceil(255-200*Math.random());
        this.game.shots.push(shot);
      }
    }
    setTimeout(function (){
      g.audio.play_sound("firework", "firework");
    }, 500);
    return false;
  }
  this.x += this.dx;
  this.y += this.dy;
  this.dy -= this.game.grav;
  this.draw();
  return true;
}

Shell.prototype.draw = function (){
  if (this.draw_type == 0){
    this.drawer.fillStyle = "rgb(255, 255, 192)";
    this.drawer.fillRect(this.x, this.y, this.size/4, this.size/4);
  }
}

var g = new game();

$(function (){
  g.init();
  g.start();
  $("#audio_control").on("click touchend", function (){
    if ($("#audio_control").hasClass("control_off")){
    	$("#audio_control").removeClass("control_off");
      g.set_audio(0.2);
    } else {
    	$("#audio_control").addClass("control_off");
      g.set_audio(0);
    }
  }).trigger("click");
  $("#canvas").on("click touchstart", function (e){
    if (e.originalEvent.touches && e.originalEvent.touches[0])
      e = e.originalEvent.touches[0];
  	g.fire_shell(e.clientX, -Math.log(($(window).height()-e.clientY)/15)*1.8);
  });
});

Give us some feedback, any feedback, we just want feedback!

Firework test

Branch Project