Snake/snake.html at master · swaff/Snake · GitHub

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
	<head>
        <title>Snake on canvas</title>
        <link href="styles/snake.css" rel="Stylesheet" type="text/css" />
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
		<script type="text/javascript" src="scripts/namespace.js"></script>
        <script type="text/javascript" src="scripts/snake.js"></script>
        <script type="text/javascript" src="scripts/SnakeScore.js"></script>
        <script type="text/javascript" src="scripts/localStore.js"></script>
        <script type="text/javascript" src="scripts/highScores.js"></script>
        <script type="text/javascript" src="scripts/food.js"></script>
        <script type="text/javascript" src="scripts/highScoresRenderer.js"></script>
        <script type="text/javascript" src="scripts/positions.js"></script>

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.tmpl.min.js"></script>
		<script type="text/javascript">
		    $(function () {

		        // start with a zero score
		        $(".score").text("0");

		        // initially do not show the high scores
		        $("#highScoresContainer").hide();

		        $("#btnStart").click(function () {

		            // reset the score
		            $(".score").text("0");

		            // start the game
		            SNK.controller.init();

		            // disable the start button
		            $(this).attr( "disabled", true );
		        });

		        $("#btnPause").click(function () {

		            // get the current label for the button
		            var label = $(this).text();

		            // if pause pressed, then pause the game and set the button label to 'Continue'
		            if (label === "Pause") {
		                SNK.controller.pause();
		                label = "Continue";
		            } else {
		                SNK.controller.go();
		                label = "Pause";
		            }

		            // change the text of the button to the toggled value
		            $(this).text(label);
		        });

		        $("#btnSaveScore").click(function () {

		            // get the user's name
		            var username = $("#txtName").val();
		            SNK.localStore.saveScore(username, $(".score").first().text());

		            // get the high scores
		            var highScores = SNK.highScores.getScores();

		            if (highScores.length > 0) {

		                // update the high scores table
		                SNK.highScoresRenderer.render("highScores", "highScoresTemplate", highScores);
		                $("#highScoresContainer").show();
		            }

		            // close the dialog
		            $("#dialog").dialog("close");
		        });

		        SNK.foodEaten = function (score) {
		            $(".score").text(score);
		        };

		        SNK.gameOver = function (score) {

		            $("#btnStart").attr("disabled", false );
		            $("#dialog").dialog("open");
		        };

		        $("#dialog").dialog({
		            height: 300,
		            width: 300,
		            modal: true,
		            autoOpen: false
		        });
		    });
		</script>
    </head>
	<body>
        <hgroup>
            <h1>Snake on Canvas!</h1>
        </hgroup>
        <div>
            <button id="btnStart" class="button">Start</button>
            <button id="btnPause" class="button">Pause</button>
            <p>Current Score: <span class="score"></span></p>
        </div>

        <div id="dialog" title="Snake - Game Over">
	        <p>Well done, you scored <span class="score"></span></p>

            <div>
                <p>You can save your score</p>
                <label for="txtName">Your Name:</label>
                <input id="txtName" type="text" />
                <button id="btnSaveScore">Save</button>
            </div>
        </div>

        <div id="canvasContainer">
		    <canvas id="cnvSnake" width="300" height="300" />
        </div>
        <aside id="rules">
            <hgroup>
                <h2>Rules</h2>
            </hgroup>
            <ul>
                <li>Press Start</li>
                <li>Using the arrow keys to move the direction of the snake</li>
                <li>Collect food by moving the snake's head over the blue discs.</li>
                <li>Pause the game at any time by pressing Pause, then press Continue to carry on.</li>
            </ul>
        </aside>
        <div id="highScoresContainer">
			<hgroup>
				<h2>High Scores</h2>
			</hgroup>
            <script id="highScoresTemplate" type="text/x-jquery-tmpl">
                <tr>
                    <td>${username}</td>
                    <td>${highScore}</td>
                </tr>
            </script>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Score</th>
                    </tr>
                </thead>
                <tbody id="highScores">

                </tbody>
            </table>
        </div>
	</body>
</html>