Implementierung eines einfachen Weihnachtsspiels mit JavaScript

Körper { Hintergrund: RGB (8,8,58);
  Rand: 0;
}

#Wrapper {
  Breite: 500px;
  Rand links: automatisch;
  Rand rechts: automatisch;
  Rand oben: 20px;
}

​var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    elfImage = document.getElementById("elf");
grünesGeschenkImage = document.getElementById("grünes_Geschenk");
rotesGeschenkImage = document.getElementById("rotes_Geschenk");
blauesGeschenkImage = document.getElementById("blaues_Geschenk");
bombImage = document.getElementById("bombe");
bangImage = document.getElementById("bang");

var x = Leinwand.Breite/2;
var y = Leinwand.Höhe-30;
var dx = 2;
var dy = -2;
const elfHeight = 70;
const elfWidth = 55;
var elfX = (canvas.width-elfWidth)/2;
const elfSpeed ​​​​= 10;
var rechtsGedrückt = false;
var leftPressed = false;
var spacePressed = false;
var SpawnInterval;
var spawnTimer = 50;
var Geschenke = [];
var maxGeschenk = 0;
const Geschenkbreite = 40;
const Geschenkhöhe = 40;
var Timer = 0;
var GeschenkRotation = 0;
const TO_RADIANS = Math.PI/180; 
Var-Punktzahl = 0;
var Gesundheit = 3;
const bombChance = 5;
var elfRotation = 0;
var bangX;
var bangZeit;
var Schneehöhe = 6;
var spawnTimeChangeInterval = 3000;
var Titelfarben = [];

// Schneeflockenkram
var Schneeflocken = [];
const maxSnowflakes = 80;
const Schneeflockengröße = 3;
const snowflakeMinSpeed ​​​​= 1;
const snowflakeMaxSpeed ​​​​= 4;
const snowflakeColours = ["rgba(255,255,255,0.95)", "rgba(255,255,255,0.65)","rgba(255,255,255,0.4)"];

const Spielmodi = {
  TITEL: 'Titel',
  SPIELEN: 'spielen',
  SPIELENDE: 'Spielende'
};

var gameMode = gameModes.TITEL;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

Funktion keyDownHandler(e) {
  if(e.key == "Rechts" || e.key == "PfeilRechts") {
    rechtsgedrückt = wahr;
  }
  sonst wenn(e.key == "Links" || e.key == "PfeilLinks") {
    linksgedrückt = wahr;
  } sonst wenn(e.code == "Leerzeichen") {
    Leertaste gedrückt = wahr;
  }
}

Funktion keyUpHandler(e) {
  if(e.key == "Rechts" || e.key == "PfeilRechts") {
    rechtsgedrückt = falsch;
  }
  sonst wenn(e.key == "Links" || e.key == "PfeilLinks") {
    linksgedrückt = falsch;
  } sonst wenn(e.code == "Leerzeichen") {
    Leertaste gedrückt = falsch;
  }
}

Funktion zeichnen() {
  ctx.clearRect(0, 0, Leinwandbreite, Leinwandhöhe);
  zeichneSchnee();

  Zeitgeber++;

  Schalter (Spielmodus) {
    Fall gameModes.TITLE:
      TitelBildschirm(); 
      brechen;
    Fall gameModes.GAMEOVER:
      Spiel vorbei();
      brechen;
    Fall gameModes.PLAYING:
      SpielLoop();
      brechen;
  }
}

Funktion Titelbildschirm() {
  wenn (Timer > Titelfarben.Länge) Timer=0;

  ctx.font = "50px Arial";
  ctx.fillStyle = Titelfarben[Timer]; 
  ctx.fillText(`Schnapp dir Weihnachtsgeschenke!`, 0, 50);
  ctx.fillStyle = "gelb"; 

  ctx.font = "30px Arial";
  ctx.fillText(`Drücken Sie die Leertaste, um zu starten!`, 65, 140);

  var highScore = getHighScore();
  if (highScore != -1) ctx.fillText(`Höchster Score: ${highScore}`, 90, 220);

  drawRotatedImage(elfImage, canvas.width/2 - elfWidth/2, 330, elfRotation, 200);
  elfRotation+=2;
  wenn (elfRotation > 359) elfRotation = 0;

  if (Leertaste gedrückt && Timer > 5) {
    setGameMode(spielmodi.SPIELEN);
  }
}

