JavaScript Games

Zuerst brauchen wir wie immer das Grundgerüst. Es sollte also grob diese Struktur vorhanden sein. Wichtig: steuerbare Objekte müssen mit position: absolute positioniert werden!

Wir benötigen zuerst eine CSS-Klasse für die Schüsse. Dort können sie gestaltet und skaliert werden. Wichtig: sie müssen absolut positioniert sein.

Um die Schussrichtung zu bestimmen, müssen wir die geometry.js-Datei einbinden. Damit man mit der Maus schiessen kann, brauchen wir noch mouse.js. Es wäre auch möglich, Schüsse mit der Tastatur auszulösen. Dann bräuchte es mouse.js nicht.

Zuerst brauchen wir nun im Loop drin Code, der auf einen Mausklick wartet if(mouseClick()). Sobald geklickt wurde, müssen wir den Winkel zwischen dem Spieler und der geklickten Position bestimmen. Siehe dazu auch Maussteuerung und Geometrie.

Als Reaktion auf den Klick generieren wir ein Div mit Klasse shot (wie im CSS vorher definiert) an der Position des Spielers.

Zusätlich müssen wir die Bewegungsrichtung im Schuss speichern. Diese entspricht dem vorher berechneten Winkel.

Als letztes müssen wir alle sich im Spiel befindlichen Schüsse in ihre individuelle Richtung bewegen. Dazu werden mit querySelectorAll alle Schüsse ausgewählt, und aus ihrer aktuellen Position und der Bewegungsrichtung mit Sinus und Cosinus die neue Position berechnet.

Um die Schüsse zu entfernen, sobald sie sich ausserhalb des Spielfeldes befinden, müssen wir sie löschen, sobald ihr Abstand zum Rand zu klein oder zu gross ist. Die Zahlenangaben müssen an die Spielfeldgrösse angepasst werden.

Vorschau

game.css

.player {
  position: absolute;
  background-color: red;
  width: 20px;
  height: 20px;
}

.shot {
  position: absolute;
  background-color: yellow;
  width: 20px;
  height: 20px;
}

game.html

<div class="playground">
  <div class="player"></div>
</div>

<script src="https://jsgame.bbz.cloud/scripts/v1/geometry.js"></script>
<script src="https://jsgame.bbz.cloud/scripts/v1/mouse.js"></script>
<script src="game.js"></script>

game.js



var spieler = document.querySelector('.player')
var spielfeld = document.querySelector('.playground')

spieler.style.left = '0px'
spieler.style.top = '0px'

function loop() {
  if(mouseClick()) {
    var spielerX = parseInt(spieler.style.left)
    var spielerY = parseInt(spieler.style.top)
    var a = angle(spielerX, spielerY, mousePositionX(spielfeld), mousePositionY(spielfeld))

    var schuss = document.createElement('div')
    schuss.classList.add('shot')
    schuss.style.left = spieler.style.left
    schuss.style.top = spieler.style.top
    schuss.setAttribute('data-angle', (180 - a) * Math.PI / 180)
    spielfeld.appendChild(schuss)
  }

  var schuesse = document.querySelectorAll('.shot')
  for(var schuss of schuesse) {
  	var xPos = parseFloat(schuss.style.left)
    var yPos = parseFloat(schuss.style.top)
    var rotation = schuss.getAttribute('data-angle')
    schuss.style.left = 3 * Math.sin(rotation) + xPos + 'px'
    schuss.style.top = 3 * Math.cos(rotation) + yPos + 'px'
    if(parseInt(schuss.style.left) < 0 || parseInt(schuss.style.left) > 400 ||
        parseInt(schuss.style.top) < 0 || parseInt(schuss.style.top) > 400) {
    	schuss.parentNode.removeChild(schuss)
    }
  }

  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)

JavaScript Games

Ballistik