From 5846e145745bec06ec361e0469d3959f86feb2f1 Mon Sep 17 00:00:00 2001
From: FlorentDlh <1899006@cstjean.qc.ca>
Date: Tue, 20 Feb 2018 18:58:19 -0500
Subject: [PATCH 01/39] =?UTF-8?q?Refactore=20du=20code=20complet=20:=20-?=
=?UTF-8?q?=20Dossier=20CSS=20avec=20deux=20css=20dedans,=20le=20main=20et?=
=?UTF-8?q?=20les=20medias=20-=20Dossier=20JS=20avec=20les=20fichiers=20js?=
=?UTF-8?q?=20avec=20le=20refactor=20du=20scrips=20en=20plusieurs=20fichie?=
=?UTF-8?q?rs=20js=20-=20Cr=C3=A9ation=20dossier=20image=20avec=20l'image?=
=?UTF-8?q?=20de=20la=20texture=20dedans?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
css/main.css | 64 ++++
css/media.css | 154 +++++++++
texture.jpg => img/texture.jpg | Bin
index.html | 433 +------------------------
js/functions.js | 566 +++++++++++++++++++++++++++++++++
js/main.js | 5 +
js/run.js | 24 ++
js/stats.js | 210 ++++++++++++
stats.js | 10 -
9 files changed, 1030 insertions(+), 436 deletions(-)
create mode 100644 css/main.css
create mode 100644 css/media.css
rename texture.jpg => img/texture.jpg (100%)
mode change 100755 => 100644
create mode 100644 js/functions.js
create mode 100644 js/main.js
create mode 100644 js/run.js
create mode 100644 js/stats.js
delete mode 100644 stats.js
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..4bc9c6e
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,64 @@
+body {
+ font-family: Helvetica, sans-serif;
+}
+
+#tetris {
+ margin: 1em auto;
+ padding: 1em;
+ border: 4px solid black;
+ border-radius: 10px;
+ background-color: #F8F8F8;
+}
+
+#stats {
+ display: inline-block;
+ vertical-align: top;
+}
+
+#canvas {
+ display: inline-block;
+ vertical-align: top;
+ background: url(../img/texture.jpg);
+ box-shadow: 10px 10px 10px #999;
+ border: 2px solid #333;
+}
+
+#menu {
+ display: inline-block;
+ vertical-align: top;
+ position: relative;
+}
+
+#menu p {
+ margin: 0.5em 0;
+ text-align: center;
+}
+
+#menu p a {
+ text-decoration: none;
+ color: black;
+}
+
+#upcoming {
+ display: block;
+ margin: 0 auto;
+ background-color: #E0E0E0;
+}
+
+#score {
+ color: red;
+ font-weight: bold;
+ vertical-align: middle;
+}
+
+#rows {
+ color: blue;
+ font-weight: bold;
+ vertical-align: middle;
+}
+
+#stats {
+ position: absolute;
+ bottom: 0em;
+ right: 1em;
+}
\ No newline at end of file
diff --git a/css/media.css b/css/media.css
new file mode 100644
index 0000000..2d94108
--- /dev/null
+++ b/css/media.css
@@ -0,0 +1,154 @@
+
+@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 */
+
+@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 */
+
+@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 */
+
+@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 */
+
+@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 */
+
+@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 */
+
+@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 */
\ No newline at end of file
diff --git a/texture.jpg b/img/texture.jpg
old mode 100755
new mode 100644
similarity index 100%
rename from texture.jpg
rename to img/texture.jpg
diff --git a/index.html b/index.html
index 37d4af0..efcdbfc 100644
--- a/index.html
+++ b/index.html
@@ -2,26 +2,9 @@
Javascript Tetris
-
+
+
+
@@ -38,412 +21,10 @@
-
-
+
+
+
+
diff --git a/js/functions.js b/js/functions.js
new file mode 100644
index 0000000..92276fb
--- /dev/null
+++ b/js/functions.js
@@ -0,0 +1,566 @@
+// ------------------------------------------------------------------------- base
+// helper methods
+// -------------------------------------------------------------------------
+
+function get(id) {
+ return document.getElementById(id);
+}
+function hide(id) {
+ get(id).style.visibility = 'hidden';
+}
+function show(id) {
+ get(id).style.visibility = null;
+}
+function html(id, html) {
+ get(id).innerHTML = html;
+}
+
+function timestamp() {
+ return new Date().getTime();
+}
+function random(min, max) {
+ return (min + (Math.random() * (max - min)));
+}
+function randomChoice(choices) {
+ return choices[Math.round(random(0, choices.length - 1))];
+}
+
+if (!window.requestAnimationFrame) { // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
+ window.setTimeout(callback, 1000 / 60);
+ }
+}
+
+// ------------------------------------------------------------------------- game
+// constants
+// -------------------------------------------------------------------------
+
+var KEY = {
+ ESC: 27,
+ SPACE: 32,
+ LEFT: 37,
+ UP: 38,
+ RIGHT: 39,
+ DOWN: 40
+ },
+ DIR = {
+ UP: 0,
+ RIGHT: 1,
+ DOWN: 2,
+ LEFT: 3,
+ MIN: 0,
+ MAX: 3
+ },
+ stats = new Stats(),
+ canvas = get('canvas'),
+ ctx = canvas.getContext('2d'),
+ ucanvas = get('upcoming'),
+ uctx = ucanvas.getContext('2d'),
+ speed = {
+ start: 0.6,
+ decrement: 0.005,
+ min: 0.1
+ }, // how long before piece drops by 1 row (seconds)
+ nx = 10, // width of tetris court (in blocks)
+ ny = 20, // height of tetris court (in blocks)
+ nu = 5; // width/height of upcoming preview (in blocks)
+
+// ------------------------------------------------------------------------- game
+// variables (initialized during reset)
+// -------------------------------------------------------------------------
+
+var dx,
+ dy, // pixel size of a single tetris block
+ blocks, // 2 dimensional array (nx*ny) representing tetris court - either empty block or occupied by a 'piece'
+ actions, // queue of user actions (inputs)
+ playing, // true|false - game is in progress
+ dt, // time since starting this game
+ current, // the current piece
+ next, // the next piece
+ score, // the current score
+ vscore, // the currently displayed score (it catches up to score in small chunks - like a spinning slot machine)
+ rows, // number of completed rows in the current game
+ step; // how long before current piece drops by 1 row
+
+// -------------------------------------------------------------------------
+// tetris pieces
+//
+// blocks: each element represents a rotation of the piece (0, 90, 180, 270)
+// each element is a 16 bit integer where the 16 bits represent a
+// 4x4 set of blocks, e.g. j.blocks[0] = 0x44C0
+//
+// 0100 = 0x4 << 3 = 0x4000 0100 = 0x4 << 2 = 0x0400
+// 1100 = 0xC << 1 = 0x00C0 0000 = 0x0 << 0 = 0x0000
+// ------ 0x44C0
+//
+//-------------------------------------------------------------------------
+
+var i = {
+ size: 4,
+ blocks: [
+ 0x0F00, 0x2222, 0x00F0, 0x4444
+ ],
+ color: 'cyan'
+};
+var j = {
+ size: 3,
+ blocks: [
+ 0x44C0, 0x8E00, 0x6440, 0x0E20
+ ],
+ color: 'blue'
+};
+var l = {
+ size: 3,
+ blocks: [
+ 0x4460, 0x0E80, 0xC440, 0x2E00
+ ],
+ color: 'orange'
+};
+var o = {
+ size: 2,
+ blocks: [
+ 0xCC00, 0xCC00, 0xCC00, 0xCC00
+ ],
+ color: 'yellow'
+};
+var s = {
+ size: 3,
+ blocks: [
+ 0x06C0, 0x8C40, 0x6C00, 0x4620
+ ],
+ color: 'green'
+};
+var t = {
+ size: 3,
+ blocks: [
+ 0x0E40, 0x4C40, 0x4E00, 0x4640
+ ],
+ color: 'purple'
+};
+var z = {
+ size: 3,
+ blocks: [
+ 0x0C60, 0x4C80, 0xC600, 0x2640
+ ],
+ color: 'red'
+};
+
+// ------------------------------------------------ do the bit manipulation and
+// iterate through each occupied block (x,y) for a given piece
+// ------------------------------------------------
+function eachblock(type, x, y, dir, fn) {
+ var bit,
+ result,
+ row = 0,
+ col = 0,
+ blocks = type.blocks[dir];
+ for (bit = 0x8000; bit > 0; bit = bit >> 1) {
+ if (blocks & bit) {
+ fn(x + col, y + row);
+ }
+ if (++col === 4) {
+ col = 0;
+ ++row;
+ }
+ }
+}
+
+// ----------------------------------------------------- check if a piece can fit
+// into a position in the grid
+// -----------------------------------------------------
+function occupied(type, x, y, dir) {
+ var result = false
+ eachblock(type, x, y, dir, function (x, y) {
+ if ((x < 0) || (x >= nx) || (y < 0) || (y >= ny) || getBlock(x, y))
+ result = true;
+ }
+ );
+ return result;
+}
+
+function unoccupied(type, x, y, dir) {
+ return !occupied(type, x, y, dir);
+}
+
+// ----------------------------------------- start with 4 instances of each piece
+// and pick randomly until the 'bag is empty'
+// -----------------------------------------
+var pieces = [];
+function randomPiece() {
+ if (pieces.length == 0)
+ 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
+ ];
+ var type = pieces.splice(random(0, pieces.length - 1), 1)[0];
+ return {
+ type: type,
+ dir: DIR.UP,
+ x: Math.round(random(0, nx - type.size)),
+ y: 0
+ };
+}
+
+function showStats() {
+ stats.domElement.id = 'stats';
+ get('menu').appendChild(stats.domElement);
+}
+
+function addEvents() {
+ document.addEventListener('keydown', keydown, false);
+ window.addEventListener('resize', resize, false);
+}
+
+function resize(event) {
+ canvas.width = canvas.clientWidth; // set canvas logical size equal to its physical size
+ canvas.height = canvas.clientHeight; // (ditto)
+ ucanvas.width = ucanvas.clientWidth;
+ ucanvas.height = ucanvas.clientHeight;
+ dx = canvas.width / nx; // pixel size of a single tetris block
+ dy = canvas.height / ny; // (ditto)
+ invalidate();
+ invalidateNext();
+}
+
+function keydown(ev) {
+ var handled = false;
+ if (playing) {
+ switch (ev.keyCode) {
+ case KEY.LEFT:
+ actions.push(DIR.LEFT);
+ handled = true;
+ break;
+ case KEY.RIGHT:
+ actions.push(DIR.RIGHT);
+ handled = true;
+ break;
+ case KEY.UP:
+ actions.push(DIR.UP);
+ handled = true;
+ break;
+ case KEY.DOWN:
+ actions.push(DIR.DOWN);
+ handled = true;
+ break;
+ case KEY.ESC:
+ lose();
+ handled = true;
+ break;
+ }
+ } else if (ev.keyCode == KEY.SPACE) {
+ play();
+ handled = true;
+ }
+ if (handled)
+ ev.preventDefault(); // prevent arrow keys from scrolling the page (supported in IE9+ and all other browsers)
+ }
+
+// ------------------------------------------------------------------------- GAME
+// LOGIC
+// -------------------------------------------------------------------------
+
+function play() {
+ hide('start');
+ reset();
+ playing = true;
+}
+function lose() {
+ show('start');
+ setVisualScore();
+ playing = false;
+}
+
+function setVisualScore(n) {
+ vscore = n || score;
+ invalidateScore();
+}
+function setScore(n) {
+ score = n;
+ setVisualScore(n);
+}
+function addScore(n) {
+ score = score + n;
+}
+function clearScore() {
+ setScore(0);
+}
+function clearRows() {
+ setRows(0);
+}
+function setRows(n) {
+ rows = n;
+ step = Math.max(speed.min, speed.start - (speed.decrement * rows));
+ invalidateRows();
+}
+function addRows(n) {
+ setRows(rows + n);
+}
+function getBlock(x, y) {
+ return (blocks && blocks[x]
+ ? blocks[x][y]
+ : null);
+}
+function setBlock(x, y, type) {
+ blocks[x] = blocks[x] || [];
+ blocks[x][y] = type;
+ invalidate();
+}
+function clearBlocks() {
+ blocks = [];
+ invalidate();
+}
+function clearActions() {
+ actions = [];
+}
+function setCurrentPiece(piece) {
+ current = piece || randomPiece();
+ invalidate();
+}
+function setNextPiece(piece) {
+ next = piece || randomPiece();
+ invalidateNext();
+}
+
+function reset() {
+ dt = 0;
+ clearActions();
+ clearBlocks();
+ clearRows();
+ clearScore();
+ setCurrentPiece(next);
+ setNextPiece();
+}
+
+function update(idt) {
+ if (playing) {
+ if (vscore < score)
+ setVisualScore(vscore + 1);
+ handle(actions.shift());
+ dt = dt + idt;
+ if (dt > step) {
+ dt = dt - step;
+ drop();
+ }
+ }
+}
+
+function handle(action) {
+ switch (action) {
+ case DIR.LEFT:
+ move(DIR.LEFT);
+ break;
+ case DIR.RIGHT:
+ move(DIR.RIGHT);
+ break;
+ case DIR.UP:
+ rotate();
+ break;
+ case DIR.DOWN:
+ drop();
+ break;
+ }
+}
+
+function move(dir) {
+ var x = current.x,
+ y = current.y;
+ switch (dir) {
+ case DIR.RIGHT:
+ x = x + 1;
+ break;
+ case DIR.LEFT:
+ x = x - 1;
+ break;
+ case DIR.DOWN:
+ y = y + 1;
+ break;
+ }
+ if (unoccupied(current.type, x, y, current.dir)) {
+ current.x = x;
+ current.y = y;
+ invalidate();
+ return true;
+ } else {
+ return false;
+ }
+}
+
+function rotate() {
+ var newdir = (current.dir == DIR.MAX
+ ? DIR.MIN
+ : current.dir + 1);
+ if (unoccupied(current.type, current.x, current.y, newdir)) {
+ current.dir = newdir;
+ invalidate();
+ }
+}
+
+function drop() {
+ if (!move(DIR.DOWN)) {
+ addScore(10);
+ dropPiece();
+ removeLines();
+ setCurrentPiece(next);
+ setNextPiece(randomPiece());
+ clearActions();
+ if (occupied(current.type, current.x, current.y, current.dir)) {
+ lose();
+ }
+ }
+}
+
+function dropPiece() {
+ eachblock(current.type, current.x, current.y, current.dir, function (x, y) {
+ setBlock(x, y, current.type);
+ });
+}
+
+function removeLines() {
+ var x,
+ y,
+ complete,
+ n = 0;
+ for (y = ny; y > 0; --y) {
+ complete = true;
+ for (x = 0; x < nx; ++x) {
+ if (!getBlock(x, y))
+ complete = false;
+ }
+ if (complete) {
+ removeLine(y);
+ y = y + 1; // recheck same line
+ n++;
+ }
+ }
+ if (n > 0) {
+ addRows(n);
+ addScore(100 * Math.pow(2, n - 1)); // 1: 100, 2: 200, 3: 400, 4: 800
+ }
+}
+
+function removeLine(n) {
+ var x,
+ y;
+ for (y = n; y >= 0; --y) {
+ for (x = 0; x < nx; ++x)
+ setBlock(x, y, (y == 0)
+ ? null
+ : getBlock(x, y - 1));
+ }
+ }
+
+// -------------------------------------------------------------------------
+// RENDERING
+// -------------------------------------------------------------------------
+
+var invalid = {};
+
+function invalidate() {
+ invalid.court = true;
+}
+function invalidateNext() {
+ invalid.next = true;
+}
+function invalidateScore() {
+ invalid.score = true;
+}
+function invalidateRows() {
+ invalid.rows = true;
+}
+
+function draw() {
+ ctx.save();
+ ctx.lineWidth = 1;
+ ctx.translate(0.5, 0.5); // for crisp 1px black lines
+ drawCourt();
+ drawNext();
+ drawScore();
+ drawRows();
+ ctx.restore();
+}
+
+function drawCourt() {
+ if (invalid.court) {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ if (playing)
+ drawPiece(ctx, current.type, current.x, current.y, current.dir);
+ var x,
+ y,
+ block;
+ for (y = 0; y < ny; y++) {
+ for (x = 0; x < nx; x++) {
+ if (block = getBlock(x, y))
+ drawBlock(ctx, x, y, block.color);
+ }
+ }
+ ctx.strokeRect(0, 0, nx * dx - 1, ny * dy - 1); // court boundary
+ invalid.court = false;
+ }
+}
+
+function drawNext() {
+ if (invalid.next) {
+ var padding = (nu - next.type.size) / 2; // half-arsed attempt at centering next piece display
+ uctx.save();
+ uctx.translate(0.5, 0.5);
+ uctx.clearRect(0, 0, nu * dx, nu * dy);
+ drawPiece(uctx, next.type, padding, padding, next.dir);
+ uctx.strokeStyle = 'black';
+ uctx.strokeRect(0, 0, nu * dx - 1, nu * dy - 1);
+ uctx.restore();
+ invalid.next = false;
+ }
+}
+
+function drawScore() {
+ if (invalid.score) {
+ html('score', ("00000" + Math.floor(vscore)).slice(-5));
+ invalid.score = false;
+ }
+}
+
+function drawRows() {
+ if (invalid.rows) {
+ html('rows', rows);
+ invalid.rows = false;
+ }
+}
+
+function drawPiece(ctx, type, x, y, dir) {
+ eachblock(type, x, y, dir, function (x, y) {
+ drawBlock(ctx, x, y, type.color);
+ });
+}
+
+function drawBlock(ctx, x, y, color) {
+ ctx.fillStyle = color;
+ ctx.fillRect(x * dx, y * dy, dx, dy);
+ ctx.strokeRect(x * dx, y * dy, dx, dy)
+}
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..4397739
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,5 @@
+// -------------------------------------------------------------------------
+// FINALLY, lets run the game
+// -------------------------------------------------------------------------
+
+run();
\ No newline at end of file
diff --git a/js/run.js b/js/run.js
new file mode 100644
index 0000000..fc26c19
--- /dev/null
+++ b/js/run.js
@@ -0,0 +1,24 @@
+//-------------------------------------------------------------------------
+ // GAME LOOP
+ //-------------------------------------------------------------------------
+
+ function run() {
+
+ showStats(); // initialize FPS counter
+ addEvents(); // attach keydown and resize events
+
+ var last = now = timestamp();
+ function frame() {
+ now = timestamp();
+ 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
+ draw();
+ stats.update();
+ last = now;
+ requestAnimationFrame(frame, canvas);
+ }
+
+ resize(); // setup all our sizing information
+ reset(); // reset the per-game variables
+ frame(); // start the first frame
+
+ }
\ No newline at end of file
diff --git a/js/stats.js b/js/stats.js
new file mode 100644
index 0000000..13af7b7
--- /dev/null
+++ b/js/stats.js
@@ -0,0 +1,210 @@
+// stats.js r6 - http://github.com/mrdoob/stats.js
+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,
+ b: 26
+ },
+ fg: {
+ r: 255,
+ g: 0,
+ b: 128
+ }
+ }
+ };
+ g = document.createElement("div");
+ g.style.cursor = "pointer";
+ g.style.width = "8²0px";
+ 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 / 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 = 'Fl,kPS';
+ k.appendChild(d);
+ a = document.createElement("canvas");
+ a.width = 74;
+ a.height = 30;
+ a.style.display = "block";
+ a.style.marginLeft = "3px";
+ k.appendChild(a);
+ 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 = "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 = 'MS';
+ 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 && (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 = 'MB';
+ 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 = '' + n + " MS (" + z + "-" + A + ")";
+ o.putImageData(B, 0, 0);
+ F = j;
+ if (j > 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 = '' + l + " FPS (" + 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 = '' + Math.round(p) + " MB (" + Math.round(C) + "-" + Math.round(D) + ")",
+ q.putImageData(E, 0, 0);
+ v = j;
+ u = 0
+ }
+ }
+ }
+};
diff --git a/stats.js b/stats.js
deleted file mode 100644
index 5d89bff..0000000
--- a/stats.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// stats.js r6 - http://github.com/mrdoob/stats.js
-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'+n+" MS ("+z+"-"+A+")";o.putImageData(B,0,0);F=j;if(j>
-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=''+l+" FPS ("+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=''+Math.round(p)+" MB ("+Math.round(C)+"-"+Math.round(D)+")",q.putImageData(E,0,0);v=j;u=0}}}};
-
From ade27e989017a04702c38bf0016a92bd54ebbb6a Mon Sep 17 00:00:00 2001
From: FlorentDlh <1899006@cstjean.qc.ca>
Date: Tue, 20 Feb 2018 19:25:37 -0500
Subject: [PATCH 02/39] Update du readme
---
README.md | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/README.md b/README.md
index 9b2720e..e997773 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,18 @@ FUTURE
* touch support
* music and sound fx
+TÂCHES
+======
+* affichage de fin de partie (proposition rejouer / retour menu)
+* Page Menu avec "Play game" / "Levels" / "high score"
+* fonctionnalité Play Game
+* fonctionnalité Levels
+* Page High Score qui affiche les HighScores enregistrés en cookie avec option reset
+* fonctionnalité de musique de fond avec bouton lancer/couper
+* fonctionnalité pause
+* Resystilisé l'interface :
+ * changer couleur bloc
+ * changer css page de jeu
License
=======
From 4e26fc88ecbdaebf7ed9a6c0857d1ac77fd03f06 Mon Sep 17 00:00:00 2001
From: gabriel fernandez casa
Date: Wed, 21 Feb 2018 02:54:12 +0100
Subject: [PATCH 03/39] update des taches
---
README.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index e997773..1498645 100644
--- a/README.md
+++ b/README.md
@@ -21,16 +21,16 @@ FUTURE
TÂCHES
======
-* affichage de fin de partie (proposition rejouer / retour menu)
-* Page Menu avec "Play game" / "Levels" / "high score"
-* fonctionnalité Play Game
+* affichage de fin de partie (proposition rejouer / retour menu)
+* Page Menu avec "Play game" / "Levels" / "high score" ~ Florent
+* fonctionnalité Play Game ~ Gab
* fonctionnalité Levels
* Page High Score qui affiche les HighScores enregistrés en cookie avec option reset
* fonctionnalité de musique de fond avec bouton lancer/couper
* fonctionnalité pause
* Resystilisé l'interface :
- * changer couleur bloc
- * changer css page de jeu
+ * changer couleur bloc
+ * changer css page de jeu
License
=======
From 68e87a22973050a161257d9839b16686c2e40d91 Mon Sep 17 00:00:00 2001
From: gabriel fernandez casa
Date: Wed, 21 Feb 2018 03:02:30 +0100
Subject: [PATCH 04/39] =?UTF-8?q?Ajout=20de=20num=C3=A9ro=20car=20plus=20f?=
=?UTF-8?q?acile=20pour=20se=20rep=C3=A9rer=20dans=20les=20features?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
index 1498645..0791396 100644
--- a/README.md
+++ b/README.md
@@ -21,16 +21,16 @@ FUTURE
TÂCHES
======
-* affichage de fin de partie (proposition rejouer / retour menu)
-* Page Menu avec "Play game" / "Levels" / "high score" ~ Florent
-* fonctionnalité Play Game ~ Gab
-* fonctionnalité Levels
-* Page High Score qui affiche les HighScores enregistrés en cookie avec option reset
-* fonctionnalité de musique de fond avec bouton lancer/couper
-* fonctionnalité pause
-* Resystilisé l'interface :
- * changer couleur bloc
- * changer css page de jeu
+* 1 - affichage de fin de partie (proposition rejouer / retour menu)
+* 2 - Page Menu avec "Play game" / "Levels" / "high score" ~ FLORENT
+* 3 - fonctionnalité Play Game ~ GAB
+* 4 - fonctionnalité Levels
+* 5 - Page High Score qui affiche les HighScores enregistrés en cookie avec option reset
+* 6 - fonctionnalité de musique de fond avec bouton lancer/couper
+* 7 - fonctionnalité pause
+* 8 - Resystilisé l'interface :
+ * 8.1 - changer couleur bloc
+ * 8.2 - changer css page de jeu
License
=======
From 4797b16004c2edc6953bf9ce8a95e5997ce87266 Mon Sep 17 00:00:00 2001
From: gabriel fernandez casa
Date: Wed, 21 Feb 2018 04:35:20 +0100
Subject: [PATCH 05/39] Ajout du bouton play qui lance la partie
---
README.md | 4 ++--
index.html | 4 ++--
js/functions.js | 13 ++++++++-----
js/main.js | 1 -
js/run.js | 2 +-
5 files changed, 13 insertions(+), 11 deletions(-)
diff --git a/README.md b/README.md
index 0791396..0c27c34 100644
--- a/README.md
+++ b/README.md
@@ -27,8 +27,8 @@ TÂCHES
* 4 - fonctionnalité Levels
* 5 - Page High Score qui affiche les HighScores enregistrés en cookie avec option reset
* 6 - fonctionnalité de musique de fond avec bouton lancer/couper
-* 7 - fonctionnalité pause
-* 8 - Resystilisé l'interface :
+* 7 - fonctionnalité pause ~ GAB
+* 8 - Restylisé l'interface :
* 8.1 - changer couleur bloc
* 8.2 - changer css page de jeu
diff --git a/index.html b/index.html
index efcdbfc..4c967b3 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
diff --git a/js/functions.js b/js/functions.js
index 92276fb..924b21e 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -37,7 +37,7 @@ if (!window.requestAnimationFrame) { // http://paulirish.com/2011/requestanimati
var KEY = {
ESC: 27,
- SPACE: 32,
+ //SPACE: 32,
LEFT: 37,
UP: 38,
RIGHT: 39,
@@ -235,6 +235,9 @@ function showStats() {
function addEvents() {
document.addEventListener('keydown', keydown, false);
window.addEventListener('resize', resize, false);
+ document.getElementById("play").addEventListener("click", function(){
+ play();
+ });
}
function resize(event) {
@@ -273,10 +276,10 @@ function keydown(ev) {
handled = true;
break;
}
- } else if (ev.keyCode == KEY.SPACE) {
+ } /* else if (ev.keyCode == KEY.SPACE) {
play();
handled = true;
- }
+ } */
if (handled)
ev.preventDefault(); // prevent arrow keys from scrolling the page (supported in IE9+ and all other browsers)
}
@@ -286,12 +289,12 @@ function keydown(ev) {
// -------------------------------------------------------------------------
function play() {
- hide('start');
+ hide('play');
reset();
playing = true;
}
function lose() {
- show('start');
+ show('play');
setVisualScore();
playing = false;
}
diff --git a/js/main.js b/js/main.js
index 4397739..9f44366 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,4 @@
// -------------------------------------------------------------------------
// FINALLY, lets run the game
// -------------------------------------------------------------------------
-
run();
\ No newline at end of file
diff --git a/js/run.js b/js/run.js
index fc26c19..626dcf9 100644
--- a/js/run.js
+++ b/js/run.js
@@ -5,7 +5,7 @@
function run() {
showStats(); // initialize FPS counter
- addEvents(); // attach keydown and resize events
+ addEvents(); // attach keydown/resize events/buttons events
var last = now = timestamp();
function frame() {
From dc65f8cbf99e68a718fa91085677bd9fe07e6d5b Mon Sep 17 00:00:00 2001
From: "CSTJEAN\\1899006"