Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 88c987f749
Fetching contributors…

Cannot retrieve contributors at this time

file 155 lines (130 sloc) 4.962 kb
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>
    <head>
        <title>Snack</title>
    </head>
    <link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>

    <style>
        
        #game-container {
            width: 400px;
            height: 480px;
            position: relative;
            margin: 10px;
            padding: 0;
            font-family: HelveticaNeue, Helvetica, sans-serif;
            color: #333;
            overflow: hidden;
        }

        #game-container li {
            display: none;
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid #999;
            margin: 0;
            padding: 0;
            text-align: center;
            box-sizing: border-box;
        }

        .transform-supported #game-container li {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-transform: translate3d(100%, 0, 0);
        }

        #game-container li.hide,
        #game-container li.show {
            -webkit-transition: -webkit-transform .4s ease-out;
        }

        .transform-supported #game-container li.show {
            -webkit-transform: translate3d(0%, 0, 0);
        }

        .transform-supported #game-container li.hide {
            -webkit-transform: translate3d(-100%, 0, 0);
        }

        #game-container button {
            display: block;
            min-width: 100px;
            margin: 10px auto;
            border: 1px solid #ccc;
            box-shadow: 0 0 2px #111;
            border-radius: 10px;
            padding: 10px 15px;
            color: #111;
            text-shadow: 1px 1px #888;
            font-size: 14px;
            -webkit-transform: rotate(1deg);
            cursor: pointer;
            background: #f1e767;
            background: -moz-linear-gradient(top, #f1e767 0%, #feb645 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645));
            background: -webkit-linear-gradient(top, #f1e767 0%,#feb645 100%);
            background: -o-linear-gradient(top, #f1e767 0%,#feb645 100%);
            background: -ms-linear-gradient(top, #f1e767 0%,#feb645 100%);
            background: linear-gradient(to bottom, #f1e767 0%,#feb645 100%);
                        
        }

        #game-container button:nth-child(odd) {
            -webkit-transform: rotate(-1deg);
        }

        #game-container #title,
        #about,
        #lose {
            background: #fcfff4;
            background: -moz-radial-gradient(center, ellipse cover, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead));
            background: -webkit-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
            background: -o-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
            background: -ms-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
            background: radial-gradient(ellipse at center, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
        }

        #title h1,
        #about h1,
        #lose h1 {
            font-size: 60px;
            color: #000;
            text-shadow: 0 0 3px #999;
            font-family: 'Press Start 2P', cursive;
            -webkit-transform: rotate(-3deg);
            margin: 150px 0 20px 0;
        }

        #game canvas {
            background: url(grass.jpg);
        }

        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, .6);
            padding: 7px;
            border-radius: 5px;
            color: #fff;
        }

        #about a {
            color: #333;
        }

    </style>

    <body>

        <ol id="game-container">

            <li id="title" class="show">
                <h1>Snack</h1>
                <button type="button" id="button-play">Play</button>
                <button type="button" id="button-about">About</button>
            </li>

            <li id="game">
                <div id="score">0</div>
                <canvas></canvas>
            </li>

            <li id="lose">
                <h1>Game over</h1>
                <div id="final-score">Your score: <span></span></div>
                <button type="button">Try again</button>
            </li>

            <li id="about">
                <h1>Snack</h1>
                <h3>By <a href="http://alexanderdickson.com">Alex Dickson</a></h3>
                <button type="button">Back</button>
            </li>

        </ol>
        
        <script src="game.js"></script>

    </body>
</html>
Something went wrong with that request. Please try again.