Loading...

Hypermakkara

Tänään haluan kertoa Hypermakkara-pelistäni, jonka toteutin JavaScriptillä Tunkki-projektia varten. Se on matopeli jossa on minun keksimä twisti. Peliä voi pelata sekä puhelimella että tietokoneella. Matopelin toteutuksessa hyödynnettiin tekoälyavusteista koodausta.

Projektin tausta

Kehitin Hypermakkaran osana Tunkki-projektia Entropy Ry:lle. Voit nähdä pelin toiminnassa osoitteessa entropy.fi/2025/e-x-h-lanit, jossa se toimii interaktiivisena elementtinä E-X-H LAN -tapahtuman sivulla.

Yhteistyö tekoälyn kanssa

Mielenkiintoinen näkökulma Hypermarkaraan on, että se on syntynyt tekoälyavusteisen koodauksen tuloksena. Halusin testata, miten tekoäly voisi auttaa pelikehityksessä, ja prosessi opetti minulle arvokkaita oppeja.

Suurin kohtaamani haaste oli, että tekoäly joskus unohti kontekstin ja poisti osia koodista, jotka toimivat jo oikein. Ratkaisuksi kehitin strategian: aina kun minulla oli osio koodia, joka toimi kunnolla, kapseloin sen erilliseen funktioon. Tämä helpotti tekoälyä ymmärtämään kontekstin ja välttämään toimivan koodin rikkomista.

Tämä modulaarinen lähestymistapa ei ainoastaan auttanut työskentelyssä tekoälyn kanssa, vaan johti myös selkeämpään ja helpommin ylläpidettävään koodiin.

Toteutukseni läpikäynti

Käydään läpi koodini keskeiset osat:

Asetukset

