Transférer les fichiers vers ''
This commit is contained in:
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 B |
BIN
fromage.png
Normal file
BIN
fromage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 444 B |
29
index.html
Normal file
29
index.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Labyrinthe</title>
|
||||
<script type="text/javascript" src="labyrinthe.js"></script>
|
||||
<link rel="shortcut icon" type="image/png" href="mur.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<link rel=”image_src” href="thumbnail.png" />
|
||||
<meta property="og:title" content="Labyrinthe" />
|
||||
<meta property="og:type" content="game" />
|
||||
<meta property="og:url" content="https://malingrey.fr/laby" />
|
||||
<meta property="og:image" content="https://malingrey.fr/laby/thumbnail.png" />
|
||||
<meta property="og:image:width" content="250" />
|
||||
<meta property="og:image:height" content="250" />
|
||||
<meta property="og:description" content="Trouveras-tu le fromage ?" />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none;">
|
||||
<img id="mur" src="mur.png">
|
||||
<img id="sol" src="sol.png">
|
||||
<img id="pas" src="pas.png">
|
||||
<img id="fromage" src="fromage.png">
|
||||
<img id="souris" src="souris.png">
|
||||
</div>
|
||||
<canvas id="canvas" width="795" height="585">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>
|
||||
</body>
|
||||
</html>
|
||||
209
labyrinthe.js
Normal file
209
labyrinthe.js
Normal file
@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user