Vibe-coding jatkuu...

2025-09-24T09:30:14+03:00

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: Tallenna koodi JavaScript file -tyyppisenä:

4. Liike ja ohjaus

Lisää nuolinäppäinohjaus:

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)!

24. syyskuuta 2025