maybe done for now

main.js

@@ -12,9 +12,9 @@ let tileMap = [
     '                ',
     'wwwwwwwwwwwwwwww',
     'w,,,,,,,,,,,,,,w',
-    'w,$im,,,,,(ih,,w',
+    'w,,,,,,,,,(ih,,w',
-    'w,,,,,,,,,,,,,,w',
+    'w,$im,,,,,,,,,,w',
-    'w,,,,,,,,,)is,,w',
+    'w,,,,,,,,,)ik,,w',
     'w,,,,r,,,,,,,,,w',
     'w, ,,w,,,,,,,,,w',
     'w,,,,r,,,ll,,r,w',
@@ -27,12 +27,14 @@ let tileMap = [
     'wwwwwwwwwwwwwwww',
 ];
 
-let rules = [
+// let rules = [
-    ["rock", "is", "push"],
+//     ["rock", "is", "push"],
-    ["wall", "is", "stop"],
+//     ["wall", "is", "stop"],
-    ["water", "is", "sink"],
+//     ["water", "is", "sink"],
-    ["lava", "is", "hot"]
+//     ["lava", "is", "hot"]
-]
+// ]
+
+let rules = [];
 
 // CaracterMove
 let babaX = 0;
@@ -77,18 +79,37 @@ function preload(){
 }
 
 function setup(){
-    createCanvas(800, 400);
+    createCanvas(400, 400);
-    new World();
+    // new World();
 
     background(51);
     textAlign(CENTER);
 
+    let startButton = createButton("▶ PLAY");
+    startButton.position(width / 2 - 30, height / 2 - 20);
+    startButton.mousePressed(() => {
+        isPlaying = true;
+        bgm.loop();
+        startButton.remove();
+        setGame();
+    });
+
+    
+}
+
+function setGame(){
+    rules = [];
+
+    allSprites.removeAll();
+
     // Floor - Tile
     let tile = new Group();
     tile.img = tile_img;
     tile.collider = 'none';
     tile.tile = ",";
     tile.scale = tileSize/tile_img.width;
+    tile.layer = 0;
+    tile.label = 'tile';
 
     // Flag
     let flag = new Group();
@@ -96,6 +117,8 @@ function setup(){
     flag.collider = 'none';
     flag.tile = "f";
     flag.scale = tileSize/flag_img.width;
+    flag.layer = 1;
+    flag.label = 'flag';
 
 
     // WALL
@@ -104,35 +127,45 @@ function setup(){
     wall.collider = 'static';
     wall.tile = "w";
     wall.scale = tileSize/wall_img.width;
+    wall.layer = 1;
+    wall.label = 'wall';
 
     // ROCK
     let rock = new Group();
     rock.img = rock_img;
     rock.collider = 'dynamic';
     rock.tile = "r";
+    rock.label = 'rock';
     rock.scale = tileSize/rock_img.width;
+    rock.layer = 2;
 
     // Water
     let water = new Group();
     water.img = water_img;
     water.collider = 'none';
     water.tile = 'a';
+    water.label = 'water';
     water.scale = tileSize/water_img.width;
+    water.layer = 1;
 
     // Lava
     let lava = new Group();
     lava.img = lava_img;
     lava.collider = 'none';
     lava.tile = 'l';
+    lava.label = 'lava';
     lava.scale = tileSize/lava_img.width;
+    lava.layer = 1;
 
     // TEXTS
     // is
     let is = new Group();
     is.img = is_img;
-    is.collider = 'dynamic';
+    is.collider = 'static';
     is.tile = 'i';
     is.scale = tileSize/is_img.width;
+    is.label = 'is';
+
 
     // flag_text
     let flag_text = new Group();
@@ -140,6 +173,8 @@ function setup(){
     flag_text.collider = 'dynamic';
     flag_text.tile = '^';
     flag_text.scale = tileSize/flag_text_img.width;
+    flag_text.layer = 2;
+    flag_text.label = 'flag';
 
     // baba_text
     let baba_text = new Group();
@@ -147,6 +182,8 @@ function setup(){
     baba_text.collider = 'dynamic';
     baba_text.tile = '*';
     baba_text.scale = tileSize/baba_text_img.width;
+    baba_text.layer = 2;
+    baba_text.label = 'baba';
 
     // rock_text
     let rock_text = new Group();
@@ -154,6 +191,8 @@ function setup(){
     rock_text.collider = 'dynamic';
     rock_text.tile = '$';
     rock_text.scale = tileSize/rock_text_img.width;
+    rock_text.layer = 2;
+    rock_text.label = 'rock';
 
     // lava_text
     let lava_text = new Group();
@@ -161,6 +200,8 @@ function setup(){
     lava_text.collider = 'dynamic';
     lava_text.tile = '(';
     lava_text.scale = tileSize/lava_text_img.width;
+    lava_text.layer = 2;
+    lava_text.label = 'lava';
 
     // water_text
     let water_text = new Group();
@@ -168,6 +209,8 @@ function setup(){
     water_text.collider = 'dynamic';
     water_text.tile = ')';
     water_text.scale = tileSize/water_text_img.width;
+    water_text.layer = 2;
+    water_text.label = 'water';
 
     // wall_text
     let wall_text = new Group();
@@ -175,6 +218,8 @@ function setup(){
     wall_text.collider = 'dynamic';
     wall_text.tile = '%';
     wall_text.scale = tileSize/wall_text_img.width;
+    wall_text.layer = 2;
+    wall_text.label = 'wall';
 
     // you
     let you = new Group();
@@ -182,6 +227,8 @@ function setup(){
     you.collider = 'dynamic';
     you.tile = '@';
     you.scale = tileSize/you_img.width;
+    you.layer = 2;
+    you.label = 'you_text';
 
     // win
     let win_text = new Group();
@@ -189,6 +236,8 @@ function setup(){
     win_text.collider = 'dynamic';
     win_text.tile = '#';
     win_text.scale = tileSize/win_img.width;
+    win_text.layer = 2;
+    win_text.label = 'win';
 
     // stop
     let stop = new Group();
@@ -196,6 +245,8 @@ function setup(){
     stop.collider = 'dynamic';
     stop.tile = 's';
     stop.scale = tileSize/stop_img.width;
+    stop.layer = 2;
+    stop.label = 'stop';
 
 
     // move
@@ -204,6 +255,8 @@ function setup(){
     move.collider = 'dynamic';
     move.tile = 'm';
     move.scale = tileSize/move_img.width;
+    move.layer = 2;
+    move.label = 'move';
 
     // hot
     let hot = new Group();
@@ -211,20 +264,17 @@ function setup(){
     hot.collider = 'dynamic';
     hot.tile = 'h';
     hot.scale = tileSize/hot_img.width;
+    hot.layer = 2;
+    hot.label = 'hot';
 
     // sink
     let sink = new Group();
     sink.img = sink_img;
     sink.collider = 'dynamic';
-    sink.tile = 's';
+    sink.tile = 'k';
     sink.scale = tileSize/sink_img.width;
-
+    sink.layer = 2;
-    // // baba
+    sink.label = 'sink';
-    // let baba = new Group();
-    // baba.img = baba_img;
-    // baba.collider = 'dyinamic';
-    // baba.tile = 'b';
-    // baba.scale = tileSize/baba_img.width;
 
     new Tiles(tileMap, tileSize/2, tileSize/2, tileSize, tileSize);
 
@@ -232,20 +282,31 @@ function setup(){
     respawn();
 }
 
+function drawMessageBox(msg){
+    const boxWidth = 300;
+    const boxHeight = 100;
+    const x = width / 2 - boxWidth / 2;
+    const y = height / 2 - boxHeight / 2;
+
+    fill(0, 0, 0, 200);
+    noStroke();
+    rect(x, y, boxWidth, boxHeight, 20);
+
+    fill(255);
+    textSize(20);
+    textAlign(CENTER, CENTER);
+    textLeading(26);
+    text(msg, width / 2, height / 2);
+}
+
 function draw(){
     background(10);
     drawSprites();
 
     if (isGameOver) {
-        fill(255);
+        drawMessageBox("Game Over! Press R to Restart");
-        textSize(32);
+    } else if (isWin) {
-        text("Game Over! Press R to Restart", width / 4, height / 4);
+        drawMessageBox("Congratulations! Press R to Restart");
-    }
-
-    if(isWin){
-        fill(255);
-        textSize(32);
-        text("Congratulations! Press R to Restart", width / 4, height / 4);
     }
 }
 
@@ -255,20 +316,15 @@ function backgroundMusic(){
     
 }
 
-function mousePressed(){
-    if (isPlaying) {
-        bgm.pause();
-        isPlaying = false;
-    } else {
-        bgm.loop();
-        isPlaying = true;
-    }
-}
 
 // Move ASDW
 function keyPressed(){
     console.log(`key ${key} is pressed.`)
     
+    if(key=='r'||key=='R'){
+        resetGame();
+    }
+
     if(isGameOver || isWin){
         if(key=='r'||key=='R'){
             resetGame();
@@ -276,37 +332,92 @@ function keyPressed(){
         return;
     }
 
-    const maxX = width - tileSize;
+    let dx = 0;
-    const maxY = height - tileSize;
+    let dy = 0;
 
-    if((key=='a'||key=='A') && isOpen(baba.x - tileSize, baba.y)) {
+    if (key === 'a' || key === 'A') dx = -tileSize;
-        if (baba.x - tileSize >= 0) {
+    if (key === 'd' || key === 'D') dx = tileSize;
-            baba.x -= tileSize;
+    if (key === 'w' || key === 'W') dy = -tileSize;
-            console.log('Left');
+    if (key === 's' || key === 'S') dy = tileSize;
-        }
+
+    if (dx !== 0 || dy !== 0) {
+        allSprites
+        .filter(s => s.label === 'you')
+        .forEach(sprite => isMove(sprite, dx, dy));
     }
-    if((key=='s'||key=='S') && isOpen(baba.x, baba.y + tileSize)) {
+
-        if (baba.y + tileSize <= maxY) {
+}
-            baba.y += tileSize;
+
-            console.log('Down');
+
+function getSpriteAt(i, j) {
+    const x = i * tileSize + tileSize / 2;
+    const y = j * tileSize + tileSize / 2;
+    return allSprites.find(s => dist(s.x, s.y, x, y) < tileSize / 2);
+}
+
+function ruleMaker(){
+    rules = [];
+
+    allSprites.forEach(s => {
+        if(s.tile == 'i'){
+            const i = floor(s.x / tileSize);
+            const j = floor(s.y / tileSize);
+
+            const left = getSpriteAt(i-1, j);
+            const right = getSpriteAt(i+1, j);
+
+            if(left && right){
+                const noun = left.label;
+                const verb = right.label;
+
+                rules.push([noun, "is", verb]);
+
+                console.log("left : " + noun);
+                console.log("right : " + verb);
+                
+            }
         }
-    }
+    })
-    if((key=='d'||key=='D') && isOpen(baba.x + tileSize, baba.y)) {
+
-        if (baba.x + tileSize <= maxX) {
+    console.log("rules : " + JSON.stringify(rules));
-            baba.x += tileSize;
+
-            console.log('Right');
+}
-        }
+
-    }
+function runRules(sprite){
-    if((key=='w'||key=='W') && isOpen(baba.x, baba.y - tileSize)) {
+    const overlapSprite = allSprites.filter(s => s !== sprite && dist(s.x, s.y, sprite.x, sprite.y) < tileSize/2);
-        if(baba.y - tileSize >= 0){
+
-            baba.y -= tileSize;
+    overlapSprite.forEach(other => {
-            console.log('Up');
+        rules.forEach(rule => {
-        }
+            const [noun, is, verb] = rule;
-    }
+
+            if(noun == other.label && verb == "sink"){
+                other.remove();
+                if(sprite.label == "you"){
+                    sprite.remove();
+                    gameOver();
+                } else {
+                    sprite.remove();
+                }
+            }
+
+            if(noun == other.label && verb == "hot"){
+                if(sprite.label == "you"){
+                    sprite.remove();
+                    gameOver();
+                } else {
+                    sprite.remove();
+                }
+            }
+
+            if(noun == other.label && verb == "win" && sprite.label == "you"){
+                win();
+            }
+        });
+    });
 }
 
 // move only to the opened place
-function isOpen(x,y){
+function isOpen(x, y){
     let i = floor(x / tileSize);
     let j = floor(y / tileSize);
 
@@ -315,13 +426,7 @@ function isOpen(x,y){
     }
 
     let tile = tileMap[j][i];
-    if (tile == ' ' || tile == ','){
+    if (tile == ' ' || tile == ',' || tile == 'a' || tile == 'l' || tile == 'f'){
-        return true;
-    } else if (tile == 'a'|| tile=='l'){
-        gameOver();
-        return true;
-    } else if (tile == 'f'){
-        win();
         return true;
     } else {
         console.log('blocked');
@@ -329,17 +434,39 @@ function isOpen(x,y){
     }
 }
 
-function movingSprite(sprite, dx, dy){
+function isMove(sprite, dx, dy){
+    const tx = sprite.x + dx;
+    const ty = sprite.y + dy;
 
+    const targets = allSprites.filter(s => dist(s.x, s.y, tx, ty) < tileSize / 2);
+
+    for (let t of targets) {
+        if (t === sprite) continue;
+
+        if (t.collider === 'static') return false;
+        if (t.collider === 'dynamic') {
+            const pushed = isMove(t, dx, dy);
+            if (!pushed) return false;
+        }
+    }
+
+    sprite.x += dx;
+    sprite.y += dy;
+
+    ruleMaker();
+    runRules(sprite);
+    return true;
 }
 
 function win(){
     isWin = true;
+    isPlaying = false;
     baba.remove();
 }
 
 function gameOver(){
     isGameOver = true;
+    isPlaying = false;
     baba.remove();
 }
 
@@ -347,7 +474,11 @@ function resetGame(){
     isGameOver = false;
     isWin = false;
 
-    respawn();
+    allSprites.removeAll();
+
+    bgm.stop();
+    setup();
+    // respawn();
 }
 
 function respawn(){