Issue
`The Blue square goes off the green bar and disappears into the white. How do I fix this with my canva const? Do I remove canvas and add a layout? How would I configure that? I tried to se t an if statement for player.moveRIght to no if they cross a certain canvas or canvasgame but nothing.
Mario-like Game with Levels
body { margin: 0; }
</canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const GRAVITY = 0.5;
const JUMP_FORCE = 10;
let MOVE_SPEED = 7; // Increased movement speed
let ENEMY_SPEED = 2; // Increased enemy speed for Level 2
let currentLevel = 1;
let maxJumps = 2;
let remainingJumps = maxJumps;
let levels = [
{
platforms: [
{ x: 150, y: 250, width: 100, height: 10 },
{ x: 300, y: 200, width: 100, height: 10 },
{ x: 450, y: 150, width: 100, height: 10 },
{ x: 600, y: 100, width: 100, height: 10 }
],
enemies: [
{ x: 200, y: 300, width: 50, height: 50, direction: 1 },
{ x: 400, y: 300, width: 50, height: 50, direction: -1 }
],
star: { x: canvas.width - 100, y: 200, radius: 15 }
},
{
platforms: [
{ x: 150, y: 250, width: 100, height: 10 },
{ x: 400, y: 200, width: 100, height: 10 },
{ x: 600, y: 150, width: 100, height: 10 },
{ x: 300, y: 100, width: 100, height: 10 }
],
enemies: [
{ x: 200, y: 300, width: 50, height: 50, direction: 1 },
{ x: 600, y: 300, width: 50, height: 50, direction: -1 }
],
star: { x: canvas.width - 100, y: 150, radius: 15 }
}
];
let player = { x: 50, y: 300, width: 50, height: 50, velocityY: 0, jumping: false, canDoubleJump: true };
let ground = { x: 0, y: 350, width: canvas.width, height: 50 };
let keys = {};
document.addEventListener("keydown", function(event) {
keys[event.key] = true;
});
document.addEventListener("keyup", function(event) {
keys[event.key] = false;
});
function checkCollision(objA, objB) {
return objA.x < objB.x + objB.width &&
objA.x + objA.width > objB.x &&
objA.y < objB.y + objB.height &&
objA.y + objA.height > objB.y;
}
function update() {
// Apply gravity
player.velocityY += GRAVITY;
// Jumping
if (keys["ArrowUp"]) {
if (remainingJumps > 0) {
if (!player.jumping) {
player.velocityY = -JUMP_FORCE;
player.jumping = true;
remainingJumps--;
} else if (player.canDoubleJump) {
player.velocityY = -JUMP_FORCE;
player.canDoubleJump = false;
remainingJumps--;
}
}
} else {
player.canDoubleJump = true;
}
// Move left
if (keys["ArrowLeft"]) {
player.x -= MOVE_SPEED;
}
// Move right
if (keys["ArrowRight"]) {
player.x += MOVE_SPEED;
}
if (player.ArrowRight >= 500) {
player.x = 0;
}
// Check collision with ground
if (player.y + player.height > ground.y) {
player.y = ground.y - player.height;
player.velocityY = 0;
player.jumping = false;
player.canDoubleJump = true;
remainingJumps = maxJumps;
}
// Check collision with platforms
levels[currentLevel - 1].platforms.forEach(platform => {
if (checkCollision(player, platform) && player.velocityY > 0 && player.y < platform.y) {
player.y = platform.y - player.height;
player.velocityY = 0;
player.jumping = false;
player.canDoubleJump = true;
remainingJumps = maxJumps;
}
});
// Check collision with star
if (checkCollision(player, levels[currentLevel - 1].star)) {
if (currentLevel === 1) {
currentLevel = 2;
resetGame();
} else {
alert("Victory!");
resetGame();
}
}
// Move enemies back and forth
levels[currentLevel - 1].enemies.forEach(enemy => {
enemy.x += enemy.direction;
if (enemy.x < 100 || enemy.x > 400) {
enemy.direction = -enemy.direction;
}
});
// Check collision with enemies
levels[currentLevel - 1].enemies.forEach(enemy => {
if (checkCollision(player, enemy)) {
alert("You touched an enemy! Try again.");
resetGame();
}
});
// Update player position
player.y += player.velocityY;
// Render
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw ground
ctx.fillStyle = "#00FF00";
ctx.fillRect(ground.x, ground.y, ground.width, ground.height);
// Draw platforms
ctx.fillStyle = "#808080";
levels[currentLevel - 1].platforms.forEach(platform => {
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
});
// Draw enemies
ctx.fillStyle = "#FF0000";
levels[currentLevel - 1].enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
// Draw star
ctx.fillStyle = "#00FF00";
ctx.beginPath();
ctx.arc(levels[currentLevel - 1].star.x, levels[currentLevel - 1].star.y, levels[currentLevel - 1].star.radius, 0, Math.PI * 2);
ctx.fill();
// Draw player
ctx.fillStyle = "#0000FF";
ctx.fillRect(player.x, player.y, player.width, player.height);
requestAnimationFrame(update);
}
function resetGame() {
player.x = 50;
player.y = 300;
player.velocityY = 0;
player.jumping = false;
player.canDoubleJump = true;
remainingJumps = maxJumps;
}
update();
</script>
I tried editing the const, it didn't work. `
Solution
in order to keep the player within the bounds of the canvas, you can check if the player's x position exceeds the canvas width and prevent further movement past that point
// Move right
if (keys["ArrowRight"]) {
if (player.x + player.width < canvas.width) {
player.x += MOVE_SPEED;
}
}
// Move left
if (keys["ArrowLeft"]) {
if (player.x > 0) {
player.x -= MOVE_SPEED;
}
}
This will keep the player within the canvas by preventing them from moving past the left and right edges.
You don't need to remove the canvas or add layouts. but check the player's position before moving and prevent going outside the bounds.
You can also wrap the player position when they go off one side to make them appear on the other, creating a continuous loop
// Move right past edge
if (player.x + player.width > canvas.width) {
player.x = 0;
}
// Move left past edge
if (player.x < 0) {
player.x = canvas.width - player.width;
}
Answered By - newlearner
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.