Kunstig intelligens, også kaldet AI, har på kort tid ændret måden vi skaber, lærer og udvikler på. Det som tidligere krævede tekniske færdigheder kan nu gøres ved blot at skrive et simpelt stykke tekst kaldet et prompt.
Med et godt prompt kan man få AI til at lave en hjemmeside, udvikle et spil eller bygge et digitalt værktøj, der løser opgaver af sig selv. Det betyder, at både lærere, elever, studerende og udviklere kan skabe digitale produkter uden at skulle skrive koden fra bunden.
Eksempler på hvad man kan lave med AI
- En hjemmeside med menuer og billeder
- Et interaktivt spil som kan tilpasses efter behov
- Et værktøj der hjælper med beregninger, tekst eller data
AI fungerer som en digital medskaber, der omsætter idéer til virkelighed på få minutter.
Et konkret eksempel på et spil
Et godt eksempel på AI’ens styrke er det klassiske Snake-spil. På siden onecompiler.com/html kan du selv prøve at lave spillet. Vælg “New Project → HTML, CSS, JS” og skriv dette prompt til AI’en:
Prompt:
Lav et komplet Snake-spil i HTML, CSS og JavaScript.
Spillet skal have:
- en startskærm med en Start Game knap
- et spilområde i canvas hvor slangen bevæger sig
- pointtælling som vises under spillet
- en Game Over skærm med mulighed for at starte forfra
- en sort baggrund grøn slange og rød mad
- kontrol med piletasterne
Koden skal være samlet i én fil så jeg kan kopiere den direkte ind i onecompiler.com/html og trykke Run.
Alt skal virke uden eksterne filer og pointene skal tælles korrekt.
Når du kører dette prompt i en AI får du et spilbart Snake-spil direkte i browseren. Du kan ændre farver, hastighed eller layout ved blot at justere nogle få linjer.
Muligheder og udfordringer
AI-værktøjer åbner store muligheder for kreativitet og læring. De gør det lettere at forstå programmering og at skabe egne ideer. Samtidig giver de adgang til hurtig eksperimentering og nye måder at arbejde på.
Men teknologien giver også udfordringer. Det kan være svært at vurdere kvaliteten af AI-genereret kode, og der opstår spørgsmål om ansvar, ophavsret og læring. Derfor er det vigtigt at bruge AI med omtanke og stadig fastholde forståelsen for, hvad man skaber.
Eksempel på hvad promptet kan lave
Herunder ses et eksempel på den kode som AI typisk genererer. Du kan kopiere den ind på onecompiler.com/html og trykke Run for at se spillet.
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<style>
body {
background-color: #000;
color: #0f0;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
#gameContainer {
display: none;
}
canvas {
background-color: #111;
display: block;
margin: 20px auto;
border: 2px solid #0f0;
}
button {
background-color: #0f0;
color: #000;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
#gameOver {
display: none;
color: #f00;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Snake</h1>
<div id="startScreen">
<p>Tryk på start for at spille</p>
<button onclick="startGame()">Start Game</button>
</div>
<div id="gameContainer">
<canvas id="gameCanvas" width="400" height="400"></canvas>
<p>Point: <span id="score">0</span></p>
<div id="gameOver">
<p>Game Over</p>
<button onclick="restartGame()">Spil igen</button>
</div>
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const scoreDisplay = document.getElementById("score");
const startScreen = document.getElementById("startScreen");
const gameContainer = document.getElementById("gameContainer");
const gameOverScreen = document.getElementById("gameOver");
let snake = [{ x: 10, y: 10 }];
let food = { x: 5, y: 5 };
let dx = 1;
let dy = 0;
let score = 0;
let boxSize = 20;
let gameLoop;
function startGame() {
startScreen.style.display = "none";
gameContainer.style.display = "block";
gameOverScreen.style.display = "none";
resetGame();
gameLoop = setInterval(update, 100);
}
function resetGame() {
snake = [{ x: 10, y: 10 }];
food = randomFood();
dx = 1;
dy = 0;
score = 0;
scoreDisplay.textContent = score;
}
function update() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score++;
scoreDisplay.textContent = score;
food = randomFood();
} else {
snake.pop();
}
if (checkCollision()) {
clearInterval(gameLoop);
gameOverScreen.style.display = "block";
}
draw();
}
function checkCollision() {
const head = snake[0];
if (
head.x < 0 ||
head.y < 0 ||
head.x >= canvas.width / boxSize ||
head.y >= canvas.height / boxSize
) return true;
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) return true;
}
return false;
}
function draw() {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f00";
ctx.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize);
ctx.fillStyle = "#0f0";
snake.forEach(part => {
ctx.fillRect(part.x * boxSize, part.y * boxSize, boxSize - 1, boxSize - 1);
});
}
function randomFood() {
return {
x: Math.floor(Math.random() * (canvas.width / boxSize)),
y: Math.floor(Math.random() * (canvas.height / boxSize))
};
}
function restartGame() {
startGame();
}
document.addEventListener("keydown", e => {
if (e.key === "ArrowUp" && dy === 0) { dx = 0; dy = -1; }
else if (e.key === "ArrowDown" && dy === 0) { dx = 0; dy = 1; }
else if (e.key === "ArrowLeft" && dx === 0) { dx = -1; dy = 0; }
else if (e.key === "ArrowRight" && dx === 0) { dx = 1; dy = 0; }
});
</script>
</body>
</html>