Skip to content

Commit

Permalink
added game instructions and added improvement in UI/UX
Browse files Browse the repository at this point in the history
  • Loading branch information
ashish4kmax authored Apr 3, 2024
1 parent 9e0265c commit 2074321
Showing 1 changed file with 209 additions and 61 deletions.
270 changes: 209 additions & 61 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,88 @@
cursor: pointer;
}

#game-instructions {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
border-radius: 7px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

#game-instructions h3 {
margin-top: 0;
}

#game-instructions ul {
list-style-type: none;
padding-left: 0;
}

#game-instructions li {
margin-bottom: 5px;
}



@keyframes bounce {

0%,
100% {
transform: translateY(0);
/* Initial and final state: no translation */
}

50% {
transform: translateY(-20px);
/* Middle state: translate element upward */
}
}

.my-element {
font-size: 22px;
text-align: center;
animation: bounce 1.2s infinite;
/* Apply animation, repeat infinitely */
}

#heading {
text-align: center;
/* Center align the heading */
}

img {
width: 150px;
/* Optional: Adjust image size as needed */
}

h1 {
margin: 0;
/* Remove default margin to avoid extra space */
}

#player-input {
display: flex;
align-items: center;
justify-content: center;
}

.leaderboard {
font-size: 20px;
position: absolute;
top: 20px;
right: 20px;
background-color: rgb(23, 17, 26);
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgb(23, 17, 26);
animation: fadeInRight;
/* referring directly to the animation's @keyframe declaration */
animation-duration: 2s;
/* don't forget to set a duration! */
}

@media only screen and (max-width: 375px) {

/* Adjust canvas size for mobile devices */
Expand Down Expand Up @@ -93,8 +175,9 @@

h1 {
font-size: 70px;
margin-top: 50px;
margin-top: 12px;
/* Adjust the margin for the heading */
margin-bottom: 50px;
}

.my-element {
Expand Down Expand Up @@ -125,64 +208,50 @@
text-align: center;
/* Center align the score */
}
}


@keyframes bounce {

0%,
100% {
transform: translateY(0);
/* Initial and final state: no translation */
/* Add margin-top and adjust font-size for the speed levels */
#speed-levels {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
/* Add margin-top */
margin-top: 20px;
margin-bottom: 2%;
}

50% {
transform: translateY(-20px);
/* Middle state: translate element upward */
#speed-levels>button {
font-size: 16px;
/* Adjust font-size */
}
}

.my-element {
font-size: 22px;
text-align: center;
animation: bounce 1.2s infinite;
/* Apply animation, repeat infinitely */
}

#heading {
text-align: center;
/* Center align the heading */
}
#game-instructions {
margin-top: 50px;
/* Add padding to provide space around the content */
}

img {
width: 150px;
/* Optional: Adjust image size as needed */
}
#GI {
text-align: center;
/* Add margin to the left */
margin-top: 20px;
/* Add margin to the top */
font-size: 25px;
}

h1 {
margin: 0;
/* Remove default margin to avoid extra space */
}
#PC {
display: none;
}

#player-input {
display: flex;
align-items: center;
justify-content: center;
}
#MOBILE,
#LVL {
text-align: center;
margin-top: 18px;
/* Add margin between the sections */
}

.leaderboard {
font-size: 20px;
position: absolute;
top: 20px;
right: 20px;
background-color: rgb(23, 17, 26);
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgb(23, 17, 26);
animation: fadeInRight;
/* referring directly to the animation's @keyframe declaration */
animation-duration: 2s;
/* don't forget to set a duration! */
.my-element {
font-size: 20px;
}
}

@media only screen and (max-width: 768px) {
Expand Down Expand Up @@ -212,6 +281,35 @@
ol#leaderboardList li {
margin-bottom: 5px;
}

#game-instructions {
top: 0;
left: 0;
right: 0;
margin: auto;
position: static;
padding: 15px;
background-color: rgb(23, 17, 26);
}

#GI {
text-align: center;
/* Add margin to the left */
margin-top: 20px;
/* Add margin to the top */
font-size: 25px;
}

#PC {
display: none;
}

#MOBILE,
#LVL {
text-align: center;
margin-top: 18px;
/* Add margin between the sections */
}
}


Expand All @@ -223,6 +321,23 @@
margin-bottom: 10px;
/* Adjust the margin bottom as needed */
}

#speed-levels {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}

#speed-levels>button {
margin-top: 1.5%;
font-size: 20px;
margin-bottom: 1.2%;
}

footer {
margin-top: 3.6%;
}
</style>
</head>

Expand All @@ -232,10 +347,46 @@
<h1>Snake Game</h1>
<img class="snake-image" src="./images/snake.gif" alt="snake_animated">
</div>

<!-- Game Instructions -->
<div id="game-instructions">
<h3 id="GI">Game Instructions</h3>
<div id="PC">
<p>PC Controls:</p>
<ul>
<li>Use <strong>arrow keys</strong> to move the snake.</li>
</ul>
</div>
<div id="MOBILE">
<p>Mobile Controls:</p>
<ul>
<li>Swipe <strong>up</strong>, <strong>down</strong>, <strong>left</strong>, or <strong>right</strong>
to
move
the snake.</li>
</ul>
</div>
<div id="LVL">
<p>Level Selection:</p>
<ul>
<li>Click on the <strong>Level 1</strong>, <strong>Level 2</strong>, or <strong>Level 3</strong> buttons
to
adjust the speed.</li>
</ul>
</div>
</div>


<br />
<br />
<br />
<h3 class="my-element" id="start-msg">Click on the box to start playing!!</h3>
<div id="speed-levels">
<button onclick="setSpeed(150)" class="button-73">Level 1</button>
<button onclick="setSpeed(100)" class="button-73">Level 2</button>
<button onclick="setSpeed(50)" class="button-73">Level 3</button>
</div>

<div id="player-input">
<input type="text" id="playerName" placeholder="Enter your name">
<button onclick="savePlayerData()" class="button-73">Submit</button>
Expand All @@ -259,29 +410,26 @@ <h3>Snake Leaderboard</h3>
<ol id="leaderboardList"></ol>
</div>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<footer>
<div class='cr-con'><a href="https://github.com/ashish4kmax">Copyright &copy; 2024 | Made by Ashish</a></div>
</footer>


<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1204.0.min.js"></script>
<script>

// Initialize AWS DynamoDB client
AWS.config.update({
region: 'us-east-1', // Update with your AWS region
accessKeyId: 'AKIAQHEPT6D464V24Y5E', // Update with your AWS access key ID
secretAccessKey: '5JFXbFuU8QEHcBnTHlLLkxwmfYQVcHi6JUU7TAyW' // Update with your AWS secret access key
});

let speed = 100;

function setSpeed(speeds) {
speed = speeds;
}

const docClient = new AWS.DynamoDB.DocumentClient();

// logic part
Expand Down Expand Up @@ -427,7 +575,7 @@ <h3>Snake Leaderboard</h3>
// Start the game when canvas is clicked
canvas.addEventListener('click', function () {
init(); // Initialize game
gameLoop = setInterval(draw, 100); // Start game loop
gameLoop = setInterval(draw, speed); // Start game loop
});

// Swipe controls for touch devices
Expand Down Expand Up @@ -512,7 +660,7 @@ <h3>Snake Leaderboard</h3>
// Show restart button
document.getElementById('restart-button').addEventListener('click', function () {
init(); // Restart the game
gameLoop = setInterval(draw, 100); // Start game loop again
gameLoop = setInterval(draw, speed); // Start game loop again
});

}
Expand Down

0 comments on commit 2074321

Please sign in to comment.