├── assets
├── bike.png
├── goat.png
├── leaf.png
└── road.jpg
├── index.html
├── script.js
└── style.css
/assets/bike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SarbudeenDeveloper/GoatGame/9cb8be5b33a84ae6592a4fa13be968ed203fcb1b/assets/bike.png
--------------------------------------------------------------------------------
/assets/goat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SarbudeenDeveloper/GoatGame/9cb8be5b33a84ae6592a4fa13be968ed203fcb1b/assets/goat.png
--------------------------------------------------------------------------------
/assets/leaf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SarbudeenDeveloper/GoatGame/9cb8be5b33a84ae6592a4fa13be968ed203fcb1b/assets/leaf.png
--------------------------------------------------------------------------------
/assets/road.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SarbudeenDeveloper/GoatGame/9cb8be5b33a84ae6592a4fa13be968ed203fcb1b/assets/road.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Goat Game
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
Score: 0
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const goat = document.getElementById('goat');
2 | const leaf = document.getElementById('leaf');
3 | const bike = document.getElementById('bike');
4 | const scoreDisplay = document.getElementById('score');
5 | let score = 0;
6 | let goatPosition = 125; // Starting position of the goat
7 | let gameInterval;
8 | let gameSpeed = 5; // Speed of object movement
9 |
10 | document.addEventListener('keydown', (event) => {
11 | if (event.key === 'ArrowLeft' && goatPosition > 0) {
12 | goatPosition -= 20;
13 | } else if (event.key === 'ArrowRight' && goatPosition < 250) {
14 | goatPosition += 20;
15 | }
16 | goat.style.left = `${goatPosition}px`;
17 | });
18 |
19 | function startGame() {
20 | // Place initial objects randomly
21 | resetObject(leaf, 'leaf');
22 | resetObject(bike, 'bike');
23 |
24 | gameInterval = setInterval(() => {
25 | moveObject(leaf, 'leaf');
26 | moveObject(bike, 'bike');
27 | checkCollision();
28 | }, 20);
29 | }
30 |
31 | function moveObject(object, type) {
32 | let objectTop = parseInt(window.getComputedStyle(object).getPropertyValue('top'));
33 |
34 | if (objectTop >= 600) { // If object goes off the screen, reset it
35 | resetObject(object, type);
36 | } else {
37 | object.style.top = `${objectTop + gameSpeed}px`;
38 | }
39 | }
40 |
41 | function resetObject(object, type) {
42 | object.style.top = '-50px'; // Start off screen at the top
43 | object.style.left = `${Math.floor(Math.random() * 270)}px`; // Random X position
44 | }
45 |
46 | function checkCollision() {
47 | let goatRect = goat.getBoundingClientRect();
48 | let leafRect = leaf.getBoundingClientRect();
49 | let bikeRect = bike.getBoundingClientRect();
50 |
51 | // Check collision with leaf
52 | if (goatRect.left < leafRect.right &&
53 | goatRect.right > leafRect.left &&
54 | goatRect.top < leafRect.bottom &&
55 | goatRect.bottom > leafRect.top) {
56 | score++;
57 | scoreDisplay.textContent = score;
58 | resetObject(leaf, 'leaf');
59 | }
60 |
61 | // Check collision with bike
62 | if (goatRect.left < bikeRect.right &&
63 | goatRect.right > bikeRect.left &&
64 | goatRect.top < bikeRect.bottom &&
65 | goatRect.bottom > bikeRect.top) {
66 | clearInterval(gameInterval);
67 | alert('Game Over! Your Score: ' + score);
68 | window.location.reload();
69 | }
70 | }
71 |
72 | startGame();
73 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | overflow: hidden;
4 | background-color: #f0f0f0;
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 | height: 100vh;
9 | }
10 |
11 | .game-area {
12 | position: relative;
13 | width: 300px;
14 | height: 600px;
15 | border: 5px solid #333;
16 | overflow: hidden;
17 | background-color: #222;
18 | }
19 |
20 | .road {
21 | position: absolute;
22 | width: 100%;
23 | height: 100%;
24 | /* background-image: linear-gradient(to bottom, #444 10%, #555 90%);
25 | animation: moveRoad 1s linear infinite; */
26 | background-size: 100% 100%;
27 | background-image: url("./assets/road.jpg");
28 | }
29 |
30 | /* @keyframes moveRoad {
31 | 0% { background-position-y: 0; }
32 | 100% { background-position-y: 100%; }
33 | } */
34 |
35 | .goat {
36 | position: absolute;
37 | width: 50px;
38 | height: 80px;
39 | /* background-color: blue; */
40 | bottom: 20px;
41 | left: 125px;
42 | border-radius: 50%;
43 | display: flex;
44 | }
45 |
46 | .goat img {
47 | transform: scale(2);
48 | }
49 |
50 | .object {
51 | position: absolute;
52 | width: 70px;
53 | height: 150px;
54 | top: -50px; /* Start off screen */
55 | }
56 |
57 | .leaf {
58 | /* background-color: gold; */
59 | border-radius: 50%;
60 | display: flex;
61 | }
62 |
63 | .bike {
64 | /* background-color: red; */
65 | border-radius: 10%;
66 | display: flex;
67 | }
68 |
69 | .score {
70 | font-size: 20px;
71 | margin-top: 20px;
72 | color: white;
73 | background-color: #333;
74 | padding: 5px 10px;
75 | }
76 |
--------------------------------------------------------------------------------