HW Block Shooter SecB P’Arin
✨ นายจักริน เย็นสุข
<!--Credit Youtube Channel: Code with Ania Kubów --> <!--URL: https://www.youtube.com/watch?v=kSt2_YZzCec&t=23s --> <!-- แก้ไขโดย 1. เพิ่มขนาดของแมพจาก 15*15 เป็น 30*15 2. เพิ่มปริมาณของอีกฝ่ายให้เยอะขึ้น และกำหนดตำแหน่งในการเกิดเพิ่มขึ้น 3. ใส่เพลง BGM เพิ่มเข้าไป 4. ใส่พื้นหลัง 5. แก้ไขลักษณะหน้าตาของผู้เล่นและอีกฝ่าย 6. เปลี่ยนระบบควบคุมจาก Left Arrow และ Right Arrow เป็น A และ S และ Space เพื่อยิง --> <!-- วิธีการเล่น 1. กด A ไปทางซ้าย กด D ไปทางขวา 2. กด Spacebar เพื่อยิง 3. ยิงเอเลี่ยนจนกว่าจะหมด อย่าให้มาถึงเราได้เป็นอันขาด!!!! --> <html> <head> <title>Space Invader</title> <style> body{ background:url(https://ak.picdn.net/shutterstock/videos/6537068/thumb/1.jpg?ip=x480); margin:2em; font-family:Cursive; } .grid { display: flex; flex-wrap: wrap; border: solid 1px; width: 600px; height: 300px; } .grid div { width: 20px; height: 25px; } .shooter { background: url('https://i.ibb.co/hRhcwZc/download-removebg-preview.png'); background-size: 20px 30px; } .invader { background: url('https://i.ibb.co/tpgf2Q9/images.png'); background-size: 20px 30px; } .boom { background: url('https://i.ibb.co/KKXHJqS/13809242-b4f8cba9-1200x1200o-60dc4f38b621-removebg-preview-1.png'); background-size: 25px 30px; } .laser { background-color:hsl(166, 89%, 50%); border-radius: 10px; } </style> </head> <body> <iframe width="0" height="0" src="https://www.youtube.com/embed/A7nIdx1DQuk?autoplay=1&mute=0"></iframe> <h3 style="color:red">Score:<span id="result"></span></h3> <center><h3 style="color:hsl(200, 89%, 50%)">A - D to move and space to fire!!!</h3></center> <center> <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </center> <script> document.addEventListener('DOMContentLoaded', () => { const squares = document.querySelectorAll('.grid div') const resultDisplay = document.querySelector('#result') let width = 30 let currentShooterIndex = 400 let currentInvaderIndex = 0 let alienInvadersTakenDown = [] let result = 0 let direction = 1 let invaderId const alienInvaders = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,15,16,17,18,19, 30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49, 60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79 ] alienInvaders.forEach( invader => squares[currentInvaderIndex + invader].classList.add('invader')) squares[currentShooterIndex].classList.add('shooter') function moveShooter(e) { squares[currentShooterIndex].classList.remove('shooter') switch(e.keyCode) { case 65: if(currentShooterIndex % width !== 0) currentShooterIndex -= 1 break case 68: if(currentShooterIndex % width < width - 1) currentShooterIndex += 1 break } squares[currentShooterIndex].classList.add('shooter') } document.addEventListener('keydown', moveShooter) function moveInvaders() { const leftEdge = alienInvaders[0] % width === 0 const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width - 1 if((leftEdge && direction === -1) || (rightEdge && direction === 1)){ direction = width } else if (direction === width) { if (leftEdge) direction = 1 else direction = -1 } for (let i = 0; i <= alienInvaders.length - 1; i++) { squares[alienInvaders[i]].classList.remove('invader') } for (let i = 0; i <= alienInvaders.length - 1; i++) { alienInvaders[i] += direction } for (let i = 0; i <= alienInvaders.length - 1; i++) { //ADD IF LATER if (!alienInvadersTakenDown.includes(i)){ squares[alienInvaders[i]].classList.add('invader') } } if(squares[currentShooterIndex].classList.contains('invader', 'shooter')) { resultDisplay.textContent = 'Game Over' squares[currentShooterIndex].classList.add('boom') clearInterval(invaderId) } for (let i = 0; i <= alienInvaders.length - 1; i++){ if(alienInvaders[i] > (squares.length - (width -1))){ resultDisplay.textContent = 'Game Over' clearInterval(invaderId) } } if(alienInvadersTakenDown.length === alienInvaders.length) { console.log(alienInvadersTakenDown.length) console.log(alienInvaders.length) resultDisplay.textContent = 'You Win' clearInterval(invaderId) } } invaderId = setInterval(moveInvaders, 500) function shoot(e) { let laserId let currentLaserIndex = currentShooterIndex //move the laser from the shooter to the alien invader function moveLaser() { squares[currentLaserIndex].classList.remove('laser') currentLaserIndex -= width squares[currentLaserIndex].classList.add('laser') if(squares[currentLaserIndex].classList.contains('invader')) { squares[currentLaserIndex].classList.remove('laser') squares[currentLaserIndex].classList.remove('invader') squares[currentLaserIndex].classList.add('boom') setTimeout(() => squares[currentLaserIndex].classList.remove('boom'), 250) clearInterval(laserId) const alienTakenDown = alienInvaders.indexOf(currentLaserIndex) alienInvadersTakenDown.push(alienTakenDown) result++ resultDisplay.textContent = result } if(currentLaserIndex < width) { clearInterval(laserId) setTimeout(() => squares[currentLaserIndex].classList.remove('laser'), 100) } } switch(e.keyCode) { case 32: laserId = setInterval(moveLaser, 100) break } } document.addEventListener('keyup', shoot) }) </script> </body> </html>