Sail the Boat Game!
Money: $0 | Fuel: 1000
}
document.getElementById('fuel').innerText = fuel;
if (checkForCollision(boatPosition)) {
document.getElementById('status').innerText = "Oh no, a whirlpool!";
resetBoatPosition();
}
function checkForBlueSquare(boatRect) {
const blueSquare = document.querySelector('.blue-square');
const blueSquareRect = blueSquare.getBoundingClientRect();
return (
boatRect.right > blueSquareRect.left &&
boatRect.left < blueSquareRect.right &&
boatRect.bottom > blueSquareRect.top &&
boatRect.top < blueSquareRect.bottom
);
}
// Check if boat has reached the shore in Level 2 (bottom right corner)
if (currentLevel === 2 && boatPosition.x >= 400 && boatPosition.y >= 400) {
boatElement.style.backgroundImage = "url('AIME.jpg')"; // Change boat image
document.getElementById('status').innerText = "You've reached the shore!";
isAime = true; // Set state to AIME
return; // Exit early if reached shore
}
if (checkForCheckpoint(boatPosition)) {
if (currentLevel === 2) {
levelThree(); // Move to level 3
} else {
levelTwo(); // Move to level 2
}
}
if (checkForTreasure(boatPosition)) {
money += 50;
document.getElementById('money').innerText = money;
collectTreasure();
}
if (checkForMuddle(boatPosition)) {
muddleControls();
}
} else {
document.getElementById('status').innerText = "You are out of fuel! Answer questions to earn more.";
}
}
function checkForLand(position) {
return landAreas.some(area => {
return position.x < area.x + area.width &&
position.x + 30 > area.x &&
position.y < area.y + area.height &&
position.y + 30 > area.y;
});
}
function checkForCollision(position) {
if (isAime) return false; // Disable whirlpools if AIME
const whirlpools = document.querySelectorAll('.whirlpool');
const boatElement = document.getElementById('boat');
const boatRect = boatElement.getBoundingClientRect();
for (const whirlpool of whirlpools) {
const whirlpoolRect = whirlpool.getBoundingClientRect();
if (
boatRect.right > whirlpoolRect.left &&
boatRect.left < whirlpoolRect.right &&
boatRect.bottom > whirlpoolRect.top &&
boatRect.top < whirlpoolRect.bottom
) {
return true;
}
}
return false;
}
function checkForCheckpoint(position) {
const checkpoint = document.getElementById('checkpoint');
const checkpointRect = checkpoint.getBoundingClientRect();
const boatElement = document.getElementById('boat');
const boatRect = boatElement.getBoundingClientRect();
return (
boatRect.right > checkpointRect.left &&
boatRect.left < checkpointRect.right &&
boatRect.bottom > checkpointRect.top &&
boatRect.top < checkpointRect.bottom
);
}
function checkForMuddle(position) {
const muddles = document.querySelectorAll('.muddle');
const boatElement = document.getElementById('boat');
const boatRect = boatElement.getBoundingClientRect();
for (const muddle of muddles) {
const muddleRect = muddle.getBoundingClientRect();
if (
boatRect.right > muddleRect.left &&
boatRect.left < muddleRect.right &&
boatRect.bottom > muddleRect.top &&
boatRect.top < muddleRect.bottom
) {
return true;
}
}
return false;
}
function checkForTreasure(position) {
const treasures = document.querySelectorAll('.treasure');
const boatElement = document.getElementById('boat');
const boatRect = boatElement.getBoundingClientRect();
for (const treasure of treasures) {
const treasureRect = treasure.getBoundingClientRect();
if (
boatRect.right > treasureRect.left &&
boatRect.left < treasureRect.right &&
boatRect.bottom > treasureRect.top &&
boatRect.top < treasureRect.bottom
) {
return true;
}
}
return false;
}
function collectTreasure() {
const treasures = document.querySelectorAll('.treasure');
treasures.forEach(treasure => {
if (checkForTreasure(boatPosition)) {
treasure.remove();
}
});
}
function clearObstacles() {
const whirlpools = document.querySelectorAll('.whirlpool');
whirlpools.forEach(whirlpool => whirlpool.remove());
}
function addNewWhirlpools() {
const gameContainer = document.getElementById('gameContainer');
for (let i = 0; i < 5; i++) {
let whirlpool = document.createElement('div');
whirlpool.classList.add('whirlpool');
whirlpool.style.position = "absolute";
whirlpool.style.opacity = "0";
whirlpool.style.top = Math.floor(Math.random() * (gameContainer.clientHeight - 30)) + 'px';
whirlpool.style.left = Math.floor(Math.random() * (gameContainer.clientWidth - 30)) + 'px';
gameContainer.appendChild(whirlpool);
}
}
function muddleControls() {
document.getElementById('status').innerText = "Controls are muddled!";
const originalMovement = { up: 'ArrowUp', down: 'ArrowDown', left: 'ArrowLeft', right: 'ArrowRight' };
const originalMoveBoat = moveBoat;
let isMuddled = true;
document.addEventListener('keydown', function muddleControl(event) {
if (isMuddled) {
const muddledKeys = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'];
const randomDirection = muddledKeys[Math.floor(Math.random() * muddledKeys.length)];
moveBoat(randomDirection.replace("Arrow", "").toLowerCase());
}
});
setTimeout(() => {
isMuddled = false;
document.getElementById('status').innerText = "Controls back to normal.";
}, 5000);
}
function resetBoatPosition() {
const boatElement = document.getElementById('boat');
if (currentLevel === 1) {
// Reset to top right for level 1
boatPosition.x = 0; // Starting position x: 0
boatPosition.y = 0; // Starting position y: 0
} else if (currentLevel === 2) {
// Reset to bottom left for level 2
boatPosition.x = 0; // Left side of the container
boatPosition.y = 470; // Assuming 500px height - 30px boat height
} else if (currentLevel === 3) {
// Reset to top left for level 3
boatPosition.x = 0; // Left side of the container
boatPosition.y = 0; // Top of the container
}
boatElement.style.left = boatPosition.x + 'px';
boatElement.style.top = boatPosition.y + 'px';
}
function levelTwo() {
currentLevel = 2; // Change to level 2
updateLandAreas(); // Update land areas for level 2
document.getElementById('gameContainer').style.backgroundImage = "url(level2.jpg)"; // Change to new background
// Reset boat position to bottom left corner
const boatElement = document.getElementById('boat');
boatPosition = { x: 0, y: 470 }; // Set position near the bottom left
boatElement.style.left = boatPosition.x + 'px';
boatElement.style.top = boatPosition.y + 'px';
// Position the checkpoint mid-left (e.g., 20px in from the left border and vertically centered)
const checkpoint = document.getElementById('checkpoint');
checkpoint.style.left = '100px'; // Adjust as necessary
checkpoint.style.top = '225px'; // Vertically center within the container (which is 500px high, 225px is approximately mid)
document.getElementById('status').innerText = "Welcome to Level 2!";
clearObstacles();
addNewWhirlpools();
}
function levelThree() {
currentLevel = 3; // Change to level 3
updateLandAreas(); // Update land areas for level 3
document.getElementById('gameContainer').style.backgroundImage = "url(level3.jpg)"; // Change to new background
// Reset boat position to top left corner
const boatElement = document.getElementById('boat');
boatPosition = { x: 0, y: 0 }; // Set position near the top left
boatElement.style.left = boatPosition.x + 'px';
boatElement.style.top = boatPosition.y + 'px';
// Position the checkpoint at a new location for level 3
const checkpoint = document.getElementById('checkpoint');
checkpoint.style.left = '400px'; // Adjust as necessary
checkpoint.style.top = '400px'; // Adjust as necessary
document.getElementById('status').innerText = "Welcome to Level 3!";
clearObstacles();
addNewWhirlpools();
}
function purchasePowerUp(cost) {
if (money >= cost) {
money -= cost;
if (cost === 100) {
speedBoostActive = true;
setTimeout(() => {
speedBoostActive = false;
document.getElementById('status').innerText = "Speed boost has expired.";
}, 10000);
}
document.getElementById('money').innerText = money;
document.getElementById('status').innerText = "Purchased power-up!";
} else {
document.getElementById('status').innerText = "Not enough money!";
}
}
// Initialize game by setting up level 1 land areas
updateLandAreas(); // Call this initially
// conversion of boat to land character required to activate checkpoint
function checkForShore(position) {
return (
position.x >= 310 && position.x <= 385 &&
position.y >= 340 && position.y <= 415
);
}
// Ensure boat stays in bounds, check against walls of the container (500x500)
if (newPosition.x < 0) newPosition.x = 0;
if (newPosition.x > 470) newPosition.x = 470; // 500 - boat width
if (newPosition.y < 0) newPosition.y = 0;
if (newPosition.y > 470) newPosition.y = 470; // 500 - boat height
boatPosition = newPosition;
const boatElement = document.getElementById('boat');
boatElement.style.left = boatPosition.x + 'px';
boatElement.style.top = boatPosition.y + 'px';
// Check for collision with blue square
const boatRect = boatElement.getBoundingClientRect();
if (checkForBlueSquare(boatRect)) {
boatElement.style.backgroundImage = "url('AIME.jpg')";
isAime = true; // Set state to AIME
whirlpoolActive = false; // Disable whirlpools
document.getElementById('status').innerText = "You've transformed into AIME!";
}
function checkForAimeArea(position) {
return (
position.x >= 310 && position.x <= 385 &&
position.y >= 340 && position.y <= 415
);
}
function checkForBlueSquare(boatRect) {
const blueSquare = document.querySelector('.blue-square');
const blueSquareRect = blueSquare.getBoundingClientRect();
return (
boatRect.right > blueSquareRect.left &&
boatRect.left < blueSquareRect.right &&
boatRect.bottom > blueSquareRect.top &&
boatRect.top < blueSquareRect.bottom
);
}
function drawAimeArea() {
const canvas = document.getElementById('landCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // Semi-transparent blue for AIME area
ctx.fillRect(310, 340, 75, 75);
}
drawAimeArea(); // Draw the AIME area