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.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

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

[Javascript] Memory Game

edited February 2015 in Share
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.