Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
Labkom99.com – Canvas adalah hal yang sangat penting dan berguna dalam HTML5. Kita dapat menggambar elemen sesuka hati di Canvas seperti halnya membuat Flash. Pada kesempatan kali ini Belajar HTML5 Dan Canvas Membuat Bola Api Luncur. 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
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
- Membuat Kode CSS
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
cursor: crosshair;
}
- Menempatkan Kode JS
canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');
- Membuat Partikelnya
Pada bagian ini berfungsi untuk menentukan arah kemana bola api akan di luncurkan
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
};
};
})
();
- 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.
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
};
};
})
();
- 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
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;
}
};
- Membuat Animasi Bola Api
Berikut adalah kode untuk animasi ketika bola api bergerak, termasuk efek pantulan ketika menyentuh tepi browser
Baca Juga : Belajar HTML + CSS: Membuat Berbagai Bentuk ” Shape ” Dengan HTML dan CSS3
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
Baca Juga : Belajar HTML Dan CSS Membuat Menu Navigasi Horizontal
Dan dibawah ini adalah full sourcodenya
<html>
<head>
<meta charset=”UTF-8″>
<title>Labkom99.com – HTML5 Canvas</title>
<style>
canvas{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
cursor: crosshair;
}
</style>
<script >
(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!==”stylesheet”||t.hasAttribute(“data-noprefix”))return}catch(n){return}var r=t.href||t.getAttribute(“data-href”),i=r.replace(/[^/]+$/,””),s=(/^[a-z]{3,10}:/.exec(i)||[“”])[0],o=(/^[a-z]{3,10}://[^/]+/.exec(i)||[“”])[0],u=/^([^?]*)??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function(){f.readyState===4&&l()},l=function(){var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url(s*?((?:”|’)?)(.+?)1s*?)/gi,function(e,t,n){return/^([a-z]{3,10}:|#)/i.test(n)?e:/^///.test(n)?’url(“‘+s+n+'”)’:/^//.test(n)?’url(“‘+o+n+'”)’:/^?/.test(n)?’url(“‘+u+n+'”)’:’url(“‘+i+n+'”)’});var r=i.replace(/([\^$*+[]?{}.=!:(|)])/g,”\$1″);n=n.replace(RegExp(“\b(behavior:\s*?url\(‘?”?)”+r,”gi”),”$1″)}var l=document.createElement(“style”);l.textContent=n,l.media=t.media,l.disabled=t.disabled,l.setAttribute(“data-href”,t.getAttribute(“href”)),a.insertBefore(l,t),a.removeChild(t),l.media=t.media}};try{f.open(“GET”,r),f.send(null)}catch(n){typeof XDomainRequest!=”undefined”&&(f=new XDomainRequest,f.onerror=f.onprogress=function(){},f.onload=l,f.open(“GET”,r),f.send(null))}t.setAttribute(“data-inprogress”,””)},styleElement:function(t){if(t.hasAttribute(“data-noprefix”))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t),t.disabled=n},styleAttribute:function(t){var n=t.getAttribute(“style”);n=e.fix(n,!1,t),t.setAttribute(“style”,n)},process:function(){t(“style”).forEach(StyleFix.styleElement),t(“[style]”).forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i<e.fixers.length;i++)t=e.fixers[i](t,n,r)||t;return t},camelCase:function(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace(“-“,””)},deCamelCase:function(e){return e.replace(/[A-Z]/g,function(e){return”-“+e.toLowerCase()})}};(function(){setTimeout(function(){},10),document.addEventListener(“DOMContentLoaded”,StyleFix.process,!1)})()})(),function(e){function t(e,t,r,i,s){e=n[e];if(e.length){var o=RegExp(t+”(“+e.join(“|”)+”)”+r,”gi”);s=s.replace(o,i)}return s}if(!window.StyleFix||!window.getComputedStyle)return;var n=window.PrefixFree={prefixCSS:function(e,r,i){var s=n.prefix;n.functions.indexOf(“linear-gradient”)>-1&&(e=e.replace(/(s|:|,)(repeating-)?linear-gradient(s*(-?d*.?d*)deg/ig,function(e,t,n,r){return t+(n||””)+”linear-gradient(“+(90-r)+”deg”})),e=t(“functions”,”(\s|:|,)”,”\s*\(“,”$1″+s+”$2(“,e),e=t(“keywords”,”(\s|:)”,”(\s|;|\}|$)”,”$1″+s+”$2$3″,e),e=t(“properties”,”(^|\{|\s|;)”,”\s*:”,”$1″+s+”$2:”,e);if(n.properties.length){var o=RegExp(“\b(“+n.properties.join(“|”)+”)(?!:)”,”gi”);e=t(“valueProperties”,”\b”,”:(.+?);”,function(e){return e.replace(o,s+”$1″)},e)}return r&&(e=t(“selectors”,””,”\b”,n.prefixSelector,e),e=t(“atrules”,”@”,”\b”,”@”+s+”$1″,e)),e=e.replace(RegExp(“-“+s,”g”),”-“),e=e.replace(/-*-(?=[a-z]+)/gi,n.prefix),e},property:function(e){return(n.properties.indexOf(e)?n.prefix:””)+e},value:function(e,r){return e=t(“functions”,”(^|\s|,)”,”\s*\(“,”$1″+n.prefix+”$2(“,e),e=t(“keywords”,”(^|\s)”,”(\s|$)”,”$1″+n.prefix+”$2$3″,e),e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement(“div”).style,o=function(n){if(n.charAt(0)===”-“){t.push(n);var r=n.split(“-“),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join(“-“);u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a<i.length;a++)o(i[a]);else for(var f in i)o(StyleFix.deCamelCase(f));var l={uses:0};for(var c in e){var h=e[c];l.uses<h&&(l={prefix:c,uses:h})}n.prefix=”-“+l.prefix+”-“,n.Prefix=StyleFix.camelCase(n.prefix),n.properties=[];for(var a=0;a<t.length;a++){var f=t[a];if(f.indexOf(n.prefix)===0){var p=f.slice(n.prefix.length);u(p)||n.properties.push(p)}}n.Prefix==”Ms”&&!(“transform”in s)&&!(“MsTransform”in s)&&”msTransform”in s&&n.properties.push(“transform”,”transform-origin”),n.properties.sort()})(),function(){function i(e,t){return r[t]=””,r[t]=e,!!r[t]}var e={“linear-gradient”:{property:”backgroundImage”,params:”red, teal”},calc:{property:”width”,params:”1px + 5%”},element:{property:”backgroundImage”,params:”#foo”},”cross-fade”:{property:”backgroundImage”,params:”url(a.png), url(b.png), 50%”}};e[“repeating-linear-gradient”]=e[“repeating-radial-gradient”]=e[“radial-gradient”]=e[“linear-gradient”];var t={initial:”color”,”zoom-in”:”cursor”,”zoom-out”:”cursor”,box:”display”,flexbox:”display”,”inline-flexbox”:”display”,flex:”display”,”inline-flex”:”display”,grid:”display”,”inline-grid”:”display”,”min-content”:”width”};n.functions=[],n.keywords=[];var r=document.createElement(“div”).style;for(var s in e){var o=e[s],u=o.property,a=s+”(“+o.params+”)”;!i(a,u)&&i(n.prefix+a,u)&&n.functions.push(s)}for(var f in t){var u=t[f];!i(f,u)&&i(n.prefix+f,u)&&n.keywords.push(f)}}(),function(){function s(e){return i.textContent=e+”{}”,!!i.sheet.cssRules.length}var t={“:read-only”:null,”:read-write”:null,”:any-link”:null,”::selection”:null},r={keyframes:”name”,viewport:null,document:’regexp(“.”)’};n.selectors=[],n.atrules=[];var i=e.appendChild(document.createElement(“style”));for(var o in t){var u=o+(t[o]?”(“+t[o]+”)”:””);!s(u)&&s(n.prefixSelector(u))&&n.selectors.push(o)}for(var a in r){var u=a+” “+(r[a]||””);!s(“@”+u)&&s(“@”+n.prefix+u)&&n.atrules.push(a)}e.removeChild(i)}(),n.valueProperties=[“transition”,”transition-property”],e.className+=” “+n.prefix,StyleFix.register(n.prefixCSS)}(document.documentElement);
</script>
</head>
<body>
<canvas></canvas>
<script>
bgColor = ‘#111’;
gravity = 0.03;
particleColor = ‘#f73’;
canvas = document.querySelector(‘canvas’);
ctx = canvas.getContext(‘2d’);
(onresize = function(){
width = canvas.width = canvas.clientWidth;
height = canvas.height = canvas.clientHeight;
o = {x:Math.floor(width/2),y:Math.floor(height/2)};
edge = {top:-o.y,right:width-o.x,bottom:height-o.y,left:-o.x}
})();
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
};
};
})();
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
};
};
})();
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,
600
);
charging = false;
}
};
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,
240
);
}
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);
});
</script>
</body>
</html>