From b5b37ae9a80d35d4256a36790a89b4ca14bc9b40 Mon Sep 17 00:00:00 2001 From: Jee Youn Kim Date: Sun, 20 Apr 2025 22:03:30 +0900 Subject: [PATCH] move is done I think --- PROPOSAL_20243197.md | 1 + README.md | 4 ++ index.html | 13 +++- main.js | 143 +++++++++++++++++++++++++++++++++++-------- style.css | 7 +++ 5 files changed, 140 insertions(+), 28 deletions(-) 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 | ![is](assets/Text_IS_0.webp) | Operator | | You | ![you](assets/You.webp) | | | Move | ![Move](assets/Move.webp) | | | Stop | ![Stop](assets/Stop.webp) | | 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