<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Snake</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div id="backlayer"></div>
<div id="startScreen">
<h1>My Snake</h1>
Please choose a level:
<ul id="levelChoice"></ul>
<p>Use the arrows to navigate. Press p to make a pause.</p>
<a href=#-1 id="rulesBtn" >Rules</a>
</div>
<div id="gameScreen">
<p>Score: <span id="scoreTarget"></span></p>
<div id="canvasTarget"></div>
<a href=# id="menuBtn">Stop Game</a>
</div>
<div id="rulesScreen">
<h1>Rules</h1>
<p>Do not touch any map's border or any wall. (Do not harm your snake.. You are watched)</p>
<p>You have one job : eat food ! (Try to not feed him with its own tail)</p>
<br>
<h2>Know everything about the different blocks :</h2>
Food :
<div id="foodList"></div>
Wall :
<div id="wallList"></div>
Map :
<div id="mapList"></div>
<br>
<a href=# id="menuBtn">Go back to menu</a>
</div>
<script src="script.js"></script>
</body>
</html>