User prompt
give the net a bouncing ratio to prevent ball stuck on it
User prompt
ball.y should not be set directly when customBoxCircleIntersect, speed should be instead
User prompt
lastCollisionTime is a good idea but now when ball touches the net it jumps away wich is not natural
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'lastCollisionTime')' in or related to this line: 'if (Date.now() - self.lastCollisionTime > 100) {' Line Number: 239
User prompt
self.lastCollisionTime = 0; defined twice
User prompt
when hiting the top of the net , ball keeps indefinelty make micro bounce on it. fix that
Code edit (3 edits merged)
Please save this source code
User prompt
add a bit of randomness to ball reactions to avoir inite stuck
Code edit (2 edits merged)
Please save this source code
User prompt
ball can easily get stuck at the top of the net, and then it keeps vibrating indefinetly, fix that by adjusting reactions
User prompt
ball can easily get stuck at the top of the net, and then it keeps vibrating indefinetly, fix that to make it more natural
User prompt
in game.update, when customBoxCircleIntersect from the top, y reaction is not treated
Code edit (3 edits merged)
Please save this source code
User prompt
in customBoxCircleIntersect, just compare circleX+circle.width / 2 to left and circleX-circle.width / 2 to right, same with top...
Code edit (3 edits merged)
Please save this source code
User prompt
in customBoxCircleIntersect log box coordinates
Code edit (1 edits merged)
Please save this source code
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'console.log("Box Corners with Anchors: ", {' Line Number: 162
Code edit (3 edits merged)
Please save this source code
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'var boxX = box.x - box.width * box.anchor.x;' Line Number: 153
User prompt
in customBoxCircleIntersect, take into acount the box anchors in corners calculation
Code edit (5 edits merged)
Please save this source code
User prompt
log the corners coordinates in customBoxCircleIntersect
Code edit (4 edits merged)
Please save this source code
User prompt
in customBoxCircleIntersect, simply use box corners coordinates and compare circle position to them
/**** * Classes ****/ // Initialize rotation speed //<Assets used in the game will automatically appear here> // Ball class var Ball = Container.expand(function () { var self = Container.call(this); var ballGraphics = self.attachAsset('ball', { anchorX: 0.5, anchorY: 0.5 }); self.rotationSpeed = 0; var half = self.width / 2; self.speedX = 3; self.speedY = 3; self.accelerationY = 0.5; // Gravity self.friction = 0.99; // Friction to slow down the ball over time self.lastCollisionTime = 0; // Pour éviter les collisions multiples self.update = function (net, player1, player2) { if (!ballCanMove) { return; } // Apply gravity self.speedY += self.accelerationY; // Apply friction self.speedX *= self.friction; self.speedY *= self.friction; // Update ball position self.x += self.speedX; self.y += self.speedY; self.rotation += self.rotationSpeed * (self.speedX > 0 ? 1 : -1); // Update ball rotation based on direction self.rotationSpeed *= 0.98; // Gradually decrease rotation speed // self.rotation += self.rotationSpeed * (self.speedX > 0 ? 1 : -1); // Update ball rotation based on direction // self.rotationSpeed *= 0.98; // Gradually decrease rotation speed // Check for out of bounds if (self.y + half > 2000) { self.y = 2000 - half; self.speedY = -Math.abs(self.speedY) * 0.8; // Make the ball bounce up with reduced speed if (self.x < 1024) { score2 += 1; // Increase score for player 2 scoreTxt2.setText(score2.toString()); } else { score1 += 1; // Increase score for player 1 scoreTxt1.setText(score1.toString()); } resetBall(); // Reset the ball after scoring } else if (self.y - half < 0) { self.y = half; self.speedY = Math.abs(self.speedY) * 0.8; // Make the ball bounce down with reduced speed } // Check for x screen limits if (self.x - half < 0) { self.x = half; self.speedX = Math.abs(self.speedX); // Make the ball bounce to the right } else if (self.x + half > 2048) { self.x = 2048 - half; self.speedX = -Math.abs(self.speedX); // Make the ball bounce to the left } // Collision detection logic moved to game update }; }); // Net class var Net = Container.expand(function () { var self = Container.call(this); var netGraphics = self.attachAsset('net', { anchorX: 0.5, anchorY: 1, alpha: isDebug ? 1 : 0 }); }); // Player class var Player = Container.expand(function (index) { var self = Container.call(this); var playerGraphics = self.attachAsset('player', { anchorX: 0.5, anchorY: 1, alpha: 0.98, scaleX: index === 2 ? -1 : 1, tint: index === 1 ? 0xADD8E6 : 0xFF6347 // Light blue for player 1, Tomato red for player 2 }); self.index = index; self.speedX = 0; // Initialize horizontal speed var collidSize = 220; self.collisionBody = LK.getAsset('collisionBody', { anchorX: 0.5, anchorY: 0.5, alpha: isDebug ? 0.6 : 0, width: collidSize, height: collidSize, y: -200 }); self.addChild(self.collisionBody); self.update = function () { var prevX = self.x; // Store previous x position var prevY = self.y; // Store previous y position if (self.jumping) { self.y -= 20; // Increase jump speed if (self.y <= 1300) { self.jumping = false; } } else if (self.y < 2000) { self.y += 20; // Increase fall speed for smoother jump } if (self.y < 0) { self.y = 0; // Prevent player1 from moving above the window } if (self.index === 2 && self.x > 1024 && self.x < 1024 + self.width / 2) { self.x = 1024 + self.width / 2; // Prevent player2 from moving past the net } self.speedX = self.x - prevX; // Calculate horizontal speed based on movement self.speedY = self.y - prevY; // Calculate vertical speed based on movement }; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87CEEB // Sky blue background }); /**** * Game Code ****/ function resetBall() { ball.x = PLAYER1_INITIAL_X; ball.y = 1300; // Set the ball's initial vertical position to y = 1300 ball.speedX = 3; ball.speedY = 3; // Reset speed ball.accelerationY = 0.5; // Reset gravity ball.friction = 0.99; // Reset friction ballCanMove = false; // Reset ball movement flag ball.rotation = 0; // Reset rotation angle } function customBoxCircleIntersect(box, circle) { var circleX = circle.x; var circleY = circle.y; if (circle.parent) { circleX += circle.parent.x; circleY += circle.parent.y; } var boxX = box.x; var boxY = box.y; var halfBoxWidth = box.width / 2; var halfBoxHeight = box.height / 2; // Calculate the coordinates of the box corners console.log("Box Corners: ", { left: left, right: right, top: top, bottom: bottom }); var left = boxX - halfBoxWidth; var right = boxX + halfBoxWidth; var top = boxY - halfBoxHeight; var bottom = boxY + halfBoxHeight; // Find the closest point to the circle within the box var closestX = Math.max(left, Math.min(circleX, right)); var closestY = Math.max(top, Math.min(circleY, bottom)); // Calculate the distance between the circle's center and this closest point var dx = circleX - closestX; var dy = circleY - closestY; // If the distance is less than the circle's radius, an intersection occurs if (dx * dx + dy * dy < circle.width / 2 * (circle.width / 2)) { console.log("customIntersect NET !" + circle.width); } return dx * dx + dy * dy < circle.width / 2 * (circle.width / 2); } function customIntersect(circle1, circle2) { //console.log("customIntersect ", circle1, circle2.parent); var circle2X = circle2.x; var circle2Y = circle2.y; if (circle2.parent) { circle2X += circle2.parent.x; circle2Y += circle2.parent.y; } var dx = circle1.x - circle2X; var dy = circle1.y - circle2Y; var distance = Math.sqrt(dx * dx + dy * dy); var radiusSum = circle1.width / 2 + circle2.width / 2; //console.log("customIntersect ", distance.toFixed(0), radiusSum); return distance < radiusSum; } var ballCanMove = false; var background = LK.getAsset('background', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, y: 2732 / 2 }); game.addChild(background); var isDebug = true; var player2Debug = true; var PLAYER1_INITIAL_X = 512; var PLAYER1_INITIAL_Y = 2000; var PLAYER2_INITIAL_X = 1536; var PLAYER2_INITIAL_Y = 2000; var player1 = new Player(1); var player2 = new Player(2); game.addChild(player1); game.addChild(player2); player1.x = PLAYER1_INITIAL_X; player1.y = PLAYER1_INITIAL_Y; player2.x = PLAYER2_INITIAL_X; player2.y = PLAYER2_INITIAL_Y; var net = new Net(); net.x = 2048 / 2; net.y = 2000; game.addChild(net); var net = new Net(); net.x = 2048 / 2; net.y = 2000; game.addChild(net); var ball = new Ball(); ball.x = PLAYER1_INITIAL_X; ball.y = 1300; // Set the ball's initial vertical position to y = 1300 ball.rotationSpeed = 0; game.addChild(ball); var score1 = 0; var score2 = 0; var scoreTxt1 = new Text2('0', { size: 100, fill: "#ffffff" }); scoreTxt1.anchor.set(0.5, 0); LK.gui.topLeft.addChild(scoreTxt1); var scoreTxt2 = new Text2('0', { size: 100, fill: "#ffffff" }); scoreTxt2.anchor.set(0.5, 0); LK.gui.topRight.addChild(scoreTxt2); game.update = function () { if (!ballCanMove && (customIntersect(ball, player1.collisionBody) || customIntersect(ball, player2.collisionBody))) { ///|| player2.collisionBody && customIntersect(ball, player2.collisionBody) || customIntersect(ball, player1) || customIntersect(ball, player2))) { ballCanMove = true; //console.log("Player collision detected 1"); } // Check for collision with the net if (customBoxCircleIntersect(net, ball)) { // Reverse ball's horizontal direction and apply some energy loss ball.speedX = -ball.speedX * 0.8; ball.rotationSpeed = Math.sqrt(ball.speedX * ball.speedX + ball.speedY * ball.speedY) * 0.005; // Update rotation speed based on collision } // Check for collisions with players if (customIntersect(ball, player1.collisionBody) || customIntersect(ball, player2.collisionBody)) { //console.log("Player collision detected 2"); var player = customIntersect(ball, player1.collisionBody) ? player1 : player2; var collisionAngle = Math.atan2(ball.y - player.y, ball.x - player.x); var speed = Math.sqrt(ball.speedX * ball.speedX + ball.speedY * ball.speedY); var playerSpeed = Math.sqrt(player.speedX * player.speedX + player.speedY * player.speedY); var newSpeedX = speed * Math.cos(collisionAngle) + playerSpeed * Math.cos(collisionAngle); var newSpeedY = speed * Math.sin(collisionAngle) + playerSpeed * Math.sin(collisionAngle); ball.speedX = newSpeedX * 0.8; // Apply some energy loss ball.speedY = newSpeedY * 0.8; // Apply some energy loss //ball.rotationSpeed += Math.sqrt(ball.speedX * ball.speedX + ball.speedY * ball.speedY) * 0.005; // Update rotation speed based on collision ball.rotationSpeed = Math.sqrt(ball.speedX * ball.speedX + ball.speedY * ball.speedY) * 0.005; // Update rotation speed based on collision } }; game.down = function (x, y, obj) { if (x <= 1024 - player1.width / 2 && x >= player1.width / 2) { player1.speedX = x - player1.x; // Update speedX based on movement player1.x = x; } if (player1.y >= PLAYER1_INITIAL_Y) { player1.jumping = true; } if (player2Debug && x >= 1024 + player2.width / 2 && x <= 2048 - player2.width / 2 && x >= player2.width / 2) { player2.speedX = x - player2.x; // Update speedX based on movement player2.x = x; } if (player2Debug && player2.y >= PLAYER2_INITIAL_Y) { player2.jumping = true; } }; game.move = function (x, y, obj) { if (x + player1.width / 2 + net.width / 2 <= 1024 && x - player1.width / 2 >= 0) { player1.speedX = x - player1.x; // Update speedX based on movement player1.x = x; } if (player2Debug && x - player2.width / 2 >= 1024 && x + player2.width / 2 <= 2048) { player2.speedX = x - player2.x; // Update speedX based on movement player2.x = x; } if (player2Debug && x < 1024 - player2.width / 2) { player2.x = 1024 + net.width / 2 + player2.width / 2; // Prevent player2 from moving past the net } if (player1.y < 0) { player1.y = 0; // Prevent player1 from moving above the window } };
===================================================================
--- original.js
+++ change.js
@@ -65,9 +65,9 @@
var self = Container.call(this);
var netGraphics = self.attachAsset('net', {
anchorX: 0.5,
anchorY: 1,
- alpha: 0.1
+ alpha: isDebug ? 1 : 0
});
});
// Player class
var Player = Container.expand(function (index) {
@@ -144,8 +144,14 @@
var boxY = box.y;
var halfBoxWidth = box.width / 2;
var halfBoxHeight = box.height / 2;
// Calculate the coordinates of the box corners
+ console.log("Box Corners: ", {
+ left: left,
+ right: right,
+ top: top,
+ bottom: bottom
+ });
var left = boxX - halfBoxWidth;
var right = boxX + halfBoxWidth;
var top = boxY - halfBoxHeight;
var bottom = boxY + halfBoxHeight;
@@ -156,9 +162,9 @@
var dx = circleX - closestX;
var dy = circleY - closestY;
// If the distance is less than the circle's radius, an intersection occurs
if (dx * dx + dy * dy < circle.width / 2 * (circle.width / 2)) {
- console.log("customIntersect NET !");
+ console.log("customIntersect NET !" + circle.width);
}
return dx * dx + dy * dy < circle.width / 2 * (circle.width / 2);
}
function customIntersect(circle1, circle2) {
@@ -183,9 +189,9 @@
x: 2048 / 2,
y: 2732 / 2
});
game.addChild(background);
-var isDebug = false;
+var isDebug = true;
var player2Debug = true;
var PLAYER1_INITIAL_X = 512;
var PLAYER1_INITIAL_Y = 2000;
var PLAYER2_INITIAL_X = 1536;
white volley ball.
top view of a concave blue (0xADD8E6) plastic button. 4 small black directionnal chevrons engraved : right, left, top , bottom.. Photorealistic
Beach ball. photo
full view of a Beach white towel with colored infinte logo. placed on the sand. photo
Start button in the shape of a white beach volleyball with « START » written on it in black. Photo