Skip to content

Commit 8c30769

Browse files
Jayanti2919Jayanti2919
authored
Merge pull request #64 from shivpreet16/main
Add HTML+CSS game similar to Google T-rex
2 parents 1162136 + 5dfcf2c commit 8c30769

File tree

5 files changed

+324
-0
lines changed

5 files changed

+324
-0
lines changed

‎Keto Mario/assets/cactus.png

43.9 KB
Loading

‎Keto Mario/assets/mario.png

16.7 KB
Loading

‎Keto Mario/assets/stars.png

14.8 KB
Loading

‎Keto Mario/index.html

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Keto Mario</title>
10+
</head>
11+
12+
<body>
13+
<div class="title">
14+
<h1>keto mario</h1>
15+
</div>
16+
<div class="score">
17+
score :
18+
</div>
19+
<div class="wrapper">
20+
<div class="game">
21+
<img id="img1" src="./assets/stars.png">
22+
<img id="img2" src="./assets/stars.png">
23+
<img src="./assets/mario.png" class="player" />
24+
<img src="./assets/cactus.png" class="block" />
25+
26+
<!-- </div> -->
27+
<!-- <div class="block">
28+
</div> -->
29+
</div>
30+
<div class="end"><a href="javascript:location.reload(true)">
31+
<p>PLAY</p>
32+
</a>
33+
</div>
34+
</div>
35+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
36+
integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w=="
37+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
38+
<script>
39+
const player = document.querySelector('.player');
40+
const block = document.querySelector('.block');
41+
const score = document.querySelector('.score');
42+
const game = document.querySelector('.game');
43+
const end = document.querySelector('.end');
44+
const stars1 = document.querySelector('#img1');
45+
const stars2 = document.querySelector('#img2');
46+
47+
const t1 = new TimelineMax();
48+
49+
start();
50+
51+
window.addEventListener('keydown', (e) => {
52+
if (player.classList.contains('animate')) {
53+
pass;
54+
}
55+
else {
56+
if (e.keyCode === 32) {
57+
player.classList.add('animate');
58+
setTimeout(() => {
59+
player.classList.remove('animate');
60+
}, 500);
61+
}
62+
}
63+
});
64+
65+
const dead = setInterval(() => {
66+
const charTop = parseInt(window.getComputedStyle(player).getPropertyValue('top'));
67+
const charHeight = parseInt(window.getComputedStyle(player).getPropertyValue('height'));
68+
const blo = parseInt(window.getComputedStyle(block).getPropertyValue('left'));
69+
// const charRight = parseInt(window.getComputedStyle(player).getPropertyValue('right'));
70+
const charLeft = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
71+
72+
// console.log(charTop, blo);
73+
if (blo >= charLeft && blo <= charLeft + 20 && charTop >= 350) {
74+
75+
// game.classList.add('transform');
76+
// end.classList.add('block1');
77+
78+
const endTimeCalculated = calcTime();
79+
80+
setTimeout(() => {
81+
end.style.display = 'block';
82+
score.style.display = 'block';
83+
game.style.display = 'none';
84+
// t1.fromTo(end,.5, {height: '0%'}, {height: '100%', ease: Power2.easeInOut})
85+
}, 2100);
86+
87+
t1.fromTo(game, .5, { height: '100%' }, { height: '0%', ease: Power2.easeInOut })
88+
// .fromTo(game,.5, {y: 0}, {y: -100, ease: Power2.easeInOut})
89+
.fromTo(game, .5, { width: '100%' }, { width: '0%', ease: Power2.easeInOut });
90+
91+
92+
93+
block.style.display = 'none';
94+
stars2.style.display = 'none';
95+
stars1.style.display = 'none';
96+
player.style.display = 'none';
97+
98+
99+
document.querySelector('.score').innerHTML = `Score: ${endTimeCalculated}s`;
100+
101+
}
102+
}, 10);
103+
104+
let i = 0.1;
105+
106+
const level = setInterval(() => {
107+
block.style.animationDuration = `${2 - i}s`;
108+
i += 0.1;
109+
}, 10000)
110+
111+
let j = 5;
112+
113+
const level2 = setInterval(() => {
114+
block.style.width = `${40 + i}px`;
115+
i += 5;
116+
}, 10000)
117+
118+
end.addEventListener('onClick', () => {
119+
location.reload(true);
120+
})
121+
122+
var startTime, endTime;
123+
124+
function start() {
125+
startTime = new Date();
126+
};
127+
128+
function calcTime() {
129+
endTime = new Date();
130+
var timeDiff = endTime - startTime;
131+
timeDiff /= 1000;
132+
return timeDiff;
133+
}
134+
</script>
135+
</body>
136+
137+
138+
</html>

