-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
72 lines (72 loc) · 3.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<meta name="Snake Game" content="The Classic Snake game for time pass!" charset='utf-8'/>
<title>Snake Game - The Classic Game for time pass</title>
<link rel="shortcut icon" type="image/jpg" href="assets/images/snake.png"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class= 'game'>
<div class="header">
<h1>
Welcome to the Classic Snake Game <img id="snake" src="assets/images/snake.png" alt="Snake Image" class="snakeImg" />
</h1>
<div class="rules-control">
<h2>How To Play</h2>
<p class="gameRule">
The game is very simple. All you have to do is control the <span class="snakeColor">Snake</span>, and
move it towards the Rat (<img id="food" src="assets/images/rat_image.svg" alt="Rat Image" width="20" height="20" />) to eat it.
Once, the <span class="snakeHeadColor">head</span> of the <span class="snakeColor">Snake</span> touches/eat's the
Rat (<img id="food" src="assets/images/rat_image.svg" alt="Rat Image" width="20" height="20" />), the size of the <span class="snakeColor">Snake</span>
will increase by 1 <span class="snakeColor">square box</span> and your score will increment by 1. If the <span class="snakeColor">snake</span>
touches the <span class="wallColor">wall/block</span> (read Instructions before the level start) or if the <span class="snakeHeadColor">head</span>
of <span class="snakeColor">Snake</span> touches it's own <span class="snakeColor">body</span>, then...
</p>
<p class="gameOvr">GAME OVER!</p>
</div>
</div>
<div class="canvas-controls">
<div class="controls-section">
<h2 class="levelheader">Choose A Level</h2>
<div class="levelButtons">
<button id="lvl1" class="lvlBtn" onclick="beginGame(this)">LEVEL 1</button>
<button id="lvl2" class="lvlBtn" onclick="beginGame(this)">LEVEL 2</button>
<button id="lvl3" class="lvlBtn" onclick="beginGame(this)">LEVEL 3</button>
</div>
<h2 class="controlheader">Controls:</h2>
<ul>
<li>Up Direction: <span class="control">Up Arrow / W / (Numpad) 8</span></li>
<li>Left Direction: <span class="control">Left Arrow / A / (Numpad) 4</span></li>
<li>Down Direction: <span class="control">Down Arrow / S / (Numpad) 2</span></li>
<li>Right Direction: <span class="control">Right Arrow / D / (Numpad) 6</span></li>
</ul>
</div>
<div class="canvas">
<div id="instrctn" class="instrctn">
<h4 id="chooseLvl">
Choose a level to start playing the classic game of Snake and Rat...
</h4>
<h4 id="instrctnHead">Instructions for the level</h4>
<p id="aboutSection"></p>
<h5 id="timertxt">Your game starts in <span id="timer">00:10</span></h5>
<h1 id="gmeOvr">Game Over :(</h1>
<h3 id="scoreTxt">Total Rat's Eaten: <span id="score"></span></h3>
<button id="plyAgain" onclick="resetGame()">Play Again
<img src="assets/images/replay.png" alt="Replay" width="30" height="30" style="vertical-align: middle; margin-top: -2px;"/></button>
</div>
<canvas id="canvas" width="900" height="600"></canvas>
</div>
</div>
<div class="reportButton">
<a class="report-link" href="https://github.com/Nikhil-Ladha/Snake-Game/issues/new" target="_blank" rel="noreferrer">
<button class="reportIsue">Report An Issue <img class="github" src="./assets/images/github.png" atl="Github"/></button>
</a>
<p class="start-link">If you liked the game, do not hesitate to it a
<a href="https://github.com/Nikhil-Ladha/Snake-Game"><img src="assets/images/star.png"><span>Star</span></a>
</p>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>