Open WebUI

[Dorena Verne]

Mein Gott, LM-Studio hatte ich schon längst wieder vergessen.*lol Aber dein Post macht neugierig, also wieder her damit. Dein Model gleich danach installiert und mir ein Spiel ala Space Invader programieren lassen.^^

Code:

// Space Invaders Game in JavaScript

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext('2d');

// Player class
class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 50;
    this.height = 20;
    this.speed = 5;
  }

  draw() {
    ctx.fillStyle = 'blue';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  moveLeft() {
    this.x -= this.speed;
  }

  moveRight() {
    this.x += this.speed;
  }
}

// Invader class
class Invader {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 30;
    this.height = 20;
    this.speed = 1;
  }

  draw() {
    ctx.fillStyle = 'red';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  moveDown() {
    this.y += this.speed;
  }
}

// Bullet class
class Bullet {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 5;
    this.height = 10;
    this.speed = 5;
  }

  draw() {
    ctx.fillStyle = 'yellow';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  moveUp() {
    this.y -= this.speed;
  }
}

// Game initialization
const player = new Player(canvas.width / 2, canvas.height - 30);
const invaders = [];
for (let i = 1; i < 7; i++) {
  for (let j = 0; j < 5; j++) {
    invaders.push(new Invader(i * 70, j * 30));
  }
}
const bullets = [];

// Event listeners
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') {
    player.moveLeft();
  } else if (e.key === 'ArrowRight') {
    player.moveRight();
  } else if (e.key === 'Space') {
    bullets.push(new Bullet(player.x + player.width / 2, player.y));
  }
});

// Game loop
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  player.draw();

  invaders.forEach(invader => {
    invader.draw();
    invader.moveDown();
  });

  bullets.forEach(bullet => {
    bullet.draw();
    bullet.moveUp();
  });

  // Collision detection
  bullets.forEach((bullet, index) => {
    invaders.forEach((invader, invaderIndex) => {
      if (bullet.x < invader.x + invader.width &&
          bullet.x + bullet.width > invader.x &&
          bullet.y < invader.y + invader.height &&
          bullet.y + bullet.height > invader.y) {
        invaders.splice(invaderIndex, 1);
        bullets.splice(index, 1);
      }
    });
  });

  requestAnimationFrame(gameLoop);
}

gameLoop();

Als Anleitung kam:"Um das Spiel zu spielen, fügen Sie einfach den obigen Code in Ihre HTML-Datei ein und führen Sie ihn aus. Mit den Pfeiltasten nach links und rechts können Sie den Spieler bewegen, und mit der Leertaste können Sie schießen. Viel Spaß beim Spielen!"

Teste ich mal morgen.