11<!doctype html>
22< html lang ="en ">
3+
34< head >
45 < meta charset ="utf-8 ">
56 < meta name ="viewport " content ="width=device-width,initial-scale=1 ">
67 < title > Snake Game</ title >
78 < link rel ="stylesheet " href ="./styles.css ">
89</ head >
10+
911< body >
1012 < main >
11- < h1 > Snake Game</ h1 >
12- < div id ="scoreboard "> Score: 0 • Best: 0</ div >
13- < canvas id ="board " width ="320 " height ="320 " aria-label ="Snake game board " role ="img "> </ canvas >
14- < div class ="controls "> < button id ="startBtn "> Start</ button > < label > Speed < input id ="speed " type ="range " min ="1 " max ="10 " value ="5 "> </ label > </ div >
15- < p class ="notes "> Use arrow keys. Contribute by adding: levels, obstacles, or touch controls.</ p >
16- </ main >
13+ < h1 > Snake Game</ h1 >
14+
15+ < div class ="game-container ">
16+
17+ < div class ="game-left ">
18+ < div id ="scoreboard ">
19+ < div > Player A 🟡: < span id ="scoreA "> 0</ span > </ div >
20+ < div > Player B 🟢: < span id ="scoreB "> 0</ span > </ div >
21+ < div > Best Score: < span id ="bestScore "> 0</ span > (< span id ="bestPlayer "> None</ span > )</ div >
22+ </ div >
23+
24+ < canvas id ="board " width ="320 " height ="320 " aria-label ="Snake game board " role ="img "> </ canvas >
25+
26+ < div class ="controls ">
27+ < button id ="startBtn "> Start</ button >
28+ < label > Speed < input id ="speed " type ="range " min ="1 " max ="10 " value ="5 "> </ label >
29+ </ div >
30+ </ div >
31+
32+
33+ < section class ="rules game-right " style ="margin-top: -70px; ">
34+ < h2 > Game Rules</ h2 >
35+ < div class ="player-rule playerA ">
36+ < h3 > Player A 🟡</ h3 >
37+ < ul >
38+ < li > < strong > Arrow Up:</ strong > Move Up</ li >
39+ < li > < strong > Arrow Down:</ strong > Move Down</ li >
40+ < li > < strong > Arrow Left:</ strong > Move Left</ li >
41+ < li > < strong > Arrow Right:</ strong > Move Right</ li >
42+ </ ul >
43+ </ div >
44+ < div class ="player-rule playerB ">
45+ < h3 > Player B 🟢</ h3 >
46+ < ul >
47+ < li > < strong > W:</ strong > Move Up</ li >
48+ < li > < strong > S:</ strong > Move Down</ li >
49+ < li > < strong > A:</ strong > Move Left</ li >
50+ < li > < strong > D:</ strong > Move Right</ li >
51+ </ ul >
52+ </ div >
53+ < p class ="notes "> Avoid hitting yourself or the other player. Eat food to increase your score. The game ends when a collision occurs.</ p >
54+ </ section >
55+ </ div >
56+ </ main >
57+
1758 < script type ="module " src ="./main.js "> </ script >
1859</ body >
60+
1961</ html >
0 commit comments