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

Added 4 button pad control to play the game on screen #103

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
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
104 changes: 57 additions & 47 deletions app.js
Original file line number Diff line number Diff line change
Expand Up @@ -790,8 +790,8 @@ document.addEventListener("DOMContentLoaded", () => {
1,
];
// 0 - pac-dots
// 1 - wall
// 2 - ghost-lair
// 1 - wl
// 2 - ghost-lairal
// 3 - power-pellet
// 4 - empty

Expand Down Expand Up @@ -835,51 +835,50 @@ document.addEventListener("DOMContentLoaded", () => {
// console.log(getCoordinates(pacmanCurrentIndex))

// set pacman velocity
function setPacmanVelocity(e) {
switch (e.keyCode) {
case 37:
if (
pacmanCurrentIndex % width !== 0 &&
!squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
!squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair")
) {
pacmanVelocity.y = 0;
pacmanVelocity.x = 1;
}
break;
case 38:
if (
pacmanCurrentIndex - width >= 0 &&
!squares[pacmanCurrentIndex - width].classList.contains("wall") &&
!squares[pacmanCurrentIndex - width].classList.contains("ghost-lair")
) {
pacmanVelocity.y = 0;
pacmanVelocity.x = -1;
}
break;
case 39:
if (
pacmanCurrentIndex % width < width - 1 &&
!squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
!squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair")
) {
pacmanVelocity.y = 1;
pacmanVelocity.x = 0;
}
break;
case 40:
if (
pacmanCurrentIndex + width < width * width &&
!squares[pacmanCurrentIndex + width].classList.contains("wall") &&
!squares[pacmanCurrentIndex + width].classList.contains("ghost-lair")
) {
pacmanVelocity.y = -1;
pacmanVelocity.x = 0;
}
break;
//changed some parameters and if / else conditions
function setPacmanVelocity(key, button) {
let keyPressed = key;
let buttonPressed = button;

//check wich key or button got pressed
if ( //left
(keyPressed == 37 || buttonPressed == "left") &&
pacmanCurrentIndex % width !== 0 &&
!squares[pacmanCurrentIndex - 1].classList.contains("wall") &&
!squares[pacmanCurrentIndex - 1].classList.contains("ghost-lair")
) {
pacmanVelocity.y = 0;
pacmanVelocity.x = 1;
}
else if ( //up
(keyPressed == 38 || buttonPressed == "up") &&
pacmanCurrentIndex - width >= 0 &&
!squares[pacmanCurrentIndex - width].classList.contains("wall") &&
!squares[pacmanCurrentIndex - width].classList.contains("ghost-lair")
) {
pacmanVelocity.y = 0;
pacmanVelocity.x = -1;
}
else if ( //right
(keyPressed == 39 || buttonPressed == "right") &&
pacmanCurrentIndex % width < width - 1 &&
!squares[pacmanCurrentIndex + 1].classList.contains("wall") &&
!squares[pacmanCurrentIndex + 1].classList.contains("ghost-lair")
) {
pacmanVelocity.y = 1;
pacmanVelocity.x = 0;
}
else if ( //down
(keyPressed == 40 || buttonPressed == "down") &&
pacmanCurrentIndex + width < width * width &&
!squares[pacmanCurrentIndex + width].classList.contains("wall") &&
!squares[pacmanCurrentIndex + width].classList.contains("ghost-lair")
) {
pacmanVelocity.y = -1;
pacmanVelocity.x = 0;
}
checkForGameOver();
console.log(pacmanVelocity, e.keyCode);
//console.log(pacmanVelocity, e.keyCode);
}

//move pacman
Expand Down Expand Up @@ -1082,9 +1081,20 @@ document.addEventListener("DOMContentLoaded", () => {
document.removeEventListener("keydown", startGame);
//remove start screen
document.getElementById("start-screen").style.display = "none";
//set pacman velocity and enable movement
document.addEventListener("keyup", setPacmanVelocity);
//check if the moviment is being made by the pad

//set pacman velocity
//get key pressed
document.addEventListener("keyup", (event) => { setPacmanVelocity(event.keyCode, "") });

//get on-screen button pressed
document.querySelectorAll(".pad-button").forEach(button => {
button.onclick = function (e) {
setPacmanVelocity(0, this.id);
}
});
movePacman();

// move the Ghosts randomly
ghosts.forEach((ghost) => moveGhost(ghost));
}
Expand Down
70 changes: 47 additions & 23 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,26 +1,50 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>PacMan</title>
<link rel="stylesheet" href="styles.css" />
<script src="app.js" charset="utf-8"></script>
</head>
<body>
<div class="overlay-screen" id="start-screen">
<h1>PACMAN</h1>
<h2 id="start-msg">Press ENTER to start</h2>
<h2>Use arrow keys to move</h2>

<head>
<meta charset="utf-8" />
<title>PacMan</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="pad-controller.css" />
<script src="app.js" charset="utf-8"></script>
</head>

<body>
<div class="overlay-screen" id="start-screen">
<h1>PACMAN</h1>
<h2 id="start-msg">Press ENTER to start</h2>
<h2>Use arrow keys to move</h2>
</div>
<div class="game-container">
<div class="grid"></div>

<!--PAD CONTROLLER-->
<div id="pad-controller">
<button id="up" class="pad-button">
<h4> &#8593;</h4>
</button>
<div class="left-right">
<button id="left" class="pad-button">
<h4> &#8592;</h4>
</button>
<button id="right" class="pad-button">
<h4> &#8594;</h4>
</button>
</div>
<button id="down" class="pad-button">
<h4>&#8595;</h4>
</button>
</div>
<div class="game-container">
<div class="grid"></div>
<h2>Score:<span id="score">0</span></h2>
</div>
<div class="overlay-screen" id="game-over-screen">
<span>GAME OVER!</span>
</div>
<div class="overlay-screen" id="you-won-screen">
<span>YOU WON!</span>
</div>
</body>
</html>
<!--/PAD CONTROLLER-->

<h2>Score:<span id="score">0</span></h2>
</div>
<div class="overlay-screen" id="game-over-screen">
<span>GAME OVER!</span>
</div>
<div class="overlay-screen" id="you-won-screen">
<span>YOU WON!</span>
</div>
</body>

</html>
40 changes: 40 additions & 0 deletions pad-controller.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
#pad-controller {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
}

.pad-button {
color: rgb(1, 17, 17);
text-decoration: none;
user-select: none;
border-radius: 100%;
}

.pad-button h4 {
padding: 10px;
}

#up {
background-color: #ecdb33;
}

#down {
background-color: #3cdb4e;
}

#left {
background-color: #40ccd0;
margin-right: 15px;
}

#right {
background-color: #d04242;
margin-left: 15px;
}

.left-right {
display: flex;
flex-direction: row;
}
3 changes: 2 additions & 1 deletion styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ body {
background-color: rgb(247, 232, 22);
border-radius: 10px;
}

h2 {
color: white;
font-weight: normal;
Expand Down Expand Up @@ -188,4 +189,4 @@ h2 {
99% {
opacity: 0;
}
}
}