diff --git a/anime_clock/3998853-free-blank-clock-face-printable-download-free-clip-art-free-clip-blank-clock-face-png-516_516_preview.png b/anime_clock/3998853-free-blank-clock-face-printable-download-free-clip-art-free-clip-blank-clock-face-png-516_516_preview.png new file mode 100644 index 0000000..838ccaf Binary files /dev/null and b/anime_clock/3998853-free-blank-clock-face-printable-download-free-clip-art-free-clip-blank-clock-face-png-516_516_preview.png differ diff --git a/anime_clock/export202206140431597870.png b/anime_clock/export202206140431597870.png new file mode 100644 index 0000000..4d4900e Binary files /dev/null and b/anime_clock/export202206140431597870.png differ diff --git a/anime_clock/export202206140530231210.png b/anime_clock/export202206140530231210.png new file mode 100644 index 0000000..bdfc7f5 Binary files /dev/null and b/anime_clock/export202206140530231210.png differ diff --git a/anime_clock/index.html b/anime_clock/index.html new file mode 100644 index 0000000..4c1eaa5 --- /dev/null +++ b/anime_clock/index.html @@ -0,0 +1,25 @@ + + + + + + + + + Clock + + +
+
+
+
+
+
+

click below to change clock appearance

+
+ + +
+
+ + diff --git a/anime_clock/index.js b/anime_clock/index.js new file mode 100644 index 0000000..f94098b --- /dev/null +++ b/anime_clock/index.js @@ -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"; + } \ No newline at end of file diff --git a/anime_clock/style.css b/anime_clock/style.css new file mode 100644 index 0000000..7f568cc --- /dev/null +++ b/anime_clock/style.css @@ -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); +} diff --git a/snake_game/bg.jpg b/snake_game/bg.jpg new file mode 100644 index 0000000..a9e41de Binary files /dev/null and b/snake_game/bg.jpg differ diff --git a/snake_game/css/style.css b/snake_game/css/style.css new file mode 100644 index 0000000..1ea5d2b --- /dev/null +++ b/snake_game/css/style.css @@ -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; +} diff --git a/snake_game/index.html b/snake_game/index.html new file mode 100644 index 0000000..52dffe7 --- /dev/null +++ b/snake_game/index.html @@ -0,0 +1,19 @@ + + + + + + + Snake game + + + + +
+
Score : 0
+
High Score : 0
+
+
+ + + diff --git a/snake_game/js/index.js b/snake_game/js/index.js new file mode 100644 index 0000000..4cc5c93 --- /dev/null +++ b/snake_game/js/index.js @@ -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=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; +} +}); diff --git a/snake_game/music/food.mp3 b/snake_game/music/food.mp3 new file mode 100644 index 0000000..076198c Binary files /dev/null and b/snake_game/music/food.mp3 differ diff --git a/snake_game/music/gameover.mp3 b/snake_game/music/gameover.mp3 new file mode 100644 index 0000000..414bf65 Binary files /dev/null and b/snake_game/music/gameover.mp3 differ diff --git a/snake_game/music/music.mp3 b/snake_game/music/music.mp3 new file mode 100644 index 0000000..f1507af Binary files /dev/null and b/snake_game/music/music.mp3 differ diff --git a/snake_game/snake_face.jpg b/snake_game/snake_face.jpg new file mode 100644 index 0000000..411807e Binary files /dev/null and b/snake_game/snake_face.jpg differ