Skip to content

Commit

Permalink
add animations for bullet and delete bot.
Browse files Browse the repository at this point in the history
  • Loading branch information
@wreeshab
wreeshab committed Jun 2, 2024
1 parent c5b9c5b commit b582f29
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 131 deletions.
57 changes: 55 additions & 2 deletions hackerplus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,12 +330,65 @@ button:disabled {
width: 75px;
height: 75px;
}

#directionalBullet {
height: 45px;
width: 45px;
position: relative;
}

.dirBulletUpAnime {
animation: directionUp .3s linear ;
}

@keyframes directionUp {
from {
top: 40px;
}
to {
top: -40px;
}
}

.dirBulletRightAnime {
animation: directionRight .3s linear;
}

@keyframes directionRight {
from {
left: -40px;
}
to {
left: 40px;
}
}

.dirBulletDownAnime {
animation: directionDown .3s linear;
}

@keyframes directionDown {
from {
top: -40px;
}
to {
top: 40px;
}
}

.dirBulletLeftAnime {
animation: directionLeft .3s linear;
}

@keyframes directionLeft {
from {
left: 40px;
}
to {
left: -40px;
}
}


#game-state-history {
overflow-x: hidden;
overflow-y: auto;
Expand Down Expand Up @@ -510,4 +563,4 @@ button:disabled {
#timertext{
font-size: .7em;
}
}
}
168 changes: 39 additions & 129 deletions hackerplus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,12 @@ let currentPlayer = "green";
let ricochetRotation = {};
let bulletDirection = "";
let cannonCoords;
let bulletSpeed = 100;
let bulletSpeed = 300;
let remainingSeconds = 21;
let timerId = null;
let gameStateHistory = [];
let redoStack = [];
let whoWon = ""
let moveCount = 1;

