nbillard/sokoban
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

merged script.js and canvas.js and separated them into modules

Browse source
This commit is contained in:
nbillard 2022-12-01 06:23:57 +01:00
parent 80b867a823
commit d4b118992d
3 changed files with 29 additions and 319 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
canvas.js
View file

@ -1,16 +1,15 @@
canvas = document.getElementById('canvas'); let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
//fonction pour dessiner un cube de bois du jeu //fonction pour dessiner un cube de bois du jeu
function DrawGameCub(x, y){ function DrawGameCub(ctx, x, y){
ctx = canvas.getContext('2d');
const a = 10; const a = 10;
ctx.fillStyle='#DEB887'; ctx.fillStyle='#DEB887';
ctx.fillRect(x, y, a, a); ctx.fillRect(x, y, a, a);
ctx.save(); ctx.save();
} }
//fonction dessiner cube de bois avec img //fonction dessiner cube de bois avec img
function imgDrawGameCub(x,y){ function imgDrawGameCub(ctx, x,y){
ctx = canvas.getContext('2d');
const dim = 100; const dim = 100;
let cubebois = new Image(); let cubebois = new Image();
cubebois.src = //lien de l'image; cubebois.src = //lien de l'image;
@ -20,8 +19,7 @@ function imgDrawGameCub(x,y){
} }
//fonction pour dessiner des cercles du jeu //fonction pour dessiner des cercles du jeu
function Drawcircle(x, y){ function Drawcircle(ctx, x, y){
ctx = canvas.getContext('2d');
//let context=canvas.getContext("2d"); //let context=canvas.getContext("2d");
ctx.beginPath(); ctx.beginPath();
ctx.lineWidth="2" ctx.lineWidth="2"
@ -31,8 +29,7 @@ function Drawcircle(x, y){
ctx.save(); ctx.save();
} }
//function pour dessiner des cercles à partir de l'image //function pour dessiner des cercles à partir de l'image
function imgDrawcircle(x,y){ function imgDrawcircle(ctx, x,y){
ctx = canvas.getContext('2d');
const dim = 100; const dim = 100;
let circle = new Image(); let circle = new Image();
circle.src = //lien de l'image; circle.src = //lien de l'image;
@ -42,8 +39,7 @@ function imgDrawcircle(x,y){
} }
//fonction pour dessiner un cube du labyrinthe //fonction pour dessiner un cube du labyrinthe
function DrawLabCub(){ function DrawLabCub(ctx){
ctx = canvas.getContext('2d');
const a = 10; const a = 10;
ctx.fillStyle="black"; ctx.fillStyle="black";
ctx.fillRect(x, y, a, a); ctx.fillRect(x, y, a, a);
@ -51,8 +47,7 @@ function DrawLabCub(){
} }
//inserer l image de Mario //inserer l image de Mario
function Mario(x, y){ function Mario(ctx, x, y){
ctx = canvas.getContext('2d');
const dim = 100; const dim = 100;
//let image=document.getElementByid=("id image en html"); //let image=document.getElementByid=("id image en html");
let Marioimg = new Image(); let Marioimg = new Image();
@ -65,21 +60,19 @@ function Mario(x, y){
} }
//function généric qui dessine une image //function généric qui dessine une image
function DrawImg(That){ function DrawImg(ctx, tile){
ctx = canvas.getContext('2d');
const dim = 20; const dim = 20;
let img= new Image(); let img= new Image();
img.src = //lien de l'image; img.src = tile.image;//lien de l'image;
img.addEventListener('load',function(){ img.addEventListener('load',function(){
ctx.drawImage(img,x,y,dim,dim); ctx.drawImage(img,tile.x,tile.y,dim,dim);
},false); },false);
ctx.save(); ctx.save();
} }
//function qui met à jour le canvas //function qui met à jour le canvas
function MajJeu(Mat){ function MajJeu(ctx, Mat){
while(true){ while(true){
ctx = canvas.getContext('2d');
ctx.clearRect(0,0, canvas.width, canvas.height); ctx.clearRect(0,0, canvas.width, canvas.height);
let lignes= 0; // à définir plus tard let lignes= 0; // à définir plus tard
let colones=0;// à définir plus tard let colones=0;// à définir plus tard
@ -95,5 +88,5 @@ function MajJeu(Mat){
} }
DrawGameCub(100,100); DrawGameCub(ctx, 100,100);
Mario(200, 100); Mario(ctx, 200, 100);

9
index.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html class="no-js" lang=""> <html id="html" lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
@ -7,7 +7,7 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" href="./mario.png">
<!-- Place favicon.ico in the root directory --> <!-- Place favicon.ico in the root directory -->
</head> </head>
@ -22,6 +22,7 @@
Coucou Coucou
<canvas id="canvas" width="400" height="800"></canvas> <canvas id="canvas" width="400" height="800"></canvas>
</body> </body>
<script src="script.js"></script> <!-- <script type="module" src="./modules/ressources.mjs"></script> -->
<script src="canvas.js"></script> <script type="module" src="./script.js"></script>
<!-- <script type="text/javascript" src="./canvas.js"></script> -->
</html> </html>

298
script.js
View file

@ -1,293 +1,9 @@
// Define what kind of tiles exist import { generatePlayground } from './modules/playground.mjs'
class Square { import { level1Blueprint } from './modules/levels.mjs'
static Wall = new Square('Wall');
static Floor = new Square('Floor');
static Player = new Square('Player');
static Box = new Square('Box');
static Destination = new Square('Destination');
static PlayerOnDestination = new Square('PlayerOnDestination');
static BoxOnDestination = new Square('BoxOnDestination');
constructor(name) { let canvas = document.getElementById('canvas');
this.name = name; let ctx = canvas.getContext('2d');
} window.ctx = ctx
}
class CanMove { let playground = generatePlayground(level1Blueprint, canvas.width, canvas.height);
static Yes = new CanMove('Yes'); window.playground = playground;
static No = new CanMove('No');
static Maybe = new CanMove('Maybe');
constructor(name) {
this.name = name;
}
}
const movePosition = (position, direction) => {
}
const images = {
wall: 'wall.png',
floor: 'floor.png',
player: 'player.png',
box: 'box.png',
destination: 'destination.png',
empty: 'empty.png',
};
// Blueprint for the first level
const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
[ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]];
// define where the player can move
class MoveDirection {
static Right = new MoveDirection('Right');
static Left = new MoveDirection('Left');
static Up = new MoveDirection('Up');
static Down = new MoveDirection('Down');
constructor(name) {
this.name = name;
}
}
class Position {
constructor(x, y) {
this.x = x;
this.y = y;
}
move(direction) {
switch (direction) {
case MoveDirection.Right:
this.x++;
break;
case MoveDirection.Left:
this.x--;
break;
case MoveDirection.Up:
this.y--;
break;
case MoveDirection.Down:
this.y++;
break;
}
}
moveBackwards(direction) {
switch (direction) {
case MoveDirection.Right:
this.x--;
break;
case MoveDirection.Left:
this.x++;
break;
case MoveDirection.Up:
this.y++;
break;
case MoveDirection.Down:
this.y--;
break;
}
}
isWithin(pos) {
return this.x < pos.x && this.y < pos.y;
}
isEqual(pos) {
return this.x === pos.x && this.y === pos.y;
}
}
const copyPosition = (pos) => {
return new Position(pos.x, pos.y);
}
class Tile {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.canMove = CanMove.No;
}
isMovable() {
return this.canMove;
}
}
class ForegroundTile extends Tile{
constructor(square, x, y, width, height) {
super(x, y, width, height)
switch(square) {
case Square.Wall:
this.image = images.empty;
this.canMove = CanMove.Yes;
break;
case Square.Floor:
this.image = images.empty;
this.canMove = CanMove.Yes;
break;
case Square.Player:
this.image = images.player;
this.canMove = CanMove.Maybe;
break;
case Square.Box:
this.image = images.box;
this.canMove = CanMove.Maybe;
break;
case Square.Destination:
this.image = images.empty;
this.canMove = CanMove.Yes;
break;
case Square.PlayerOnDestination:
this.image = images.player;
this.canMove = CanMove.Maybe;
break;
case Square.BoxOnDestination:
this.image = images.box;
this.canMove = CanMove.Maybe;
break;
}
}
}
class BackgroundTile extends Tile{
constructor(square, x, y, width, height) {
super(x, y, width, height)
switch(square) {
case Square.Wall:
this.image = images.wall;
break;
case Square.Floor:
this.image = images.floor;
break;
case Square.Player:
this.image = images.floor;
break;
case Square.Box:
this.image = images.floor;
break;
case Square.Destination:
this.image = images.destination;
break;
case Square.PlayerOnDestination:
this.image = images.destination;
break;
case Square.BoxOnDestination:
this.image = images.destination;
break;
}
if (square === Square.Wall) {
this.canMove = CanMove.No;
} else {
this.canMove = CanMove.Yes;
}
}
}
// generate a level Object from a blueprint
const generatePlayground = (levelBlueprint, canvasWidth, canvasHeight) => {
let playerExists = false;
let background = [];
let foreground = [];
let boxCount = 0;
let destinationCount = 0;
const playgroundWidth = levelBlueprint[0].length;
const playgroundHeight = levelBlueprint.length;
const tileWidth = canvasWidth / playgroundWidth;
const tileHeight = canvasHeight / playgroundHeight;
let playerPos = {
x: NaN,
y: NaN,
};
levelBlueprint.forEach((levelRow, indexRow) => {
background.push([]);
foreground.push([]);
levelRow.forEach((square, indexColumn) => {
switch (square) {
case Square.Player:
case Square.PlayerOnDestination:
if (playerExists) {
alert("Player already exists.");
}
playerExists = true;
playerPos = new Position(indexColumn, indexRow);
break;
case Square.Box:
boxCount++;
break;
case Square.Destination:
destinationCount++;
break;
default:
break;
}
foreground[indexRow].push(new ForegroundTile(square, indexColumn * tileWidth, indexRow * tileHeight, tileWidth, tileHeight));
background[indexRow].push(new BackgroundTile(square, indexColumn * tileWidth, indexRow * tileHeight, tileWidth, tileHeight));
});
});
if (boxCount != destinationCount) {
alert("boxCount != destinationCount")
}
return {
foreground: foreground,
background: background,
width: playgroundWidth,
height: playgroundHeight,
playerPos: playerPos,
canMove(pos) {
const foregroundAnswer = this.foreground[pos.y][pos.x].isMovable();
const backgroundAnswer = this.background[pos.y][pos.x].isMovable();
if (backgroundAnswer == CanMove.No) {
return CanMove.No;
} else {
return foregroundAnswer;
}
},
move(direction) {
let aux = copyPosition(this.playerPos);
let willMove = false;
let finishedChecking = false;
let moveCount = 0;
while (aux.isWithin({x: this.width, y: this.height}) && !finishedChecking) {
console.log("checking at position:");
console.log(aux);
console.log("answer");
console.log(this.canMove(aux));
switch(this.canMove(aux)) {
case CanMove.Yes:
willMove = true;
finishedChecking = true;
break;
case CanMove.No:
willMove = false;
finishedChecking = true;
break;
case CanMove.Maybe:
aux.move(direction);
moveCount++;
break;
}
}
console.log(this.playerPos);
console.log("in playground.move");
if (willMove) {
this.playerPos.move(direction);
let posOfObjectToMove = copyPosition(aux);
for (let i = 0; i < moveCount; i++) {
posOfObjectToMove.moveBackwards(direction);
console.log("I try to move");
[this.foreground[aux.y][aux.x], this.foreground[posOfObjectToMove.y][posOfObjectToMove.x]] =
[this.foreground[posOfObjectToMove.y][posOfObjectToMove.x], this.foreground[aux.y][aux.x]];
aux.moveBackwards(direction);
}
}
}
};
}
let playground = generatePlayground(level1Blueprint, 500, 500);