Funktion gameLoop() {
  zeichneSchneePerson();
  spawnGifts();
  Geschenke verarbeiten();
  zeichneFloor();
  zeichneHUD();
  zeichneElf();
  zeichneBang();

  if(rechtsGedrückt) {
    elfX += elfGeschwindigkeit;
    wenn (elfX + elfWidth > canvas.width){
      elfX = Leinwand.Breite - (elfBreite + 5);
    }
  }
  sonst wenn(linksgedrückt) {
    elfX -= elfGeschwindigkeit;
    wenn (elfX < -15){
      elfX = -15;
    }
  }
}

Funktion gameOver() {
  ctx.font = "50px Arial";
  ctx.fillStyle = "gelb";
  ctx.fillText(`SPIEL VORBEI!`, 80, 200);
  ctx.font = "30px Arial";
  ctx.fillText(`Endergebnis: ${score}`,130, 240);
  ctx.fillText('Zum Fortfahren die Leertaste drücken',80, 280);

  if (Leertaste gedrückt && Timer > 5) {
    initialisiereSpiel();
    setGameMode(Spielmodi.TITEL);
  }
}

Funktion verarbeiteGeschenke() {
  Geschenke.fürJeden((g) => {
    wenn (g und g.alive) { 
      // Geschenk verlosen
      Geschenk ziehen(g);
      wenn (gy > Leinwand.Höhe) {
        g.alive = falsch;
        wenn (!g.bomb) Punktzahl--;
      }

      //Geschenk verschieben
      g.y+=g.Geschwindigkeit;

      // Geschenk drehen
      g.rotation+=5;
      wenn (g.rotation > 359) g.rotation = 0;

      // auf Kollision prüfen
      wenn ((gy + (Geschenkhöhe/2)) >= ((Leinwandhöhe - Elfenhöhe - Schneehöhe) + 20)
          && (gy<canvas.height-snowHeight+20)) {
        wenn ((elfX + 25) <= (gx + (Geschenkbreite/2)) und ((elfX+20) + (elfBreite)) >= gx)
        {
          g.alive = falsch;
          wenn (!g.bomb) { 
            Punktzahl+=5;
          } anders {
            doBombCollision();
          }
        }
      }
    }
  });
}

Funktion zeichneGeschenk(g) {
  Schalter (g.Farbe) {
    Fall 1:
      zeichneFarbigesGeschenk(grünesGeschenkbild, g);
      brechen;
    Fall 2:
      zeichneFarbigesGeschenk(rotesGeschenkbild, g);
      brechen;
    Fall 3:
      zeichneFarbigesGeschenk(blauesGeschenkbild, g);
      brechen;
    Fall 4:
      zeichneRotatedImage(bombImage, gx, gy, 180, 45);
      brechen;
  }
}

Funktion zeichneFarbigesGeschenk(Farbbild, g) {
  zeichneRotatedImage(Farbbild, gx, gy, g.rotation, 35);
}

Funktion doBombCollision() {
  Gesundheit--;
  bangX=elfX;
  Bang-Zeit = 5;
  wenn (Gesundheit == 0) {
    setzeHighScore();
    setGameMode(gameModes.GAMEOVER);
  }
}

Funktion drawBang() {
  wenn (bangTime > 0) {
    Knallzeit--;
    ctx.drawImage(bangImage, bangX, (canvas.height-75)-snowHeight, 75,75);
  }
}


Funktion zeichneElf() {
  ctx.drawImage(elfImage, elfX,(Leinwandhöhe - elfHeight) - (Schneehöhe - 2),80,80);
}

