Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Enhancements for Missionary and Cannibals Game #392

Merged
merged 1 commit into from
Jan 9, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions public/Missionaries&Cannibals/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ <h2>How to Play</h2>
<li>Move the boat to the opposite bank.</li>
<li>Unload the passengers on the other bank.</li>
<li>Ensure that no missionaries are outnumbered by cannibals on either bank.</li>
<li>Repeat until all missionaries and cannibals are on the right bank.</li>
<li>Click on M or C to move them from one place to another,</li>
<li>Click on M or C to move them from one place to another.</li>
</ol>
</div>
<div class="game-container">
Expand All @@ -42,6 +41,7 @@ <h2>How to Play</h2>
<button onclick="resetGame()">Reset Game</button>
</div>
<div id="message"></div>
<div id="move-count">Moves: 0</div>
<script src="script.js"></script>
</body>
</html>
81 changes: 66 additions & 15 deletions public/Missionaries&Cannibals/script.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,49 @@
// Initial state of the game
let state = {
left: { missionaries: 3, cannibals: 3 },
right: { missionaries: 0, cannibals: 0 },
boat: { missionaries: 0, cannibals: 0, onLeft: true }
};

let moves = 0; // Move counter

// Update UI to reflect the current state
function updateUI() {
const leftMissionaries = document.getElementById('left-missionaries');
const leftCannibals = document.getElementById('left-cannibals');
const rightMissionaries = document.getElementById('right-missionaries');
const rightCannibals = document.getElementById('right-cannibals');
const boat = document.getElementById('boat');
const message = document.getElementById('message');
const moveCount = document.getElementById('move-count');

// Populate each section with the correct number of people
leftMissionaries.innerHTML = createPeople('missionary', state.left.missionaries, 'left');
leftCannibals.innerHTML = createPeople('cannibal', state.left.cannibals, 'left');
rightMissionaries.innerHTML = createPeople('missionary', state.right.missionaries, 'right');
rightCannibals.innerHTML = createPeople('cannibal', state.right.cannibals, 'right');
boat.innerHTML = createPeople('missionary', state.boat.missionaries, 'boat') + createPeople('cannibal', state.boat.cannibals, 'boat');
boat.innerHTML = createPeople('missionary', state.boat.missionaries, 'boat') +
createPeople('cannibal', state.boat.cannibals, 'boat');

// Position the boat based on its side
boat.style.left = state.boat.onLeft ? '20%' : '70%';

// Display the move count
moveCount.textContent = `Moves: ${moves}`;

// Check game status for win/loss
if (checkWin()) {
message.textContent = 'Congratulations! You won!';
disableControls();
} else if (checkLoss()) {
message.textContent = 'Game Over! The missionaries were eaten!';
disableControls();
} else {
message.textContent = '';
}
}

// Generate the visual representation of people
function createPeople(type, count, location) {
let people = '';
for (let i = 0; i < count; i++) {
Expand All @@ -29,9 +53,12 @@ function createPeople(type, count, location) {
return people;
}

// Handle moving a person into or out of the boat
function movePerson(id) {
const [location, type] = id.split('-');

if (location === 'boat') {
// Moving from boat to bank
const to = state.boat.onLeft ? state.left : state.right;
if (type === 'missionary' && state.boat.missionaries > 0) {
state.boat.missionaries--;
Expand All @@ -41,6 +68,7 @@ function movePerson(id) {
to.cannibals++;
}
} else {
// Moving from bank to boat
const from = state.boat.onLeft ? state.left : state.right;
if (type === 'missionary' && from.missionaries > 0 && state.boat.missionaries + state.boat.cannibals < 2) {
from.missionaries--;
Expand All @@ -50,40 +78,63 @@ function movePerson(id) {
state.boat.cannibals++;
}
}
checkStatus();
updateUI();
}

// Move the boat to the opposite bank
function moveBoat() {
if (state.boat.missionaries + state.boat.cannibals > 0) {
moves++;
state.boat.onLeft = !state.boat.onLeft;
checkStatus();
const from = state.boat.onLeft ? state.right : state.left;
const to = state.boat.onLeft ? state.left : state.right;

// Transfer people from the boat to the other side
to.missionaries += state.boat.missionaries;
to.cannibals += state.boat.cannibals;
state.boat.missionaries = 0;
state.boat.cannibals = 0;

updateUI();
} else {
alert('Boat is empty!');
}
}

function checkStatus() {
const message = document.getElementById('message');
if ((state.left.missionaries > 0 && state.left.missionaries < state.left.cannibals) ||
(state.right.missionaries > 0 && state.right.missionaries < state.right.cannibals)) {
alert('Game Over! Cannibals ate the missionaries.');
resetGame();
} else if (state.right.missionaries === 3 && state.right.cannibals === 3) {
message.textContent = 'You Won the Game!';
// Check if the player has won
function checkWin() {
return state.right.missionaries === 3 && state.right.cannibals === 3;
}

// Check if the player has lost
function checkLoss() {
// Check left bank
if ((state.left.cannibals > state.left.missionaries && state.left.missionaries > 0) ||
(state.right.cannibals > state.right.missionaries && state.right.missionaries > 0)) {
return true;
}
return false;
}

// Reset the game
function resetGame() {
moves = 0;
state = {
left: { missionaries: 3, cannibals: 3 },
right: { missionaries: 0, cannibals: 0 },
boat: { missionaries: 0, cannibals: 0, onLeft: true }
};
document.getElementById('message').textContent = '';
enableControls();
updateUI();
}

window.onload = resetGame;
// Disable controls after win/loss
function disableControls() {
document.querySelectorAll('button').forEach(button => button.disabled = true);
}

// Enable controls for reset
function enableControls() {
document.querySelectorAll('button').forEach(button => button.disabled = false);
}

// Initialize UI
updateUI();
6 changes: 6 additions & 0 deletions public/Missionaries&Cannibals/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,9 @@ button:hover {
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#move-count {
margin-top: 10px;
font-size: 18px;
color: #fff;
}
Loading