msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Add files via upload

Browse Source
pull/128/head
rashi arora 3 years ago committed by GitHub
parent cd228d507d
commit a7e6fac5d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 326 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
anime_clock/3998853-free-blank-clock-face-printable-download-free-clip-art-free-clip-blank-clock-face-png-516_516_preview.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
anime_clock/export202206140431597870.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

BIN
anime_clock/export202206140530231210.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

25
anime_clock/index.html
Unescape View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="style.css" />
<script src="index.js"></script>
<title>Clock</title>
</head>
<body>
<div id="clock_container">
<div id="hour" class="overall"></div>
<div id="min" class="overall"></div>
<div id="sec" class="overall"></div>
</div>
<div id="divi">
<p id="para">click below to change clock appearance</p>
<div id="disp">
<button onclick="change()" id="button">click here</button>
<button onclick="change1()" id="button1">click here</button>
</div>
</div>
</body>
</html>

32
anime_clock/index.js
Unescape View File

@ -0,0 +1,32 @@
setInterval(() => {
let d=new Date();
let htime=d.getHours();
let mtime=d.getMinutes();
let stime=d.getSeconds();
let hrotation=30*htime+(0.5*mtime);
let mrotation=6*mtime;
let srotation=6*stime;
document.getElementById("hour").style.transform=`rotate(${hrotation}deg)`;
document.getElementById("min").style.transform=`rotate(${mrotation}deg)`;
document.getElementById("sec").style.transform=`rotate(${srotation}deg)`;
}, 1000);
function change(){
document.body.style.backgroundColor = ' rgb(255, 249, 238)';
document.getElementById("clock_container").style.background="url(export202206140431597870.png) no-repeat";
document.getElementById("clock_container").style.position="relative";
document.getElementById("clock_container").style.backgroundSize="100%"
document.getElementById("hour").style.backgroundColor="#571c13";
document.getElementById("min").style.backgroundColor="#571c13";
document.getElementById("sec").style.backgroundColor="#571c13";
}
function change1(){
document.body.style.backgroundColor = '#e5e5ff';
document.getElementById("clock_container").style.background="url(export202206140530231210.png) no-repeat";
document.getElementById("clock_container").style.position="relative";
document.getElementById("clock_container").style.backgroundSize="100%"
document.getElementById("hour").style.backgroundColor="#120503";
document.getElementById("min").style.backgroundColor="#120503";
document.getElementById("sec").style.backgroundColor="#120503";
}

79
anime_clock/style.css
Unescape View File

@ -0,0 +1,79 @@
#clock_container {
position: relative;
height: 40vw;
width: 40vw;
background: url(3998853-free-blank-clock-face-printable-download-free-clip-art-free-clip-blank-clock-face-png-516_516_preview.png)
no-repeat;
background-size: 100%;
display: flex;
/* align-items: center; */
/* background-position: center; */
margin: auto;
}
.overall {
position: absolute;
background-color: black;
border-radius: 10px;
}
#hour {
width: 2%;
height: 25%;
top: 23%;
left: 48%;
opacity: 0.8;
transform-origin: bottom;
}
#min {
width: 1%;
height: 32%;
top: 18%;
left: 48.5%;
opacity: 0.8;
transform-origin: bottom;
}
#sec {
width: 0.8%;
height: 32%;
top: 18%;
left: 49.1%;
opacity: 0.8;
transform-origin: bottom;
}
#disp {
display: flex;
justify-content: center;
}
#button {
font-size: 1rem;
border: none;
border-radius: 5px;
padding: 1%;
background: rgb(240, 80, 106);
color: white;
cursor: pointer;
margin: 4px;
}
#button:active {
background: coral;
}
#button1 {
font-size: 1rem;
border: none;
border-radius: 5px;
padding: 1%;
background: rgb(83, 80, 240);
color: white;
cursor: pointer;
margin: 4px;
}
#button1:active {
background: rgb(80, 214, 255);
}
#para {
font-size: 1rem;
text-align: center;
}
body {
background: rgb(255, 249, 238);
}

BIN
snake_game/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

42
snake_game/css/style.css
Unescape View File