Funktion spawn() {
  var newX = 5 + (Math.random() * (canvas.width - 5));

  var Farbe;
  var Bombe = falsch;

  wenn (Zufallszahl(1,Bombenchance) == Bombenchance) {
    Farbe = 4;
    Bombe = wahr;
  } anders {
    Farbe = Zufallszahl(1,3);
  }

  var neuesGeschenk = {
    x: neuesX,
    y: 0,
    Geschwindigkeit: Zufallszahl(2,6),
    lebendig: wahr,
    Drehung: 0,
    Farbe: Farbe,
    Bombe: Bombe,
  };

  Geschenke[max.Geschenk] = neuesGeschenk;
  maxGeschenk++;
  wenn (maxGeschenk > 75) {
    maxGeschenk = 0;
  }
}

Funktion spawnGifts() {
  wenn (Timer > SpawnTimer) {
    laichen();
    Zeitgeber = 0;
  }
}

Funktion drawRotatedImage(Bild, x, y, Winkel, Maßstab)
{ 
  ctx.speichern(); 
  ctx.translate(x, y);
  ctx.rotate(Winkel * TO_RADIANS);
  ctx.drawImage(Bild, -(Bildbreite/2), -(Bildhöhe/2), Maßstab, Maßstab);
  ctx.wiederherstellen(); 
}

Funktion drawHUD() {
  ctx.font = "20px Arial";
  ctx.fillStyle = "gelb";
  ctx.fillText(`Punktzahl: ${score}`, 0, 25);

  var Herz = "❤";
  var Herzen = Gesundheit > 0? Herz.Wiederholung(Gesundheit): " ";
  ctx.fillText("Hilfe:", canvas.width - 120, 25);
  ctx.fillStyle = "rot";
  ctx.fillText(`${hearts}`, Leinwand.Breite - 60, 26);
}

Funktion initialiseGame() {
  Gesundheit = 3;
  elfX = (Leinwand.Breite-elfWidth)/2;
  Bang-Zeit = 0;
  Punktzahl = 0;
  Schneehöhe = 6;
  Zeitgeber = 0;
  SpawnTimer = 50;
  Geschenke = [];
}

Funktion initialisiereSchnee() {
  für (i=0; i<maxSnowflakes; i++) {
    var startY = -randomNumber(0, canvas.height);
    Schneeflocken[i] = {
      x: Zufallszahl(0, Leinwandbreite-Schneeflockengröße),
      y: startY,
      startY: startY,
      Farbe: Schneeflockenfarben[Zufallszahl(0,3)],
      Radius: (Math.random() * 3 + 1),
      Geschwindigkeit: Zufallszahl(Mindestgeschwindigkeit der Schneeflocke, Höchstgeschwindigkeit der Schneeflocke)
    };
  }
}

Funktion zeichneSchnee() {
  für (i=0; i<maxSnowflakes; i++) {
    Schneeflocken[i].y+=Schneeflocken[i].Geschwindigkeit;
    wenn (Schneeflocken[i].y>Leinwandhöhe) Schneeflocken[i].y = Schneeflocken[i].startY;
    ctx.beginPath();
    ctx.arc(Schneeflocken[i].x, Schneeflocken[i].y, Schneeflocken[i].radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = Schneeflocken[i].Farbe;
    ctx.fill();
  }
}

Funktion drawFloor() {
  var snowTopY = canvas.height - Schneehöhe;

  ctx.fillStyle = "#fff";
  ctx.beginPath();
  ctx.moveTo(0, snowTopY);
  ctx.lineTo(canvas.width, snowTopY);
  ctx.lineTo(Leinwand.Breite, Leinwand.Höhe);
  ctx.lineTo(0, Leinwand.Höhe);
  ctx.closePath();
  ctx.fill();
}

Funktion zeichneSchneePerson() {
  var snowTopY = canvas.height - Schneehöhe;

  zeichneKreis("#fff", 100, snowTopY-20, 40);
  zeichneKreis("#fff", 100, snowTopY-70, 20);
  zeichneRechteck("#835C3B", 85, snowTopY-105, 30, 20);
  zeichneRechteck("#835C3B", 75, snowTopY-90, 50, 6);
  zeichneTriangle("#ffa500", 100, snowTopY-64, 7);
  zeichneKreis("#000", 93, snowTopY-76, 3);
  zeichneKreis("#000", 108, snowTopY-76, 3);
  zeichneKreis("#000", 100, snowTopY-40, 2);
  zeichneKreis("#000", 100, snowTopY-30, 2);
  zeichneKreis("#000", 100, snowTopY-20, 2);
}

Funktion drawTriangle(Farbe, x, y, Höhe) {
  ctx.strokeStyle = ctx.fillStyle = Farbe;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x – Höhe, y – Höhe);
  ctx.lineTo(x + Höhe, y - Höhe);
  ctx.fill();
}