‎Keto Mario/style.css

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik+Moonrocks&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
.wrapper{
10+
height: 100vh;
11+
transform-style: preserve-3d;
12+
width: 100%;
13+
background-color: rgb(1, 4, 12);
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.game{
20+
height: 500px;
21+
width: 1200px;
22+
margin-top: 5em;
23+
border: 2px solid black;
24+
background-color: rgb(230, 230, 230);
25+
position: relative;
26+
display: flex;
27+
transition: 1s ease;
28+
}
29+
30+
.transform{
31+
transform: perspective(1300px) rotateY(20deg) translateX(-200px) translateZ(310px) scale(0.5);
32+
}
33+
34+
#img1{
35+
position: absolute;
36+
object-fit: fill;
37+
opacity: 0.5;
38+
width: 60%;
39+
/* transform: translateY(-150px) scale(0.7); */
40+
}
41+
42+
#img2{
43+
position: absolute;
44+
object-fit: fill;
45+
opacity: 0.5;
46+
width: 60%;
47+
right:0;
48+
/* transform: translateY(-150px) scale(0.7); */
49+
}
50+
51+
.player{
52+
height: 80px;
53+
width: 20px;
54+
/* background-color: black; */
55+
bottom: 0;
56+
left: 160px;
57+
position: absolute;
58+
z-index: 1;
59+
}
60+
61+
.animate{
62+
animation: player 0.5s linear;
63+
}
64+
65+
.block{
66+
height: 40px;
67+
width: 40px;
68+
/* background-color: aqua; */
69+
bottom: 0;
70+
right:0;
71+
position: absolute;
72+
animation: blocks 2s infinite linear;
73+
z-index: 1;
74+
transform: scale(2);
75+
}
76+
77+
@keyframes blocks {
78+
from{
79+
right: 0%;
80+
}
81+
to{
82+
right: 100%;
83+
}
84+
}
85+
86+
@keyframes player {
87+
0%{
88+
bottom: 0em;
89+
}
90+
30%{
91+
bottom: 5em;
92+
93+
}
94+
70%{
95+
96+
bottom: 5em;
97+
}
98+
100%{
99+
bottom: 0em;
100+
}
101+
}
102+
103+
.end{
104+
color: aliceblue;
105+
display: flex;
106+
flex-direction: column;
107+
justify-content: center;
108+
align-items: center;
109+
/* transform: translateX(-170px); */
110+
display: none;
111+
transform-style: preserve-3d;
112+
transition: 0.5s ease;
113+
border-radius: 2px;
114+
cursor: pointer;
115+
}
116+
117+
.block1{
118+
display: block;
119+
animation: move 1s ease linear forwards;
120+
/* animation-delay: 1s; */
121+
}
122+
123+
@keyframes move {
124+
form{
125+
right: 0;
126+
}
127+
to{
128+
right: 10px;
129+
}
130+
}
131+
132+
.end:hover{
133+
background-color: aliceblue;
134+
}
135+
136+
.end a:hover{
137+
color: black;
138+
139+
}
140+
141+
.end p{
142+
font-family: 'Press Start 2P', cursive;
143+
margin: 5px;
144+
padding: 3px;
145+
font-size: 2rem;
146+
}
147+
148+
.end a{
149+
text-decoration: none;
150+
color: aliceblue;
151+
transition: 1s ease;
152+
}
153+
154+
155+
/* mediaqueries for 600 px> */
156+
157+
.title{
158+
display: flex;
159+
position: absolute;
160+
color: aliceblue;
161+
z-index: 10;
162+
width: 100%;
163+
justify-content: center;
164+
text-transform: uppercase;
165+
height: 20vh;
166+
align-items: center;
167+
/* background-color: rebeccapurple; */
168+
font-family: 'Rubik Moonrocks', serif;
169+
letter-spacing: 10px;
170+
line-height: 3em;
171+
font-size: 3em;
172+
}
173+
174+
.score{
175+
position: absolute;
176+
color: aliceblue;
177+
z-index: 10;
178+
height: 40vh;
179+
margin-top: 60vh;
180+
font-size: 1.5rem;
181+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
182+
text-transform: uppercase;
183+
width: 100%;
184+
text-align: center;
185+
display: none;
186+
}

0 commit comments

Comments
 (0)