User prompt
Add a method to ball, which given a point and a distance calculates the angle from ball to said point. Then moves the ball to be distance away from that point.
User prompt
Use the new distance methods to move the ball away from the bounce point such that it no longer intersects before bouncing
User prompt
In bounceOffPoint use current ball speed to calculate the new ball speed based on circle to circle intersection logic
User prompt
Decrease ball elasticity from .75 to .5
User prompt
Move down rim by 100px
User prompt
Create an additional hoop rim class to the game. Attach it such that it draws ontop of the ball
User prompt
Move the creation of hoopRim to after the ball is created when game initializes
User prompt
Use a separate graphics id in HoopRim
User prompt
Parse along reference to hoopRim into the hoop.moveTo method
User prompt
Subtract 100px from the hoopRim instance y
User prompt
Also subtract 100px from hooprim instance in moveto method
User prompt
Make the ball draw above the new rim when first thrown. Then make the rim draw above the ball after the ball have started falling down
User prompt
Set the left right and original hoop elements alpha to zero
User prompt
Replace the two if statements around hasThrown with an else if
User prompt
Re-arrange the hoop class code such that code related to the same element is placed together
User prompt
Expose the left and right elements on the hoop instances
User prompt
Make the hoop rim element be exposed on the hoop class instances. Do not change the moveto method
User prompt
Fix Bug: 'ReferenceError: Can't find variable: hoopRimGraphics' in this line: 'self.leftElement.x = hoopRimGraphics.x - hoopRimGraphics.width / 2 + self.leftElement.width / 2;' Line Number: 68
User prompt
Fix Bug: 'ReferenceError: Can't find variable: hoopRimGraphics' in this line: 'self.leftElement.y = hoopRimGraphics.y - 100;' Line Number: 69
User prompt
Don't use children offsets in intersection code, use the exposed elements instead
User prompt
Add a score multiplier label to the center of the hoop
User prompt
Make the score multiplier text black, 3x as large and move it up by 300px
User prompt
Use impact for the score multiplier text
User prompt
Add a score multiplier variable to the game
User prompt
After throwing, keep track of if we hit the left or right element
var Ball = Container.expand(function () {
var self = Container.call(this);
var ballGraphics = XS.getAsset('ball', 'Basketball', .5, .5);
self.addChild(ballGraphics);
self.speed = {
x: 0,
y: 0
};
self.move = function () {
self.speed.y += 3.2;
self.x += self.speed.x;
self.y += self.speed.y;
};
self.bounceOffPoint = function (x, y, elasticity) {
var dx = self.x - x;
var dy = self.y - y;
var angle = Math.atan2(dy, dx);
self.speed.x = Math.cos(angle) * elasticity;
self.speed.y = Math.sin(angle) * elasticity;
};
self.angleTo = function (x, y) {
var dx = self.x - x;
var dy = self.y - y;
return Math.atan2(dy, dx);
};
self.distanceTo = function (x, y) {
var dx = self.x - x;
var dy = self.y - y;
return Math.sqrt(dx * dx + dy * dy);
};
self.moveToDistance = function (x, y, distance) {
var angle = self.angleTo(x, y);
self.x = x + Math.cos(angle) * distance;
self.y = y + Math.sin(angle) * distance;
};
});
var Hoop = Container.expand(function () {
var self = Container.call(this);
self.moveTo = function (newX, newY) {
var dx = (newX - self.x) / 60;
var dy = (newY - self.y) / 60;
var steps = 0;
var interval = XS.setInterval(function () {
self.x += dx;
self.y += dy;
steps++;
if (steps >= 60) {
XS.clearInterval(interval);
}
});
};
var backboardGraphics = XS.getAsset('backboard', 'Basketball Backboard', .5, .5);
backboardGraphics.y -= 250;
var hoopRimGraphics = XS.getAsset('hoopRim', 'Basketball Hoop Rim', .5, .5);
var leftElementGraphics = XS.getAsset('leftElement', 'Left Side Element', .5, .5);
var rightElementGraphics = XS.getAsset('rightElement', 'Right Side Element', .5, .5);
self.addChild(backboardGraphics);
hoopRimGraphics.y = backboardGraphics.height / 2 - 550 + 20 + 120;
self.addChild(hoopRimGraphics);
leftElementGraphics.x = hoopRimGraphics.x - hoopRimGraphics.width / 2 + leftElementGraphics.width / 2;
leftElementGraphics.y = hoopRimGraphics.y - 100;
rightElementGraphics.x = hoopRimGraphics.x + hoopRimGraphics.width / 2 - rightElementGraphics.width / 2;
rightElementGraphics.y = hoopRimGraphics.y - 100;
self.addChild(leftElementGraphics);
self.addChild(rightElementGraphics);
});
var Game = Container.expand(function () {
var self = Container.call(this);
var bg = XS.getAsset('background', 'Background Image', 0.5, 0.5);
bg.x = 2048 / 2;
bg.y = 2732 / 2 + 150;
bg.alpha = 0.7;
self.addChild(bg);
var hoop = self.addChild(new Hoop());
var score = 0;
var scoreTxt = new Text2(score.toString(), {
size: 150,
fill: '#ffffff'
});
scoreTxt.anchor.set(.5, 0);
XS.gui.topCenter.addChild(scoreTxt);
var ball = self.addChild(new Ball());
ball.hasScored = false;
ball.hasThrown = false;
hoop.x = 2048 / 2;
hoop.y = 2732 / 2;
ball.x = 2048 / 2;
ball.y = 2732 - ball.height;
ball.on('down', function (obj) {
var event = obj.event;
dragStart = event.getLocalPosition(self);
});
var dragStart = null;
stage.on('move', function (obj) {
var event = obj.event;
var pos = event.getLocalPosition(self);
if (dragStart !== null && ball.distanceTo(pos.x, pos.y) > 200) {
self.fireBall(obj);
}
});
self.fireBall = function (obj) {
if (dragStart !== null) {
var event = obj.event;
var pos = event.getLocalPosition(self);
var dx = pos.x - dragStart.x;
var dy = pos.y - dragStart.y;
var angle = Math.atan2(dy, dx);
ball.speed.x = Math.cos(angle) * 72 * 1.76 * 0.9 / 2;
ball.speed.y = Math.sin(angle) * 72 * 1.76 * 0.9;
ball.hasThrown = true;
dragStart = null;
}
};
stage.on('up', function (obj) {
self.fireBall(obj);
});
var floorY = 2732 - 100;
XS.on('tick', function () {
ball.move();
if (ball.y + ball.height > floorY) {
ball.y = floorY - ball.height;
ball.speed.y *= -0.75;
if (ball.hasThrown && !ball.hasScored) {
XS.showGameOver();
}
if (ball.hasScored) {
ball.x = 2048 / 2;
ball.y = 2732 - ball.height;
ball.speed.x = 0;
ball.speed.y = 0;
ball.hasThrown = false;
ball.hasScored = false;
hoop.moveTo(Math.random() * (2048 - 1000) + 500, Math.random() * (2732 - 2000) + 1000);
}
}
if (ball.intersects(hoop.children[1]) && ball.speed.y > 0 && !ball.hasScored && ball.x > hoop.x + hoop.children[2].x && ball.x < hoop.x + hoop.children[3].x) {
ball.hasScored = true;
score++;
scoreTxt.setText(score.toString());
}
if (ball.speed.y > 0) {
if (ball.distanceTo(hoop.x + hoop.children[2].x, hoop.y + hoop.children[2].y) < ball.width / 2 + hoop.children[2].width / 2) {
ball.bounceOffPoint(hoop.x + hoop.children[2].x, hoop.y + hoop.children[2].y, 0.75);
}
if (ball.distanceTo(hoop.x + hoop.children[3].x, hoop.y + hoop.children[3].y) < ball.width / 2 + hoop.children[3].width / 2) {
ball.bounceOffPoint(hoop.x + hoop.children[3].x, hoop.y + hoop.children[3].y, 0.75);
}
}
});
});
Basketball, cartoon style Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
4:3 Simple rectangle white outline. Black background
Skull explosion
Wide Single Orange metal bar lying down Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast. —ar 2:1
https://kagi.com/proxy/basketball_backboard.png?c=iNrrnnUOe99nVfDGJsYBLujiaX2Hu-zxBFRkvLEyXdRnJ8cU3RjcAYbR-o12E923qVNGy1CEGrQG87ogCD3yUarJdZYt5R03mmEMb7Jrh-8%3D blank backboard Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Indoor stadium seen from court Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast. --no goal