Skip to content

Commit 7ee646b

Browse files
ExplorInfinityExplorInfinity
authored
Add files via upload
1 parent 817c065 commit 7ee646b

File tree

7 files changed

+548
-43
lines changed

7 files changed

+548
-43
lines changed

‎index.html‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,32 @@
99
<link rel="stylesheet" href="stylesheets/savedSetups.css">
1010
</head>
1111
<body>
12-
1312
<div id="loadingScreen" class="clouds-original">
14-
<h1 id="title">Speed Ball</h1>
13+
<h1 id="title">
14+
Speed Ball
15+
16+
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
17+
<defs>
18+
<radialGradient id="glowGradient1" cx="50%" cy="50%" r="50%">
19+
<stop offset="0%" style="stop-color: hsl(var(--_hue, 330), 100%, 85%); stop-opacity:1" />
20+
<stop offset="80%" style="stop-color:hsl(var(--_hue, 330), 100%, 50%); stop-opacity:0.5" />
21+
</radialGradient>
22+
</defs>
23+
<circle cx="100" cy="100" r="80" fill="url(#glowGradient1)" class="glowBall"/>
24+
</svg>
25+
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
26+
<defs>
27+
<radialGradient id="glowGradient" cx="50%" cy="50%" r="50%">
28+
<stop offset="0%" style="stop-color: hsl(var(--_hue, 330), 100%, 90%); stop-opacity:1" />
29+
<stop offset="80%" style="stop-color: hsl(var(--_hue, 330), 100%, 50%); stop-opacity:1" />
30+
</radialGradient>
31+
</defs>
32+
<polygon points="100,10 120,75 190,75 130,115 150,180 100,140 50,180 70,115 10,75 80,75"
33+
fill="url(#glowGradient)" class="glowStar" />
34+
</svg>
35+
36+
37+
</h1>
1538
<p id="loadingText">Loading</p>
1639
<button id="play">Start Game</button>
1740
</div>

‎js/ex-background.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { WorleyNoise } from "./worleyNoise.js";
2+
3+
export class Background {
4+
constructor(game, context) {
5+
this.game = game;
6+
this.context = context;
7+
this.canvas = context.canvas;
8+
9+
this.width = screen.width;
10+
this.height = screen.height;
11+
this.totalHeight = this.height * 2;
12+
this.y = this.height - this.totalHeight;
13+
}
14+
15+
start() {
16+
// const noiseGen = new Worker(`./js/worleyNoise.js`, {type:'module'});
17+
// this.noiseGen = noiseGen;
18+
19+
// const { width, height } = screen;
20+
// this.totalHeight = height;
21+
// this.screenPixelsArrLen = width * height * 4;
22+
// noiseGen.onmessage = e => {
23+
// const { data } = e.data;
24+
// this.currentRow = 0;
25+
// this.data = data;
26+
// this.currentData = new Uint8ClampedArray(this.screenPixelsArrLen).fill(255);
27+
// this.updateBackgroundImage();
28+
// console.log('Data recieved');
29+
// noiseGen.terminate();
30+
// };
31+
// noiseGen.onerror = e => {
32+
// console.log(e);
33+
// noiseGen.terminate();
34+
// };
35+
36+
// noiseGen.postMessage({ action: 'start', width, height: this.totalHeight });
37+
// Worker
38+
// noiseGen.postMessage({ action: 'animate' });
39+
40+
// In Real-Time
41+
const { width, height } = screen;
42+
this.noise = new WorleyNoise(width, this.totalHeight, {maxDistForRatio: 350, ratioPower: 1.5});
43+
this.noise.createRandomPoints();
44+
this.noise.createBackgroundImage();
45+
46+
const canvas = document.createElement('canvas');
47+
canvas.width = width;
48+
canvas.height = this.totalHeight;
49+
const context = canvas.getContext('2d');
50+
51+
this.noise.draw(context);
52+
const background = new Image();
53+
background.src = canvas.toDataURL();
54+
background.onload = () => {
55+
this.backgroundImage = background;
56+
}
57+
}
58+
59+
updateBackgroundImage() {
60+
// const { width, height } = screen;
61+
// const startIndex = (width * (this.totalHeight - this.currentRow));
62+
// const endIndex = (startIndex + this.screenPixelsArrLen * 0.25);
63+
// const currentData = this.data.slice(startIndex * 4, endIndex * 4);
64+
65+
// No need for this, instead i will use parallax of Images
66+
// let row = this.currentRow;
67+
// for(let j = 0; j < height; j++) {
68+
// row = (row - 1 + this.totalHeight) % this.totalHeight;
69+
// for(let i = 0; i < width; i++) {
70+
// const index = (i + j * width) * 4;
71+
// const fetchIndex = (i + row * width) * 4;
72+
// this.currentData[index] = this.data[fetchIndex];
73+
// this.currentData[index+1] = this.data[fetchIndex+1];
74+
// this.currentData[index+2] = this.data[fetchIndex+2];
75+
// }
76+
// }
77+
// this.backgroundImage = new ImageData(this.currentData, width, height);
78+
}
79+
80+
update(deltaTime) {
81+
// Worker
82+
// if(this.noiseGen) {
83+
// const { baseSpeed: speed } = this.game.player;
84+
// this.noiseGen.postMessage({ action: 'update', speed });
85+
// }
86+
87+
// Real-Time
88+
// const { baseSpeed: speed } = this.game.player;
89+
// this.noise.update(speed);
90+
// this.backgroundImage = this.noise.imageData;
91+
92+
// Bulk
93+
// if(this.backgroundImage) {
94+
// const { speedX, speedY, baseSpeed } = this.game.player;
95+
// const windSpeed = 10;
96+
// const isMoving = speedX || speedY;
97+
// const frameMultiplier = deltaTime * 0.001 * 20;
98+
// this.currentRow += Math.floor(((isMoving ? windSpeed : 0) + baseSpeed) * frameMultiplier);
99+
// this.updateBackgroundImage();
100+
// }
101+
if(this.backgroundImage) {
102+
const { speedX, speedY, baseSpeed } = this.game.player;
103+
const windSpeed = 10;
104+
const isMoving = speedX || speedY;
105+
const frameMultiplier = deltaTime * 0.001 * 20;
106+
this.y += (windSpeed + (isMoving ? baseSpeed : 0)) * frameMultiplier;
107+
108+
if(this.y > this.height) {
109+
this.y -= this.totalHeight;
110+
}
111+
}
112+
}
113+
114+
draw() {
115+
if(this.backgroundImage) {
116+
const { context, width, height, totalHeight } = this;
117+
context.drawImage(this.backgroundImage, 0, 0, width, totalHeight, 0, this.y - totalHeight, width, totalHeight);
118+
context.drawImage(this.backgroundImage, 0, 0, width, totalHeight, 0, this.y, width, totalHeight);
119+
// this.context.putImageData(this.backgroundImage, 0, 0);
120+
}
121+
}
122+
}

