EP.20 เกมเรียงเลข1-15

noMerzy | 2016-08-26 09:15:54

puzzle.html
<!DOCTYPE html> <html> <head> <title>1-15</title> <style> table { border: 5px solid #fcfcfc; border-collapse: collapse; } td { width:70px; height: 70px; border: 2px solid #fcfcfc; text-align: center; font-weight: 900; font-size: 24px; cursor: pointer; } </style> </head> <body> <table> <tr> <td id="1"></td> <td id="2"></td> <td id="3"></td> <td id="4"></td> </tr> <tr> <td id="5"></td> <td id="6"></td> <td id="7"></td> <td id="8"></td> </tr> <tr> <td id="9"></td> <td id="10"></td> <td id="11"></td> <td id="12"></td> </tr> <tr> <td id="13"></td> <td id="14"></td> <td id="15"></td> <td id="16"></td> </tr> </table> <script> //หมายเลขทั้งหมด var numArry = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; //เพิ่มช่องว่างสุดท้าย numArry.push(0); //เพิ่มอีเวนต์ให้ อิลิเมนต์ td var elem_td = document.getElementsByTagName('td'); for (i = 0; i < elem_td.length; i++) { //เมื่อกดปุ่มให้เรียกฟังก์ชั่น btnClick elem_td[i].addEventListener('click', btnClick); } //สุ่มการสลับตำแหน่ง 20-50 ครั้ง var shuffTime = Math.floor((Math.random() * 200) + 100); for (i = 0; i < shuffTime + 1; i++) { //สลับตำแหน่ง shuffle(); } //แสดงตัวเลข render(); /* * ฟังก์ชั่นสลับตำแหน่ง */ function shuffle() { //สุ่ม 1-4 แทนการเลื่อนช่องว่าง บน ล่าง ซ้าย ขวา var move = Math.floor((Math.random() * 4) + 1); //ตำแหน่งอาเรย์ของช่องว่าง var index = numArry.indexOf(0); switch (move) { //เลื่อนขึ้น case 1: if (index - 4 > -1) { //ให้ช่องที่ว่างกลายเป็นเลขที่กด numArry[index] = numArry[index - 4]; //ให้ช่องที่กดกลายเป็นช่องว่าง numArry[index - 4] = 0; } break; //เลื่อนลง case 2: if (index + 4 < 16) { //ให้ช่องที่ว่างกลายเป็นเลขที่กด numArry[index] = numArry[index + 4]; //ให้ช่องที่กดกลายเป็นช่องว่าง numArry[index + 4] = 0; } break; //เลื่อนซ้าย case 3: //ถ้าไม่อยู่ซ้ายสุด if (index % 4 > 0) { //ให้ช่องที่ว่างกลายเป็นเลขที่กด numArry[index] = numArry[index - 1]; //ให้ช่องที่กดกลายเป็นช่องว่าง numArry[index - 1] = 0; } break; //เลื่อนขวา case 4: //ถ้าไม่อยู่ขวาสุด if (index % 4 < 3) { //ให้ช่องที่ว่างกลายเป็นเลขที่กด numArry[index] = numArry[index + 1]; //ให้ช่องที่กดกลายเป็นช่องว่าง numArry[index + 1] = 0; } break; } } /* * ฟังก์ชั่นเมื่อกดปุ่ม ตรวจสอบช่องว่างรอบๆ */ function btnClick() { //ค่าของช่องบน var tileUp = numArry[(parseInt(this.id) - 5)]; //ค่าของช่องล่าง var tileDown = numArry[(parseInt(this.id) + 3)]; //ค่าของช่องซ้าย var tileLeft = numArry[(parseInt(this.id) - 2)]; //ค่าของช่องขวา var tileRight = numArry[parseInt(this.id)]; //ถ้ามีช่องว่างข้างๆ ให้ทำการสลับตำแหน่งกัน if (tileUp === 0 || tileDown === 0 || tileLeft === 0 || tileRight === 0) { //ตำแหน่งของอาเรย์ที่มีค่าเป็น 0 var index = numArry.indexOf(0); //ให้ช่องที่ว่างกลายเป็นเลขที่กด numArry[index] = numArry[this.id - 1]; //ให้ช่องที่กดกลายเป็นช่องว่าง numArry[this.id - 1] = 0; } //แสดงตัวเลข render(); } /* * ฟังก์ชั่นแสดงตัวเลขในตาราง */ function render() { //ลูป td for (i = 0; i < elem_td.length; i++) { //ถ้าเป็นช่องว่างให้พื้นหลังเป็นสีเทา if (numArry[i] === 0) { elem_td[i].innerHTML = ""; elem_td[i].style.backgroundColor = "#fcfcfc"; } else { //ถ้าเป็นตัวเลขให้พื้นหลังเป็นสีขาวพร้อมกับแสดงตัวเลข elem_td[i].innerHTML = numArry[i]; elem_td[i].style.backgroundColor = "#ffffff"; } } } </script> </body> </html>