24. syyskuuta 2025

Vibe-coding jatkuu...

1. Aloitus

  • Luo kansio peliä varten omalle koneelle (esim. toimintapeli).


  • Luodaan kansioon Notepad++ -ohjelmalla kolme tiedostoa:

    • index.html (pelin rakenne)

    • style.css (pelin ulkonäkö)

    • script.js (pelin toiminnallisuus)

  • Tiedostojen sisällöt kuvataan alla:

2. Kopio seuraavat koodit näihin tiedostoihin

Luo pelin rakenne index.html-tiedostoon:

 
<!DOCTYPE html>
<html lang="fi">
 <head> <meta charset="UTF-8">
 <title>Mun Toimintapeli</title>
 <link rel="stylesheet" href="style.css">
</head>
<body> <canvas id="gameCanvas" width="800" height="600"></canvas>
 <script src="script.js"></script>
</body>
</html>

Tallenna koodi Hyper Text Markup Language File -tyyppisenä:


Luo pelin ulkonäkö style.css -tiedostoon:

body {
 margin: 0;
 height: 100vh;
 background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fad0c4, #fbc2eb, #a18cd1);
 background-size: 400% 400%;
 animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
 background-position: 0% 50%;
}
}

Tallenna koodi Cascading Style Sheet -tyyppisenä:


3. Aloita toiminnallisuuden kehittäminen ensimmäisestä testikuvasta 


Luo pelin toiminnallisuus script.js -tiedostoon ja piirrä yksi hahmo (esim. neliö) canvas-elementtiin. Kopio siis seuraava koodi:
 
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");
let player = { x: 50, y: 50, size: 30 };
function draw() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.fillStyle = "red";
 ctx.fillRect(player.x, player.y, player.size, player.size);
}
setInterval(draw, 30);

Tallenna koodi JavaScript file -tyyppisenä:


4. Liike ja ohjaus

Lisää nuolinäppäinohjaus:

document.addEventListener("keydown",
function(e) {
 if (e.key === "ArrowUp") player.y -= 10;
 if (e.key === "ArrowDown") player.y += 10;
 if (e.key === "ArrowLeft") player.x -= 10;
 if (e.key === "ArrowRight") player.x += 10; });

5. Vibe Coding -vaihe

Nyt alkaa ”fiilistelyosuus”:

  • Muuta värejä, kokoa, nopeutta.

  • Lisää vihollinen (toinen neliö, joka liikkuu satunnaisesti).

  • Tee pistelasku: piste +1 kun osuu tiettyyn kohtaan.

  • Lisää taustaefektejä (esim. muuttuva väri).

  • Kokeile tehdä ääni (vaikka yksinkertainen Audio-objekti).

6. Testaa ja iteroi

  • Pelaa itse → mikä fiilis?

  • Mitä haluaisit lisää? (Esteitä, vaikeustaso, animaatioita?)

  • Tee yksi muutos kerrallaan → testaa heti.

7. Bonus (jos aika ja into riittää)

  • Lisää aloitusvalikko (”Aloita peli” -nappi).

  • Tee ”Game Over” -ruutu.

  • Tallenna parhaat pisteet selaimen localStorageen.


🎯 Tärkein asenne

  • Ei tarvitse olla täydellistä → tärkeintä on kokeilla!

  • Vibe coding = ensin kokeillaan, sitten kehitetään idean ympärille.

  • Kaikki muutokset ovat sallittuja, kunhan itse tykkää lopputuloksesta.

    MIKÄLI HALUAT VARMISTAA KOODIEN SÄILYMISEN, KOPIOI NE MYÖS OMAAN PILVEESI (ONEDRIVE)!