merged script.js and canvas.js and separated them into modules
This commit is contained in:
nbillard
parent
80b867a823
commit
d4b118992d
3 changed files with 29 additions and 319 deletions
35
canvas.js
35
canvas.js
|
|
@ -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
|
||||
function DrawGameCub(x, y){
|
||||
ctx = canvas.getContext('2d');
|
||||
function DrawGameCub(ctx, x, y){
|
||||
const a = 10;
|
||||
ctx.fillStyle='#DEB887';
|
||||
ctx.fillRect(x, y, a, a);
|
||||
ctx.save();
|
||||
}
|
||||
//fonction dessiner cube de bois avec img
|
||||
function imgDrawGameCub(x,y){
|
||||
ctx = canvas.getContext('2d');
|
||||
function imgDrawGameCub(ctx, x,y){
|
||||
const dim = 100;
|
||||
let cubebois = new Image();
|
||||
cubebois.src = //lien de l'image;
|
||||
|
|
@ -20,8 +19,7 @@ function imgDrawGameCub(x,y){
|
|||
}
|
||||
|
||||
//fonction pour dessiner des cercles du jeu
|
||||
function Drawcircle(x, y){
|
||||
ctx = canvas.getContext('2d');
|
||||
function Drawcircle(ctx, x, y){
|
||||
//let context=canvas.getContext("2d");
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth="2"
|
||||
|
|
@ -31,8 +29,7 @@ function Drawcircle(x, y){
|
|||
ctx.save();
|
||||
}
|
||||
//function pour dessiner des cercles à partir de l'image
|
||||
function imgDrawcircle(x,y){
|
||||
ctx = canvas.getContext('2d');
|
||||
function imgDrawcircle(ctx, x,y){
|
||||
const dim = 100;
|
||||
let circle = new Image();
|
||||
circle.src = //lien de l'image;
|
||||
|
|
@ -42,8 +39,7 @@ function imgDrawcircle(x,y){
|
|||
}
|
||||
|
||||
//fonction pour dessiner un cube du labyrinthe
|
||||
function DrawLabCub(){
|
||||
ctx = canvas.getContext('2d');
|
||||
function DrawLabCub(ctx){
|
||||
const a = 10;
|
||||
ctx.fillStyle="black";
|
||||
ctx.fillRect(x, y, a, a);
|
||||
|
|
@ -51,8 +47,7 @@ function DrawLabCub(){
|
|||
}
|
||||
|
||||
//inserer l image de Mario
|
||||
function Mario(x, y){
|
||||
ctx = canvas.getContext('2d');
|
||||
function Mario(ctx, x, y){
|
||||
const dim = 100;
|
||||
//let image=document.getElementByid=("id image en html");
|
||||
let Marioimg = new Image();
|
||||
|
|
@ -65,21 +60,19 @@ function Mario(x, y){
|
|||
}
|
||||
|
||||
//function généric qui dessine une image
|
||||
function DrawImg(That){
|
||||
ctx = canvas.getContext('2d');
|
||||
function DrawImg(ctx, tile){
|
||||
const dim = 20;
|
||||
let img= new Image();
|
||||
img.src = //lien de l'image;
|
||||
img.src = tile.image;//lien de l'image;
|
||||
img.addEventListener('load',function(){
|
||||
ctx.drawImage(img,x,y,dim,dim);
|
||||
ctx.drawImage(img,tile.x,tile.y,dim,dim);
|
||||
},false);
|
||||
ctx.save();
|
||||
}
|
||||
|
||||
//function qui met à jour le canvas
|
||||
function MajJeu(Mat){
|
||||
function MajJeu(ctx, Mat){
|
||||
while(true){
|
||||
ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0,0, canvas.width, canvas.height);
|
||||
let lignes= 0; // à définir plus tard
|
||||
let colones=0;// à définir plus tard
|
||||
|
|
@ -95,5 +88,5 @@ function MajJeu(Mat){
|
|||
}
|
||||
|
||||
|
||||
DrawGameCub(100,100);
|
||||
Mario(200, 100);
|
||||
DrawGameCub(ctx, 100,100);
|
||||
Mario(ctx, 200, 100);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
<html id="html" lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="description" content="">
|
||||
<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 -->
|
||||
|
||||
</head>
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
Coucou
|
||||
<canvas id="canvas" width="400" height="800"></canvas>
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
<script src="canvas.js"></script>
|
||||
<!-- <script type="module" src="./modules/ressources.mjs"></script> -->
|
||||
<script type="module" src="./script.js"></script>
|
||||
<!-- <script type="text/javascript" src="./canvas.js"></script> -->
|
||||
</html>
|
||||
|
|
|
|||
298
script.js
298
script.js
|
|
@ -1,293 +1,9 @@
|
|||
// Define what kind of tiles exist
|
||||
class Square {
|
||||
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');
|
||||
import { generatePlayground } from './modules/playground.mjs'
|
||||
import { level1Blueprint } from './modules/levels.mjs'
|
||||
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
let canvas = document.getElementById('canvas');
|
||||
let ctx = canvas.getContext('2d');
|
||||
window.ctx = ctx
|
||||
|
||||
class CanMove {
|
||||
static Yes = new CanMove('Yes');
|
||||
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);
|
||||
let playground = generatePlayground(level1Blueprint, canvas.width, canvas.height);
|
||||
window.playground = playground;
|
||||
|
|
|
|||
Loading…
Reference in a new issue