@ -0,0 +1,42 @@
* {
padding: 0;
margin: 0;
}
body {
background: url("../bg.jpg");
background-color: aqua;
min-height: 100vh;
background-size: 100vw 100vh;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
#board {
/* background: linear-gradient(#0d500d, #bad526); */
background: linear-gradient(#648607, #e2e482);
width: 45vw;
height: 40vw;
border: 2px solid rgb(8, 54, 0);
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(18, 1fr);
}
.head {
background-color: rgb(22, 97, 45);
/* background: url("..\snake_face.jpg"); */
border: 2px solid rgb(212, 255, 119);
border-radius: 10px;
transform: scale(1.02);
}
.snake {
/* background: linear-gradient(rgb(24, 66, 7), yellow); */
background-color: rgb(24, 66, 7);
border: 2px solid rgb(215, 255, 129);
border-radius: 10px;
}
.food {
background: linear-gradient(red, pink);
border: 2px solid rgb(70, 0, 0);
border-radius: 10px;
}

19
snake_game/index.html
Unescape View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Snake game</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" href="snake_face.jpg" />
</head>
<body>
<div class="container">
<div id="score">Score : 0</div>
<div id="h_score">High Score : 0</div>
<div class="board" id="board"></div>
</div>
</body>
<script src="js/index.js"></script>
</html>

129
snake_game/js/index.js
Unescape View File

@ -0,0 +1,129 @@
let inputDir={x:0,y:0};
let food={x:6,y:7};
const foodSound=new Audio('music/food.mp3');
const gameOverSound=new Audio('music/gameover.mp3');
const movesound=new Audio('music/move.mp3');
const musicsound=new Audio('music/music.mp3');
let speed=5;
let score=0;
let snakearr=[{x:13,y:15}]
let LastPaintTime=0;
let hiscoreval=0;
alert("Rules: press arrow keys to move in the field,make sure you dont bump into yourself or the field boundaries and eat more to score more ");
function main(ctime){
window.requestAnimationFrame(main);
// console.log(ctime);
if((ctime-LastPaintTime)/1000<1/speed){
return;
}
LastPaintTime=ctime;
game_engine();
}
function isCollide(snake){
//if the snake bumps into itself
for(let i=1;i<snake.length;i++)
{
if (snake[i].x===snake[0].x && snake[i].y===snake[0].y ){
return true;
}
}
if(snake[0].x>=18 ||snake[0].x<=0 || snake[0].y>=18 ||snake[0].y<=0)
return true;
}
function game_engine(){
//updating the snake array & food
if(isCollide(snakearr)){
gameOverSound.play();
musicsound.pause();
inputDir={x:0,y:0};
alert("game over, press any key to play again!");
snakearr=[{x:13,y:15}]
musicsound.pause();
score=0;
}
if(snakearr[0].y===food.y && snakearr[0].x===food.x){
foodSound.play();
score++;
if(score>=8){
speed=8;
}
if(score>hiscoreval){
hiscoreval=score;
localStorage.setItem('hiscore',JSON.stringify(hiscoreval))
h_score.innerHTML="High Score :"+ hiscoreval;
}
document.getElementById('score').innerHTML="Score : "+score;
snakearr.unshift({x:snakearr[0].x +inputDir.x,y:snakearr[0].y +inputDir.y}) //adding extra chain to the snake's moving dir
let a=2;
let b=16;
food={x:Math.round(a+(b-a)*Math.random()),y:Math.round(a+(b-a)*Math.random())};
}
//moving the snake
for (let i = snakearr.length-2; i >=0; i--) {
snakearr[i+1]={...snakearr[i]};//equal to a new object here(to avoid reference problem and to avoid pointing of objects at a single point)
}
snakearr[0].x +=inputDir.x;
snakearr[0].y +=inputDir.y;
// displaying the snake and food
// snake
document.getElementById("board").innerHTML=" ";
snakearr.forEach((e,index)=>{
snakeElement=document.createElement('div');
snakeElement.style.gridRowStart=e.y;
snakeElement.style.gridColumnStart=e.x;
if(index===0){
snakeElement.classList.add('head');
}
else{
snakeElement.classList.add('snake');
}
board.appendChild(snakeElement);
})
// food
foodElement=document.createElement('div');
foodElement.style.gridRowStart=food.y;
foodElement.style.gridColumnStart=food.x;
foodElement.classList.add('food');
board.appendChild(foodElement);
}
//main logic
let hiscore=localStorage.getItem('h_score');
if(hiscore===null){
localStorage.setItem('hiscore',JSON.stringify(hiscoreval))
}
else{
hiscoreval=JSON.parse(hiscore);
h_score.innerHTML="High Score :"+ hiscoreval;
}
window.requestAnimationFrame(main);
window.addEventListener('keydown',e=>{
inputDir={x:0,y:1} //start
movesound.play();
switch(e.key){
case "ArrowUp":
console.log("ArrowUp")
inputDir.x=0;
inputDir.y=-1;
break;
case "ArrowLeft":
inputDir.x=-1;
inputDir.y=0;
console.log("ArrowLeft")
break;
case "ArrowRight":
inputDir.x=1;
inputDir.y=0;
console.log("ArrowRight")
break;
case "ArrowDown":
inputDir.x=0;
inputDir.y=1;
console.log("ArrowDown")
break;
default:
break;
}
});

BIN
snake_game/music/food.mp3
View File

Binary file not shown.

BIN
snake_game/music/gameover.mp3
View File

Binary file not shown.

BIN
snake_game/music/music.mp3
View File

Binary file not shown.

BIN
snake_game/snake_face.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

Write Preview
Loading…
Cancel
Save