├── texture.jpg
├── Gemfile
├── package.json
├── README.md
├── LICENSE
├── _config.yml
├── stats.js
├── Gemfile.lock
└── index.html


/texture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ksdkamesh99/reviewing-a-pull-request/main/texture.jpg


--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | source "https://rubygems.org"
2 | 
3 | gem "github-pages", '>= 207'
4 | gem "minitest"
5 | gem "test-unit"
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "github-games",
 3 |   "repository": {
 4 |     "type": "git",
 5 |     "url": "https://github.com/brianamarie/github-games.git"
 6 |   },
 7 |   "description": "Simple JS game",
 8 |   "author": "https://twitter.com/brianamarie",
 9 |   "version": "1.0.0"
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Welcome to awesome game of Tetris
 2 | 
 3 | A project based learning activity for people who are getting started with Git and GitHub.
 4 | You can play the game at: https://ksdkamesh99.github.io/github-games/
 5 | To play the game:
 6 | 1. Go to the **Settings** tab of this repository.
 7 | 1. Scroll down to the section titled _GitHub Pages_
 8 | 1. Select **Master** from the Source drop-down.
 9 | 1. Click **Save**.
10 | 1. Navigate to the URL provided in the same section.
11 | 
12 | ### Instructions for playing the game
13 | 
14 | 1. Press the space bar to begin.
15 | 2. Use the up and down arrow keys to rotate the shape.
16 | 3. Use the left and right arrow keys to position the shape.
17 | 4. The goal is to create complete rows with no empty spaces.
18 | 5. When completed, the rows will disappear.
19 | 6. To pause the game, just press the space bar again.
20 | 
21 | >> _*SUPPORTED BROWSERS*: Chrome, Firefox, Safari, Opera and IE9+_
22 | 
23 | This fun open source game was cloned from: https://github.com/jakesgordon/javascript-tetris
24 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # Name of your blog (this will show up at the top of your page and in the RSS feed)
 2 | name: GitHub Games
 3 | 
 4 | # Short description (goes below the title; it will also be used in the RSS feed)
 5 | description: This GitHub Games has lots of tests
 6 | 
 7 | # Your name, as you want it to appear underneath each post and in the footer
 8 | author: GitHub Training, but forked
 9 | 
