|
| 1 | +import { Controller } from '@hotwired/stimulus'; |
| 2 | + |
| 3 | + |
| 4 | +export default class extends Controller { |
| 5 | + static targets = ["game", "ship", "comet", "message", "timer", "audioBackground", "startPlaceholder", "endPlaceholder"]; |
| 6 | + |
| 7 | + connect() { |
| 8 | + this.svg = this.gameTarget; |
| 9 | + this.shipWidth = 100; |
| 10 | + this.shipHeight = 100; |
| 11 | + this.shipSpeed = 5; |
| 12 | + this.baseCometSpeed = 3; |
| 13 | + this.cometWidth = 60; |
| 14 | + this.cometHeight = 60; |
| 15 | + this.cometInterval = 1000; |
| 16 | + document.addEventListener("keydown", this.keyDownHandler.bind(this)); |
| 17 | + document.addEventListener("keyup", this.keyUpHandler.bind(this)); |
| 18 | + this.audioBackgroundTarget.loop = true; |
| 19 | + } |
| 20 | + |
| 21 | + disconnect() { |
| 22 | + document.removeEventListener("keydown", this.keyDownHandler.bind(this)); |
| 23 | + document.removeEventListener("keyup", this.keyUpHandler.bind(this)); |
| 24 | + } |
| 25 | + |
| 26 | + fresh() { |
| 27 | + while (this.svg.firstChild) { |
| 28 | + this.svg.removeChild(this.svg.firstChild); |
| 29 | + } |
| 30 | + |
| 31 | + this.timer = 0 |
| 32 | + this.cometSpeed = this.baseCometSpeed; |
| 33 | + this.shipX = (this.svg.width.baseVal.value - this.shipWidth) / 2; |
| 34 | + this.shipY = this.svg.height.baseVal.value - this.shipHeight - 10; |
| 35 | + this.leftPressed = false; |
| 36 | + this.rightPressed = false; |
| 37 | + this.comets = []; |
| 38 | + this.shipElement = this.createShipElement(); |
| 39 | + this.intervalComet = null; |
| 40 | + this.intervalGame = null; |
| 41 | + } |
| 42 | + |
| 43 | + keyDownHandler(event) { |
| 44 | + if (event.key === "ArrowLeft") { |
| 45 | + this.leftPressed = true; |
| 46 | + } else if (event.key === "ArrowRight") { |
| 47 | + this.rightPressed = true; |
| 48 | + } |
| 49 | + } |
| 50 | + |
| 51 | + keyUpHandler(event) { |
| 52 | + if (event.key === "ArrowLeft") { |
| 53 | + this.leftPressed = false; |
| 54 | + } else if (event.key === "ArrowRight") { |
| 55 | + this.rightPressed = false; |
| 56 | + } |
| 57 | + } |
| 58 | + |
| 59 | + createShipElement() { |
| 60 | + const shipElement = this.shipTarget.cloneNode(true); |
| 61 | + shipElement.setAttribute("x", this.shipX); |
| 62 | + shipElement.setAttribute("y", this.shipY); |
| 63 | + shipElement.setAttribute("width", this.shipWidth); |
| 64 | + shipElement.setAttribute("height", this.shipHeight); |
| 65 | + shipElement.setAttribute("fill", "#FFFFFF"); |
| 66 | + this.svg.appendChild(shipElement); |
| 67 | + return shipElement; |
| 68 | + } |
| 69 | + |
| 70 | + moveShip() { |
| 71 | + if (this.leftPressed && this.shipX > 0) { |
| 72 | + this.shipX -= this.shipSpeed; |
| 73 | + } else if (this.rightPressed && this.shipX < this.svg.width.baseVal.value - this.shipWidth) { |
| 74 | + this.shipX += this.shipSpeed; |
| 75 | + } |
| 76 | + this.shipElement.setAttribute("x", this.shipX); |
| 77 | + } |
| 78 | + |
| 79 | + createCometElement(x, y) { |
| 80 | + const cometElement = this.cometTarget.cloneNode(true); |
| 81 | + cometElement.setAttribute("x", x); |
| 82 | + cometElement.setAttribute("y", y); |
| 83 | + cometElement.setAttribute("width", this.cometWidth); |
| 84 | + cometElement.setAttribute("height", this.cometHeight); |
| 85 | + cometElement.setAttribute("fill", "#FF0000"); |
| 86 | + this.svg.appendChild(cometElement); |
| 87 | + return cometElement; |
| 88 | + } |
| 89 | + |
| 90 | + moveComets() { |
| 91 | + this.comets.forEach(comet => { |
| 92 | + comet.y += this.cometSpeed; |
| 93 | + comet.x = comet.element.getAttribute('x'); |
| 94 | + comet.x -= this.cometSpeed; |
| 95 | + const dx = this.shipX - comet.x; |
| 96 | + const dy = this.shipY - comet.y; |
| 97 | + const distance = Math.sqrt(dx * dx + dy * dy); |
| 98 | + const vx = dx / distance; |
| 99 | + const vy = dy / distance; |
| 100 | + if(distance > 100){ |
| 101 | + comet.x += vx; |
| 102 | + comet.y += vy; |
| 103 | + } |
| 104 | + comet.element.setAttribute("x", comet.x); |
| 105 | + comet.element.setAttribute("y", comet.y); |
| 106 | + if (comet.y > this.svg.height.baseVal.value) { |
| 107 | + this.svg.removeChild(comet.element); |
| 108 | + this.comets.splice(this.comets.indexOf(comet), 1); |
| 109 | + } |
| 110 | + }); |
| 111 | + } |
| 112 | + |
| 113 | + createComet() { |
| 114 | + let x = Math.random() * this.svg.width.baseVal.value + (this.svg.width.baseVal.value * 0.5); |
| 115 | + if (this.shipX > this.svg.width.baseVal.value / 3) { |
| 116 | + x += (this.shipX * 0.5); |
| 117 | + } |
| 118 | + const y = 0; |
| 119 | + const cometElement = this.createCometElement(x, y); |
| 120 | + this.comets.push({element: cometElement, y: y}); |
| 121 | + } |
| 122 | + |
| 123 | + collisionDetection(fuzziness) { |
| 124 | + const shipRect = this.shipElement.getBoundingClientRect(); |
| 125 | + this.comets.forEach(comet => { |
| 126 | + const cometRect = comet.element.getBoundingClientRect(); |
| 127 | + const fuzzinessFactor = fuzziness * Math.min(shipRect.width, shipRect.height, cometRect.width, cometRect.height); |
| 128 | + if ( |
| 129 | + shipRect.left + fuzzinessFactor < cometRect.right && |
| 130 | + shipRect.right - fuzzinessFactor > cometRect.left && |
| 131 | + shipRect.top + fuzzinessFactor < cometRect.bottom && |
| 132 | + shipRect.bottom - fuzzinessFactor > cometRect.top |
| 133 | + ) { |
| 134 | + clearInterval(this.intervalComet); |
| 135 | + clearInterval(this.intervalGame); |
| 136 | + |
| 137 | + this.messageTarget.innerText = 'Игра окончена'; |
| 138 | + this.startPlaceholderTarget.style.visibility = 'visible'; |
| 139 | + } |
| 140 | + }); |
| 141 | + } |
| 142 | + |
| 143 | + stats(){ |
| 144 | + this.timer = this.timer + 0.5; |
| 145 | + let value = (this.timer / 100).toFixed(2) |
| 146 | + |
| 147 | + this.timerTarget.innerText = value; |
| 148 | + this.cometSpeed = this.baseCometSpeed + value * 0.1; |
| 149 | + |
| 150 | + |
| 151 | + if(value > 20) { |
| 152 | + clearInterval(this.intervalComet); |
| 153 | + clearInterval(this.intervalGame); |
| 154 | + |
| 155 | + this.endPlaceholderTarget.classList.remove('visually-hidden'); |
| 156 | + } |
| 157 | + } |
| 158 | + |
| 159 | + draw() { |
| 160 | + this.moveShip(); |
| 161 | + this.moveComets(); |
| 162 | + this.collisionDetection(0.4); // Погрешность 40% |
| 163 | + this.stats(); |
| 164 | + } |
| 165 | + |
| 166 | + start() { |
| 167 | + if(this.audioBackgroundTarget.currentTime === 0) { |
| 168 | + this.audioBackgroundTarget.play(); |
| 169 | + } |
| 170 | + |
| 171 | + this.fresh(); |
| 172 | + this.intervalComet = setInterval(this.createComet.bind(this), this.cometInterval); |
| 173 | + this.intervalGame = setInterval(this.draw.bind(this), 10); |
| 174 | + |
| 175 | + this.messageTarget.innerText = 'Поехали!'; |
| 176 | + |
| 177 | + this.startPlaceholderTarget.style.visibility = 'hidden'; |
| 178 | + this.endPlaceholderTarget.classList.add('visually-hidden'); |
| 179 | + } |
| 180 | +} |
0 commit comments