‎js/player.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,9 @@ export class Player {
5656
}
5757

5858
#handleKeyDown(e) {
59-
const keyPressed = e.code;
60-
if(keyPressed === 'Space' && !this.keyPressed && !this.game.handler.pause) {
59+
const key = e.code;
60+
const { handler } = this.game;
61+
if(key === 'Space' && !this.keyPressed && !handler.pause) {
6162
this.keyPressed = true;
6263
if (this.start) {
6364
this.speedX = this.speedX > 0 ? 0 : this.baseSpeed;

‎js/radialMenu.js‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,16 @@ export class RadialMenu {
3333
this.selected = 0;
3434
this.updateSelection(0);
3535
this.prevSelected = this.selected;
36+
this.keys = new Set();
37+
this.cooldownKeys = new Set();
3638
this.keyPressed = false;
3739
window.addEventListener('keydown', e => this.#handleKeyDown(e));
38-
window.addEventListener('keyup', () => this.keyPressed = false);
40+
window.addEventListener('keyup', ({key}) => {
41+
key = key.length > 1 ? key : key.toLowerCase();
42+
this.keys.delete(key);
43+
this.cooldownKeys.delete(key);
44+
this.keyPressed = false
45+
});
3946

4047
this.x = window.innerWidth*0.5;
4148
this.y = window.innerHeight*0.5;
@@ -82,24 +89,27 @@ export class RadialMenu {
8289
};
8390
}
8491

85-
#handleKeyDown(e) {
86-
const keyPressed = e.key;
87-
if (!this.keyPressed) {
88-
if(keyPressed === 'B') {
89-
if(this.visible) this.updateSelection(this.prevSelected);
90-
this.visible = this.visible ? false : true;
91-
this.keyPressed = true;
92-
}
92+
#handleKeyDown({key}) {
93+
key = key.length > 1 ? key : key.toLowerCase();
94+
if(!this.cooldownKeys.has(key)) {
95+
this.keys.add(key);
96+
this.cooldownKeys.add(key);
97+
} else return;
98+
99+
if(this.keys.has('Shift') && this.keys.has('b')) {
100+
if(this.visible) this.updateSelection(this.prevSelected);
101+
this.visible = !this.visible;
102+
this.keyPressed = true;
93103
}
94104

95-
if (this.visible) {
96-
if(keyPressed === 'ArrowRight') {
105+
else if(this.visible) {
106+
if(this.keys.has('ArrowRight')) {
97107
this.updateSelection(this.selected < this.slots-1 ? this.selected+1 : 0);
98108
this.playSound();
99-
} else if(keyPressed === 'ArrowLeft') {
109+
} else if(this.keys.has('ArrowLeft')) {
100110
this.updateSelection(this.selected > 0 ? this.selected-1 : this.slots-1);
101111
this.playSound();
102-
} else if(keyPressed === 'Enter') {
112+
} else if(this.keys.has('Enter')) {
103113
this.visible = false;
104114
const { cost, costType } = this.options[this.selected];
105115
if(this.handler[costType] < cost) {
@@ -109,9 +119,9 @@ export class RadialMenu {
109119
this.prevSelected = this.selected;
110120
}
111121
}
112-
}
113-
if(this.visible) this.handler.pause = true;
114-
else this.handler.pause = false;
122+
}
123+
124+
this.handler.pause = this.visible || !this.handler.game.start;
115125
}
116126

117127
addOptions(name, cost, costType) {

0 commit comments

Comments
 (0)