We’re making a Five Pillars Simulator (game).
For debugging purposes, we draw a rectangle at the position of each door for the current stage (street
, mosque
, etc).
But when I go in the mosque, the doors from the street are also drawn, but only the doors in the mosque should be.
The doors are like this:
const doors = {
'street': {
139: 'your house',
399: 'big building',
730: 'supercor',
1090: 'mosque'
},
'mosque': {
1090: 'street'
}
};
And the current stage can be street
or mosque
, depending on what door you go in.
And all of the code is this:
const start_screen = document.querySelector('div#start-screen');
const play_btn = start_screen.querySelector('button#play-btn');
const preload_images = document.querySelector('div#preload-images');
const player_img = preload_images.querySelector('img#player-img');
const floor_img = preload_images.querySelector('img#floor-img');
const houses_img = preload_images.querySelector('img#houses-img');
const mosque_inside_img = preload_images.querySelector('img#mosque-inside-img');
const canvas_cont = document.querySelector('div#canvas-cont');
const top_info = document.querySelector('div#top-info');
const times_prayed_span = top_info.querySelector('span#times-prayed');
const first_pillar_overlay = document.querySelector('div#first-pillar-overlay');
const yes_believe_btn = first_pillar_overlay.querySelector('button#yes-believe');
const no_believe_btn = first_pillar_overlay.querySelector('button#no-believe');
const congrats_muslim = document.querySelector('h2#congrats-muslim');
const canvas = canvas_cont.querySelector('canvas');
const ctx = canvas.getContext('2d');
play_btn.addEventListener('click', e => {
start_screen.style.display = 'none';
});
yes_believe_btn.addEventListener('click', e => {
first_pillar_overlay.style.display = 'none';
congrats_muslim.style.display = 'unset';
setTimeout(() => {
congrats_muslim.style.display = 'none';
}, 4000);
startGame();
});
window.addEventListener('keydown', e => {
switch (e.code)
{
case 'ArrowRight':
case 'KeyD':
move = 1;
break;
case 'ArrowLeft':
case 'KeyA':
move = -1;
}
});
window.addEventListener('keyup', e => {
switch (e.code)
{
case 'ArrowRight':
case 'ArrowLeft':
case 'KeyD':
case 'KeyA':
move = 0;
}
});
window.addEventListener('keypress', e => {
if (
e.code == 'KeyW' ||
e.code == 'Space'
)
goInDoor();
});
let floor_y = 300;
let player_x = 400;
let move = 0;
let times_prayed = 0;
const doors = {
'street': {
139: 'your house',
399: 'big building',
730: 'supercor',
1090: 'mosque'
},
'mosque': {
1090: 'street'
}
};
let current_place = 'street';
function startGame()
{
player_x = 400;
const frame = () => {
player_x += 3 * move;
if (player_x < 0)
player_x = 0;
else if (player_x > 2000)
player_x = 2000;
canvas_cont.scrollLeft = player_x - 400;
times_prayed_span.innerText = times_prayed;
ctx.clearRect(0, 0, 2000, 500);
if (current_place == 'street')
{
floor_y = 300;
ctx.drawImage(
floor_img,
0,
floor_y,
2000,
200
);
ctx.drawImage(
houses_img,
0,
00,
2000,
300
);
}
else if (current_place == 'mosque')
{
floor_y = 400;
ctx.drawImage(
mosque_inside_img,
0,
0,
2000,
500
);
}
for (let door of Object.keys(doors[current_place]))
{
door = parseInt(door);
ctx.rect(
door - 20,
floor_y - 20,
40,
20
);
ctx.fill();
}
ctx.drawImage(
player_img,
player_x,
floor_y - 20,
40,
40
);
requestAnimationFrame(frame);
};
requestAnimationFrame(frame);
}
function goInDoor()
{
for (let door_x of Object.keys(doors[current_place]))
{
door_x = parseInt(door_x);
if (
player_x + 20 >= door_x - 20 &&
player_x + 20 <= door_x + 20
)
{
const door_id = doors[current_place][door_x];
current_place = door_id;
break;
}
}
}
But when drawing the doors, it should only loop through doors[current_place]
and not all of the doors.
Any ideas?