Lav dit eget pixeltegneprogram med HTML, CSS og JavaScript

Et billede på en skærm består af tusindvis af små firkanter, der hedder pixels. I dette projekt bygger du dit eget tegneprogram: en hjemmeside med et gitter af pixels, som du farver ved at klikke på dem. HTML bygger gitteret, CSS bestemmer, hvordan det ser ud, og JavaScript gør, at der sker noget, når du klikker.

Før du starter

Du kan bruge Raspberry Pi Code Editor, som er gratis og virker i browseren. Vælg HTML/CSS. Projektet har allerede filerne index.html og styles.css. Klik på Add file, og lav en fil mere, der hedder script.js. Klik på Run for at se din side. Du kan kode uden konto og gemme projektet på din computer med knappen Download. Vil du gemme det online, skal du have en konto – og er du under 13 år, skal du have lov af en forælder til at oprette den. Du kan også lave de tre filer i en mappe på din computer med en teksteditor, fx VS Code, og åbne index.html i din browser.

Byg gitteret

Skriv HTML-koden herunder i index.html. Hver div er en usynlig kasse. tegning er hele tegnefladen, hver raekke er en række, og hver pixel er en firkant, du kan farve. Brug kopiér og sæt ind, så du ikke skal skrive det samme flere gange.

<!DOCTYPE html>
<html lang="da">
<head>
  <meta charset="utf-8">
  <title>Pixeltegneren</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Pixeltegneren</h1>

  <div id="tegning">
    <div class="raekke">
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
    </div>
    <div class="raekke">
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
    </div>
    <div class="raekke">
      <div class="pixel"></div>
      <div class="pixel"></div>
      <div class="pixel"></div>
    </div>
  </div>

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

Kør koden. Du kan kun se overskriften, for kasserne har ingen størrelse endnu. Det klarer CSS.

Giv gitteret udseende

Skriv CSS-koden i styles.css. display: table får tegningen til at opføre sig som en tabel med rækker og celler, så pixels står pænt på række. border-spacing: 1px laver en lille afstand mellem pixels, så den mørkeblå baggrund titter frem som tynde streger. Reglen for .pen skal du bruge senere til paletten.

#tegning {
  display: table;
  border-spacing: 1px;
  background-color: navy;
  border: 5px solid navy;
}

.raekke {
  display: table-row;
}

.pixel {
  display: table-cell;
  width: 40px;
  height: 40px;
  background-color: white;
}

.pen {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border: 2px solid black;
  cursor: pointer;
}

Kør koden igen. Nu kan du se et gitter med 3 × 3 hvide pixels. Prøv at ændre width og height eller farven navy.

Farv en pixel

Skriv JavaScript-koden i script.js. Funktionen farvPixel farver den pixel, den får. querySelectorAll('.pixel') finder alle pixels, og addEventListener sørger for, at funktionen bliver kaldt, når du klikker på en af dem.

function farvPixel(pixel) {
  pixel.style.backgroundColor = 'black';
}

const pixels = document.querySelectorAll('.pixel');
pixels.forEach((pixel) => {
  pixel.addEventListener('click', () => farvPixel(pixel));
});

Klik på nogle pixels. Bliver de sorte? <script src="script.js"> står nederst i index.html. Så findes alle pixels, før JavaScript leder efter dem.

Lav en palet

1. Sæt paletten ind i index.html lige under overskriften. Hver pen er en lille kasse med en farve. data-farve gemmer farvens navn, så JavaScript kan læse det.

  <div id="palet">
    <div class="pen" data-farve="black" style="background-color: black;"></div>
    <div class="pen" data-farve="white" style="background-color: white;"></div>
    <div class="pen" data-farve="red" style="background-color: red;"></div>
    <div class="pen" data-farve="gold" style="background-color: gold;"></div>
  </div>

1. Skift hele script.js ud med koden herunder. Variablen penFarve husker, hvilken farve du maler med. Når du klikker på en pen, får penFarve pennens farve fra data-farve.

let penFarve = 'black';   // den farve, du maler med lige nu

function farvPixel(pixel) {
  pixel.style.backgroundColor = penFarve;
}

// Når du klikker på en pixel, får den penFarve
const pixels = document.querySelectorAll('.pixel');
pixels.forEach((pixel) => {
  pixel.addEventListener('click', () => farvPixel(pixel));
});

// Når du klikker på en pen i paletten, skifter penFarve
const penne = document.querySelectorAll('.pen');
penne.forEach((pen) => {
  pen.addEventListener('click', () => {
    penFarve = pen.dataset.farve;
  });
});

Klik på den røde pen, og mal! Den hvide pen virker som viskelæder.

En større tegneflade

3 × 3 pixels er ikke ret meget. Gør tegnefladen 8 × 8: Lav en række med 8 pixels, og kopiér den, så du får 8 rækker. JavaScript-koden virker uden ændringer, fordi den finder alle pixels – uanset hvor mange der er.

💡 Kan du tegne Dannebrog? Det er rødt med et hvidt kors, og den lodrette streg sidder tættere på venstre side end på højre.

💡 Vil du have flere farver, så søg efter “CSS color names”. Du kan også bruge farvekoder som #ff8800. Vil du gemme dit billede, så tag et skærmbillede.

Vil du vide, hvordan en computer gemmer billeder som tal? Prøv Mal et billede med tal – helt uden skærm. Vil du lære mere om hjemmesider, så tag forløbene Din første hjemmeside – HTML og CSS og JavaScript – gør din hjemmeside levende.

Oversat og bearbejdet af CodingKids efter et projekt fra Raspberry Pi Foundation. Ændret: dansk tekst og danske navne i koden, paletten læser farven fra data-farve, og tips om en større tegneflade og Dannebrog er tilføjet. Original: Pixel art. Denne side deles under licensen CC BY-SA 4.0.