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

Merge branch 'master' of https://git.etud.insa-toulouse.fr/nbillard/sokoban

Browse source
This commit is contained in:
Axel O 2022-12-05 17:33:20 +01:00
commit 657b327d91
10 changed files with 80 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -1,14 +1,14 @@
# Sokoban # Sokoban
projet Web 3Mic Projet Web 3Mic
pour ouvrir le projet, tapez la commande suivante dans un terminal: Pour ouvrir le projet, tapez la commande suivante dans un terminal:
``` sh ``` sh
npx serve npx serve
``` ```
si cela ne marche pas, essayez Si cela ne marche pas, essayez la commande suivante
``` sh ``` sh
python3 -m http.server python3 -m http.server

14
index.html
View file

@ -7,11 +7,13 @@
<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="icon" href="./mario.png"> <link rel="icon" href="./res/mario.png"/>
<!-- Place favicon.ico in the root directory --> <!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="./style.css"/>
</head> </head>
<body> <body>
<h1>Sokoban</h1>
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -22,6 +24,16 @@
<div id="timer">Time</div> <div id="timer">Time</div>
<button id="Pause" onclick="Pause()">Pause</button> <button id="Pause" onclick="Pause()">Pause</button>
<canvas id="canvas" width="800" height="400"></canvas> <canvas id="canvas" width="800" height="400"></canvas>
<div class="to-center">
<canvas id="canvas" width="800" height="400"></canvas>
<div class="text-bubble">
<div class="dialog">
<div class="left-point">
</div>
<p class="speech">Coucou</p>
</div>
</div>
</div>
</body> </body>
<!-- <script type="module" src="./modules/ressources.mjs"></script> --> <!-- <script type="module" src="./modules/ressources.mjs"></script> -->
<script type="module" src="./script.js"></script> <script type="module" src="./script.js"></script>

9
modules/levels.mjs
View file

@ -4,7 +4,8 @@ import { Square } from '/modules/enums.mjs';
export const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ], export 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.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]]; [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]];
// Blueprint for the second level
export const level2Blueprint = [ export const level2Blueprint = [
[Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor ], [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor ],
[Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall], [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall],
@ -12,8 +13,8 @@ export const level2Blueprint = [
[Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Box, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor, Square.Wall], [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Box, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor, Square.Wall],
[Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Player, Square.Floor, Square.Wall, Square.Wall, Square.Floor, Square.Floor, Square.Wall], [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Player, Square.Floor, Square.Wall, Square.Wall, Square.Floor, Square.Floor, Square.Wall],
[Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Wall, Square.Wall], [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Wall, Square.Wall],
[Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Wall, Square.Wall, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Floor ], [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Wall, Square.Wall, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Wall ],
[Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Floor ], [Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Wall ],
[Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor ], [Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall ],
[Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ], [Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
]; ];

2
modules/ressources.mjs
View file

@ -1,5 +1,5 @@
export const images = { export const images = {
wall: '/res/wall.png', wall: '/res/tree.png',
floor: '/res/floor.png', floor: '/res/floor.png',
player: '/res/player.png', player: '/res/player.png',
box: '/res/box.png', box: '/res/box.png',

6
modules/tiles.mjs
View file

@ -1,12 +1,14 @@
import { images } from '/modules/ressources.mjs'; import { images } from '/modules/ressources.mjs';
import { CanMove, Square } from '/modules/enums.mjs'; import { CanMove, Square } from '/modules/enums.mjs';
class Tile { class Tile {
static increaseInTileWidth = 1.005;
constructor(x, y, width, height) { constructor(x, y, width, height) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.width = width; this.width = width * Tile.increaseInTileWidth;
this.height = height; this.height = height * Tile.increaseInTileWidth;
this.canMove = CanMove.No; this.canMove = CanMove.No;
this.image = new Image(); this.image = new Image();
this.imageReady = false; this.imageReady = false;

BIN
res/destination.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
res/floor.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 760 B

After

Width:  |  Height:  |  Size: 872 B

BIN
res/tree.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

2
script.js
View file

@ -5,7 +5,7 @@ import { MoveDirection } from '/modules/enums.mjs'
let canvas = document.getElementById('canvas'); let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d'); let ctx = canvas.getContext('2d');
window.ctx = ctx window.ctx = ctx
let playground = generatePlayground(level2Blueprint, canvas.width, canvas.height); let playground = generatePlayground(level1Blueprint, canvas.width, canvas.height);
window.addEventListener("keydown", (event) => { window.addEventListener("keydown", (event) => {
if (!event.defaultPrevented) { if (!event.defaultPrevented) {
switch (event.key) { switch (event.key) {

53
style.css Normal file
View file

@ -0,0 +1,53 @@
:root {
--main-background-color: black;
--main-invert-color: white;
--main-highlight-color: cyan;
}
body {
background-color: var(--main-background-color);
display: flex;
}
.dialog {
height: 200px;
width: 400px;
background-color: var(--main-invert-color);
position: relative;
border-radius: 10%;
display: flex;
text-align: center;
}
.left-point {
width: 0;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-top: 5rem solid var(--main-invert-color);
position: absolute;
margin-top: 30%;
margin-left: -10%;
transform: rotate(60deg) ;
z-index: -1;
}
.text-bubble {
/* transform: rotate(90deg); */
position: relative;
margin: auto;
margin-left: 658px;
margin-top: -385px;
z-index: 2;
}
.speech {
z-index: 3;
margin: auto;
position: relative;
text-align: justify;
}
.to-center {
margin: 0 auto;
}