export class SnakeGame {
  constructor() {
    this.canvas = document.getElementById("snake");
    this.ctx = this.canvas.getContext("2d");
    this.gameOn = true;
    this.highscore = 0;
    this.height = 600;
    this.width = 800;
    this.running = false;
    this.blockSize = 20;
    this.widthInBlocks = this.width / this.blockSize;
    this.heightInBlocks = this.height / this.blockSize;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.intervalId = 0;
    this.score = 0;
    this.speed = 90;
    this.colliding = false;
  }

Peli käyttää canvas-pohjaista lähestymistapaa. Tärkeä huomioitava asia on, että vaikka asetan koodissa oletusarvoiset mitat, todelliset canvas-mitat mukautuvat käyttäjän näytön kokoon. Pelaajat voivat myös säätää pelialueen kokoa käyttämällä selaimen zoomausta, mikä tarjoaa joustavuutta erilaisiin katseluympäristöihin.

Käärmeen entiteetti

this.snake = {
  body: [
    { x: 6, y: 4 },
    { x: 5, y: 4 },
    { x: 4, y: 4 },
  ],
  direction: "right",
  nextDirection: "right",
};

Päätin esittää käärmeen koordinaattiobjehtien taulukkona. Tämä lähestymistapa tekee helpoksi:

1. Lisätä segmenttejä, kun käärme syö omenan
2. Liikuttaa käärmettä lisäämällä uuden pään ja poistamalla hännän
3. Tarkistaa törmäykset vertailemalla koordinaatteja

Pelisilmukka

Animaatiota varten käytin requestAnimationFrame-funktiota sulavaan renderöintiin ja mukautettua intervallia pelilogiikalle:

play() {
  let self = this;
  if (this.running === false) {
    this.intervalId = setInterval(function () {
      self.update();
    }, this.speed);
    this.running = true;
  }
}

Omenan luonti

newApple() {
  const xCoordinate = Math.floor(Math.random() * (this.widthInBlocks - 2)) + 1;
  const yCoordinate = Math.floor(Math.random() * (this.heightInBlocks - 2)) + 1;

  this.apple = { x: xCoordinate, y: yCoordinate };

  if (this.checkCollision(this.apple.x, this.apple.y)) {
    this.newApple();
  }
}

Tämä metodi luo uuden omenan satunnaiseen sijaintiin. Käytin rekursiota varmistaakseni, ettei omena ilmesty käärmeen päälle - jos törmäys havaitaan, se yrittää yksinkertaisesti uudelleen.

Liikkumisen logiikka

Toteutin suunnanmuutokset näppäinkuuntelijoilla ja lisäsin logiikan estämään käärmettä kääntymästä välittömästi vastakkaiseen suuntaan:

khangeDirection(newDirection) {
  if (this.snake.direction === "up" && newDirection === "down") {
    return;
  } else if (this.snake.direction === "right" && newDirection === "left") {
    return;
  } else if (this.snake.direction === "down" && newDirection === "up") {
    return;
  } else if (this.snake.direction === "left" && newDirection === "right") {
    return;
  }
  this.snake.nextDirection = newDirection;
}

Mobiili versio ohjaus on täysin erilainen, koska kännyköissä ei ole näppäimistöä

Törmäyksen tunnistus

Peli tarkistaa kolmenlaisia törmäyksiä:

1. Seinärajoihin
2. Käärmeen omaan vartaloon
3. Omenaan (pisteiden saamiseksi)

checkCollision(x, y) {
  if (
    x < 0 ||
    x >= this.widthInBlocks ||
    y < 0 ||
    y >= this.heightInBlocks
  ) {
    return true;
  }

  for (let i = 0; i < this.snake.body.length; i++) {
    if (this.snake.body[i].x === x && this.snake.body[i].y === y) {
      return true;
    }
  }
  return false;
}

Oivalluksia tekoälyn kanssa työskentelystä

Tekoälyn kanssa työskentely tämän pelin parissa opetti minulle useita arvokkaita oppeja yhteistyökoodauksesta:

1. Funktioiden eristäminen: Koodin jakaminen pienempiin, hyvin määriteltyihin funktioihin auttaa tekoälyä ymmärtämään kontekstin paremmin ja estää sitä muokkaamasta kriittistä, toimivaa koodia.

2. Inkrementaalinen kehitys: Pienten osien saaminen toimimaan ennen siirtymistä seuraavaan ominaisuuteen oli olennaista työskenneltäessä tekoälyn kanssa.

3. Kontekstin hallinta: Tekoälyn johdonmukainen muistuttaminen sovelluksen tilasta ja kunkin funktion tarkoituksesta auttoi ylläpitämään koherenssia.

4. Tarkistusprosessi: Tekoälyavusteisuudesta huolimatta perusteellinen koodin tarkistus oli tarpeen varmistaakseen, että kaikki toimii odotetusti.

Suunnittelutavoitteeni

Luodessani Hypermarkaraa keskityin useisiin keskeisiin näkökohtiin:

1. Selkeä koodin organisointi: Rakensin koodin luokkana tehdäkseni siitä helposti ymmärrettävän ja ylläpidettävän.

2. Moderni JavaScript: Käytin ES6+ -ominaisuuksia kuten luokkia ja nuolifunktioita pitääkseni koodin ajankohtaisena.

3. Vastuiden erottelu: Erotin renderöintilogiikan pelilogiikasta paremman ylläpidettävyyden vuoksi, mikä myös auttoi tekoälyn kanssa työskentelyssä.

4. Responsiivinen suunnittelu: Tein canvas-mitoista mukautuvia eri näyttökokoihin ja zoomaustasoihin.

5. Älykäs törmäyslogiikka: Toteutin rekursiivisen lähestymistavan omenan sijoittamiseen reilua pelattavuutta varten.

Kokeile peliä

Voit pelata Hypermarkaraa E-X-H LAN -tapahtuman sivulla. Kannustan sinua kokeilemaan sitä ja näkemään, miten responsiivinen canvas mukautuu näyttöösi ja selaimen zoomausasetuksiin.

Yhteenveto

Hypermakkaran luominen ei ollut vain klassisen pelikonseptin toteuttamista, vaan myös tekoälyn potentiaalin tutkimista koodauskumppanina. Tästä yhteistyöstä syntynyt modulaarisuus on tehnyt koodista ylläpidettävämpää ja helpommin ymmärrettävää.

Tämä projekti osoittaa, että tekoäly voi olla arvokas työkalu pelikehityksessä, kun sitä käytetään sopivilla strategioilla. Avain on ymmärtää sekä tekoälyavusteisuuden vahvuudet että rajoitukset ja mukauttaa koodauslähestymistapaa niiden mukaisesti.