├── .github
    └── dependabot.yml
├── .gitignore
├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
├── _config.yml
├── docker-compose.yml
├── inde.html
├── script
    ├── server
    └── test
├── stats.js
└── texture.jpg


/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 |   - package-ecosystem: "bundler"
4 |     directory: "/"
5 |     schedule:
6 |       interval: "monthly"
7 |     reviewers: ["githubtraining/implementation-engineers"]
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | vendor/
2 | _site/
3 | .sass-cache/
4 | .jekyll-cache/
5 | .jekyll-metadata
6 | .bundle/
7 | 


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source "https://rubygems.org"
2 | 
3 | gem 'github-pages', group: :jekyll_plugins
4 | 


--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
  1 | GEM
  2 |   remote: https://rubygems.org/
  3 |   specs:
  4 |     activesupport (7.1.3.2)
  5 |       base64
  6 |       bigdecimal
  7 |       concurrent-ruby (~> 1.0, >= 1.0.2)
  8 |       connection_pool (>= 2.2.5)
  9 |       drb
 10 |       i18n (>= 1.6, < 2)
 11 |       minitest (>= 5.1)
 12 |       mutex_m
 13 |       tzinfo (~> 2.0)
 14 |     addressable (2.8.6)
 15 |       public_suffix (>= 2.0.2, < 6.0)
 16 |     base64 (0.2.0)
 17 |     bigdecimal (3.1.6)
 18 |     coffee-script (2.4.1)
 19 |       coffee-script-source
 20 |       execjs
 21 |     coffee-script-source (1.12.2)
 22 |     colorator (1.1.0)
 23 |     commonmarker (0.23.10)
 24 |     concurrent-ruby (1.2.3)
 25 |     connection_pool (2.4.1)
 26 |     dnsruby (1.70.0)
 27 |       simpleidn (~> 0.2.1)
 28 |     drb (2.2.1)
 29 |     em-websocket (0.5.3)
 30 |       eventmachine (>= 0.12.9)
 31 |       http_parser.rb (~> 0)
 32 |     ethon (0.16.0)
 33 |       ffi (>= 1.15.0)
 34 |     eventmachine (1.2.7)
 35 |     execjs (2.9.1)
 36 |     faraday (2.9.0)
 37 |       faraday-net_http (>= 2.0, < 3.2)
 38 |     faraday-net_http (3.1.0)
 39 |       net-http
 40 |     ffi (1.16.3)
 41 |     forwardable-extended (2.6.0)
 42 |     gemoji (4.1.0)
 43 |     github-pages (231)
 44 |       github-pages-health-check (= 1.18.2)
 45 |       jekyll (= 3.9.5)
 46 |       jekyll-avatar (= 0.8.0)
 47 |       jekyll-coffeescript (= 1.2.2)
 48 |       jekyll-commonmark-ghpages (= 0.4.0)
 49 |       jekyll-default-layout (= 0.1.5)
 50 |       jekyll-feed (= 0.17.0)
 51 |       jekyll-gist (= 1.5.0)
 52 |       jekyll-github-metadata (= 2.16.1)
 53 |       jekyll-include-cache (= 0.2.1)
 54 |       jekyll-mentions (= 1.6.0)
 55 |       jekyll-optional-front-matter (= 0.3.2)
 56 |       jekyll-paginate (= 1.1.0)
 57 |       jekyll-readme-index (= 0.3.0)
 58 |       jekyll-redirect-from (= 0.16.0)
 59 |       jekyll-relative-links (= 0.6.1)
 60 |       jekyll-remote-theme (= 0.4.3)
 61 |       jekyll-sass-converter (= 1.5.2)
 62 |       jekyll-seo-tag (= 2.8.0)
 63 |       jekyll-sitemap (= 1.4.0)
 64 |       jekyll-swiss (= 1.0.0)
 65 |       jekyll-theme-architect (= 0.2.0)
 66 |       jekyll-theme-cayman (= 0.2.0)
 67 |       jekyll-theme-dinky (= 0.2.0)
 68 |       jekyll-theme-hacker (= 0.2.0)
 69 |       jekyll-theme-leap-day (= 0.2.0)
 70 |       jekyll-theme-merlot (= 0.2.0)
 71 |       jekyll-theme-midnight (= 0.2.0)
 72 |       jekyll-theme-minimal (= 0.2.0)
 73 |       jekyll-theme-modernist (= 0.2.0)
 74 |       jekyll-theme-primer (= 0.6.0)
 75 |       jekyll-theme-slate (= 0.2.0)
 76 |       jekyll-theme-tactile (= 0.2.0)
 77 |       jekyll-theme-time-machine (= 0.2.0)
 78 |       jekyll-titles-from-headings (= 0.5.3)
 79 |       jemoji (= 0.13.0)
 80 |       kramdown (= 2.4.0)
 81 |       kramdown-parser-gfm (= 1.1.0)
 82 |       liquid (= 4.0.4)
 83 |       mercenary (~> 0.3)
 84 |       minima (= 2.5.1)
 85 |       nokogiri (>= 1.13.6, < 2.0)
 86 |       rouge (= 3.30.0)
 87 |       terminal-table (~> 1.4)
 88 |     github-pages-health-check (1.18.2)
 89 |       addressable (~> 2.3)
 90 |       dnsruby (~> 1.60)
 91 |       octokit (>= 4, < 8)
 92 |       public_suffix (>= 3.0, < 6.0)
 93 |       typhoeus (~> 1.3)
 94 |     html-pipeline (2.14.3)
 95 |       activesupport (>= 2)
 96 |       nokogiri (>= 1.4)
 97 |     http_parser.rb (0.8.0)
 98 |     i18n (1.14.1)
 99 |       concurrent-ruby (~> 1.0)
