Skip to content

Commit dcb8f0f

Browse files
thetechnocrat-devthetechnocrat-dev
authored
Update index.html
1 parent 9e15dd0 commit dcb8f0f

File tree

1 file changed

+74
-72
lines changed

1 file changed

+74
-72
lines changed

‎index.html‎

Lines changed: 74 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -35,32 +35,28 @@
3535
var goal = {
3636
x: canvas.width / 2,
3737
y: canvas.height / 2,
38-
radius: 30,
38+
radius: 42,
3939
angle1: 0,
4040
angle2: 0,
4141
angle3: 0
4242
};
4343

4444
// Listen for click events
4545
canvas.addEventListener('click', function(e) {
46-
if (e.target.nodeName !== 'A') {
46+
if (!player.freeze) {
4747
var rect = canvas.getBoundingClientRect();
4848
var clickX = e.clientX - rect.left;
4949
var clickY = e.clientY - rect.top;
5050

5151
// Set the player's target
5252
player.target = { x: clickX, y: clickY };
53-
54-
// Store the last click position
55-
lastClick.x = clickX;
56-
lastClick.y = clickY;
5753
}
5854
});
5955

6056
// Main game loop
6157
function gameLoop() {
6258
// Move towards target if it exists
63-
if(player.target) {
59+
if (player.target) {
6460
var dx = player.target.x - player.x;
6561
var dy = player.target.y - player.y;
6662
var distance = Math.sqrt(dx * dx + dy * dy);
@@ -89,62 +85,92 @@
8985
// Clear the canvas
9086
ctx.clearRect(0, 0, canvas.width, canvas.height);
9187

92-
// Create and store the path for the first rotating circle
93-
var circlePath1 = new Path2D();
88+
// Create and store the path for the outer rotating circle
89+
var outerCirclePath = new Path2D();
9490
goal.angle1 += 0.01;
95-
var startAngle = goal.angle1;
96-
var endAngle = startAngle + Math.PI * 2 - player.radius * 3 / goal.radius;
97-
circlePath1.arc(goal.x, goal.y, goal.radius * 3, startAngle, endAngle);
91+
var startAngleOuter = goal.angle1;
92+
var endAngleOuter = startAngleOuter + Math.PI * 2 - player.radius * 3 / goal.radius;
93+
var outerCircleRadius = goal.radius * 1.618 ** 3
94+
outerCirclePath.arc(goal.x, goal.y, outerCircleRadius, startAngleOuter, endAngleOuter);
9895
ctx.strokeStyle = 'red';
9996
ctx.lineWidth = 5;
100-
ctx.stroke(circlePath1);
97+
ctx.stroke(outerCirclePath);
10198

102-
// Create and store the path for the second rotating circle
103-
var circlePath2 = new Path2D();
99+
// Create and store the path for the middle rotating circle
100+
var middleCirclePath = new Path2D();
104101
goal.angle2 -= 0.01;
105-
startAngle = goal.angle2;
106-
endAngle = startAngle + Math.PI * 2 - player.radius * 3 / goal.radius;
107-
circlePath2.arc(goal.x, goal.y, goal.radius * 2.5, startAngle, endAngle);
102+
var startAngleMiddle = goal.angle2;
103+
var endAngleMiddle = startAngleMiddle + Math.PI * 2 - player.radius * 3 / goal.radius;
104+
var middleCircleRadius = goal.radius * 1.618 ** 2
105+
middleCirclePath.arc(goal.x, goal.y, middleCircleRadius, startAngleMiddle, endAngleMiddle);
108106
ctx.strokeStyle = 'blue';
109107
ctx.lineWidth = 5;
110-
ctx.stroke(circlePath2);
108+
ctx.stroke(middleCirclePath);
111109

112-
// Create and store the path for the third rotating circle
113-
var circlePath3 = new Path2D();
110+
// Create and store the path for the inner rotating circle
111+
var innerCirclePath = new Path2D();
114112
goal.angle3 = Math.atan2(player.y - goal.y, player.x - goal.x) + Math.PI;
115-
startAngle = goal.angle3;
116-
endAngle = startAngle + Math.PI * 2 - player.radius * 3 / goal.radius;
117-
circlePath3.arc(goal.x, goal.y, goal.radius * 2, startAngle, endAngle);
113+
var startAngleInner = goal.angle3;
114+
var endAngleInner = startAngleInner + Math.PI * 2 - player.radius * 3 / goal.radius;
115+
var innerCircleRadius = goal.radius * 1.618
116+
innerCirclePath.arc(goal.x, goal.y, innerCircleRadius, startAngleInner, endAngleInner);
118117
ctx.strokeStyle = 'purple';
119118
ctx.lineWidth = 5;
120-
ctx.stroke(circlePath3);
119+
ctx.stroke(innerCirclePath);
120+
121+
var playerPath = new Path2D();
122+
playerPath.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
123+
124+
// Create and store the paths for the outer rotating circle
125+
var outerCirclePathOuter = new Path2D();
126+
var outerCirclePathInner = new Path2D();
127+
// modify radius for outer and inner invisible barriers
128+
outerCirclePathOuter.arc(goal.x, goal.y, outerCircleRadius + player.radius, startAngleOuter, endAngleOuter);
129+
outerCirclePathInner.arc(goal.x, goal.y, outerCircleRadius - player.radius, startAngleOuter, endAngleOuter);
130+
131+
// Create and store the paths for the middle rotating circle
132+
var middleCirclePathOuter = new Path2D();
133+
var middleCirclePathInner = new Path2D();
134+
// modify radius for outer and inner invisible barriers
135+
middleCirclePathOuter.arc(goal.x, goal.y, middleCircleRadius + player.radius, startAngleMiddle, endAngleMiddle);
136+
middleCirclePathInner.arc(goal.x, goal.y, middleCircleRadius - player.radius, startAngleMiddle, endAngleMiddle);
137+
138+
// Create and store the paths for the inner rotating circle
139+
var innerCirclePathOuter = new Path2D();
140+
var innerCirclePathInner = new Path2D();
141+
// modify radius for outer and inner invisible barriers
142+
innerCirclePathOuter.arc(goal.x, goal.y, innerCircleRadius + player.radius, startAngleInner, endAngleInner);
143+
innerCirclePathInner.arc(goal.x, goal.y, innerCircleRadius - player.radius, startAngleInner, endAngleInner);
144+
145+
// Reset and freeze the player
146+
if (player.freeze) {
147+
ctx.globalAlpha = 0.5;
148+
} else {
149+
ctx.globalAlpha = 1;
150+
}
121151

122152
// Check for collision with the rotating circles
123-
if(!player.reset &&
124-
(ctx.isPointInStroke(circlePath1, player.x, player.y) ||
125-
ctx.isPointInStroke(circlePath2, player.x, player.y) ||
126-
ctx.isPointInStroke(circlePath3, player.x, player.y))) {
127-
player.reset = true;
128-
player.flash = 3;
129-
setTimeout(() => {player.reset = false}, 3000); // Wait for 3 seconds before resetting
153+
if (!player.freeze &&
154+
(ctx.isPointInStroke(outerCirclePathOuter, player.x, player.y) ||
155+
ctx.isPointInStroke(outerCirclePathInner, player.x, player.y) ||
156+
ctx.isPointInStroke(middleCirclePathOuter, player.x, player.y) ||
157+
ctx.isPointInStroke(middleCirclePathInner, player.x, player.y) ||
158+
ctx.isPointInStroke(innerCirclePathOuter, player.x, player.y) ||
159+
ctx.isPointInStroke(innerCirclePathInner, player.x, player.y))) {
160+
player.target = {};
161+
player.reset = true;
162+
player.freeze = true;
163+
setTimeout(function() {
164+
// Perform the desired change to the variable
165+
console.log('done freeze')
166+
player.freeze = false;
167+
player.x = canvas.width / 2;
168+
player.y = 50;
169+
player.vx = 0;
170+
player.vy = 0;
171+
}, 1000);
130172
}
131173

132-
// Reset and flash the player
133-
if(player.reset) {
134-
player.x = canvas.width / 2;
135-
player.y = 50;
136-
player.vx = 0;
137-
player.vy = 0;
138-
139-
if(player.flash > 0) {
140-
ctx.globalAlpha = 0.5;
141-
player.flash--;
142-
} else {
143-
player.reset = false;
144-
}
145-
} else {
146-
ctx.globalAlpha = 1;
147-
}
148174

149175
// Draw the player
150176
ctx.beginPath();
@@ -158,35 +184,11 @@
158184
ctx.fillStyle = 'green';
159185
ctx.fill();
160186

161-
// Check for collision with the goal
162-
var dx = player.x - goal.x;
163-
var dy = player.y - goal.y;
164-
var distance = Math.sqrt(dx * dx + dy * dy);
165-
if(distance < player.radius + goal.radius) {
166-
alert('You reached the goal!');
167-
player.x = canvas.width / 2;
168-
player.y = 50;
169-
player.vx = 0;
170-
player.vy = 0;
171-
}
172-
173-
// Wrap player circle if out of screen bounds
174-
if (player.x < -player.radius) player.x = canvas.width + player.radius;
175-
if (player.x > canvas.width + player.radius) player.x = -player.radius;
176-
if (player.y < -player.radius) player.y = canvas.height + player.radius;
177-
if (player.y > canvas.height + player.radius) player.y = -player.radius;
178-
179187
// Request next animation frame
180188
requestAnimationFrame(gameLoop);
181189
}
182190

183191
gameLoop();
184192
</script>
185-
<script>
186-
var githubLink = document.getElementById('github-link');
187-
githubLink.addEventListener('click', function(event) {
188-
event.stopPropagation();
189-
});
190-
</script>
191193
</body>
192194
</html>

0 commit comments

Comments
 (0)