EP.28 เกมสลับไพ่

noMerzy | 2017-01-02 14:32:01


เกมสลับไพ่ค้นหาตำแหน่งที่ถูกต้อง
shuffle.html

<!DOCTYPE html> <html> <head> <title>Shuffle Game</title> <meta charset="UTF-8"> <style> .card { position: absolute; float:left; width: 200px; height: 300px; background-color: #f1f1f1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; border: 2px solid #333; left:0; } img { width: 200px; height: 300px; opacity: 1; } </style> </head> <body onload="setCard()"> <button onclick="start()">Shuffle</button> <br> <div> <div class="card"></div> <div class="card"></div> <div class="card"><img src="../img/kpop/I.O.I/Doyeon.jpg"></div> <div class="card"></div> <div class="card"></div> </div> <div style="clear: both"></div> <script> //ไพ่ var card = document.getElementsByClassName(\'card\'); //เวลาในการสับไพ่ var shuffleTime; /* * จัดเรียงไพ่ */ function setCard() { for (i = 0; i < card.length; i++) { //ตำแหน่งไพ่แต่ละใบ card[i].style.left = i * 210 + "px"; //แสดงรูปภาพหลัก card[i].addEventListener(\'click\', function () { //ถ้าไม่ได้สลับไพ่อยู่ให้เปิดไพ่หลัก if (shuffleTime == 0) { document.getElementsByTagName(\'img\')[0].style.opacity = 1; } }); } } /* * ฟังก์ชั่นเริ่มสุ่ม */ function start() { //ถ้าสับไพ่อยู่ให้ไม่ทำงาน if (shuffleTime > 0) { return; } //ซ่อนรูปภาพหลัก document.getElementsByTagName(\'img\')[0].style.opacity = 0; //สุ่มจำนวนที่จะสลับ 5-20 ครั้ง shuffleTime = Math.floor((Math.random() * 16) + 5); shuffle(); } /* * ฟังก์ชั่นสลับไพ่ */ function shuffle() { //ไพ่ที่จะสลับใบที่ 1 var rand1 = Math.floor((Math.random() * 4) + 1); //ไพ่ที่จะสลับใบที่ 2 var rand2 = Math.floor((Math.random() * 4) + 1); //ถ้าซ้ำให้สุ่มจนกว่าจะไม่ซ้ำ while (rand1 == rand2) { rand2 = Math.floor((Math.random() * 4) + 1); } //ตำแหน่งของไพ่ใบที่ 1 var pos1 = card[rand1].offsetLeft + "px"; //ตำแหน่งของไพ่ใบที่ 2 var pos2 = card[rand2].offsetLeft + "px"; //เปลี่ยนตำแหน่งไพ่ใบที่ 1 ไปตำแหน่งไพ่ใบที่ 2 card[rand1].style.left = pos2; //เปลี่ยนตำแหน่งไพ่ใบที่ 2 ไปตำแหน่งไพ่ใบที่ 1 card[rand2].style.left = pos1; //ลดจำนวนการสลับไพ่ shuffleTime--; //ถ้ายังสลับไม่ครบจำนวน ให้สลับต่อไป if (shuffleTime > 0) { setTimeout(shuffle, 500); } } </script> </body> </html>