Funktion drawCircle(Farbe, x, y, Radius) {
  ctx.strokeStyle = ctx.fillStyle = Farbe;
  ctx.beginPath();
  ctx.arc(x, y, Radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();
}

Funktion drawRectangle(Farbe, x, y, Breite, Höhe) {
  ctx.strokeStyle = ctx.fillStyle = Farbe;
  ctx.fillRect(x, y, Breite, Höhe);
}

Funktion Zufallszahl(niedrig, hoch) {
  gibt Math.floor(Math.random() * hoch) + niedrig zurück; 
}

Funktion makeColorGradient(Frequenz1, Frequenz2, Frequenz3,
                            phase1, phase2, phase3,
                            Mitte, Breite, Länge) {
  var Farben = [];

  für (var i = 0; i < len; ++i)
  {
    var r = Math.sin(Frequenz1*i + Phase1) * Breite + Mitte;
    var g = Math.sin(Frequenz2*i + Phase2) * Breite + Mitte;
    var b = Math.sin(Frequenz3*i + Phase3) * Breite + Mitte;
    Farben.push(RGB2Color(r,g,b));
  }
  Farben zurückgeben;
}

Funktion RGB2Farbe(r,g,b) {
  gibt '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b) zurück;
}

Funktion byte2Hex(n) {
  var nybHexString = "0123456789ABCDEF";
  gibt String zurück (nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}

Funktion setzeFarbverlauf() {
  Mitte = 128;
  Breite = 127;
  Schritte = 6;
  Frequenz = 2*Math.PI/Schritte;
  returniere makeColorGradient(Frequenz,Frequenz,Frequenz,0,2,4,Mitte,Breite,50);
}

Funktion initialiseSpawnInterval() {
  wenn (Spielmodus === Spielmodi.SPIELEN && spawnTimer>2) {
    spawnTimer--;
    spawnTimeChangeInterval -= 50;
  }
}

Funktion setGameMode(Modus) {
  gameMode = Modus;
  Zeitgeber=0;
}

Funktion raiseSnow() {
  wenn (Spielmodus === Spielmodi.SPIELEN && Schneehöhe < Leinwandhöhe) {
    Schneehöhe++;
  }
}

Funktion setzeHighScore() {
  var currentHighScore = getHighScore();
  wenn (aktuellerHöchststand != -1 && Punktzahl > aktuellerHöchststand) {
    localStorage.setItem("highScore", Punktzahl);
  }
}

Funktion getHighScore() {
  wenn (!localStorage) return -1;
  var highScore = localStorage.getItem("highScore");
  gib Highscore zurück || 0;
}

Titelfarben = Farbverlauf festlegen();
initialisiereSchnee();
setzeInterval(zeichnen, 30);
setInterval(initialisierenSpawnInterval, spawnTimeChangeInterval);
setInterval(erhöhenSnow, 666);

<!DOCTYPE html>
<html lang="de" >
<Kopf>
<meta charset="UTF-8">
<title>Elfengeschenke fangen</title>

<link rel="stylesheet" href="css/style.css" rel="external nofollow" >#Der Code ist zu lang, wenn N Zeichen weggelassen werden</head>
<Text>

<div id="Wrapper">

	<Leinwand-ID = "Leinwand" Breite = "450" ​​Höhe = "540"></Leinwand>
	
</div>


  
</div>

<script src="js/script.js"></script>

</body>
</html>