10 | # Your email if you want it to be linked on the contact page
11 | author_email: you@example.com
12 | 
13 | # The directory for category index pages. Change it to something else if
14 | # for example you want links like /categories/category1 instead of /category1
15 | category_dir: /
16 | 
17 | # Uncomment if you are planning to run the blog in a subdirectory
18 | # Note - if you enable this, and attempt to view your site locally you have to use the baseurl in your local path.
19 | # Example, you must use http://localhost:4000/path/to/blog
20 | #baseurl: /path/to/blog
21 | # baseurl:
22 | 
23 | # The URL of your actual domain. This will be used to make absolute links in the RSS feed.
24 | # url: http://yourdomain.com/
25 | 
26 | #### Under the Hood Stuff #####
27 | 
28 | # Use rdiscount as the markdown engine because it generates html5 compliant code for stuff like footnotes
29 | # If you use maroku (default engine) some of your generated pages may not validate or lint as html5
30 | # If you don't have it install it via gem install rdiscount
31 | markdown: kramdown
32 | 
33 | # Makes pretty (descriptive) permalinks. See Jekyll docs for alternatives.
34 | permalink: pretty
35 | 
36 | # How many articles do you wish to appear on the front page:
37 | paginate: 3
38 | 
39 | # Exclude metadata and development time dependencies (like Grunt plugins)
40 | #   exclude: [README.markdown, package.json, grunt.js, Gruntfile.js, Gruntfile.coffee, node_modules]
41 | gems: [jekyll-paginate]
42 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
  1 | GEM
  2 |   remote: https://rubygems.org/
  3 |   specs:
  4 |     activesupport (6.0.3.2)
  5 |       concurrent-ruby (~> 1.0, >= 1.0.2)
  6 |       i18n (>= 0.7, < 2)
  7 |       minitest (~> 5.1)
  8 |       tzinfo (~> 1.1)
  9 |       zeitwerk (~> 2.2, >= 2.2.2)
 10 |     addressable (2.7.0)
 11 |       public_suffix (>= 2.0.2, < 5.0)
 12 |     coffee-script (2.4.1)
 13 |       coffee-script-source
 14 |       execjs
 15 |     coffee-script-source (1.11.1)
 16 |     colorator (1.1.0)
 17 |     commonmarker (0.17.13)
 18 |       ruby-enum (~> 0.5)
 19 |     concurrent-ruby (1.1.7)
 20 |     dnsruby (1.61.4)
 21 |       simpleidn (~> 0.1)
 22 |     em-websocket (0.5.1)
 23 |       eventmachine (>= 0.12.9)
 24 |       http_parser.rb (~> 0.6.0)
 25 |     ethon (0.12.0)
 26 |       ffi (>= 1.3.0)
 27 |     eventmachine (1.2.7)
 28 |     execjs (2.7.0)
 29 |     faraday (1.0.1)
 30 |       multipart-post (>= 1.2, < 3)
 31 |     ffi (1.13.1)
 32 |     forwardable-extended (2.6.0)
 33 |     gemoji (3.0.1)
 34 |     github-pages (207)
 35 |       github-pages-health-check (= 1.16.1)
 36 |       jekyll (= 3.9.0)
 37 |       jekyll-avatar (= 0.7.0)
 38 |       jekyll-coffeescript (= 1.1.1)
 39 |       jekyll-commonmark-ghpages (= 0.1.6)
 40 |       jekyll-default-layout (= 0.1.4)
 41 |       jekyll-feed (= 0.13.0)
 42 |       jekyll-gist (= 1.5.0)
 43 |       jekyll-github-metadata (= 2.13.0)
 44 |       jekyll-mentions (= 1.5.1)
 45 |       jekyll-optional-front-matter (= 0.3.2)
 46 |       jekyll-paginate (= 1.1.0)
 47 |       jekyll-readme-index (= 0.3.0)
 48 |       jekyll-redirect-from (= 0.15.0)
 49 |       jekyll-relative-links (= 0.6.1)
 50 |       jekyll-remote-theme (= 0.4.1)
 51 |       jekyll-sass-converter (= 1.5.2)
 52 |       jekyll-seo-tag (= 2.6.1)
 53 |       jekyll-sitemap (= 1.4.0)
 54 |       jekyll-swiss (= 1.0.0)
 55 |       jekyll-theme-architect (= 0.1.1)
 56 |       jekyll-theme-cayman (= 0.1.1)
 57 |       jekyll-theme-dinky (= 0.1.1)
 58 |       jekyll-theme-hacker (= 0.1.1)
 59 |       jekyll-theme-leap-day (= 0.1.1)
 60 |       jekyll-theme-merlot (= 0.1.1)
 61 |       jekyll-theme-midnight (= 0.1.1)
 62 |       jekyll-theme-minimal (= 0.1.1)
 63 |       jekyll-theme-modernist (= 0.1.1)
 64 |       jekyll-theme-primer (= 0.5.4)
 65 |       jekyll-theme-slate (= 0.1.1)
 66 |       jekyll-theme-tactile (= 0.1.1)
 67 |       jekyll-theme-time-machine (= 0.1.1)
 68 |       jekyll-titles-from-headings (= 0.5.3)
 69 |       jemoji (= 0.11.1)
 70 |       kramdown (= 2.3.0)
 71 |       kramdown-parser-gfm (= 1.1.0)
 72 |       liquid (= 4.0.3)
 73 |       mercenary (~> 0.3)
 74 |       minima (= 2.5.1)
 75 |       nokogiri (>= 1.10.4, < 2.0)
 76 |       rouge (= 3.19.0)
 77 |       terminal-table (~> 1.4)
 78 |     github-pages-health-check (1.16.1)
 79 |       addressable (~> 2.3)
 80 |       dnsruby (~> 1.60)
 81 |       octokit (~> 4.0)
 82 |       public_suffix (~> 3.0)
 83 |       typhoeus (~> 1.3)
 84 |     html-pipeline (2.14.0)
 85 |       activesupport (>= 2)
 86 |       nokogiri (>= 1.4)
 87 |     http_parser.rb (0.6.0)
 88 |     i18n (0.9.5)
 89 |       concurrent-ruby (~> 1.0)
 90 |     jekyll (3.9.0)
 91 |       addressable (~> 2.4)
 92 |       colorator (~> 1.0)
 93 |       em-websocket (~> 0.5)
 94 |       i18n (~> 0.7)
 95 |       jekyll-sass-converter (~> 1.0)
 96 |       jekyll-watch (~> 2.0)
 97 |       kramdown (>= 1.17, < 3)
 98 |       liquid (~> 4.0)
 99 |       mercenary (~> 0.3.3)
