Gerak Pertikel Bertabrakan - sumbu x - ActionScript 2.0 Flash

Saya ingin mencoba membuat program partikel bertabrakan

kira-kira seperti ini:

Huruf-huruf dianggap objek (movieclip)

Seperti ini programnya:

// fungsi gerak partikel
function gerak() {
this._x += this.dx;
this.xA = this._x-this.arah*this._width/2;
this.xB = this._x+this.arah*this._width/2;
}

// definisi awal dan mencari banyaknya partikel yang ada di layar (banyaknya movieclip "par")
nmax = 0;
do {
nmax++;
mc = this["par"+nmax];
} while (mc<>undefined);


// besar perpindahan dan menentukan arah
for (var i = 1; i<=nmax; i++) {
this["par"+i].besardx = Math.ceil(Math.random()*3)
this["par"+i].arah = -1+2*Math.floor(Math.random()*2)
}


// mengaktifkan gerak tiap partikel
for (var i = 1; i<=nmax; i++) {
this["par"+i].dx = this["par"+i].arah*this["par"+i].besardx;
this["par"+i].onEnterFrame = gerak;
}

// gerakan tiap partikel diaktifkan dengan onEnterFrame
this.onEnterFrame = function() {

for (var i = 1; i<=nmax; i++) {
for (var j = 1; j<=nmax; j++) {
mmc1 = this["par"+i];
mmc2 = this["par"+j];
if (i<>j) {
if (mmc1.xB>mmc2.xB && mmc1.xA<mmc2.xA && mmc1.arah<>mmc2.arah) {
SwapPropertiesA(mmc1,mmc2);
}

if (mmc1.xB>mmc2.xA && mmc1.xA<mmc2.xA && mmc1.arah == mmc2.arah && mmc1.besardx>mmc2.besardx) {
SwapPropertiesB(mmc1,mmc2);
}

if (mmc1.xB<mmc2.xA && mmc1.xA>mmc2.xA && mmc1.arah == mmc2.arah && mmc1.besardx>mmc2.besardx) {
SwapPropertiesB(mmc1,mmc2);
}

}
}
}
CekDinding()

};

function CekDinding() {
for (var i = 1; i<=nmax; i++) {
mcc1 = this["par"+i];
if(mcc1.xB>640){
DindingBx(mcc1)
}else if(mcc1.xB<0){
DindingAx(mcc1)
}
}

}

// dinding kiri
function DindingAx(mc1) {
nx = 0-mc1.xB;
mc1.arah = -mc1.arah;
mc1._x += nx;
mc1.dx = mc1.arah*mc1.besardx;
}

// dinding kanan
function DindingBx(mc1) {
nx = mc1.xB-Stage.width; // 640
mc1.arah = -mc1.arah;
mc1._x -= nx;
mc1.dx = mc1.arah*mc1.besardx;
}


// tumbukan tiap objek tipe 1
function SwapPropertiesA(mc1, mc2) {
// berlawanan arah
nx = mc1.xB-mc2.xB;

swapdx = mc1.besardx;
mc1.besardx = mc2.besardx;
mc2.besardx = swapdx;

swaparah = mc1.arah;
mc1.arah = mc2.arah;
mc2.arah = swaparah;

mc1._x -= nx;
mc2._x += nx;
mc1.dx = mc1.arah*mc1.besardx;
mc2.dx = mc2.arah*mc2.besardx;
}

// tumbukan tiap objek tipe 2
function SwapPropertiesB(mc1, mc2) {
// satu arah yang sama
nx = mc1.xB-mc2.xA;

swapdx = mc1.besardx;
mc1.besardx = mc2.besardx;
mc2.besardx = swapdx;

mc1._x -= nx;
mc2._x += nx;

mc1.dx = mc1.arah*mc1.besardx;
mc2.dx = mc2.arah*mc2.besardx;

}

Algoritma Luhn - untuk kartu kredit

def luhn_checksum(card_number):
    def digits_of(n):
        return [int(d) for d in str(n)]
    digits = digits_of(card_number)
    odd_digits = digits[-1::-2]
    even_digits = digits[-2::-2]
    checksum = 0
    checksum += sum(odd_digits)
    for d in even_digits:
        checksum += sum(digits_of(d*2))
    return checksum % 10
 
def is_luhn_valid(card_number):
    return luhn_checksum(card_number) == 0

sumber:
http://en.wikipedia.org/wiki/Luhn_algorithm

Game buatan Galih Widosamodra

Game saya ini dibuat dengan html5 dan javascript.
Silahkan mencoba:

1. Kartun Japarr
2. Tebak Karya Galih

Memang cukup lama saat membuka game ini.
Saya masih mencari cara supaya lebih cepat dan enteng untuk di buka di browser.

Mohon kritik dan saran dari teman-teman. Thanks
Maklum, masih belajar ... :)

Cara close window javascript-html5

Pengen buat program yang ada tombol close nya.
Akhirnya googling dulu ...
Alhamdulillah ketemu beberapa contoh yang bisa di pakai.

Berikut contoh-contoh program yang bisa dipakai untuk menutup window kita.

Cara 1:
window.open('', '_self', ''); //bug fix
window.close();

Cara 2:
window.open(...);
setTimeout(function(){
    window.open('', '_self', '');
    window.close();
}, 100);

Cara 3:
setTimeout(function() { window.close(); },50);

Cara 4:
top.window.close()


semoga bermanfaat :)

sumber:
http://stackoverflow.com/questions/2032640/problem-with-window-close-and-chrome

Window Debug Javascript - IE, Firefox, Chrome

