From b0e4719bce9079d1c3ef8e2fad2f50f19f0a5ccf Mon Sep 17 00:00:00 2001 From: Adrien MALINGREY Date: Fri, 4 Sep 2020 19:42:37 +0200 Subject: [PATCH] =?UTF-8?q?Transf=C3=A9rer=20les=20fichiers=20vers=20''?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- favicon.png | Bin 0 -> 370 bytes fromage.png | Bin 0 -> 444 bytes index.html | 29 +++++++ labyrinthe.js | 209 ++++++++++++++++++++++++++++++++++++++++++++++++++ mur.png | Bin 0 -> 581 bytes 5 files changed, 238 insertions(+) create mode 100644 favicon.png create mode 100644 fromage.png create mode 100644 index.html create mode 100644 labyrinthe.js create mode 100644 mur.png diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..53ec2b16b379c9e3eac64e50788d19e91691368f GIT binary patch literal 370 zcmV-&0ge8NP)pF8FWQhbW?9;ba!ELWdLwtX>N2bZe?^JG%heMGBNQWX_Wu~0RKru zK~z|U?USJnf>0EOe>b0iW??gt^errq2{udyEjEG=V54Z3MzFE*78d6SR18)t8{0J< z#=Ts(i#m(v+ip4g&(DAExd05qFbu=|JA=LrVPFfjwu{T&K1Rkm&FvhCx_UI{c8&z~ zhJh{Un0{AEt~SzSR9~$(7)=&hqwR7E(g46=A9Z|s)1Ih3HBGM8)EfdI-O$^p0mxJh zaXHPTzyPFhI`5%rh&=USjor=)^3+F?6_|StlB{S}004FM007*tN9^KK>ubE5FtEkk zb6|~K0P>D?kd}0>-a)SbWSnG$){sIbS<%$K_KRLlvu4L8+K(R|!!W<%2^Rp}4`X~5 Qu>b%707*qoM6N<$f;h02#{d8T literal 0 HcmV?d00001 diff --git a/fromage.png b/fromage.png new file mode 100644 index 0000000000000000000000000000000000000000..119cd27686ac2b8465a5d8bfb557986262db437e GIT binary patch literal 444 zcmV;t0YmZ2bj}4lWALN{XNe3Od!qp>z=qU2G9l=$7kn(hn=5i)YGt?|IJ08~E?=incjQ z+h$m|euDtqax7GAQ+{|;-FNjXl#0a=FmSvF-3IC#q`_SR#$)k$sA`~r^&=Dla}H#I z2ng!ZXu)Ac)uCb=%PZQ(T?Qs%DC>ZUAgy661Fd_|8fHpxaUwOTLBrOTBy0O{T89Nk z#$U?(J72ufa>uP?qZwE&$#>9zvj!+FYx{Lj(GaWwm6NH5C-4$T@$^LB>10Qy z1`TNtimU*1PE$_Mkk~x$-I_1tRNw89j;O5~)%Awh m7(rs|J1`ikxAq@_!T1EpGl=(jd^EuT0000 + + + + Labyrinthe + + + + + + + + + + + + + + +
+ + + + + +
+ Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer. + + diff --git a/labyrinthe.js b/labyrinthe.js new file mode 100644 index 0000000..1840de4 --- /dev/null +++ b/labyrinthe.js @@ -0,0 +1,209 @@ +// Customize Array to be use as coordinates +Object.defineProperty(Array.prototype, "x", { + get: function () { return this[0] }, + set: function (x) { this[0] = x} +}) +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]) } + +const DIRECTION = { + "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] +} + +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}, +} + +const TYPE = { + "MUR": 1, + "SOL": 2, + "PAS": 3 +} + +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); +} + +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)) + } + 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) + if (this.type(pas2) == TYPE.MUR) { + this.creuse(pas1) + this.creuse(pas2) + this.construit(pas2) + } + } + } + + creuse(position) { + 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] + } else { + return -1 + } + } + + dessiner() { + this.forEach((ligne, y) => { + ligne.forEach((type, x) => { + 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 + } + + bouger(touche, labyrinthe) { + if (touche in ACTIONS) { + 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 + } else { + this.mouvement = MOUVEMENT.ARRET + this.animation = 0 + return false + } + } else { + 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 + ); + } +} + +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 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) { + if (event.key in ACTIONS) { + touchesPressees.add(event.key) + return false + } else { + return true + } + } + + window.onkeyup = function(event) { + if (event.key in ACTIONS) { + touchesPressees.delete(event.key) + return false + } else { + return true + } + } + + var timerID + timerID = setInterval(function() { + if (touchesPressees.size > 0) souris.animationSprite = (souris.animationSprite + 1) % 3 + if (souris.mouvement != MOUVEMENT.ARRET) { + 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) + } + } + } + if (souris.animation == 0) { + souris.mouvement = MOUVEMENT.ARRET + for (touche of Array.from(touchesPressees).reverse()) { + if (souris.bouger(touche, labyrinthe)) break + } + } + + labyrinthe.dessiner() + dessinerTuile(ctx, fromage, labyrinthe.positionFinale.x, labyrinthe.positionFinale.y) + souris.dessiner() + }, 40); +} diff --git a/mur.png b/mur.png new file mode 100644 index 0000000000000000000000000000000000000000..d3c9a62284623cfd38f6d7141afaefde2bc865ea GIT binary patch literal 581 zcmV-L0=oT)P)Z`)2bJ12ua)%J7VJK3)O}oQV0Rt_2qV_KHtnuQCyZG0T8CnJGIde4 zR8B`F!s6m0Hzy`i9Ke_LU)a0uA1bB2bW~?5R6qMX9r{Lp%)}9M7cOIs2x3h7YcYtB zaQ)&QU_Wg5Ed32p1;>FX0udua=SplHR2;#HwtWb>!va2MS=U%bSH|rYFxL zZVpv2((_RG(S+Lf6((<7O#lUZt5Z#KE)MfPo99w%l~R=Ht1>1xe4S6N8n^xBqo|CN z^lKakP>f?Zz>dVyn}Ogs=5R^mURe|%pD}EK!se6&3`^4*(2^h*4o`n TdN2CT00000NkvXXu0mjf6d?kp literal 0 HcmV?d00001