Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Klik link berikut untuk informasi cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

[Javascript] Memory Game

capek koding buat kerjaan, iseng bikin mainan :D
cukup buat bikin anak umur 3 tahun diem dan asik mainan sendiri :))

image


memory.html
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<title>Memory Game</title>
<style>
body{margin:0;padding:0;cursor:url(hand1.png),auto;}
@font-face {
font-family: 'gorditasregular';
src: url('fonts/gorditas-regular-webfont.eot');
src: url('fonts/gorditas-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/gorditas-regular-webfont.woff') format('woff'),
url('fonts/gorditas-regular-webfont.ttf') format('truetype'),
url('fonts/gorditas-regular-webfont.svg#gorditasregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'gorditasbold';
src: url('fonts/gorditas-bold-webfont.eot');
src: url('fonts/gorditas-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/gorditas-bold-webfont.woff') format('woff'),
url('fonts/gorditas-bold-webfont.ttf') format('truetype'),
url('fonts/gorditas-bold-webfont.svg#gorditasbold') format('svg');
font-weight: normal;
font-style: normal;
}
td img{width:220px;margin:5px;border:0;}
.button{border:3px solid #f90;border-radius:10px;padding:3px 10px;background-color:#fff;color:#00d;font:bold 20pt 'gorditasregular';display:inline;cursor:url(hand2.png),auto;}
.bottom{position:absolute;bottom:20px;z-index:1000;}
.center{width:100%;text-align:center;}
.buttonselected{background-color:#f90;}
</style>
<script>
var width=220;
var w=6;
var h=3;
var canimal=["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22"];
var cnumber=["01","02","03","04","05","06","07","08","09","10"];
var cfruit=["01","02","03","04","05","06","07","08","09"];
var a=canimal;
var f="animal";
var choice=[];
function clickbutton(t,n) {
var fc=t.parentNode.firstChild;
fc.className="button";
while(fc=fc.nextSibling) {fc.className="button";}
t.className="button buttonselected";
switch(n) {
case 1:{a=canimal;f="animal";}break;
case 2:{a=cnumber;f="number";}break;
case 3:{a=cfruit;f="fruit";}break;
}
rendercard();
}
function sleep(milliseconds) {
var start=new Date().getTime();
for(var i=0;i<1e7;i++) {
if((new Date().getTime()-start)>milliseconds){
break;
}
}
}
function shuffleArray(array) {
for(var i=array.length-1;i>0;i--) {
var j=Math.floor(Math.random()*(i+1));
var temp=array[i];
array[i]=array[j];
array[j]=temp;
}
return array;
}
function rendercard() {
choice=[];
var c=(w*h)/2;
shuffleArray(a);
var u1=u2=a.slice(0,c);
shuffleArray(u1);
shuffleArray(u2);
var u=u1;
u=u.concat(u2);
shuffleArray(u);
var s="<table align='center' border=0 cellpadding=0 cellspacing=0 style='margin-top:20px;'>";
for(j=0;j<h;j++) {
s+="<tr>";
for(i=0;i<w;i++) {
s+='<td><img src="back.png" onclick="flip(this)"><img style="display:none;" src="face.png"><img style="z-index:2;display:none;margin-left:-'+(width+5)+'px;" src="'+f+"/"+u.shift()+'.png" onclick="unflip(this);choice=[];"></td>';
}
s+="</tr>";
}
s+="</table>";
document.getElementById("cardplace").innerHTML=s;
}
function reset() {
unflip(choice[0]);
unflip(choice[1]);
choice=[];
}
function flip(t) {
if(choice.length<2) {
t.style.display="none";
t.nextSibling.style.display="";
t.nextSibling.nextSibling.style.display="";
if(choice.length==0) {
choice[0]=t.nextSibling.nextSibling;
}
else if(choice.length==1) {
choice[1]=t.nextSibling.nextSibling;
if((choice.length==2)&&(choice[0].src==choice[1].src)) {
choice[0].onclick=null;
choice[0].previousSibling.previousSibling.onclick=null;
choice[1].onclick=null;
choice[1].previousSibling.previousSibling.onclick=null;
choice=[];
}
else if((choice.length==2)&&(choice[0].src!=choice[1].src)) {
setTimeout(reset,1000);
}
}
}
}
function unflip(t) {
t.style.display="none";
t.previousSibling.style.display="none";
t.previousSibling.previousSibling.style.display="";
}
</script>
</head>
<body>
<img src="bg.jpg" width="100%" height="100%" style="position:fixed;z-index:0;">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;" id="cardplace">
</div>
<div class="bottom center"><div class="button buttonselected" onclick="clickbutton(this,1)">Animal</div> <div class="button" onclick="clickbutton(this,2)">Number</div> <div class="button" onclick="clickbutton(this,3)">Fruit</div></div>
<script>rendercard();</script>
</body>
</html>



ini zip nya (included js di atas), 2.12MB
image nya yg banyak dan besar ...

http://s000.tinyupload.com/index.php?file_id=08891898577653371040
Sign In or Register to comment.