Skip to content

Commit 35c44f1

Browse files
w3cjw3cj
committed
✨ add episode 8
1 parent 22bb034 commit 35c44f1

12 files changed

+286
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎episode_008/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Idea
2+
* A macbook screen.
3+
* The mouse is bonzi.
4+
* Evertime you click, a icon gets added to the desktop
5+
* Rainbow
6+
* If rainbow, battery goes up
7+
* Stick of butter
8+
* Batter goes down 50%
9+
* Bonzi
10+
* If bonzi, battery goes down (clones cost energy!)
11+
12+
## Suggestions
13+
* [ ] OneComputerGuy - Mac Battery lifetime
14+
* [ ] devnode_ - bonzi buddy
15+
* [ ] ChiefMustardo - Clone
16+
* [ ] marc2067 - Radiator
17+
* [ ] SoundOfGaming - Butter
18+
19+
20+
## References
21+
* Using macbook image from: https://themockup.club/wp-content/uploads/2018/01/Mockup-Macbook-Pro-2017-1024x768.jpg

‎episode_008/app.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* eslint-disable prefer-destructuring */
2+
const desktopElement = document.querySelector('.desktop');
3+
const iconsElement = document.querySelector('.desktop-icons');
4+
const batteryElement = document.querySelector('.battery-percent');
5+
const statsElement = document.querySelector('.stats');
6+
const scoreElement = document.querySelector('.score');
7+
const gameOverElement = document.querySelector('.game-over');
8+
const percentElement = document.querySelector('.percent');
9+
10+
const gameState = {
11+
running: true,
12+
batteryPercent: 100,
13+
points: 0,
14+
icons: 0,
15+
};
16+
17+
const images = [{
18+
points: 10,
19+
batteryCost: -10,
20+
url: 'butter.png',
21+
}, {
22+
points: 100,
23+
batteryCost: -5,
24+
url: 'bonzi-cursor.png',
25+
}, {
26+
points: 200,
27+
batteryCost: 20,
28+
url: 'rainbow.png',
29+
}];
30+
31+
iconsElement.addEventListener('click', (e) => {
32+
console.log(e);
33+
if (!gameState.running) return;
34+
const imageElement = document.createElement('img');
35+
imageElement.classList.add('desktop-icon');
36+
const value = Math.random();
37+
gameState.icons += 1;
38+
let image = images[1];
39+
if (value <= 0.2) {
40+
image = images[2];
41+
} else if (value <= 0.6) {
42+
image = images[0];
43+
}
44+
gameState.batteryPercent += image.batteryCost;
45+
gameState.points += image.points;
46+
imageElement.src = image.url;
47+
imageElement.style.left = (e.layerX / iconsElement.clientWidth) * 100 + '%';
48+
imageElement.style.top = (e.layerY / iconsElement.clientHeight) * 100 + '%';
49+
iconsElement.append(imageElement);
50+
51+
if (gameState.batteryPercent > 100) {
52+
gameState.batteryPercent = 100;
53+
}
54+
55+
const percent = gameState.batteryPercent + '%';
56+
batteryElement.style.width = percent;
57+
percentElement.textContent = percent;
58+
59+
if (gameState.batteryPercent <= 20) {
60+
batteryElement.style.background = 'red';
61+
desktopElement.style.filter = 'brightness(40%)';
62+
63+
} else {
64+
batteryElement.style.background = '';
65+
desktopElement.style.filter = '';
66+
}
67+
68+
scoreElement.textContent = gameState.points;
69+
70+
if (gameState.batteryPercent <= 0) {
71+
gameState.running = false;
72+
gameOverElement.style.display = 'flex';
73+
statsElement.textContent = `You scored: ${gameState.points} points. You created ${gameState.icons} icons.`;
74+
desktopElement.style.filter = '';
75+
}
76+
});

‎episode_008/battery.png

1.4 KB
Loading

‎episode_008/bonzi-cursor.png

1.88 KB
Loading

‎episode_008/butter.png

3.76 KB
Loading

