Små spil med HTML/CSS/JavaScript
Lær at kode sjove og interaktive spil direkte i din browser - perfekt for begyndere og erfarne kodere!
Lær at kode sjove og interaktive spil direkte i din browser - perfekt for begyndere og erfarne kodere!
Mange professionelle spiludviklere startede med at lave simple browser-spil i JavaScript!
Med kun HTML, CSS og JavaScript kan du lave alt fra simple terningespil til avancerede 2D-arkadespil.
Lær hvordan du kan bruge standardteknologier som HTML, CSS og JavaScript til at skabe interaktive, sjove og engagerende spil direkte i webbrowseren.
Alt hvad du behøver er en browser og en teksteditor - intet behov for specialsoftware
Dine spil kan deles som links og spilles på enhver enhed med en browser
Spil er en sjov og engagerende måde at mestre programmeringsfærdigheder
Før du begynder at kode dit første spil, er der nogle grundlæggende ting, du skal have på plads.
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mit Spil</title>
<style>
/* Dit CSS kommer her */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
#game-container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="game-container">
<h1>Mit Spil</h1>
<div id="game-board">
<!-- Spilelementer kommer her -->
</div>
<div id="controls">
<button id="start-button">Start Spil</button>
</div>
</div>
<script>
// Dit JavaScript kommer her
document.getElementById('start-button').addEventListener('click', function() {
alert('Spillet starter!');
// Initialiser dit spil her
});
</script>
</body>
</html>Dette giver dig et grundlæggende setup med:
Terningespil er perfekte førsteprojekter: de er sjove, velkendte og relativt enkle at implementere.
// Funktion til at kaste en terning
function rollDice() {
return Math.floor(Math.random() * 6) + 1;
}
// Event listener til knappen
document.getElementById('roll-button').addEventListener('click', function() {
// Kast terning
const result = rollDice();
// Vis resultatet
const diceElement = document.getElementById('dice');
diceElement.textContent = result;
// Opdater billede baseret på resultatet
const diceImage = document.getElementById('dice-image');
diceImage.src = `dice-${result}.png`;
// Tilføj animation
diceElement.classList.add('roll-animation');
setTimeout(() => {
diceElement.classList.remove('roll-animation');
}, 500);
});For at udvide dette til et Yatzy-spil, skal du tilføje:
Ordspil er fantastiske projekter for at lære array-manipulation, streng-operationer og brugerfeedback.
// Liste med ord
const words = ['PROGRAMMERING', 'JAVASCRIPT', 'COMPUTER', 'UDVIKLING'];
// Vælg et tilfældigt ord
let selectedWord = words[Math.floor(Math.random() * words.length)];
let guessedLetters = [];
let wrongAttempts = 0;
const maxWrongAttempts = 6;
// Opdater display af ordet med gættede bogstaver
function updateWordDisplay() {
const wordDisplay = document.getElementById('word-display');
const display = selectedWord
.split('')
.map(letter => guessedLetters.includes(letter) ? letter : '_')
.join(' ');
wordDisplay.textContent = display;
// Tjek for sejr (ingen underscores tilbage)
if (!display.includes('_')) {
alert('Tillykke! Du gættede ordet!');
}
}
// Håndter gæt
function makeGuess(letter) {
if (guessedLetters.includes(letter)) {
return; // Bogstavet er allerede gættet
}
guessedLetters.push(letter);
if (selectedWord.includes(letter)) {
// Korrekt gæt
updateWordDisplay();
} else {
// Forkert gæt
wrongAttempts++;
document.getElementById('attempts').textContent =
`Forkerte gæt: ${wrongAttempts}/${maxWrongAttempts}`;
// Tjek for tab
if (wrongAttempts >= maxWrongAttempts) {
alert(`Du tabte! Ordet var: ${selectedWord}`);
}
}
}For at færdiggøre spillet, skal du tilføje:
Arkadespil underviser i animation, kollisionsdetektering og spil-loops - kernekoncepter i spiludvikling.
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<title>Snake Spil</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
}
canvas {
background-color: black;
border: 2px solid #333;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Snake Spil</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="score">Score: 0</div>
<script>
// Hent canvas og kontekst
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
// Spilkonfiguration
const gridSize = 20;
const tileCount = canvas.width / gridSize;
// Spilvariabler
let score = 0;
let snake = [
{x: 10, y: 10},
{x: 9, y: 10},
{x: 8, y: 10}
];
let velocityX = 1;
let velocityY = 0;
let food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
// Game loop
function gameLoop() {
// 1. Opdater slangens position
let head = {
x: snake[0].x + velocityX,
y: snake[0].y + velocityY
};
// Wrap-around ved kanter
if (head.x < 0) head.x = tileCount - 1;
if (head.x >= tileCount) head.x = 0;
if (head.y < 0) head.y = tileCount - 1;
if (head.y >= tileCount) head.y = 0;
// Tjek om slangen har spist mad
if (head.x === food.x && head.y === food.y) {
score++;
scoreDisplay.textContent = `Score: ${score}`;
// Ny mad
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
} else {
// Fjern halen hvis der ikke spises mad
snake.pop();
}
// Tilføj nyt hoved
snake.unshift(head);
// 2. Render spillet
// Ryd canvas
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Tegn mad
ctx.fillStyle = 'red';
ctx.fillRect(food.x * gridSize, food.y * gridSize,
gridSize - 2, gridSize - 2);
// Tegn slange
ctx.fillStyle = 'lime';
snake.forEach(part => {
ctx.fillRect(part.x * gridSize, part.y * gridSize,
gridSize - 2, gridSize - 2);
});
// Gentag loop
setTimeout(gameLoop, 100);
}
// Input håndtering
document.addEventListener('keydown', function(e) {
switch(e.key) {
case 'ArrowUp':
if (velocityY !== 1) { // Undgå at vende direkte tilbage
velocityX = 0;
velocityY = -1;
}
break;
case 'ArrowDown':
if (velocityY !== -1) {
velocityX = 0;
velocityY = 1;
}
break;
case 'ArrowLeft':
if (velocityX !== 1) {
velocityX = -1;
velocityY = 0;
}
break;
case 'ArrowRight':
if (velocityX !== -1) {
velocityX = 1;
velocityY = 0;
}
break;
}
});
// Start spillet
gameLoop();
</script>
</body>
</html>Dette er en implementering af det klassiske Snake-spil med disse funktioner:
For at gøre spillet komplet, kan du tilføje:
Her er nogle ideer til spilprojekter, fra begynder til mere avancerede koncepter.