489 lines
11 KiB
JavaScript
489 lines
11 KiB
JavaScript
// alert("hello world");
|
|
const tileSize = 24;
|
|
|
|
// Sprites
|
|
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 = [
|
|
' ',
|
|
'wwwwwwwwwwwwwwww',
|
|
'w,,,,,,,,,,,,,,w',
|
|
'w,,,,,,,,,(ih,,w',
|
|
'w,$im,,,,,,,,,,w',
|
|
'w,,,,,,,,,)ik,,w',
|
|
'w,,,,r,,,,,,,,,w',
|
|
'w, ,,w,,,,,,,,,w',
|
|
'w,,,,r,,,ll,,r,w',
|
|
'w,,,,,,,,ll,rfrw',
|
|
'w,,,,aa,,,w,,r,w',
|
|
'w,,,,aa,,,w,,,,w',
|
|
'w,,,,,,,,,,,,,,w',
|
|
'w,*i@,,,,,^i#,,w',
|
|
'w,%is,,,,,,,,,,w',
|
|
'wwwwwwwwwwwwwwww',
|
|
];
|
|
|
|
// let rules = [
|
|
// ["rock", "is", "push"],
|
|
// ["wall", "is", "stop"],
|
|
// ["water", "is", "sink"],
|
|
// ["lava", "is", "hot"]
|
|
// ]
|
|
|
|
let rules = [];
|
|
|
|
// CaracterMove
|
|
let babaX = 0;
|
|
let babaY = 0;
|
|
|
|
// Sounds
|
|
let bgm, winSound;
|
|
let isPlaying = false;
|
|
|
|
// Game State
|
|
let isGameOver = false;
|
|
let isWin = false;
|
|
|
|
function preload(){
|
|
// BGM
|
|
bgm = loadSound("/assets/Baba Is You OST - Baba Is You Theme.mp3");
|
|
|
|
// 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.webp");
|
|
win_img = loadImage("/assets/Win.webp");
|
|
you_img = loadImage("/assets/You.webp");
|
|
stop_img = loadImage("/assets/Stop.webp");
|
|
move_img = loadImage("/assets/Move.webp");
|
|
hot_img = loadImage("/assets/Hot.webp");
|
|
sink_img = loadImage("/assets/Sink.webp");
|
|
|
|
wall_text_img = loadImage("/assets/Text_WALL.webp");
|
|
water_text_img = loadImage("/assets/Text_WATER.webp");
|
|
lava_text_img = loadImage("/assets/Text_LAVA.webp");
|
|
stopText_img = loadImage("/assets/Stop.webp");
|
|
baba_text_img = loadImage("/assets/Text_BABA.webp");
|
|
flag_text_img = loadImage("/assets/Text_FLAG.webp");
|
|
rock_text_img = loadImage("/assets/Text_ROCK.webp");
|
|
}
|
|
|
|
function setup(){
|
|
createCanvas(400, 400);
|
|
// 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();
|
|
flag.img = flag_img;
|
|
flag.collider = 'none';
|
|
flag.tile = "f";
|
|
flag.scale = tileSize/flag_img.width;
|
|
flag.layer = 1;
|
|
flag.label = 'flag';
|
|
|
|
|
|
// WALL
|
|
let wall = new Group();
|
|
wall.img = wall_img;
|
|
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 = 'static';
|
|
is.tile = 'i';
|
|
is.scale = tileSize/is_img.width;
|
|
is.label = 'is';
|
|
|
|
|
|
// flag_text
|
|
let flag_text = new Group();
|
|
flag_text.img = flag_text_img;
|
|
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();
|
|
baba_text.img = baba_text_img;
|
|
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();
|
|
rock_text.img = rock_text_img;
|
|
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();
|
|
lava_text.img = lava_text_img;
|
|
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();
|
|
water_text.img = water_text_img;
|
|
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();
|
|
wall_text.img = wall_text_img;
|
|
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();
|
|
you.img = you_img;
|
|
you.collider = 'dynamic';
|
|
you.tile = '@';
|
|
you.scale = tileSize/you_img.width;
|
|
you.layer = 2;
|
|
you.label = 'you_text';
|
|
|
|
// win
|
|
let win_text = new Group();
|
|
win_text.img = win_img;
|
|
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();
|
|
stop.img = stop_img;
|
|
stop.collider = 'dynamic';
|
|
stop.tile = 's';
|
|
stop.scale = tileSize/stop_img.width;
|
|
stop.layer = 2;
|
|
stop.label = 'stop';
|
|
|
|
|
|
// move
|
|
let move = new Group();
|
|
move.img = move_img;
|
|
move.collider = 'dynamic';
|
|
move.tile = 'm';
|
|
move.scale = tileSize/move_img.width;
|
|
move.layer = 2;
|
|
move.label = 'move';
|
|
|
|
// hot
|
|
let hot = new Group();
|
|
hot.img = hot_img;
|
|
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 = 'k';
|
|
sink.scale = tileSize/sink_img.width;
|
|
sink.layer = 2;
|
|
sink.label = 'sink';
|
|
|
|
new Tiles(tileMap, tileSize/2, tileSize/2, tileSize, tileSize);
|
|
|
|
//BABA
|
|
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) {
|
|
drawMessageBox("Game Over! Press R to Restart");
|
|
} else if (isWin) {
|
|
drawMessageBox("Congratulations! Press R to Restart");
|
|
}
|
|
}
|
|
|
|
|
|
// Background Music & Soundeffects
|
|
function backgroundMusic(){
|
|
|
|
}
|
|
|
|
|
|
// 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();
|
|
}
|
|
return;
|
|
}
|
|
|
|
let dx = 0;
|
|
let dy = 0;
|
|
|
|
if (key === 'a' || key === 'A') dx = -tileSize;
|
|
if (key === 'd' || key === 'D') dx = tileSize;
|
|
if (key === 'w' || key === 'W') dy = -tileSize;
|
|
if (key === 's' || key === 'S') dy = tileSize;
|
|
|
|
if (dx !== 0 || dy !== 0) {
|
|
allSprites
|
|
.filter(s => s.label === 'you')
|
|
.forEach(sprite => isMove(sprite, dx, dy));
|
|
}
|
|
|
|
}
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
}
|
|
})
|
|
|
|
console.log("rules : " + JSON.stringify(rules));
|
|
|
|
}
|
|
|
|
function runRules(sprite){
|
|
const overlapSprite = allSprites.filter(s => s !== sprite && dist(s.x, s.y, sprite.x, sprite.y) < tileSize/2);
|
|
|
|
overlapSprite.forEach(other => {
|
|
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){
|
|
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 == ' ' || tile == ',' || tile == 'a' || tile == 'l' || tile == 'f'){
|
|
return true;
|
|
} else {
|
|
console.log('blocked');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
function resetGame(){
|
|
isGameOver = false;
|
|
isWin = false;
|
|
|
|
allSprites.removeAll();
|
|
|
|
bgm.stop();
|
|
setup();
|
|
// respawn();
|
|
}
|
|
|
|
function respawn(){
|
|
baba = new Sprite((tileSize*5)/2, (tileSize*15)/2, tileSize, tileSize);
|
|
baba.img = baba_img;
|
|
baba.scale = tileSize / baba_img.width;
|
|
baba.label = 'you';
|
|
} |