100 |     jekyll (3.9.5)
101 |       addressable (~> 2.4)
102 |       colorator (~> 1.0)
103 |       em-websocket (~> 0.5)
104 |       i18n (>= 0.7, < 2)
105 |       jekyll-sass-converter (~> 1.0)
106 |       jekyll-watch (~> 2.0)
107 |       kramdown (>= 1.17, < 3)
108 |       liquid (~> 4.0)
109 |       mercenary (~> 0.3.3)
110 |       pathutil (~> 0.9)
111 |       rouge (>= 1.7, < 4)
112 |       safe_yaml (~> 1.0)
113 |     jekyll-avatar (0.8.0)
114 |       jekyll (>= 3.0, < 5.0)
115 |     jekyll-coffeescript (1.2.2)
116 |       coffee-script (~> 2.2)
117 |       coffee-script-source (~> 1.12)
118 |     jekyll-commonmark (1.4.0)
119 |       commonmarker (~> 0.22)
120 |     jekyll-commonmark-ghpages (0.4.0)
121 |       commonmarker (~> 0.23.7)
122 |       jekyll (~> 3.9.0)
123 |       jekyll-commonmark (~> 1.4.0)
124 |       rouge (>= 2.0, < 5.0)
125 |     jekyll-default-layout (0.1.5)
126 |       jekyll (>= 3.0, < 5.0)
127 |     jekyll-feed (0.17.0)
128 |       jekyll (>= 3.7, < 5.0)
129 |     jekyll-gist (1.5.0)
130 |       octokit (~> 4.2)
131 |     jekyll-github-metadata (2.16.1)
132 |       jekyll (>= 3.4, < 5.0)
133 |       octokit (>= 4, < 7, != 4.4.0)
134 |     jekyll-include-cache (0.2.1)
135 |       jekyll (>= 3.7, < 5.0)
136 |     jekyll-mentions (1.6.0)
137 |       html-pipeline (~> 2.3)
138 |       jekyll (>= 3.7, < 5.0)
139 |     jekyll-optional-front-matter (0.3.2)
140 |       jekyll (>= 3.0, < 5.0)
141 |     jekyll-paginate (1.1.0)
142 |     jekyll-readme-index (0.3.0)
143 |       jekyll (>= 3.0, < 5.0)
144 |     jekyll-redirect-from (0.16.0)
145 |       jekyll (>= 3.3, < 5.0)
146 |     jekyll-relative-links (0.6.1)
147 |       jekyll (>= 3.3, < 5.0)
148 |     jekyll-remote-theme (0.4.3)
149 |       addressable (~> 2.0)
150 |       jekyll (>= 3.5, < 5.0)
151 |       jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
152 |       rubyzip (>= 1.3.0, < 3.0)
153 |     jekyll-sass-converter (1.5.2)
154 |       sass (~> 3.4)
155 |     jekyll-seo-tag (2.8.0)
156 |       jekyll (>= 3.8, < 5.0)
157 |     jekyll-sitemap (1.4.0)
158 |       jekyll (>= 3.7, < 5.0)
159 |     jekyll-swiss (1.0.0)
160 |     jekyll-theme-architect (0.2.0)
161 |       jekyll (> 3.5, < 5.0)
162 |       jekyll-seo-tag (~> 2.0)
163 |     jekyll-theme-cayman (0.2.0)
164 |       jekyll (> 3.5, < 5.0)
165 |       jekyll-seo-tag (~> 2.0)
166 |     jekyll-theme-dinky (0.2.0)
167 |       jekyll (> 3.5, < 5.0)
168 |       jekyll-seo-tag (~> 2.0)
169 |     jekyll-theme-hacker (0.2.0)
170 |       jekyll (> 3.5, < 5.0)
171 |       jekyll-seo-tag (~> 2.0)
172 |     jekyll-theme-leap-day (0.2.0)
173 |       jekyll (> 3.5, < 5.0)
174 |       jekyll-seo-tag (~> 2.0)
175 |     jekyll-theme-merlot (0.2.0)
176 |       jekyll (> 3.5, < 5.0)
177 |       jekyll-seo-tag (~> 2.0)
178 |     jekyll-theme-midnight (0.2.0)
179 |       jekyll (> 3.5, < 5.0)
180 |       jekyll-seo-tag (~> 2.0)
181 |     jekyll-theme-minimal (0.2.0)
182 |       jekyll (> 3.5, < 5.0)
183 |       jekyll-seo-tag (~> 2.0)
184 |     jekyll-theme-modernist (0.2.0)
185 |       jekyll (> 3.5, < 5.0)
186 |       jekyll-seo-tag (~> 2.0)
187 |     jekyll-theme-primer (0.6.0)
188 |       jekyll (> 3.5, < 5.0)
189 |       jekyll-github-metadata (~> 2.9)
190 |       jekyll-seo-tag (~> 2.0)
191 |     jekyll-theme-slate (0.2.0)
192 |       jekyll (> 3.5, < 5.0)
193 |       jekyll-seo-tag (~> 2.0)
194 |     jekyll-theme-tactile (0.2.0)
195 |       jekyll (> 3.5, < 5.0)
196 |       jekyll-seo-tag (~> 2.0)
197 |     jekyll-theme-time-machine (0.2.0)
198 |       jekyll (> 3.5, < 5.0)
199 |       jekyll-seo-tag (~> 2.0)
200 |     jekyll-titles-from-headings (0.5.3)
201 |       jekyll (>= 3.3, < 5.0)
202 |     jekyll-watch (2.2.1)
203 |       listen (~> 3.0)
204 |     jemoji (0.13.0)
205 |       gemoji (>= 3, < 5)
206 |       html-pipeline (~> 2.2)
207 |       jekyll (>= 3.0, < 5.0)
208 |     kramdown (2.4.0)
209 |       rexml
210 |     kramdown-parser-gfm (1.1.0)
211 |       kramdown (~> 2.0)
212 |     liquid (4.0.4)
213 |     listen (3.9.0)
214 |       rb-fsevent (~> 0.10, >= 0.10.3)
215 |       rb-inotify (~> 0.9, >= 0.9.10)
216 |     mercenary (0.3.6)
217 |     mini_portile2 (2.8.6)
218 |     minima (2.5.1)
219 |       jekyll (>= 3.5, < 5.0)
220 |       jekyll-feed (~> 0.9)
221 |       jekyll-seo-tag (~> 2.1)
222 |     minitest (5.22.2)
223 |     mutex_m (0.2.0)
224 |     net-http (0.4.1)
225 |       uri
226 |     nokogiri (1.16.5)
227 |       mini_portile2 (~> 2.8.2)
228 |       racc (~> 1.4)
229 |     octokit (4.25.1)
230 |       faraday (>= 1, < 3)
231 |       sawyer (~> 0.9)
232 |     pathutil (0.16.2)
233 |       forwardable-extended (~> 2.6)
234 |     public_suffix (5.0.4)
235 |     racc (1.7.3)
236 |     rb-fsevent (0.11.2)
237 |     rb-inotify (0.10.1)
238 |       ffi (~> 1.0)
239 |     rexml (3.3.6)
240 |       strscan
241 |     rouge (3.30.0)
242 |     rubyzip (2.3.2)
243 |     safe_yaml (1.0.5)
244 |     sass (3.7.4)
245 |       sass-listen (~> 4.0.0)
246 |     sass-listen (4.0.0)
247 |       rb-fsevent (~> 0.9, >= 0.9.4)
248 |       rb-inotify (~> 0.9, >= 0.9.7)
249 |     sawyer (0.9.2)
250 |       addressable (>= 2.3.5)
251 |       faraday (>= 0.17.3, < 3)
252 |     simpleidn (0.2.1)
253 |       unf (~> 0.1.4)
254 |     strscan (3.1.0)
255 |     terminal-table (1.8.0)
256 |       unicode-display_width (~> 1.1, >= 1.1.1)
257 |     typhoeus (1.4.1)
258 |       ethon (>= 0.9.0)
259 |     tzinfo (2.0.6)
260 |       concurrent-ruby (~> 1.0)
261 |     unf (0.1.4)
262 |       unf_ext
263 |     unf_ext (0.0.9.1)
264 |     unicode-display_width (1.8.0)
265 |     uri (0.13.0)
266 | 
267 | PLATFORMS
268 |   ruby
269 | 
270 | DEPENDENCIES
271 |   github-pages
272 | 
273 | BUNDLED WITH
274 |    2.0.2
275 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, 2012, 2013 Jake Gordon and contributors
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Welcome to GitHub Games
 2 | 
 3 | A project based learning activity for people who are getting started with Git and GitHub.
 4 | 
 5 | You can play the game at: https://githubschool.github.io/github-games/
 6 | 
 7 | >> _*SUPPORTED BROWSERS*: Chrome, Firefox, Safari, Opera and IE9+_
 8 | 
 9 | This fun open source game was cloned from: https://github.com/jakesgordon/javascript-tetris