Ada kalanya program html5 kita error, dan tak bisa berjalan sesuai yang kita ingikan.
Untuk itu, kita bisa menampilkan Window Debug Javascript di Browser.
Error di program kita pun bisa di deteksi.

Ini shortcut nya:
1. Chrome : Ctrl + Shift + J
2. Firefox  : Ctrl + Shift + J
3. IE         : F12


semoga bermanfaat :)

sumber:
http://stackoverflow.com/questions/9464545/debugging-firefox-extension-from-add-on-builder
http://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
http://stackoverflow.com/questions/10191099/debugging-javascript-in-ie

resize_canvas - setelah di modifikasi untuk Firefox

function resize_canvas(){
var t = getViewport();

innerWidth = t[0];//window.innerWidth;
innerHeight = t[1];//window.innerHeight;

sizeDiffW = innerWidth-canvasWidth;
sizeDiffH = innerHeight-canvasHeight;
chkscaleW = innerWidth/canvasWidth;
chkscaleH = innerHeight/canvasHeight;
scaleFix = Math.min(chkscaleW,chkscaleH);

canvas.width=canvasWidth*scaleFix;
canvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);

canvas.style.left="100px";
canvas.style.top="100px";
canvas.style.marginLeft="100px";
canvas.style.marginTop="100px";


canvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

canvas.style.marginLeft=""+((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.marginTop=""+((innerHeight-canvasHeight*scaleFix)/2)+"px";

}

getViewport - window.style.left - di Firefox

function getViewport() {
var viewPortWidth;
var viewPortHeight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}

// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

HTML5 - error di firefox

Kemarin ada error di html5 yang saya buat, ketika dijalankan dengan Firefox.

akhirnya googling deh ...
ketemu: http://www.lynnnayko.com/2012/06/declaration-of-character-encoding-in.html

Ini dia Error nya:
Error: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.


Nah begini caranya supaya menghilangkan error tersebut:

Letakkan :
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

di <head>
seperti ini:



!DOCTYPE HTML>
<html>
<head>
<title>Animasi PNG Sequence</title>

<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<style>
body {
margin: 0px;
padding: 0px;
}

</style>
.........
</html>

resize_canvas html5

function resize_canvas(){
var sizecanvas = document.getElementById("myCanvas");
var sizecontext = sizecanvas.getContext('2d');
if (sizecanvas.width  < window.innerWidth){
sizecanvas.width  = window.innerWidth;
}

if (sizecanvas.height < window.innerHeight) {
sizecanvas.height = window.innerHeight;
}

innerWidth = window.innerWidth;
innerHeight = window.innerHeight;
outerWidth = window.outerWidth;
outerHeight = window.outerHeight;

sizeDiffW = innerWidth-canvasWidth;
sizeDiffH = innerHeight-canvasHeight;
chkscaleW = innerWidth/canvasWidth;
chkscaleH = innerHeight/canvasHeight;
scaleFix = Math.min(chkscaleW,chkscaleH);

sizecanvas.width=canvasWidth*scaleFix;
sizecanvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);
sizecanvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
sizecanvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

sizecanvas.style.marginLeft=""+((innerWidth-canvasWidth*scaleFix)/2)+"px";
sizecanvas.style.marginTop=""+((innerHeight-canvasHeight*scaleFix)/2)+"px";
}

Menjalankan animasi png sequence dengan html5

Menjalankan animasi png sequence dengan html5
Png sequence adalah urutan file png dengan index, yang sudah dipersiapkan sebelumnya.

Ini dia programnya :

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="800"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var iframe = 1;
var maxframe = 10;
var ArrImage = new Array();
for(var i=1;i<=10;i++){
if(i<10) ArrImage[i] = 'images/images000'+i+'.png';
else if(i<100) ArrImage[i] = 'images/images00'+i+'.png';
}

var imageObj = new Image();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function animate() {


// update

// clear
//context.clearRect(0, 0, canvas.width, canvas.height);

// draw stuff
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = ArrImage[Math.floor(iframe)];

if(iframe<maxframe) iframe+=0.1;
else iframe=maxframe;

// request new frame
requestAnimFrame(function() {
 animate();
});
}

animate();

</script>
</body>
</html>



mohon koreksi jika ada kekeliruan di program saya
maklum, masih belajar :)

semoga bermanfaat

sumber:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

get timer di javascript

t0 = new Date().getTime();
ts = new Date().getTime() - t0;

ts adalah renggang waktu;

sumber:
http://www.w3schools.com/jsref/jsref_gettime.asp

Animasi dengan HTML dan Flash

Cara animasi dengan HTML5 dan Flash


1. Animasikan dengan menggunakan program Flash

2. Kemudian export menjadi png sequence 

    File > Export > Export Movie > Save as Type PNG Sequence

    shortcut : Ctrl + Alt + Shift + S

3. Save menjadi "namafile".png

   Hasilnya : 

       namafile0001.png

       namafile0002.png

       namafile0003.png

       ....

       namafile0258.png (sesuai dengan jumlah frame)

4. Masukkan di JS

var ArrImages = new Array();

var url = "image"; // folder untuk menyimpan file picture.png

var JumImg = 258

var CountImg = JumImg;

for(var i=0;i<=JumImg;i++){

ArrImages[i] = new Image();

ArrImages[i].addEventListener("load", LoadImageCheck, false);

if(i==0) ArrImages[i].src = url+"namafile0001.png";

else if(i<10) ArrImages[i].src = url+"namafile000"+i+".png";

else if(i<100) ArrImages[i].src = url+"namafile00"+i+".png";

else if(i<1000) ArrImages[i].src = url+"namafile0"+i+".png";

}