//bools
Expand Down Expand Up @@ -153,6 +154,7 @@ function resetGame() {
overallAudio.loop = true;
overallAudio.volume = 0.4;
localStorage.removeItem("gameStateHistory");
localStorage.removeItem("whoWon")
gameStateHistory = [];
moveCount = 1;
gameHistoryBoard.innerHTML = "";
Expand All @@ -169,9 +171,12 @@ function gameWin(element, currentLocation) {
pauseButton.disabled = true;
if (element.firstElementChild.classList.contains("blue")) {
document.getElementById("winner-text").textContent = "Green Won!";
whoWon = "green"
} else {
document.getElementById("winner-text").textContent = "Blue Won!";
whoWon = "blue"
}
localStorage.setItem("whoWon", JSON.stringify(whoWon));
element.innerHTML = "";
element.innerHTML = gameOverCoin;
winnerNotice.style.visibility = "visible";
Expand All @@ -194,10 +199,14 @@ function handlePlayerLossByTime(player) {

if (player === "green") {
document.getElementById("winner-text").textContent = "Time Over: Blue Won!";
whoWon = "blue"
} else {
document.getElementById("winner-text").textContent =
"Time Over: Green Won!";
whoWon = "green"
}
localStorage.setItem("whoWon", JSON.stringify(whoWon));


winnerNotice.style.visibility = "visible";
overallAudio.pause();
Expand All @@ -209,7 +218,6 @@ function changePlayer() {
if (currentPlayer === "green") {
currentPlayer = "blue";
playerDisplay.innerText = "blue's";
setTimeout(botMove, 550);
} else {
currentPlayer = "green";
playerDisplay.innerText = "green's";
Expand Down Expand Up @@ -317,17 +325,17 @@ function replayGame() {
ricochetRotation = gameState.rotation;
currentPlayer = gameState.currentPlayer;
remainingSeconds = gameState.remainingSeconds;
playerDisplay.innerText = `${currentPlayer}'s`;
playerDisplay.innerText = `${currentPlayer }'s`;

updateBoard();
new Promise((resolve, reject) => {
setTimeout(() => {
replayNextMove();
resolve();
}, 2000);
}, 4000);
}).then(() => {
setTimeout(() => {
handleCannonShoot(currentPlayer === "green" ? "blue" : "green");
handleCannonShoot(currentPlayer );
}, 100);
});
index++;
Expand All @@ -342,11 +350,12 @@ function replayGame() {
}

function showWinnerNotice(history) {
const winnerReplay = localStorage.getItem("whoWon")
const lastMove = history[history.length - 1];
const winningPlayer = lastMove.currentPlayer;
winnerNotice.style.visibility = "visible";
document.getElementById("winner-text").textContent =
winningPlayer === "green" ? "Green Won!" : "Blue Won!";
document.getElementById("winner-text").textContent = winnerReplay;
// winningPlayer === "green" ? "Green Won!" : "Blue Won!";
}

function logMove(description) {
Expand All @@ -355,121 +364,6 @@ function logMove(description) {
movesBoardChild.textContent = description;
gameHistoryBoard.append(movesBoardChild);
}
//here im assuming that the blue player is bot
function botMove() {
if (gameOver || gamePaused || currentPlayer !== "blue") {
return;
}
const validMoves = getAllValidMovesForBot("blue");
if (validMoves.length === 0) {
handlePlayerLossByTime("blue");
return;
}
const randomIndex = Math.floor(Math.random() * validMoves.length);
const randomMove = validMoves[randomIndex];
executeBotMove(randomMove);
}

function getAllValidMovesForBot(player) {
const validMoves = [];
const parser = new DOMParser();

for (let i = 0; i < width * width; i++) {
const piece = startPieces[i];
const row = Math.floor(i / width);
const column = i % width;

// Parse the piece string into a DOM element
const doc = parser.parseFromString(piece, "text/html");
const pieceDOM = doc.querySelector("div");
// console.log(pieceDOM.parentNode);
if (pieceDOM && pieceDOM.getAttribute("class").includes(player)) {
const moves = getValidMovesForPieceForBot(row, column, pieceDOM);
validMoves.push(...moves);
// The below is for ricochets
if (pieceDOM.id === "semiRicochet" || pieceDOM.id === "ricochet") {
validMoves.push({ piece, row, column, type: "rotate" });
}
}
}
return validMoves;
}

function getValidMovesForPieceForBot(row, column, piece) {
const moves = [];
const directions = [];

if (piece.id === "topCannon" || piece.id === "bottomCanon") {
directions.push({ row: 0, column: -1 });
directions.push({ row: 0, column: 1 });
} else {
directions.push(
{ row: -1, column: 0 }, // Up
{ row: 1, column: 0 }, // Down
{ row: 0, column: -1 }, // Left
{ row: 0, column: 1 }, // Right
{ row: -1, column: -1 }, // Up-Left
{ row: -1, column: 1 }, // Up-Right
{ row: 1, column: -1 }, // Down-Left
{ row: 1, column: 1 } // Down-Right
);
}

directions.forEach((direction) => {
const newRow = row + direction.row;
const newColumn = column + direction.column;

// Check if the new position is valid
if (
isValidPosition(newRow, newColumn) &&
startPieces[newRow * width + newColumn] === ""
) {
moves.push({
piece,
oldRow: row,
oldColumn: column,
row: newRow,
column: newColumn,
type: "move",
});
}
});
return moves;
}
function executeBotMove(move) {
console.log("move", move);
if (move.type === "move") {
movePiece(move.oldRow, move.oldColumn, move.row, move.column);
} else if (move.type === "rotate") {
rotatePieceForBot(move.row, move.column);
}
updateBoard();
}
function rotatePieceForBot(row, column) {
const pieceIndex = row * width + column;
const pieceHTML = startPieces[pieceIndex];

// Parse the piece HTML into a DOM element
const parser = new DOMParser();
const doc = parser.parseFromString(pieceHTML, "text/html");
const pieceDOM = doc.querySelector("div");

if (pieceDOM.id === "semiRicochet" || pieceDOM.id === "ricochet") {
const currentRotation = ricochetRotation[pieceIndex] || 0;
const newRotation = (currentRotation + 90) % 360;
ricochetRotation[pieceIndex] = newRotation;

// Apply rotation to the actual DOM element in the game board
const actualPieceDOM = document.querySelector(`#${pieceDOM.id}`);
if (actualPieceDOM) {
actualPieceDOM.style.transform = `rotate(${newRotation}deg)`;
}
}
handleCannonShoot(currentPlayer);
updateBoard();
changePlayer();
}

resetButton.addEventListener("click", resetGame);
pauseButton.addEventListener("click", pauseGame);
resumeButton.addEventListener("click", resumeGame);
Expand Down Expand Up @@ -828,9 +722,30 @@ function shootBullet(row, column, bulletDirection) {

moveBullet(location, row, column, bulletDirection);
}

function moveBullet(location, row, column, bulletDirection) {
// Clear previous animation classes
bulletDiv.classList = "bullet";

// Apply the appropriate animation class based on the bullet direction
switch (bulletDirection) {
case "right":
bulletDiv.classList.add("dirBulletRightAnime");
break;
case "left":
bulletDiv.classList.add("dirBulletLeftAnime");
break;
case "up":
bulletDiv.classList.add("dirBulletUpAnime");
break;
case "down":
bulletDiv.classList.add("dirBulletDownAnime");
break;
default:
break;
}

setTimeout(() => {
// console.log(bulletDirection);
let newRow = row;
let newColumn = column;
switch (bulletDirection) {
Expand All @@ -846,7 +761,6 @@ function moveBullet(location, row, column, bulletDirection) {
case "down":
newRow++;
break;

default:
break;
}
Expand All @@ -863,15 +777,11 @@ function moveBullet(location, row, column, bulletDirection) {
location,
currentPlayer
);
// location.removeChild(bulletDiv);
// isBulletMoving = false;
// changePlayer();
return;
} else {
newBox.appendChild(bulletDiv);
location = newBox;
isBulletMoving = true;
// console.log(bulletDirection);
moveBullet(location, newRow, newColumn, bulletDirection);
}
} else {
Expand Down Expand Up @@ -1057,4 +967,4 @@ function rotateDirBullet() {
bulletDiv.style.transform = "rotate(180deg)";
break;
}
}
}

0 comments on commit b582f29

Please sign in to comment.