From 350c725317017d13d878bc7c5f2e950ab42452b5 Mon Sep 17 00:00:00 2001 From: adrien Date: Mon, 29 May 2023 00:26:47 +0200 Subject: [PATCH] maze in favicon --- favicon.php | 44 +++++++ index.html | 40 ++++--- labyrinthe.js | 292 +++++++++++++++++++++++++--------------------- manifest.json | 42 +++++++ mur.png | Bin pas.png | Bin 0 -> 648 bytes service-worker.js | 86 ++++++++++++++ sol.png | Bin 0 -> 644 bytes souris.png | Bin 0 -> 1489 bytes style.css | 3 +- 10 files changed, 351 insertions(+), 156 deletions(-) create mode 100644 favicon.php mode change 100644 => 100755 index.html mode change 100644 => 100755 labyrinthe.js create mode 100644 manifest.json mode change 100644 => 100755 mur.png create mode 100755 pas.png create mode 100644 service-worker.js create mode 100755 sol.png create mode 100755 souris.png mode change 100644 => 100755 style.css diff --git a/favicon.php b/favicon.php new file mode 100644 index 0000000..16c34ce --- /dev/null +++ b/favicon.php @@ -0,0 +1,44 @@ + \ No newline at end of file diff --git a/index.html b/index.html old mode 100644 new mode 100755 index c2023d0..812d997 --- a/index.html +++ b/index.html @@ -1,29 +1,31 @@ - - - - Labyrinthe + + + + Labyrinthe - - - - - - - - - - - + + + + + + + + + + + + + - -
+ +
- Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer. - + Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer. + diff --git a/labyrinthe.js b/labyrinthe.js old mode 100644 new mode 100755 index 1840de4..eab90c4 --- a/labyrinthe.js +++ b/labyrinthe.js @@ -1,209 +1,229 @@ // Customize Array to be use as coordinates -Object.defineProperty(Array.prototype, "x", { - get: function () { return this[0] }, - set: function (x) { this[0] = x} +Object.defineProperties(Array.prototype, { + "x": { + get: function() { return this[0] }, + set: function(x) { this[0] = x } + }, + "y": { + get: function() { return this[1] }, + set: function(y) { this[1] = y } + } }) -Object.defineProperty(Array.prototype, "y", { - get: function () { return this[1] }, - set: function (y) { this[1] = y} -}) -Array.prototype.plus = function(other) { return this.map((x, i) => x + other[i]) } +Array.prototype.plus = function (other) { + return this.map((x, i) => x + other[i]); +}; const DIRECTION = { - "BAS": 0, - "GAUCHE": 1, - "DROITE": 2, - "HAUT": 3 -} + 'BAS': 0, + 'GAUCHE': 1, + 'DROITE': 2, + 'HAUT': 3, +}; const MOUVEMENT = { - "ARRET": [0, 0], - "BAS": [0, 1], - "HAUT": [0, -1], - "GAUCHE": [-1, 0], - "DROITE": [1, 0] -} + 'ARRET': [0, 0], + 'BAS': [0, 1], + 'HAUT': [0, -1], + 'GAUCHE': [-1, 0], + 'DROITE': [1, 0], +}; const ACTIONS = { - "ArrowUp": {"direction": DIRECTION.HAUT, "mouvement": MOUVEMENT.HAUT}, - "ArrowDown": {"direction": DIRECTION.BAS, "mouvement": MOUVEMENT.BAS}, - "ArrowLeft": {"direction": DIRECTION.GAUCHE, "mouvement": MOUVEMENT.GAUCHE}, - "ArrowRight": {"direction": DIRECTION.DROITE, "mouvement": MOUVEMENT.DROITE}, -} + 'ArrowUp': { 'direction': DIRECTION.HAUT, 'mouvement': MOUVEMENT.HAUT }, + 'z': { 'direction': DIRECTION.HAUT, 'mouvement': MOUVEMENT.HAUT }, + 'ArrowDown': { 'direction': DIRECTION.BAS, 'mouvement': MOUVEMENT.BAS }, + 's': { 'direction': DIRECTION.BAS, 'mouvement': MOUVEMENT.BAS }, + 'ArrowLeft': { 'direction': DIRECTION.GAUCHE, 'mouvement': MOUVEMENT.GAUCHE }, + 'q': { 'direction': DIRECTION.GAUCHE, 'mouvement': MOUVEMENT.GAUCHE }, + 'ArrowRight': { 'direction': DIRECTION.DROITE, 'mouvement': MOUVEMENT.DROITE }, + 'd': { 'direction': DIRECTION.DROITE, 'mouvement': MOUVEMENT.DROITE }, +}; const TYPE = { - "MUR": 1, - "SOL": 2, - "PAS": 3 -} + 'MUR': 1, + 'SOL': 2, + 'PAS': 3, +}; + +const DIRECTIONS_LABYRINTHE = [MOUVEMENT.BAS, MOUVEMENT.HAUT, MOUVEMENT.GAUCHE, MOUVEMENT.DROITE]; +const TAILLE_TUILE = 15; -const DIRECTIONS_LABYRINTHE = [MOUVEMENT.BAS, MOUVEMENT.HAUT, MOUVEMENT.GAUCHE, MOUVEMENT.DROITE] -const TAILLE_TUILE = 15 - function dessinerTuile(context, image, x, y) { - context.drawImage(image, TAILLE_TUILE*x, TAILLE_TUILE*y); + context.drawImage(image, TAILLE_TUILE * x, TAILLE_TUILE * y); } class Labyrinthe extends Array { constructor(largeur, hauteur, context, tuiles) { - super() - this.hauteur = hauteur - this.largeur = largeur - this.context = context - this.tuiles = tuiles - for (var ligne=0; ligne < hauteur; ligne++) { - this.push(Array(largeur).fill(TYPE.MUR)) + super(); + this.hauteur = hauteur; + this.largeur = largeur; + this.context = context; + this.tuiles = tuiles; + for (var ligne = 0; ligne < hauteur; ligne++) { + this.push(Array(largeur).fill(TYPE.MUR)); } - this.positionInitiale = [1, 1] - this.positionFinale = [largeur - 2, hauteur - 2] - this.creuse(this.positionFinale) - this.construit(this.positionFinale) + this.positionInitiale = [1, 1]; + this.positionFinale = [largeur - 2, hauteur - 2]; + this.creuse(this.positionFinale); + this.construit(this.positionFinale); } construit(position) { - for (var direction of Array.from(DIRECTIONS_LABYRINTHE).sort(x => .5 - Math.random())) { - var pas1 = position.plus(direction) - var pas2 = pas1.plus(direction) + for (var direction of Array.from(DIRECTIONS_LABYRINTHE).sort(x => 0.5 - Math.random())) { + var pas1 = position.plus(direction); + var pas2 = pas1.plus(direction); if (this.type(pas2) == TYPE.MUR) { - this.creuse(pas1) - this.creuse(pas2) - this.construit(pas2) + this.creuse(pas1); + this.creuse(pas2); + this.construit(pas2); } } } - + creuse(position) { - this[position.y][position.x] = TYPE.SOL + this[position.y][position.x] = TYPE.SOL; } type(position) { - if (0 <= position.x && position.x < this.largeur && 0 <= position.y && position.y < this.hauteur) { - return this[position.y][position.x] + if ( + 0 <= position.x && + position.x < this.largeur && + 0 <= position.y && + position.y < this.hauteur + ) { + return this[position.y][position.x]; } else { - return -1 + return -1; } } dessiner() { this.forEach((ligne, y) => { ligne.forEach((type, x) => { - dessinerTuile(this.context, this.tuiles[type], x, y) - }) - }) + dessinerTuile(this.context, this.tuiles[type], x, y); + }); + }); } } class Souris { constructor(position, context, sprites) { - this.position = position - this.context = context - this.sprites = sprites - this.futurePosition = this.position - this.direction = DIRECTION.DROITE - this.mouvement = MOUVEMENT.ARRET - this.tailleSprite = 48 - this.animationSprite = 0 - this.animation = 0 + this.position = position; + this.context = context; + this.sprites = sprites; + this.futurePosition = this.position; + this.direction = DIRECTION.DROITE; + this.mouvement = MOUVEMENT.ARRET; + this.tailleSprite = 48; + this.animationSprite = 0; + this.animation = 0; } - + bouger(touche, labyrinthe) { if (touche in ACTIONS) { - this.direction = ACTIONS[touche].direction - this.mouvement = ACTIONS[touche].mouvement - var futurePosition = this.position.plus(this.mouvement) + this.direction = ACTIONS[touche].direction; + this.mouvement = ACTIONS[touche].mouvement; + var futurePosition = this.position.plus(this.mouvement); if ([TYPE.SOL, TYPE.PAS].includes(labyrinthe.type(futurePosition))) { - labyrinthe[this.position.y][this.position.x] = TYPE.PAS - this.futurePosition = futurePosition - return true + labyrinthe[this.position.y][this.position.x] = TYPE.PAS; + this.futurePosition = futurePosition; + return true; } else { - this.mouvement = MOUVEMENT.ARRET - this.animation = 0 - return false + this.mouvement = MOUVEMENT.ARRET; + this.animation = 0; + return false; } } else { - return False + return False; } } - + dessiner() { - this.context.drawImage( - this.sprites, - this.tailleSprite * this.animationSprite, - this.tailleSprite * this.direction, - this.tailleSprite, - this.tailleSprite, - TAILLE_TUILE * this.position.x - 17 + this.mouvement.x * this.animation, - TAILLE_TUILE * this.position.y - 12 + this.mouvement.y * this.animation, - this.tailleSprite, - this.tailleSprite + this.context.drawImage( + this.sprites, + this.tailleSprite * this.animationSprite, + this.tailleSprite * this.direction, + this.tailleSprite, + this.tailleSprite, + TAILLE_TUILE * this.position.x - 17 + this.mouvement.x * this.animation, + TAILLE_TUILE * this.position.y - 12 + this.mouvement.y * this.animation, + this.tailleSprite, + this.tailleSprite ); - } + } } -window.onload = function() { - var canvas = document.getElementById('canvas') - var ctx = canvas.getContext('2d') - var fromage = document.getElementById("fromage"); - var sourisSprites = document.getElementById("souris"); - var tuiles = {} - tuiles[TYPE.MUR] = document.getElementById("mur") - tuiles[TYPE.SOL] = document.getElementById("sol") - tuiles[TYPE.PAS] = document.getElementById("pas") +window.onload = function () { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + var fromage = document.getElementById('fromage'); + var sourisSprites = document.getElementById('souris'); + var tuiles = {}; + tuiles[TYPE.MUR] = document.getElementById('mur'); + tuiles[TYPE.SOL] = document.getElementById('sol'); + tuiles[TYPE.PAS] = document.getElementById('pas'); - var touchesPressees = new this.Set() + var touchesPressees = new this.Set(); - var largeur = Math.floor(window.innerWidth / TAILLE_TUILE) - largeur = largeur - ((largeur+1) % 2) - var hauteur = Math.floor(window.innerHeight / TAILLE_TUILE) - hauteur = hauteur - ((hauteur+1) % 2) + var largeur = Math.floor(window.innerWidth / TAILLE_TUILE); + largeur = largeur - ((largeur + 1) % 2); + var hauteur = Math.floor(window.innerHeight / TAILLE_TUILE); + hauteur = hauteur - ((hauteur + 1) % 2); - canvas.width = largeur * TAILLE_TUILE; - canvas.height = hauteur * TAILLE_TUILE; - - var labyrinthe = new Labyrinthe(largeur, hauteur, ctx, tuiles) - var souris = new Souris(labyrinthe.positionInitiale, ctx, sourisSprites) - - window.onkeydown = function(event) { + canvas.width = largeur * TAILLE_TUILE; + canvas.height = hauteur * TAILLE_TUILE; + + var labyrinthe = new Labyrinthe(largeur, hauteur, ctx, tuiles); + var souris = new Souris(labyrinthe.positionInitiale, ctx, sourisSprites); + + window.onkeydown = function (event) { if (event.key in ACTIONS) { - touchesPressees.add(event.key) - return false + touchesPressees.add(event.key); + return false; } else { - return true + return true; } - } - - window.onkeyup = function(event) { + }; + + window.onkeyup = function (event) { if (event.key in ACTIONS) { - touchesPressees.delete(event.key) - return false + touchesPressees.delete(event.key); + return false; } else { - return true + return true; } - } - - var timerID - timerID = setInterval(function() { - if (touchesPressees.size > 0) souris.animationSprite = (souris.animationSprite + 1) % 3 + }; + + var timerID; + timerID = setInterval(function () { + if (touchesPressees.size > 0) souris.animationSprite = (souris.animationSprite + 1) % 3; if (souris.mouvement != MOUVEMENT.ARRET) { - souris.animation += 5 + souris.animation += 5; if (souris.animation >= TAILLE_TUILE) { - souris.animation = 0 - souris.position = souris.futurePosition - if (souris.position.x == labyrinthe.positionFinale.x && souris.position.y == labyrinthe.positionFinale.y) { - window.alert("Miam miam !") - clearInterval(timerID) + souris.animation = 0; + souris.position = souris.futurePosition; + if ( + souris.position.x == labyrinthe.positionFinale.x && + souris.position.y == labyrinthe.positionFinale.y + ) { + window.alert('Miam miam !'); + clearInterval(timerID); } } } if (souris.animation == 0) { - souris.mouvement = MOUVEMENT.ARRET + souris.mouvement = MOUVEMENT.ARRET; for (touche of Array.from(touchesPressees).reverse()) { - if (souris.bouger(touche, labyrinthe)) break + if (souris.bouger(touche, labyrinthe)) break; } } - labyrinthe.dessiner() - dessinerTuile(ctx, fromage, labyrinthe.positionFinale.x, labyrinthe.positionFinale.y) - souris.dessiner() + labyrinthe.dessiner(); + dessinerTuile(ctx, fromage, labyrinthe.positionFinale.x, labyrinthe.positionFinale.y); + souris.dessiner(); }, 40); -} + + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('service-worker.js'); + } +}; diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..5d0bed7 --- /dev/null +++ b/manifest.json @@ -0,0 +1,42 @@ +{ + "short_name": "Labyrinthe", + "name": "Labyrinthe", + "description": "Trouveras-tu le fromage ?", + "icons": [ + { + "src": "mur.png", + "type": "image/png", + "sizes": "15x15" + }, + { + "src": "thumbnail.png", + "type": "image/png", + "sizes": "250x250" + } + ], + "start_url": "index.html", + "background_color": "#c55818", + "display": "standalone", + "scope": "index.html", + "theme_color": "#c55818", + "shortcuts": [ + { + "name": "Labyrinthe", + "short_name": "Labyrinthe", + "description": "Trouveras-tu le fromage ?", + "url": "index.html", + "icons": [ + { + "src": "mur.png", + "type": "image/png", + "sizes": "15x15" + }, + { + "src": "thumbnail.png", + "type": "image/png", + "sizes": "250x250" + } + ] + } + ] +} diff --git a/mur.png b/mur.png old mode 100644 new mode 100755 diff --git a/pas.png b/pas.png new file mode 100755 index 0000000000000000000000000000000000000000..a139c9273d593469ae2caa1c3c4929102d94b1ce GIT binary patch literal 648 zcmV;30(bq1P)p00004XF*Lt006O% z3;baP00009a7bBm000ib000ib0l1NC?EnA(8FWQhbW?9;ba!ELWdLwtX>N2bZe?^J zG%heMGBNQWX_Wu~0tHD#K~yMHB~pn}8bJ`9?@eMEjsOZGr?4!??y?IB7(isXK^6#d zC<+FY`!rluz9o-r)vKvDJ>9R~bT_HeCoN9hWK|7DS@$Ub5JUiwGWEIUIep|ch}XPd z$s+CA6q)TE`={VrW@rFpo%6_e&wFvslFoUGnx!ZrGbD}Tw&9Hxm?W+SF$=EaTRX0D z9DJU35vU%@JoF$VLzYDF@2}uTMc7MzIboS~lY2(_C}>~8hR%=kr+~ICXr6<*CZ}!( zbah4{QJ-M9<~?l(v`8bPBn2$8^dN4Xigw^7q;GJlZrCuqwaqiGY05bkuSN;`+l_^c zQ!ZqK^`oXi?1M!I2RFJc~| z0}<0CZkdbrQOwl4He!u1nkJ_j;Sb0b9oP=CD+`Bea8qKj0=uI3Lt+ml1`n8SgH>W@ iR#`VDzbkRuJN6#{nzC(eg6d)b0000 { + event.waitUntil( + (async () => { + const cache = await caches.open(CACHE_NAME); + // Setting {cache: 'reload'} in the new request will ensure that the + // response isn't fulfilled from the HTTP cache; i.e., it will be from + // the network. + await cache.add(new Request(OFFLINE_URL, { cache: "reload" })); + })() + ); + // Force the waiting service worker to become the active service worker. + self.skipWaiting(); +}); + +self.addEventListener("activate", (event) => { + event.waitUntil( + (async () => { + // Enable navigation preload if it's supported. + // See https://developers.google.com/web/updates/2017/02/navigation-preload + if ("navigationPreload" in self.registration) { + await self.registration.navigationPreload.enable(); + } + })() + ); + + // Tell the active service worker to take control of the page immediately. + self.clients.claim(); +}); + +self.addEventListener("fetch", (event) => { + // We only want to call event.respondWith() if this is a navigation request + // for an HTML page. + if (event.request.mode === "navigate") { + event.respondWith( + (async () => { + try { + // First, try to use the navigation preload response if it's supported. + const preloadResponse = await event.preloadResponse; + if (preloadResponse) { + return preloadResponse; + } + + // Always try the network first. + const networkResponse = await fetch(event.request); + return networkResponse; + } catch (error) { + // catch is only triggered if an exception is thrown, which is likely + // due to a network error. + // If fetch() returns a valid HTTP response with a response code in + // the 4xx or 5xx range, the catch() will NOT be called. + console.log("Fetch failed; returning offline page instead.", error); + + const cache = await caches.open(CACHE_NAME); + const cachedResponse = await cache.match(OFFLINE_URL); + return cachedResponse; + } + })() + ); + } + + // If our if() condition is false, then this fetch handler won't intercept the + // request. If there are any other fetch handlers registered, they will get a + // chance to call event.respondWith(). If no fetch handlers call + // event.respondWith(), the request will be handled by the browser as if there + // were no service worker involvement. +}); diff --git a/sol.png b/sol.png new file mode 100755 index 0000000000000000000000000000000000000000..276b8ba51f49723e0f14a7d04995e67986b61dc1 GIT binary patch literal 644 zcmV-~0(p00001b5ch_0Itp) z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D02y>eSaefwW^{L9 za%BK;VQFr3E^cLXAT%y8E;2FkAZe8V00Hz#L_t(2Q$3OkbJ9Q*h4=UBXj@v#*lCqF zgg{6jfR(X8Ab~)j1R{?zwTfefKzLVP)!*WYJLAkZJ7;gsy*bG)G1yoA_}QIs+T$JF z*a?6@1wb^Jm+k1$y?Bm#n>!|pa(Gkcx3|KtT5PGZ0AgK@Ql2yp>r4sFOU$gq5UOAr zOFlF21y(UI%6YJz6#UrII`q68CYX9?ikOEn|H0dyTggA4(^&UkfD(pz|PG$d030Os+S@4aEelS(2U89`K%)0@$XaJTHgcS`Cvob?WIYixq%;n>!t6}y%R=ZR3 z{>-@n9s%?KvaIoNLm><@Ak3-~rU5X|E-FDg_4WsmgBZ_UWuOZdHx0s*#1tT5@ozgiOgt2AOw1ZrmpR zz>Uk2JagGU&bfwJH^7_-Txm2`ivtn1Y zG)qagywgNHA`is2gS_x0G!OC$l@v_K`XR75JJam`(L3`z&-;9y=b7i7?|UuKAHLJj z%n$?u?ez8W3ev_rt#y5+r}dJT%K_Q|P6>ja0M+x&m$b=tjHjO`2*jf8*o@ZI<_1`w zvne3ZuBTfD<|S62(?V0+sWZ6X#8@0YIynY}jgGsBv%MIDvpQ;f#P%oqHLJKn5J=b4 z*UK}6fLxgx%9nTD8%D9OeH4d6AH40M;OzxdsNOy+}wcF!~DbXVty9JDaiX7U3mSVTu z#_yRLKK0$8Elt>*PmiFkcGxCfb`#3;>1-w^C1Ajk3+{RQ$7-3_znjsf4q$-~X{x3_ zDQ`chq?KLhmT-f+$dJGh?;y8AlQ!|j7A{Y((c+g|_(gIU24Art92!@i@hj<#R?gPm zaO$e)>D~3Om|yT&0hJ~p^`S+wy*Heq`m4*3Qf0nL8W+PyVBI;(!^h)&EZp0` zs0vJ&lQ>v0$pPqX{Q_@+tSFp<;w?!uaS*H?X4(xIBO$^%b6ay9l#8YXEapnFP#_*n z;Li+B@M^KJ2A~WlprRM^x4Jm=BJEVv%57*vy0$))59VsK-kt>jLdS`(-9;`c-npF9pIB2qeUq-ejjVz+)o$xv%A zS|PBfuan0~?!iD{ZYh`9G(e6G&Di?|y*}fp%j%0U(^cu0Y9O*w^Wr&nYddaL+Q!(J zl>7*rlh+~kq`lXZi=?LMov~7Z`0)>jskb=3FeM;dQ(}H7L5Fn3QF_|0Sjb~XM3RV{ zIoHXjr(+R}xxV_gezb)u(1@kycHVm(_?Slh#es=G&MOw(d1VQ39qz5K)E33lR%aH~ z{Mq9i?|O>SBqfAF9=ry@(lR5)>1;7R7V7xuL&f@vlhFWEBn^GKCV@7AH{_Nf$GC`6 z$$DGAHK}w|!5x40u(%mKoHErj!fan2UZUHis_-y+FWOQH56w`7@aH2P)2qeId-er2 z8?*F`4rr(%^s@s0zo=12B=X>L!}P);bx*}MZSly^!wqRgN0A+ja@3|lv}aituVClA zk|!0|xN=<*?;ETp48MfObA zqH32MtgVa&iNotCGb{n|TCZG8qhtj^2)8!*t3P*hog1#;{Sv#VBB&*z=Ok|QWFOQ6 z&^DPYL^QQmVkp=3eNqo|nZm8@fRPmk91}d%Bb7L2n8#2lSs^tLs~)i*_U+Z@BKbSG z1iB8gUOcVSi5%f28zE(DJ5U{+Y)dN?Q~Qd)zKP7X2