Belajar HTML5 Dan Canvas Membuat Bola Api Luncur

Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
Belajar HTML5 Dan Canvas Membuat Bola Api Luncur

Labkom99.com Pada kesempatan kali ini Belajar Canvas HTML5 Membuat Bola Api Luncur Keren. Canvas adalah hal yang sangat penting dan berguna dalam HTML5. Kita dapat menggambar elemen sesuka hati di Canvas seperti halnya membuat Flash. Seperti halnya kita bermain pain ball hanya saja bola yang digunakan menggunakan bola api bisa melambung dan diarahkan sesuai keinginan dibrowser. Baik kita jabarkan source codenya

Baca Juga : Belajar HTML5 dan Canvas Membuat Animasi Lingkaran

Alat / Bahan Baku

Notepad

Perhatian

Read More

Untuk membuat animasi dengan canvas pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas pada pembahasan Bagaimana Cara Membuat Template HTML

Belajar Canvas HTML5 Membuat Bola Api Luncur Keren

  1. Membuat Kode CSS

Cukup letakkan tag kanvas di halaman dan berikan CSS sederhana

canvas{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  cursor: crosshair;
}

2. Menempatkan Kode JS

Karena ini adalah animasi dua dimensi, Maka menggunakan metode getContext kanvas untuk mengembalikan objek yang berisi API untuk operasi animasi dua dimensi.

canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');

3. Membuat Partikelnya

Pada bagian ini berfungsi untuk menentukan arah kemana bola api akan di luncurkan

particles = {};
newParticle = (function(){
  var nextIndex = 0;
  return function(x,y,r,o,c,xv,yv,rv,ov){
    particles[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      r: r,
      o: o,
      c: c,
      xv: xv,
      yv: yv,
      rv: rv,
      ov: ov
    };
  };
})
();

4. Mendefinisikan Bola Api

Di sini code mewakili siklus hidup bola api. Di bawah ini kita dapat melihat bahwa nilai kehidupan akan berubah dengan kekuatan tembakan bola api.

fireballs = {};
newFireball = (function(){
  var nextIndex = 0;
  return function(x,y,xv,yv,life){
    fireballs[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      xv: xv,
      yv: yv,
      life: life
    };
  };
})
();

5. Membuat Sentuhan Tarikan Mouse

Berikutnya adalah menentukan mouse untuk menarik katapel siap untuk menembakkan bola api. Dapat dilihat bahwa ketika tombol mouse muncul maka bola api baru terbuat dan siap untuk meluncur

mouse = {x:0,y:0,d:0};
onmousemove = function(e){
  mouse.x = e.clientX-o.x;
  mouse.y = e.clientY-o.y;
  var dx = mouse.x - pos1.x,
      dy = mouse.y - pos1.y;
  mouse.d = Math.sqrt(dx*dx+dy*dy);
};
 

charging = false;
pos1 = {x:0,y:0};
showInstructions = true;
onmousedown = function(e){
  pos1.x = mouse.x;
  pos1.y = mouse.y;
  charging = true;
  showInstructions = false;
};

onmouseup = function(){
  if(charging){
    newFireball(
      mouse.x,
      mouse.y,
      (pos1.x-mouse.x)*0.03,
      (pos1.y-mouse.y)*0.03,
    );
    charging = false;
  }
};

5. Membuat Animasi Bola Api 

Berikut adalah kode untuk animasi ketika bola api bergerak, termasuk efek pantulan ketika menyentuh tepi browser

Baca JugaBelajar HTML + CSS: Membuat Berbagai Bentuk ” Shape ” Dengan HTML dan CSS3

time = 0;
requestAnimationFrame(loop = function(){
  ctx.setTransform(1,0,0,1,0,0);
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 1;
  ctx.fillStyle = bgColor;
  ctx.fillRect(0,0,width,height);
  ctx.translate(o.x,o.y);
  if(charging){
    var c = Math.floor(30+mouse.d/2);
    ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(pos1.x,pos1.y);
    ctx.lineTo(mouse.x,mouse.y);
    ctx.lineCap = 'round';
    ctx.stroke();
  }
  if(showInstructions){
    pos1.x = -70;
    pos1.y = -35;
 
    if(time<10){
      var x = -70,
          y = -35,
          r = 30-time*2,
          a = time/10;
    }else if(time<80){
      var x = (time-10)*2-70,
          y = (time-10)-35,
          r = 10,
          a = 1;
    }else if(time<90){
      var x = 70,
          y = 35,
          r = 10+(time-80)*2,
          a = 1-(time-80)/10;
    }else if(time<140){
      var x = 70,
          y = 35,
          r = 30,
          a = 0;
    }
    var dx = pos1.x-x,
        dy = pos1.y-y,
        d = Math.sqrt(dx*dx+dy*dy);
    if(time<80&&time>10){
      ctx.globalCompositeOperation = 'source-over';
      ctx.globalAlpha = 1;
      var c = Math.floor(30+d/2);
      ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)';
      ctx.lineWidth = 4;
      ctx.beginPath();
      ctx.moveTo(pos1.x,pos1.y);
      ctx.lineTo(x,y);
      ctx.lineCap = 'round';
      ctx.stroke();
    }
    if(time<140){
      ctx.globalCompositeOperation = 'source-over';
      ctx.globalAlpha = a;
      ctx.beginPath();
      ctx.arc(x,y,r,0,Math.PI*2);
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#aaa';
      ctx.stroke();
    }
    if(time==80){
      newFireball(
        x,
        y,
        dx*0.03,
        dy*0.03,
      );
    }
    time = (time+1)%180;
  }
  ctx.globalCompositeOperation = 'lighter';
  for(var i in particles){
    var p = particles[i];
    ctx.beginPath();
    ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
    ctx.globalAlpha = p.o;
    ctx.fillStyle = p.c;
    ctx.fill();
  }
  for(var i in particles){
    var p = particles[i];
    p.x += p.xv;
    p.y += p.yv;
    p.r += p.rv;
    p.o += p.ov;
    if(p.r<0)delete particles[p.index];
    if(p.o<0)delete particles[p.index];
  }
  for(var i in fireballs){
    f = fireballs[i];
    var numParticles = Math.sqrt(f.xv*f.xv+f.yv*f.yv)/5;
    if(numParticles<1)numParticles=1;
    var numParticlesInt = Math.ceil(numParticles),
        numParticlesDif = numParticles/numParticlesInt;
    for(var j=0;j<numParticlesInt;j++){
      newParticle(
        f.x-f.xv*j/numParticlesInt,
        f.y-f.yv*j/numParticlesInt,
        7,
        numParticlesDif,
        particleColor,
        Math.random()*0.6-0.3,
        Math.random()*0.6-0.3,
        -0.3,
        -0.05*numParticlesDif
      );
    }
    f.x += f.xv;
    f.y += f.yv;
    f.yv += gravity;
    var boundary;
    if(f.y<(boundary = edge.top+7)){
      f.y = boundary;
      f.yv *= -1;
    }else if(f.y>(boundary = edge.bottom-7)){
      f.y = boundary;
      f.yv *= -1;
    }
    if(f.x>(boundary = edge.right-7)){
      f.x = boundary;
      f.xv *= -1;
    }else if(f.x<(boundary = edge.left+7)){
      f.x = boundary;
      f.xv *= -1;
    }
    if(--f.life<0)delete fireballs[f.index];
  }
  requestAnimationFrame(loop);
});

Hasilnya seperti pada vidio berikut ini

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *