diff --git a/PROPOSAL_20243197.md b/PROPOSAL_20243197.md
index 5fc9ca5..45b3c39 100644
--- a/PROPOSAL_20243197.md
+++ b/PROPOSAL_20243197.md
@@ -39,6 +39,7 @@ User Contol: ASDW
### Properties (Action)
| Objects | Image | Instructions |
| :------ | :---: | :----------- |
+| IS |  | Operator |
| You |  | |
| Move |  | |
| Stop |  | |
diff --git a/README.md b/README.md
index 4a08bb4..94d4ba3 100644
--- a/README.md
+++ b/README.md
@@ -60,3 +60,7 @@ This homework will be evaluated following two criteria:
- Keep a screenshot that proves your completed submission.
- Writing style might be considered in grading
- Other subjective metrics by prof may apply
+
+
+### Reference
+https://youtu.be/M5St-vvohzs
diff --git a/index.html b/index.html
index 458abea..e4a93f4 100644
--- a/index.html
+++ b/index.html
@@ -6,12 +6,19 @@
Document
-
-
+
+
+
+
+
+
-
+
+
+
diff --git a/main.js b/main.js
index 2730399..d6888ac 100644
--- a/main.js
+++ b/main.js
@@ -2,9 +2,29 @@
const tileSize = 16;
// Sprites
-let baba;
-let tile, wall, rock, water, lava, flag;
-let win, you, move, stop;
+let baba_img;
+let tile_img, wall_img, rock_img, water_img, lava_img, flag_img;
+let win_img, you_img, move_img, stopText_img;
+let is_img;
+
+// Map
+let tileMap = [
+ ' ',
+ 'w wwwwwwwwwwwwww',
+ 'w w ttw',
+ 'w r ll ttw',
+ 'w ll ttw',
+ 'w aa w ttw',
+ 'w aa w ttw',
+ 'wwwwwwwwwwwwwwww',
+];
+
+let rules = [
+ ["rock", "is", "push"],
+ ["wall", "is", "stop"],
+ ["water", "is", "sink"],
+ ["lava", "is", "hot"]
+]
// CaracterMove
let babaX = 0;
@@ -15,26 +35,81 @@ let bgm, winSound;
let isPlaying = false;
function preload(){
+ // BGM
bgm = loadSound("/assets/Baba Is You OST - Baba Is You Theme.mp3");
- baba = loadImage("/assets/Baba.webp");
- tile = loadImage("/assets/Tile.webp");
- wall = loadImage("/assets/Wall.webp");
- rock = loadImage("/assets/Rock.webp");
- water = loadImage("/assets/Water.webp");
- lava = loadImage("/assets/Lava.webp");
- flag = loadImage("/assets/Flag.webp");
+
+ // Spritesd
+ baba_img = loadImage("/assets/Baba.webp");
+ tile_img = loadImage("/assets/Tile.webp");
+ wall_img = loadImage("/assets/Wall.webp");
+ rock_img = loadImage("/assets/Rock.webp");
+ water_img = loadImage("/assets/Water.webp");
+ lava_img = loadImage("/assets/Lava.webp");
+ flag_img = loadImage("/assets/Flag.webp");
+ is_img = loadImage("/assets/Text_IS_0.webp");
+ win_img = loadImage("/assets/Win.webp");
+ you_img = loadImage("/assets/You.webp");
+ move_img = loadImage("/assets/Move.webp");
+ stopText_img = loadImage("/assets/Stop.webp");
}
function setup(){
createCanvas(800, 400);
+ new World();
+
background(51);
+ textAlign(CENTER);
+
+ // Floor - Tile
+ let tile = new Group();
+ tile.img = tile_img;
+ tile.collider = 'none';
+ tile.tile = "t";
+ tile.scale = tileSize/tile_img.width;
+
+ // WALL
+ let wall = new Group();
+ wall.img = wall_img;
+ wall.collider = 'static';
+ wall.tile = "w";
+ wall.scale = tileSize/wall_img.width;
+
+ // ROCK
+ let rock = new Group();
+ rock.img = rock_img;
+ rock.collider = 'dynamic';
+ rock.tile = "r";
+ rock.scale = tileSize/rock_img.width;
+
+ // Water
+ let water = new Group();
+ water.img = water_img;
+ water.collider = 'none';
+ water.tile = 'a';
+ water.scale = tileSize/water_img.width;
+
+ // Lava
+ let lava = new Group();
+ lava.img = lava_img;
+ lava.collider = 'none';
+ lava.tile = 'l';
+ lava.scale = tileSize/lava_img.width;
+
+ new Tiles(tileMap, tileSize/2, tileSize/2, tileSize, tileSize);
+
+ //BABA
+ baba = new Sprite(tileSize/2, tileSize/2, tileSize, tileSize);
+ baba.img = baba_img;
+ baba.scale = tileSize / baba_img.width;
+ baba.label = 'you';
}
function draw(){
// backgroundMusic();
background(51);
- fill(255, 204, 0);
- image(baba, babaX, babaY, tileSize, tileSize);
+ drawSprites();
+ // fill(255, 204, 0);
+ // image(baba_img, babaX, babaY, tileSize, tileSize);
// squasre(babaX, babaY, tileSize);
}
@@ -49,7 +124,7 @@ function mousePressed(){
bgm.pause();
isPlaying = false;
} else {
- bgm.play();
+ bgm.loop();
isPlaying = true;
}
}
@@ -69,28 +144,46 @@ function keyPressed(){
const maxX = width - tileSize;
const maxY = height - tileSize;
- if(key=='a'||key=='A') {
- if (babaX - tileSize >= 0) {
- babaX -= tileSize;
+ if((key=='a'||key=='A') && isOpen(baba.x - tileSize, baba.y)) {
+ if (baba.x - tileSize >= 0) {
+ baba.x -= tileSize;
console.log('Left');
}
}
- if(key=='s'||key=='S') {
- if (babaY + tileSize <= maxY) {
- babaY += tileSize;
+ if((key=='s'||key=='S') && isOpen(baba.x, baba.y + tileSize)) {
+ if (baba.y + tileSize <= maxY) {
+ baba.y += tileSize;
console.log('Down');
}
}
- if(key=='d'||key=='D') {
- if (babaX + tileSize <= maxX) {
- babaX += tileSize;
+ if((key=='d'||key=='D') && isOpen(baba.x + tileSize, baba.y)) {
+ if (baba.x + tileSize <= maxX) {
+ baba.x += tileSize;
console.log('Right');
}
}
- if(key=='w'||key=='W') {
- if(babaY - tileSize >= 0){
- babaY -= tileSize;
+ if((key=='w'||key=='W') && isOpen(baba.x, baba.y - tileSize)) {
+ if(baba.y - tileSize >= 0){
+ baba.y -= tileSize;
console.log('Up');
}
}
+}
+
+// move only to the opened place
+function isOpen(x,y){
+ let i = floor(x / tileSize);
+ let j = floor(y / tileSize);
+
+ if (j < 0 || j >= tileMap.length || i < 0 || i >= tileMap[0].length) {
+ return false;
+ }
+
+ let tile = tileMap[j][i];
+ if (tile == ' '){
+ return true;
+ } else {
+ console.log('blocked');
+ return false;
+ }
}
\ No newline at end of file
diff --git a/style.css b/style.css
index af3dac3..9373079 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,10 @@
body{
background-color: aquamarine;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+canvas {
+ display: block;
}
\ No newline at end of file