10 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Set name to prevent title from displaying at the top of the page
2 | # https://github.com/pages-themes/primer/issues/21#issuecomment-440722302
3 | name: GitHub Games
4 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3'
 2 | services:
 3 |   jekyll:
 4 |     image: 'jekyll/jekyll:3.8'
 5 |     volumes:
 6 |       - "$PWD:/srv/jekyll"
 7 |     ports:
 8 |       - '4000:4000'
 9 |     command: jekyll serve --incremental
10 |     tty: true
11 | 


--------------------------------------------------------------------------------
/inde.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Javascript Tetris</title>
  5 |   <style>
  6 |     body      { font-family: Helvetica, sans-serif; }
  7 |     #tetris   { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; }
  8 |     #stats    { display: inline-block; vertical-align: top; }
  9 |     #canvas   { display: inline-block; vertical-align: top; background: url(texture.jpg); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
 10 |     #menu     { display: inline-block; vertical-align: top; position: relative; }
 11 |     #menu p   { margin: 0.5em 0; text-align: center; }
 12 |     #menu p a { text-decoration: none; color: black; }
 13 |     #upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
 14 |     #score    { color: blue; font-weight: bold; vertical-align: middle; }
 15 |     #rows     { color: blue; font-weight: bold; vertical-align: middle; }
 16 |     #stats    { position: absolute; bottom: 0em; right: 1em; }
 17 |     @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
 18 |     @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
 19 |     @media screen and (min-width: 500px) and (min-height: 500px)  { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */
 20 |     @media screen and (min-width: 600px) and (min-height: 600px)  { #tetris { font-size: 1.50em; width: 550px; } #menu { width: 250px; height: 500px; } #upcoming { width: 125px; height: 125px; } #canvas { width: 250px; height: 500px; } } /* 25px chunks */
 21 |     @media screen and (min-width: 700px) and (min-height: 700px)  { #tetris { font-size: 1.75em; width: 650px; } #menu { width: 300px; height: 600px; } #upcoming { width: 150px; height: 150px; } #canvas { width: 300px; height: 600px; } } /* 30px chunks */
 22 |     @media screen and (min-width: 800px) and (min-height: 800px)  { #tetris { font-size: 2.00em; width: 750px; } #menu { width: 350px; height: 700px; } #upcoming { width: 175px; height: 175px; } #canvas { width: 350px; height: 700px; } } /* 35px chunks */
 23 |     @media screen and (min-width: 900px) and (min-height: 900px)  { #tetris { font-size: 2.25em; width: 850px; } #menu { width: 400px; height: 800px; } #upcoming { width: 200px; height: 200px; } #canvas { width: 400px; height: 800px; } } /* 40px chunks */
 24 |   </style>
 25 | </head>
 26 | 
 27 | <body>
 28 | 
 29 |   <div id="tetris">
 30 |     <div id="menu">
 31 |       <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
 32 |       <p><canvas id="upcoming"></canvas></p>
 33 |       <p>score <span id="score">00000</span></p>
 34 |       <p>rows <span id="rows">0</span></p>
 35 |     </div>
 36 |     <canvas id="canvas">
 37 |       Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
 38 |     </canvas>
 39 |   </div>
 40 | 
 41 |   <script src="stats.js"></script>
 42 |   <script>
 43 | 
 44 |     //-------------------------------------------------------------------------
 45 |     // base helper methods
 46 |     //-------------------------------------------------------------------------
 47 | 
 48 |     function get(id)        { return document.getElementById(id);  }
 49 |     function hide(id)       { get(id).style.visibility = 'hidden'; }
 50 |     function show(id)       { get(id).style.visibility = null;     }
 51 |     function html(id, html) { get(id).innerHTML = html;            }
 52 | 
 53 |     function timestamp()           { return new Date().getTime();                             }
 54 |     function random(min, max)      { return (min + (Math.random() * (max - min)));            }
 55 |     function randomChoice(choices) { return choices[Math.round(random(0, choices.length-1))]; }
 56 | 
 57 |     if (!window.requestAnimationFrame) { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 58 |       window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
 59 |                                      window.mozRequestAnimationFrame    ||
 60 |                                      window.oRequestAnimationFrame      ||
 61 |                                      window.msRequestAnimationFrame     ||
 62 |                                      function(callback, element) {
 63 |                                        window.setTimeout(callback, 1000 / 60);
 64 |                                      }
 65 |     }
 66 | 
 67 |     //-------------------------------------------------------------------------
 68 |     // game constants
 69 |     //-------------------------------------------------------------------------
 70 | 
 71 |     var KEY     = { ESC: 27, SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 },
 72 |         DIR     = { UP: 0, RIGHT: 1, DOWN: 2, LEFT: 3, MIN: 0, MAX: 3 },
 73 |         stats   = new Stats(),
 74 |         canvas  = get('canvas'),
 75 |         ctx     = canvas.getContext('2d'),
 76 |         ucanvas = get('upcoming'),
 77 |         uctx    = ucanvas.getContext('2d'),
 78 |         speed   = { start: 0.6, decrement: 0.005, min: 0.1 }, // how long before piece drops by 1 row (seconds)
 79 |         nx      = 10, // width of tetris court (in blocks)
 80 |         ny      = 20, // height of tetris court (in blocks)
 81 |         nu      = 5;  // width/height of upcoming preview (in blocks)
 82 | 
 83 |     //-------------------------------------------------------------------------
 84 |     // game variables (initialized during reset)
 85 |     //-------------------------------------------------------------------------
 86 | 
 87 |     var dx, dy,        // pixel size of a single tetris block
 88 |         blocks,        // 2 dimensional array (nx*ny) representing tetris court - either empty block or occupied by a 'piece'
 89 |         actions,       // queue of user actions (inputs)
 90 |         playing,       // true|false - game is in progress
 91 |         paused,        // true|false - game is currently paued (to differentiate need for reset)
 92 |         dt,            // time since starting this game
 93 |         current,       // the current piece
 94 |         next,          // the next piece
 95 |         score,         // the current score
 96 |         vscore,        // the currently displayed score (it catches up to score in small chunks - like a spinning slot machine)
 97 |         rows,          // number of completed rows in the current game
 98 |         step;          // how long before current piece drops by 1 row
 99 | 
100 |     //-------------------------------------------------------------------------
101 |     // tetris pieces
102 |     //
103 |     // blocks: each element represents a rotation of the piece (0, 90, 180, 270)
104 |     //         each element is a 16 bit integer where the 16 bits represent
105 |     //         a 4x4 set of blocks, e.g. j.blocks[0] = 0x44C0
106 |     //
107 |     //             0100 = 0x4 << 3 = 0x4000
108 |     //             0100 = 0x4 << 2 = 0x0400
109 |     //             1100 = 0xC << 1 = 0x00C0
110 |     //             0000 = 0x0 << 0 = 0x0000
111 |     //                               ------
112 |     //                               0x44C0
113 |     //
114 |     //-------------------------------------------------------------------------
115 | 
116 |     var i = { size: 4, blocks: [0x0F00, 0x2222, 0x00F0, 0x4444], color: 'purple'   };
117 |     var j = { size: 3, blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'pink'   };
118 |     var l = { size: 3, blocks: [0x4460, 0x0E80, 0xC440, 0x2E00], color: 'salmon' };
119 |     var o = { size: 2, blocks: [0xCC00, 0xCC00, 0xCC00, 0xCC00], color: 'lime' };
120 |     var s = { size: 3, blocks: [0x06C0, 0x8C40, 0x6C00, 0x4620], color: 'teal'  };
121 |     var t = { size: 3, blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'coral' };
122 |     var z = { size: 3, blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'olive'    };
123 | 
124 |     //------------------------------------------------
125 |     // do the bit manipulation and iterate through each
126 |     // occupied block (x,y) for a given piece
127 |     //------------------------------------------------
128 |     function eachblock(type, x, y, dir, fn) {
129 |       var bit, result, row = 0, col = 0, blocks = type.blocks[dir];
130 |       for(bit = 0x8000 ; bit > 0 ; bit = bit >> 1) {
131 |         if (blocks & bit) {
132 |           fn(x + col, y + row);
133 |         }
134 |         if (++col === 4) {
135 |           col = 0;
136 |           ++row;
137 |         }
138 |       }
139 |     }
140 | 
141 |     //-----------------------------------------------------
142 |     // check if a piece can fit into a position in the grid
143 |     //-----------------------------------------------------
144 |     function occupied(type, x, y, dir) {
145 |       var result = false
146 |       eachblock(type, x, y, dir, function(x, y) {
147 |         if ((x < 0) || (x >= nx) || (y < 0) || (y >= ny) || getBlock(x,y))
148 |           result = true;
149 |       });
150 |       return result;
151 |     }
152 | 
153 |     function unoccupied(type, x, y, dir) {
154 |       return !occupied(type, x, y, dir);
155 |     }
156 | 
157 |     //-----------------------------------------
158 |     // start with 4 instances of each piece and
159 |     // pick randomly until the 'bag is empty'
160 |     //-----------------------------------------
161 |     var pieces = [];
162 |     function randomPiece() {
163 |       if (pieces.length == 0)
164 |         pieces = [i,i,i,i,j,j,j,j,l,l,l,l,o,o,o,o,s,s,s,s,t,t,t,t,z,z,z,z];
165 |       var type = pieces.splice(random(0, pieces.length-1), 1)[0];
166 |       return { type: type, dir: DIR.UP, x: Math.round(random(0, nx - type.size)), y: 0 };
167 |     }
168 | 
169 | 
170 |     //-------------------------------------------------------------------------
171 |     // GAME LOOP
172 |     //-------------------------------------------------------------------------
173 | 
174 |     function run() {
175 | 
176 |       showStats(); // initialize FPS counter
177 |       addEvents(); // attach keydown and resize events
178 | 
179 |       var last = now = timestamp();
180 |       function frame() {
181 |         now = timestamp();
182 |         update(Math.min(1, (now - last) / 1000.0)); // using requestAnimationFrame have to be able to handle large delta's caused when it 'hibernates' in a background or non-visible tab
183 |         draw();
184 |         stats.update();
185 |         last = now;
186 |         requestAnimationFrame(frame, canvas);
187 |       }
188 | 
189 |       resize(); // setup all our sizing information
190 |       reset();  // reset the per-game variables
191 |       frame();  // start the first frame
192 | 
193 |     }
194 | 
195 |     function showStats() {
196 |       stats.domElement.id = 'stats';
197 |       get('menu').appendChild(stats.domElement);
198 |     }
199 | 
200 |     function addEvents() {
201 |       document.addEventListener('keydown', keydown, false);
202 |       window.addEventListener('resize', resize, false);
203 |     }
204 | 
205 |     function resize(event) {
206 |       canvas.width   = canvas.clientWidth;  // set canvas logical size equal to its physical size
207 |       canvas.height  = canvas.clientHeight; // (ditto)
208 |       ucanvas.width  = ucanvas.clientWidth;
209 |       ucanvas.height = ucanvas.clientHeight;
210 |       dx = canvas.width  / nx; // pixel size of a single tetris block
211 |       dy = canvas.height / ny; // (ditto)
212 |       invalidate();
213 |       invalidateNext();
214 |     }
215 | 
216 |     function keydown(ev) {
217 |       var handled = false;
218 |       if (playing) {
219 |         switch(ev.keyCode) {
220 |           case KEY.LEFT:   actions.push(DIR.LEFT);  handled = true; break;
221 |           case KEY.RIGHT:  actions.push(DIR.RIGHT); handled = true; break;
222 |           case KEY.UP:     actions.push(DIR.UP);    handled = true; break;
223 |           case KEY.DOWN:   actions.push(DIR.DOWN);  handled = true; break;
224 |           case KEY.ESC:    lose();                  handled = true; break;
225 |           case KEY.SPACE:  pause();                 handled = true; break;
226 |         }
227 |       }
228 |       else if (ev.keyCode == KEY.SPACE) {
229 |         if(paused) {
230 |             restart();
231 |             handled = true;
232 |           }else{
233 |             play();
234 |             handled = true;
235 |           }
236 |       }
237 |       if (handled)
238 |         ev.preventDefault(); // prevent arrow keys from scrolling the page (supported in IE9+ and all other browsers)
239 |     }
240 | 
241 |     //-------------------------------------------------------------------------
242 |     // GAME LOGIC
243 |     //-------------------------------------------------------------------------
244 | 
245 |     function play() { hide('start'); reset();      paused = false;  playing = true;  }
246 |     function pause() {show('start'); paused = true; playing = false;}
247 |     function restart() {hide('start'); paused = false; playing = true;}
248 |     function lose() { show('start'); setVisualScore(); playing = false; }
249 | 
250 |     function setVisualScore(n)      { vscore = n || score; invalidateScore(); }
251 |     function setScore(n)            { score = n; setVisualScore(n);  }
252 |     function addScore(n)            { score = score + n;   }
253 |     function clearScore()           { setScore(0); }
254 |     function clearRows()            { setRows(0); }
255 |     function setRows(n)             { rows = n; step = Math.max(speed.min, speed.start - (speed.decrement*rows)); invalidateRows(); }
256 |     function addRows(n)             { setRows(rows + n); }
257 |     function getBlock(x,y)          { return (blocks && blocks[x] ? blocks[x][y] : null); }
258 |     function setBlock(x,y,type)     { blocks[x] = blocks[x] || []; blocks[x][y] = type; invalidate(); }
259 |     function clearBlocks()          { blocks = []; invalidate(); }
260 |     function clearActions()         { actions = []; }
261 |     function setCurrentPiece(piece) { current = piece || randomPiece(); invalidate();     }
262 |     function setNextPiece(piece)    { next    = piece || randomPiece(); invalidateNext(); }
263 | 
264 |     function reset() {
265 |       dt = 0;
266 |       clearActions();
267 |       clearBlocks();
268 |       clearRows();
269 |       clearScore();
270 |       setCurrentPiece(next);
271 |       setNextPiece();
272 |     }
273 | 
274 |     function update(idt) {
275 |       if (playing) {
276 |         if (vscore < score)
277 |           setVisualScore(vscore + 1);
278 |         handle(actions.shift());
279 |         dt = dt + idt;
280 |         if (dt > step) {
281 |           dt = dt - step;
282 |           drop();
283 |         }
284 |       }
285 |     }
286 | 
287 |     function handle(action) {
288 |       switch(action) {
289 |         case DIR.LEFT:  move(DIR.LEFT);  break;
290 |         case DIR.RIGHT: move(DIR.RIGHT); break;
291 |         case DIR.UP:    rotate();        break;
292 |         case DIR.DOWN:  drop();          break;
293 |       }
294 |     }
295 | 
296 |     function move(dir) {
297 |       var x = current.x, y = current.y;
298 |       switch(dir) {
299 |         case DIR.RIGHT: x = x + 1; break;
300 |         case DIR.LEFT:  x = x - 1; break;
301 |         case DIR.DOWN:  y = y + 1; break;
302 |       }
303 |       if (unoccupied(current.type, x, y, current.dir)) {
304 |         current.x = x;
305 |         current.y = y;
306 |         invalidate();
307 |         return true;
308 |       }
309 |       else {
310 |         return false;
311 |       }
312 |     }
313 | 
314 |     function rotate() {
315 |       var newdir = (current.dir == DIR.MAX ? DIR.MIN : current.dir + 1);
316 |       if (unoccupied(current.type, current.x, current.y, newdir)) {
317 |         current.dir = newdir;
318 |         invalidate();
319 |       }
320 |     }
321 | 
322 |     function drop() {
323 |       if (!move(DIR.DOWN)) {
324 |         addScore(10);
325 |         dropPiece();
326 |         removeLines();
327 |         setCurrentPiece(next);
328 |         setNextPiece(randomPiece());
329 |         clearActions();
330 |         if (occupied(current.type, current.x, current.y, current.dir)) {
331 |           lose();
332 |         }
333 |       }
334 |     }
335 | 
336 |     function dropPiece() {
337 |       eachblock(current.type, current.x, current.y, current.dir, function(x, y) {
338 |         setBlock(x, y, current.type);
339 |       });
340 |     }
341 | 
342 |     function removeLines() {
343 |       var x, y, complete, n = 0;
344 |       for(y = ny ; y > 0 ; --y) {
345 |         complete = true;
346 |         for(x = 0 ; x < nx ; ++x) {
347 |           if (!getBlock(x, y))
348 |             complete = false;
349 |         }
350 |         if (complete) {
351 |           removeLine(y);
352 |           y = y + 1; // recheck same line
353 |           n++;
354 |         }
355 |       }
356 |       if (n > 0) {
357 |         addRows(n);
358 |         addScore(100*Math.pow(2,n-1)); // 1: 100, 2: 200, 3: 400, 4: 800
359 |       }
360 |     }
361 | 
362 |     function removeLine(n) {
363 |       var x, y;
364 |       for(y = n ; y >= 0 ; --y) {
365 |         for(x = 0 ; x < nx ; ++x)
366 |           setBlock(x, y, (y == 0) ? null : getBlock(x, y-1));
367 |       }
368 |     }
369 | 
370 |     //-------------------------------------------------------------------------
371 |     // RENDERING
372 |     //-------------------------------------------------------------------------
373 | 
374 |     var invalid = {};
375 | 
376 |     function invalidate()         { invalid.court  = true; }
377 |     function invalidateNext()     { invalid.next   = true; }
378 |     function invalidateScore()    { invalid.score  = true; }
379 |     function invalidateRows()     { invalid.rows   = true; }
380 | 
381 |     function draw() {
382 |       ctx.save();
383 |       ctx.lineWidth = 1;
384 |       ctx.translate(0.5, 0.5); // for crisp 1px black lines
385 |       drawCourt();
386 |       drawNext();
387 |       drawScore();
388 |       drawRows();
389 |       ctx.restore();
390 |     }
391 | 
392 |     function drawCourt() {
393 |       if (invalid.court) {
394 |         ctx.clearRect(0, 0, canvas.width, canvas.height);
395 |         if (playing)
396 |           drawPiece(ctx, current.type, current.x, current.y, current.dir);
397 |         var x, y, block;
398 |         for(y = 0 ; y < ny ; y++) {
399 |           for (x = 0 ; x < nx ; x++) {
400 |             if (block = getBlock(x,y))
401 |               drawBlock(ctx, x, y, block.color);
402 |           }
403 |         }
404 |         ctx.strokeRect(0, 0, nx*dx - 1, ny*dy - 1); // court boundary
405 |         invalid.court = false;
406 |       }
407 |     }
408 | 
409 |     function drawNext() {
410 |       if (invalid.next) {
411 |         var padding = (nu - next.type.size) / 2; // half-arsed attempt at centering next piece display
412 |         uctx.save();
413 |         uctx.translate(0.5, 0.5);
414 |         uctx.clearRect(0, 0, nu*dx, nu*dy);
415 |         drawPiece(uctx, next.type, padding, padding, next.dir);
416 |         uctx.strokeStyle = 'black';
417 |         uctx.strokeRect(0, 0, nu*dx - 1, nu*dy - 1);
418 |         uctx.restore();
419 |         invalid.next = false;
420 |       }
421 |     }
422 | 
423 |     function drawScore() {
424 |       if (invalid.score) {
425 |         html('score', ("00000" + Math.floor(vscore)).slice(-5));
426 |         invalid.score = false;
427 |       }
428 |     }
429 | 
430 |     function drawRows() {
431 |       if (invalid.rows) {
432 |         html('rows', rows);
433 |         invalid.rows = false;
434 |       }
435 |     }
436 | 
437 |     function drawPiece(ctx, type, x, y, dir) {
438 |       eachblock(type, x, y, dir, function(x, y) {
439 |         drawBlock(ctx, x, y, type.color);
440 |       });
441 |     }
442 | 
443 |     function drawBlock(ctx, x, y, color) {
444 |       ctx.fillStyle = color;
445 |       ctx.fillRect(x*dx, y*dy, dx, dy);
446 |       ctx.strokeRect(x*dx, y*dy, dx, dy)
447 |     }
448 | 
449 |     //-------------------------------------------------------------------------
450 |     // FINALLY, lets run the game
451 |     //-------------------------------------------------------------------------
452 | 
453 |     run();
454 | 
455 |   </script>
456 | 
457 | </body>
458 | </html>
459 | 


--------------------------------------------------------------------------------
/script/server:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | #
 3 | # Start the application
 4 | 
 5 | # Exit if docker-compose is not in PATH
 6 | if ! command -v docker-compose &>/dev/null; then
 7 |   echo "Error! Missing dependency: docker-compose. Please install and try again."
 8 |   exit 1
 9 | fi
10 | 
11 | # Exit if the Docker daemon isn't running
12 | if ! docker info &>/dev/null; then
13 |   echo "The Docker daemon doesn't appear to be running. Please start Docker and try again."
14 |   exit 1
15 | fi
16 | 
17 | # Remove _site directory if it exits
18 | [[ -d _site ]] && rm -r _site
19 | 
20 | docker-compose up --build
21 | 


--------------------------------------------------------------------------------
/script/test:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | #
 3 | # Test the app - if the game loads, everything is working!
 4 | 
 5 | # Create symlink to test game
 6 | ln -s inde.html index.html
 7 | 
 8 | # Remove symlink on script exit
 9 | trap "rm index.html" EXIT
10 | 
11 | # Start app
12 | script/server
13 | 


--------------------------------------------------------------------------------
/stats.js:
--------------------------------------------------------------------------------
 1 | // stats.js r6 - http://github.com/mrdoob/stats.js
 2 | var Stats=function(){function s(a,g,d){var f,c,e;for(c=0;c<30;c++)for(f=0;f<73;f++)e=(f+c*74)*4,a[e]=a[e+4],a[e+1]=a[e+5],a[e+2]=a[e+6];for(c=0;c<30;c++)e=(73+c*74)*4,c<g?(a[e]=b[d].bg.r,a[e+1]=b[d].bg.g,a[e+2]=b[d].bg.b):(a[e]=b[d].fg.r,a[e+1]=b[d].fg.g,a[e+2]=b[d].fg.b)}var r=0,t=2,g,u=0,j=(new Date).getTime(),F=j,v=j,l=0,w=1E3,x=0,k,d,a,m,y,n=0,z=1E3,A=0,f,c,o,B,p=0,C=1E3,D=0,h,i,q,E,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mb:{bg:{r:48,g:16,
 3 | b:26},fg:{r:255,g:0,b:128}}};g=document.createElement("div");g.style.cursor="pointer";g.style.width="80px";g.style.opacity="0.9";g.style.zIndex="10001";g.addEventListener("click",function(){r++;r==t&&(r=0);k.style.display="none";f.style.display="none";h.style.display="none";switch(r){case 0:k.style.display="block";break;case 1:f.style.display="block";break;case 2:h.style.display="block"}},!1);k=document.createElement("div");k.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
 4 | 2)+","+Math.floor(b.fps.bg.b/2)+")";k.style.padding="2px 0px 3px 0px";g.appendChild(k);d=document.createElement("div");d.style.fontFamily="Helvetica, Arial, sans-serif";d.style.textAlign="left";d.style.fontSize="9px";d.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";d.style.margin="0px 0px 1px 3px";d.innerHTML='<span style="font-weight:bold">FPS</span>';k.appendChild(d);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";k.appendChild(a);
 5 | m=a.getContext("2d");m.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";m.fillRect(0,0,a.width,a.height);y=m.getImageData(0,0,a.width,a.height);f=document.createElement("div");f.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";f.style.padding="2px 0px 3px 0px";f.style.display="none";g.appendChild(f);c=document.createElement("div");c.style.fontFamily="Helvetica, Arial, sans-serif";c.style.textAlign="left";c.style.fontSize=
 6 | "9px";c.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";c.style.margin="0px 0px 1px 3px";c.innerHTML='<span style="font-weight:bold">MS</span>';f.appendChild(c);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";f.appendChild(a);o=a.getContext("2d");o.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";o.fillRect(0,0,a.width,a.height);B=o.getImageData(0,0,a.width,a.height);try{performance&&performance.memory&&performance.memory.totalJSHeapSize&&
 7 | (t=3)}catch(G){}h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.mb.bg.r/2)+","+Math.floor(b.mb.bg.g/2)+","+Math.floor(b.mb.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";g.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize="9px";i.style.color="rgb("+b.mb.fg.r+","+b.mb.fg.g+","+b.mb.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MB</span>';
 8 | h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);q=a.getContext("2d");q.fillStyle="#301010";q.fillRect(0,0,a.width,a.height);E=q.getImageData(0,0,a.width,a.height);return{domElement:g,update:function(){u++;j=(new Date).getTime();n=j-F;z=Math.min(z,n);A=Math.max(A,n);s(B.data,Math.min(30,30-n/200*30),"ms");c.innerHTML='<span style="font-weight:bold">'+n+" MS</span> ("+z+"-"+A+")";o.putImageData(B,0,0);F=j;if(j>
 9 | v+1E3){l=Math.round(u*1E3/(j-v));w=Math.min(w,l);x=Math.max(x,l);s(y.data,Math.min(30,30-l/100*30),"fps");d.innerHTML='<span style="font-weight:bold">'+l+" FPS</span> ("+w+"-"+x+")";m.putImageData(y,0,0);if(t==3)p=performance.memory.usedJSHeapSize*9.54E-7,C=Math.min(C,p),D=Math.max(D,p),s(E.data,Math.min(30,30-p/2),"mb"),i.innerHTML='<span style="font-weight:bold">'+Math.round(p)+" MB</span> ("+Math.round(C)+"-"+Math.round(D)+")",q.putImageData(E,0,0);v=j;u=0}}}};
10 | 
11 | 


--------------------------------------------------------------------------------
/texture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/githubtraining/github-games/ac5daf3081db10b40434cecad0fa53d91b0b3c7f/texture.jpg


--------------------------------------------------------------------------------