EP.19 เกมเสียบถังโจรสลัด

noMerzy | 2016-08-23 13:14:09

รูปภาพที่ใช้


barrelparate


piratebareel.html <!DOCTYPE html> <html> <head> <title>Pirate Barrel</title> <style> /* ตำแหน่งรูปภาพ */ #game { margin-top: 200px; } img { position: absolute; } img#pirate { left: 137px; top:117px; } /* สไตล์ของตาราง */ table { position: absolute; left:90px; margin-top: 75px; } td { background-color: #666; box-shadow:#999999 1px 1px; height: 30px; width: 8px; } td:hover { background-color: #999; } </style> </head> <body> <div id="game"> <img src="img/pirate.png" id="pirate"> <img src="img/barrel.png"> <table cellspacing="25"> <tr> <td id="1"></td> <td id="2"></td> <td id="3"></td> <td id="4"></td> <td id="5"></td> <td id="6"></td> </tr> <tr> <td id="7"></td> <td id="8"></td> <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> <td id="17"></td> <td id="18"></td> </tr> <tr> <td id="19"></td> <td id="20"></td> <td id="21"></td> <td id="22"></td> <td id="23"></td> <td id="24"></td> </tr> </table> </div> <script> //เพิ่มอีเวนต์ให้ อิลิเมนต์ td elem_td = document.getElementsByTagName('td'); for (i = 0; i < elem_td.length; i++) { //เมื่อกดปุ่มให้เรียกฟังก์ชั่น btnClick elem_td[i].addEventListener('click', btnClick); } //ปุ่มที่เป็นกับดัก var trap = Math.floor((Math.random() * 24) + 1); //รูปโจรสลัด var pirate = document.getElementById('pirate'); /* * ฟังก์ชั่นเมื่อกดปุ่ม */ function btnClick() { //ถ้ากดช่องที่เป็นกับดัก if (parseInt(this.id) === trap) { //รูปโจรสลัดพุ่งขึ้น pirate.style.top = (pirate.style.top + 20) + "px"; //เปลี่ยนช่องเป็นสีแดง this.style.backgroundColor = "#bb2222"; }else{ //ถ้าไม่ใช่กับดัก เปลี่ยนช่องเป็นสีเขียว this.style.backgroundColor = "#22bb22"; } } </script> </body> </html>