Skip to content

Commit

Permalink
updated-the-UI
Browse files Browse the repository at this point in the history
  • Loading branch information
rishiofficial committed Oct 25, 2023
1 parent 881abce commit 205bb84
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 74 deletions.
52 changes: 15 additions & 37 deletions Games/Snake_Game/index.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<<<<<<< HEAD
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
=======

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
>>>>>>> b3f6e00fb45a5f70e994daf85f3b2e5d39bad8ec
<title>Snake Game</title>
<link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon">
<!-- external css -->
<<<<<<< HEAD
<link rel="stylesheet" href="./style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>

<title>Snake Game</title>
</head>

<body>
<div class="header">

<a href="https://kunjgit.github.io/GameZone/"
><i style="color: white" class="fas fa-home home-icon"></i
></a>
<h1 class="heading">Snake Game</h1>
</div>
<div class="body">
<button onclick="instructions()">Instructions</button>
<div id="scoreBox">Score: 0</div>
<div id="HiScore">HiScore: 0</div>
<div><button onClick="easy()">Easy</button></div>
<div id="board"></div>
</div>
</body>
<script src="./script.js"></script>
</html>
=======
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="./style.css">
</head>

<body>
<div style=" text-align: left;
font-size: 30px;
padding: 5px;
border: none;
background: #0c4522; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:white;" class="fas fa-home home-icon"></i></a><h1 class="heading">Snake Game</h1></div>
<div class="body">
<a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a>
<button onclick="instructions()">Instructions</button>
<div id="scoreBox">Score: 0</div>
<div id="HiScore">HiScore: 0</div>
<div id="board"></div>
</div>

</body>
<script src="./script.js"></script>

</html>
>>>>>>> b3f6e00fb45a5f70e994daf85f3b2e5d39bad8ec
Empty file removed Games/Snake_Game/index.js
Empty file.
6 changes: 2 additions & 4 deletions Games/Snake_Game/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function instructions(){
//Game requirements
let inputDir={x:0,y:0}
let direction={x:0,y:0};
// let speed=10;
let speed=10;
let score=0;
let lastPaintTime=0;
let snakeArr=[{x:Math.round(2+16*Math.random()),y:Math.round(2+16*Math.random())}];
Expand All @@ -18,9 +18,7 @@ let musicSound=new Audio('./assets/music.mp3')

//game level

function easy(){
let speed = 10
}


//Game Function
function isCollide(snakeArr){
Expand Down
203 changes: 170 additions & 33 deletions Games/Snake_Game/style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Prosto+One&display=swap');

* {
/* * {
margin: 0;
padding: 0;
}
Expand All @@ -17,10 +17,10 @@ button{
color: darkgreen;
border: 2px solid green;
background: none;

}
button {
position: absolute;
top: 5rem;
top: 9rem;
left: 42rem;
padding: 0.5rem 1rem;
font-size: 2rem;
Expand Down Expand Up @@ -85,49 +85,186 @@ button:hover {
}
.food{
<<<<<<< HEAD
background-image:linear-gradient(yellow,orange);
border: .25vmin solid black;
border-radius:50% ;
}
} */

/* body {
font-family: 'Courier New', Courier, monospace;
=======
background: brown;
border: none;
border-radius:8px;
}
/* Path: Games/Snake_Game/script.js */


h1 {
margin: 0.5rem;
/* *{
padding: 0;
margin: 0;
}
body{
background: url(bg.jpg);
background-size: 100vw 100vh;
}
.body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#board{
background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167));
width: 90vmin;
height: 92vmin;
border: 2px solid black;
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(18, 1fr)
}
#scoreBox{
top: 9px;
position: absolute;
right: 200px;
font-weight: bold;
font-size: 40px;
}
#Hiscore{
top: 12px;
position: absolute;
right: 200px;
font-weight: bold;
font-size: 40px;
}
.head{
background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129));
border: 2px solid rgb(34, 4, 34);
transform: scale(1.02);
border-radius: 9px;
}
p {
margin: 0.5rem;
.snake{
background-color: purple;
border: .25vmin solid white;
border-radius: 12px;
}
.heading{
color: aliceblue;
margin: auto;
display: inline;
>>>>>>> b3f6e00fb45a5f70e994daf85f3b2e5d39bad8ec
font-size: 2rem;
margin-left: 41%;
.food{
background: linear-gradient(red, purple);
border: .25vmin solid black;
border-radius: 8px;
}
*/


a{
position: relative;
left: -10vw;
top: -25vh;
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #2d2929;
color: #fff;
}

/* Header Styles */
.header {
background-color: #333; /* Dark background color */
color: #fff; /* Text color */
padding: 10px 20px;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.home-icon {
font-size: 24px;
color: white;
text-decoration: none;
margin-right: 10px;
}

.heading {
font-size: 30px;
color: white;

margin: 25px;
}

/* Game Interface Styles */
.body {
text-align: center;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;

}

button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
margin-right: 10px;
position: absolute;
top: 20px;
right: 20px;
}

button:hover {
cursor: pointer;
filter: drop-shadow(2px, 2px, 2px black);
background-color: black;
color: white;
transition: .8s ease;
box-shadow: 5px 5px 5px rgb(88, 88, 92);
}

#scoreBox {
font-size: 24px;
margin-top: 20px;
position: absolute;
display: flex;
right: 20px;
}
#HiScore {
font-size: 24px;
margin-top: 50px;
position: absolute;
display: flex;
right: 20px;
}

#board{
background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167));
width: 90vmin;
height: 92vmin;
border: 2px solid black;
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(18, 1fr);
justify-content: center;

}
<<<<<<< HEAD
p{
margin: 0.5rem;
} */
=======


.head{
background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129));
border: 2px solid rgb(34, 4, 34);
transform: scale(1.02);
border-radius: 9px;
}

.snake{
background-color: purple;
border: .25vmin solid white;
border-radius: 12px;
}

>>>>>>> b3f6e00fb45a5f70e994daf85f3b2e5d39bad8ec
.food{
background: linear-gradient(red, purple);
border: .25vmin solid black;
border-radius: 8px;
}
/* Add your game board styles here */

0 comments on commit 205bb84

Please sign in to comment.