358 lines
8.1 KiB
JavaScript
358 lines
8.1 KiB
JavaScript
// alert("hello world");
|
|
const tileSize = 16;
|
|
|
|
// 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,$im,,,,,(ih,,w',
|
|
'w,,,,,,,,,,,,,,w',
|
|
'w,,,,,,,,,)is,,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"]
|
|
]
|
|
|
|
// 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(800, 400);
|
|
new World();
|
|
|
|
background(51);
|
|
textAlign(CENTER);
|
|
|
|
// Floor - Tile
|
|
let tile = new Group();
|
|
tile.img = tile_img;
|
|
tile.collider = 'none';
|
|
tile.tile = ",";
|
|
tile.scale = tileSize/tile_img.width;
|
|
|
|
// Flag
|
|
let flag = new Group();
|
|
flag.img = flag_img;
|
|
flag.collider = 'none';
|
|
flag.tile = "f";
|
|
flag.scale = tileSize/flag_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;
|
|
|
|
// TEXTS
|
|
// is
|
|
let is = new Group();
|
|
is.img = is_img;
|
|
is.collider = 'dynamic';
|
|
is.tile = 'i';
|
|
is.scale = tileSize/is_img.width;
|
|
|
|
// 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;
|
|
|
|
// 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;
|
|
|
|
// 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;
|
|
|
|
// 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;
|
|
|
|
// 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;
|
|
|
|
// 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;
|
|
|
|
// you
|
|
let you = new Group();
|
|
you.img = you_img;
|
|
you.collider = 'dynamic';
|
|
you.tile = '@';
|
|
you.scale = tileSize/you_img.width;
|
|
|
|
// 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;
|
|
|
|
// stop
|
|
let stop = new Group();
|
|
stop.img = stop_img;
|
|
stop.collider = 'dynamic';
|
|
stop.tile = 's';
|
|
stop.scale = tileSize/stop_img.width;
|
|
|
|
|
|
// move
|
|
let move = new Group();
|
|
move.img = move_img;
|
|
move.collider = 'dynamic';
|
|
move.tile = 'm';
|
|
move.scale = tileSize/move_img.width;
|
|
|
|
// hot
|
|
let hot = new Group();
|
|
hot.img = hot_img;
|
|
hot.collider = 'dynamic';
|
|
hot.tile = 'h';
|
|
hot.scale = tileSize/hot_img.width;
|
|
|
|
// sink
|
|
let sink = new Group();
|
|
sink.img = sink_img;
|
|
sink.collider = 'dynamic';
|
|
sink.tile = 's';
|
|
sink.scale = tileSize/sink_img.width;
|
|
|
|
// // baba
|
|
// 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);
|
|
|
|
//BABA
|
|
respawn();
|
|
}
|
|
|
|
function draw(){
|
|
background(10);
|
|
drawSprites();
|
|
|
|
if (isGameOver) {
|
|
fill(255);
|
|
textSize(32);
|
|
text("Game Over! Press R to Restart", width / 4, height / 4);
|
|
}
|
|
|
|
if(isWin){
|
|
fill(255);
|
|
textSize(32);
|
|
text("Congratulations! Press R to Restart", width / 4, height / 4);
|
|
}
|
|
}
|
|
|
|
|
|
// Background Music & Soundeffects
|
|
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(isGameOver || isWin){
|
|
if(key=='r'||key=='R'){
|
|
resetGame();
|
|
}
|
|
return;
|
|
}
|
|
|
|
const maxX = width - tileSize;
|
|
const maxY = height - 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') && isOpen(baba.x, baba.y + tileSize)) {
|
|
if (baba.y + tileSize <= maxY) {
|
|
baba.y += tileSize;
|
|
console.log('Down');
|
|
}
|
|
}
|
|
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') && 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 == ' ' || tile == ','){
|
|
return true;
|
|
} else if (tile == 'a'|| tile=='l'){
|
|
gameOver();
|
|
return true;
|
|
} else if (tile == 'f'){
|
|
win();
|
|
return true;
|
|
} else {
|
|
console.log('blocked');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function movingSprite(sprite, dx, dy){
|
|
|
|
}
|
|
|
|
function win(){
|
|
isWin = true;
|
|
baba.remove();
|
|
}
|
|
|
|
function gameOver(){
|
|
isGameOver = true;
|
|
baba.remove();
|
|
}
|
|
|
|
function resetGame(){
|
|
isGameOver = false;
|
|
isWin = false;
|
|
|
|
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';
|
|
} |