‎episode_008/index.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Bonzi MacBook Clicker</title>
8+
<link rel="preconnect" href="https://fonts.gstatic.com">
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="styles.css">
11+
</head>
12+
<body>
13+
<main>
14+
<div class="macbook">
15+
<img class="macbook-image" src="macbook.png">
16+
<div class="desktop">
17+
<img class="desktop-background" src="https://i.pinimg.com/originals/20/5f/df/205fdf65eef6a30cb23365d6230f2d3d.jpg">
18+
<div class="desktop-navbar">
19+
<img class="desktop-navbar-logo" src="https://findicons.com/files/icons/734/phuzion/128/apple.png">
20+
<div class="desktop-navbar-menu-items">
21+
<div class="menu-item" style="font-weight: bold;">Finder</div>
22+
<div class="menu-item">File</div>
23+
<div class="menu-item">Edit</div>
24+
<div class="menu-item">Window</div>
25+
<div class="menu-item">View</div>
26+
<div class="menu-item">Help</div>
27+
</div>
28+
<div class="desktop-navbar-status">
29+
<div class="desktop-navbar-status-battery">
30+
<img src="battery.png">
31+
<div class="battery-percent-container">
32+
<div class="battery-percent"></div>
33+
</div>
34+
</div>
35+
<div class="status-item"><span class="percent">100%</span></div>
36+
<div class="status-item">Score: <span class="score">0</span></div>
37+
</div>
38+
</div>
39+
<div class="desktop-icons"></div>
40+
<div class="game-over">
41+
<h3>GAME OVER</h3>
42+
<img src="low-battery.png">
43+
<span class="stats"></span>
44+
</div>
45+
</div>
46+
</div>
47+
</main>
48+
<script type="module" src="app.js"></script>
49+
</body>
50+
</html>

‎episode_008/low-battery.png

7.55 KB
Loading

‎episode_008/macbook.jpg

22.6 KB
Loading

‎episode_008/macbook.png

23.5 KB
Loading

‎episode_008/rainbow.png

5.83 KB
Loading

‎episode_008/styles.css

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: #DDDDDD;
9+
width: 100vw;
10+
height: 100vh;
11+
overflow: hidden;
12+
cursor: not-allowed;
13+
font-family: 'Roboto', sans-serif;
14+
}
15+
16+
main {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
width: 100%;
21+
height: 100%;
22+
position: relative;
23+
}
24+
25+
.macbook {
26+
width: 100vmin;
27+
position: relative;
28+
}
29+
30+
.macbook-image {
31+
width: 100%;
32+
height: auto;
33+
}
34+
35+
.desktop {
36+
position: absolute;
37+
top: 3vmin;
38+
left: 12vmin;
39+
width: 76.5%;
40+
height: 83%;
41+
cursor: url(bonzi-cursor.png) 5 5, pointer;
42+
transition: filter 500ms;
43+
}
44+
45+
.desktop-background {
46+
position: absolute;
47+
width: 100%;
48+
height: 100%;
49+
top: 0;
50+
}
51+
52+
.desktop-navbar {
53+
position: absolute;
54+
width: 100%;
55+
height: 7%;
56+
top: 0;
57+
background: linear-gradient(#F1F1F1, #C0BFBB);
58+
display: flex;
59+
align-items: center;
60+
font-size: 2vmin;
61+
user-select: none;
62+
}
63+
64+
.desktop-icons {
65+
position: absolute;
66+
width: 100%;
67+
height: 93%;
68+
top: 7%;
69+
overflow: hidden;
70+
}
71+
72+
.desktop-navbar-logo {
73+
height: 80%;
74+
}
75+
76+
.desktop-navbar-menu-items {
77+
display: flex;
78+
}
79+
80+
.menu-item {
81+
margin: 0 1vmin;
82+
}
83+
84+
.desktop-navbar-status {
85+
flex-grow: 1;
86+
display: flex;
87+
justify-content: flex-end;
88+
align-items: center;
89+
}
90+
91+
.desktop-navbar-status-battery {
92+
height: 2vmin;
93+
position: relative;
94+
}
95+
96+
.desktop-navbar-status-battery img {
97+
height: 100%;
98+
width: auto;
99+
}
100+
101+
.battery-percent-container {
102+
height: 65%;
103+
width: 73.5%;
104+
position: absolute;
105+
top: 19%;
106+
left: 11%;
107+
}
108+
109+
.battery-percent {
110+
background: #2FBF41;
111+
height: 100%;
112+
width: 100%;
113+
}
114+
115+
.status-item {
116+
margin: 0 1vmin;
117+
}
118+
119+
.desktop-icon {
120+
position: absolute;
121+
width: 5vmin;
122+
height: auto;
123+
}
124+
125+
.game-over {
126+
display: none;
127+
position: absolute;
128+
width: 100%;
129+
height: 100%;
130+
background: black;
131+
justify-content: center;
132+
align-items: center;
133+
color: white;
134+
flex-direction: column;
135+
}
136+
137+
.game-over img {
138+
width: 40%;
139+
}

0 commit comments

Comments
 (0)