Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv2/projekt/snake/
E/
css/
js/
snake.html
snake.sync-conflict-20250925-184035-H7ZHIM2.html
snake.zip
snake.html
81 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ormspel</title>
<link rel="stylesheet" href="./css/snake.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="game-container">
<div class="left-column">
<div class="header">
<h2>Ormspel</h2>
</div>
<div id="scoreBoard">
<h4>Poängtavla:</h4>
<p>Poäng: 0</p>
</div>
<div class="controls-info">
<h4>Kontroller:</h4>
<div class="player-controls">
<p>Förflytta: <span>Piltangenter/WASD</span></p>
<p>Pausa/Starta: <span>Mellanslag</span></p>
</div>
<div class="info-section">
<h4>Information:</h4>
<ul>
<li>Ät mat för att växa och få poäng</li>
<li>Hastigheten ökar var 5:e poäng</li>
<li>Undvik att krocka med väggar, hinder och dig själv</li>
</ul>
</div>
</div>
</div>
<div class="board-container">
<canvas id="board"></canvas>
<div id="gameOverlay">
<div id="overlayMessage">Tryck på mellanslag för att starta</div>
<div id="overlaySubMessage"></div>
</div>
</div>
<div class="right-column">
<div class="options-panel">
<h3>Spelinställningar</h3>
<div class="option-group">
<label>Spelhastighet</label>
<input type="range" id="gameSpeed" class="game-option" min="5" max="20" value="10">
<div class="range-labels">
<span>Långsam</span>
<span>Snabb</span>
</div>
</div>
<div class="option-group toggle">
<label for="toggleWalls">Vägghinder</label>
<label class="switch">
<input type="checkbox" id="toggleWalls" class="game-option" checked>
<span class="slider"></span>
</label>
</div>
<div class="option-group toggle">
<label for="toggleWrap">Wrap Around</label>
<label class="switch">
<input type="checkbox" id="toggleWrap" class="game-option">
<span class="slider"></span>
</label>
</div>
</div>
</div>
</div>
<script src="./js/snake.js"></script>
</body>
</html>