100 |       pathutil (~> 0.9)
101 |       rouge (>= 1.7, < 4)
102 |       safe_yaml (~> 1.0)
103 |     jekyll-avatar (0.7.0)
104 |       jekyll (>= 3.0, < 5.0)
105 |     jekyll-coffeescript (1.1.1)
106 |       coffee-script (~> 2.2)
107 |       coffee-script-source (~> 1.11.1)
108 |     jekyll-commonmark (1.3.1)
109 |       commonmarker (~> 0.14)
110 |       jekyll (>= 3.7, < 5.0)
111 |     jekyll-commonmark-ghpages (0.1.6)
112 |       commonmarker (~> 0.17.6)
113 |       jekyll-commonmark (~> 1.2)
114 |       rouge (>= 2.0, < 4.0)
115 |     jekyll-default-layout (0.1.4)
116 |       jekyll (~> 3.0)
117 |     jekyll-feed (0.13.0)
118 |       jekyll (>= 3.7, < 5.0)
119 |     jekyll-gist (1.5.0)
120 |       octokit (~> 4.2)
121 |     jekyll-github-metadata (2.13.0)
122 |       jekyll (>= 3.4, < 5.0)
123 |       octokit (~> 4.0, != 4.4.0)
124 |     jekyll-mentions (1.5.1)
125 |       html-pipeline (~> 2.3)
126 |       jekyll (>= 3.7, < 5.0)
127 |     jekyll-optional-front-matter (0.3.2)
128 |       jekyll (>= 3.0, < 5.0)
129 |     jekyll-paginate (1.1.0)
130 |     jekyll-readme-index (0.3.0)
131 |       jekyll (>= 3.0, < 5.0)
132 |     jekyll-redirect-from (0.15.0)
133 |       jekyll (>= 3.3, < 5.0)
134 |     jekyll-relative-links (0.6.1)
135 |       jekyll (>= 3.3, < 5.0)
136 |     jekyll-remote-theme (0.4.1)
137 |       addressable (~> 2.0)
138 |       jekyll (>= 3.5, < 5.0)
139 |       rubyzip (>= 1.3.0)
140 |     jekyll-sass-converter (1.5.2)
141 |       sass (~> 3.4)
142 |     jekyll-seo-tag (2.6.1)
143 |       jekyll (>= 3.3, < 5.0)
144 |     jekyll-sitemap (1.4.0)
145 |       jekyll (>= 3.7, < 5.0)
146 |     jekyll-swiss (1.0.0)
147 |     jekyll-theme-architect (0.1.1)
148 |       jekyll (~> 3.5)
149 |       jekyll-seo-tag (~> 2.0)
150 |     jekyll-theme-cayman (0.1.1)
151 |       jekyll (~> 3.5)
152 |       jekyll-seo-tag (~> 2.0)
153 |     jekyll-theme-dinky (0.1.1)
154 |       jekyll (~> 3.5)
155 |       jekyll-seo-tag (~> 2.0)
156 |     jekyll-theme-hacker (0.1.1)
157 |       jekyll (~> 3.5)
158 |       jekyll-seo-tag (~> 2.0)
159 |     jekyll-theme-leap-day (0.1.1)
160 |       jekyll (~> 3.5)
161 |       jekyll-seo-tag (~> 2.0)
162 |     jekyll-theme-merlot (0.1.1)
163 |       jekyll (~> 3.5)
164 |       jekyll-seo-tag (~> 2.0)
165 |     jekyll-theme-midnight (0.1.1)
166 |       jekyll (~> 3.5)
167 |       jekyll-seo-tag (~> 2.0)
168 |     jekyll-theme-minimal (0.1.1)
169 |       jekyll (~> 3.5)
170 |       jekyll-seo-tag (~> 2.0)
171 |     jekyll-theme-modernist (0.1.1)
172 |       jekyll (~> 3.5)
173 |       jekyll-seo-tag (~> 2.0)
174 |     jekyll-theme-primer (0.5.4)
175 |       jekyll (> 3.5, < 5.0)
176 |       jekyll-github-metadata (~> 2.9)
177 |       jekyll-seo-tag (~> 2.0)
178 |     jekyll-theme-slate (0.1.1)
179 |       jekyll (~> 3.5)
180 |       jekyll-seo-tag (~> 2.0)
181 |     jekyll-theme-tactile (0.1.1)
182 |       jekyll (~> 3.5)
183 |       jekyll-seo-tag (~> 2.0)
184 |     jekyll-theme-time-machine (0.1.1)
185 |       jekyll (~> 3.5)
186 |       jekyll-seo-tag (~> 2.0)
187 |     jekyll-titles-from-headings (0.5.3)
188 |       jekyll (>= 3.3, < 5.0)
189 |     jekyll-watch (2.2.1)
190 |       listen (~> 3.0)
191 |     jemoji (0.11.1)
192 |       gemoji (~> 3.0)
193 |       html-pipeline (~> 2.2)
194 |       jekyll (>= 3.0, < 5.0)
195 |     kramdown (2.3.0)
196 |       rexml
197 |     kramdown-parser-gfm (1.1.0)
198 |       kramdown (~> 2.0)
199 |     liquid (4.0.3)
200 |     listen (3.2.1)
201 |       rb-fsevent (~> 0.10, >= 0.10.3)
202 |       rb-inotify (~> 0.9, >= 0.9.10)
203 |     mercenary (0.3.6)
204 |     mini_portile2 (2.5.0)
205 |     minima (2.5.1)
206 |       jekyll (>= 3.5, < 5.0)
207 |       jekyll-feed (~> 0.9)
208 |       jekyll-seo-tag (~> 2.1)
209 |     minitest (5.13.0)
210 |     multipart-post (2.1.1)
211 |     nokogiri (1.11.1)
212 |       mini_portile2 (~> 2.5.0)
213 |       racc (~> 1.4)
214 |     octokit (4.18.0)
215 |       faraday (>= 0.9)
216 |       sawyer (~> 0.8.0, >= 0.5.3)
217 |     pathutil (0.16.2)
218 |       forwardable-extended (~> 2.6)
219 |     power_assert (1.1.3)
220 |     public_suffix (3.1.1)
221 |     racc (1.5.2)
222 |     rb-fsevent (0.10.4)
223 |     rb-inotify (0.10.1)
224 |       ffi (~> 1.0)
225 |     rexml (3.2.4)
226 |     rouge (3.19.0)
227 |     ruby-enum (0.8.0)
228 |       i18n
229 |     rubyzip (2.3.0)
230 |     safe_yaml (1.0.5)
231 |     sass (3.7.4)
232 |       sass-listen (~> 4.0.0)
233 |     sass-listen (4.0.0)
234 |       rb-fsevent (~> 0.9, >= 0.9.4)
235 |       rb-inotify (~> 0.9, >= 0.9.7)
236 |     sawyer (0.8.2)
237 |       addressable (>= 2.3.5)
238 |       faraday (> 0.8, < 2.0)
239 |     simpleidn (0.1.1)
240 |       unf (~> 0.1.4)
241 |     terminal-table (1.8.0)
242 |       unicode-display_width (~> 1.1, >= 1.1.1)
243 |     test-unit (3.2.8)
244 |       power_assert
245 |     thread_safe (0.3.6)
246 |     typhoeus (1.4.0)
247 |       ethon (>= 0.9.0)
248 |     tzinfo (1.2.7)
249 |       thread_safe (~> 0.1)
250 |     unf (0.1.4)
251 |       unf_ext
252 |     unf_ext (0.0.7.7)
253 |     unicode-display_width (1.7.0)
254 |     zeitwerk (2.4.0)
255 | 
256 | PLATFORMS
257 |   ruby
258 | 
259 | DEPENDENCIES
260 |   github-pages (>= 207)
261 |   minitest
262 |   test-unit
263 | 
264 | BUNDLED WITH
265 |    1.17.3
266 | 


--------------------------------------------------------------------------------
/index.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: 'blue'   };
117 |     var j = { size: 3, blocks: [0x44C0, 0x8E00, 0x6440, 0x0E20], color: 'yellow'   };
118 |     var l = { size: 3, blocks: [0x4460, 0x0E80, 0xC440, 0x2E00], color: 'pink' };
119 |     var o = { size: 2, blocks: [0xCC00, 0xCC00, 0xCC00, 0xCC00], color: 'white' };
120 |     var s = { size: 3, blocks: [0x06C0, 0x8C40, 0x6C00, 0x4620], color: 'black'  };
121 |     var t = { size: 3, blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'blue' };
122 |     var z = { size: 3, blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'yellow'    };
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 | 


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