retrosnake/index.html at master · geobalas/retrosnake · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Snake game</title>
        <link rel="stylesheet" type="text/css" href="styles/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="description" content="A simple snake game, similar to the ones available in the old Nokia phones.">
    </head>
    <body ng-app="snake">
        <div class="main-body" ng-controller="gameController" ng-class="{'victory': victory}">
            <span class="score-indicator ng-cloak">Score: {{getSnakesLength()}}</span>
            <div class="board">
                <span ng-repeat="row in blocks">
                    <span class="board-block" ng-repeat="block in row" ng-class="{'snake': block.snake, 'egg': block.egg}"></span>
                </span>
            </div>
            <div class="modal-backdrop ng-cloak" ng-show="showModal">
                <div class="modal-window" ng-if="gameIsOn && !gameIsPaused">
                    <h2>Snake game!</h2>
                    <p>This is a simple snake game, similar to the ones available in the old Nokia phones.</p>
                    <p>Use the arrow keys to move the snake around, and Esc to pause. Have fun!</p>
                    <button ng-click="play()">Play!</button>
                </div>
                <div class="modal-window" ng-if="!gameIsOn">
                    <h2>Bad luck!</h2>
                    <p class="modal-score-indicator">Score: {{getSnakesLength()}}</p>
                    <button ng-click="play()">Play again!</button>
                </div>
            </div>
            <div class="modal-backdrop ng-cloak" ng-show="gameIsPaused">
                <div class="modal-window paused-modal">Paused</div>
            </div>
        </div>
        <script type="text/javascript" src="/bower_components/angular/angular.min.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>
        <script type="text/javascript" src="/js/controllers/gameController.js"></script>
    </body>
</html>