User prompt
Set timer to 3 minutes.
User prompt
Add timer on top left of the screen
User prompt
Fix Bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'x')' in this line: 'timer.x = self.hoopRimGraphics.x;' Line Number: 135
User prompt
Add timer with 3 minutes on top of the backboard
User prompt
When you miss the shot of the ball in the hoop, you can still shoot the ball
User prompt
When it touches to the ground or to the walls, it does not show game over display.
User prompt
Avoid ball going off the screen
User prompt
When the ball missed from the hoop, it will not show the game over
Remix started
Copy Basketball Forge
var Timer = Container.expand(function () { var self = Container.call(this); self.timeLeft = 180; self.timerLabel = new Text2(self.timeLeft.toString(), { size: 100, fill: '#ffffff', font: 'Impact' }); self.timerLabel.anchor.set(.5, .5); self.addChild(self.timerLabel); self.updateTimer = function () { self.timeLeft--; self.timerLabel.setText(self.formatTime(self.timeLeft)); if (self.timeLeft <= 0) { LK.showGameOver(); } }; self.formatTime = function (seconds) { var min = Math.floor(seconds / 60); var sec = seconds % 60; return min + ':' + (sec < 10 ? '0' : '') + sec; }; LK.setInterval(self.updateTimer, 1000); }); var Particle = Container.expand(function () { var self = Container.call(this); self.interactive = false; var particleGraphics = self.createAsset('fireParticle', 'Fire Particle', 0.5, 0.5); particleGraphics.blendMode = 1; self.lifeSpan = 60; self.speed = { x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2 }; self.scale.set(Math.random() * 0.6 + 0.2); self.rotation = Math.random() * Math.PI * 2; self.move = function () { self.x += self.speed.x; self.y += self.speed.y; self.alpha -= 0.03; if (self.alpha <= 0) self.destroy(); }; }); var HoopRim = Container.expand(function () { var self = Container.call(this); var hoopRimGraphics = LK.getAsset('hoopRimSeparate', 'Basketball Hoop Rim Separate', .5, .5); self.addChild(hoopRimGraphics); }); var Ball = Container.expand(function () { var self = Container.call(this); self.hasScored = false; self.hasBounced = false; var ballGraphics = LK.getAsset('ball', 'Basketball', .5, .5); self.addChild(ballGraphics); self.speed = { x: 0, y: 0 }; self.hasThrown = false; self.move = function () { self.speed.y += 3.2; self.x += self.speed.x; if (self.x < self.width / 2) { self.x = self.width / 2; self.speed.x *= -0.5; } else if (self.x > 2048 - self.width / 2) { self.x = 2048 - self.width / 2; self.speed.x *= -0.5; } self.y += self.speed.y; if (self.y < self.height / 2) { self.y = self.height / 2; self.speed.y *= -0.5; } self.rotation += self.speed.x * 0.01; if (self.hasThrown) { var targetScale = 0.8; self.scale.x += (targetScale - self.scale.x) * 0.05; self.scale.y += (targetScale - self.scale.y) * 0.05; } if (self.hasScored) { self.alpha -= 0.15; } else { self.alpha += 0.15; if (self.alpha > 1) self.alpha = 1; } }; self.bounceOffPoint = function (x, y, elasticity) { var dx = self.x - x; var dy = self.y - y; var angle = Math.atan2(dy, dx); var speed = Math.sqrt(self.speed.x * self.speed.x + self.speed.y * self.speed.y); self.speed.x = Math.cos(angle) * speed * elasticity; self.speed.y = Math.sin(angle) * speed * 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 * 1.05); self.y = y + Math.sin(angle) * (distance * 1.05); }; }); var Hoop = Container.expand(function () { var self = Container.call(this); self.setScore = function (score) { self.scoreLabel.setText(score.toString()); }; self.moveTo = function (newX, newY, hoopRim) { var dx = (newX - self.x) / 60; var dy = (newY - self.y) / 60; var steps = 0; var interval = LK.setInterval(function () { self.x += dx; self.y += dy; hoopRim.x = self.x; hoopRim.y = self.y + self.children[1].y - 250; steps++; if (steps >= 60) { LK.clearInterval(interval); } }); }; var backboardGraphics = LK.getAsset('backboard', 'Basketball Backboard', .5, .5); backboardGraphics.y -= 250; var timer = self.addChild(new Timer()); timer.x = self.hoopRimGraphics.x; timer.y = backboardGraphics.y - timer.timerLabel.height * 2; self.addChild(backboardGraphics); self.hoopRimGraphics = LK.getAsset('hoopRim', 'Basketball Hoop Rim', .5, .5); self.hoopRimGraphics.y = backboardGraphics.height / 2 - 550 + 20 + 120 + 150 + 100; self.hoopRimGraphics.alpha = 0; self.addChild(self.hoopRimGraphics); self.leftElement = LK.getAsset('leftElement', 'Left Side Element', .5, .5); self.leftElement.x = self.hoopRimGraphics.x - self.hoopRimGraphics.width / 2 + self.leftElement.width / 2 - 50; self.leftElement.y = self.hoopRimGraphics.y - 250; self.leftElement.alpha = 0; self.addChild(self.leftElement); self.rightElement = LK.getAsset('rightElement', 'Right Side Element', .5, .5); self.rightElement.x = self.hoopRimGraphics.x + self.hoopRimGraphics.width / 2 - self.rightElement.width / 2 + 50; self.rightElement.y = self.hoopRimGraphics.y - 250; self.rightElement.alpha = 0; self.addChild(self.rightElement); self.hoopOutlineGraphics = LK.getAsset('hoopOutline', 'Basketball Hoop Outline', 1, .5); self.hoopOutlineGraphics.y = self.hoopRimGraphics.y - 230; self.hoopOutlineGraphics.alpha = 1; self.hoopOutlineGraphics.tint = 0xbb502e; self.hoopOutlineGraphics.rotation = Math.PI / 2; self.addChild(self.hoopOutlineGraphics); self.multiplierLabel = new Text2('', { size: 200, fill: '#8d4529', font: 'Impact' }); self.multiplierLabel.anchor.set(.5, 1); self.multiplierLabel.x = self.hoopRimGraphics.x; self.multiplierLabel.y = self.hoopRimGraphics.y - 250 - 50 + 30; self.addChild(self.multiplierLabel); self.scoreLabel = new Text2('0', { size: 270, fill: '#4b190c', font: 'Impact' }); self.scoreLabel.anchor.set(.5, .5); self.scoreLabel.x = self.hoopRimGraphics.x; self.scoreLabel.y = self.hoopRimGraphics.y - 250 - 20 - 420; self.addChild(self.scoreLabel); }); var Game = Container.expand(function () { var self = Container.call(this); var bg = LK.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 scoreMultiplier = 1; var ballShadow = LK.getAsset('ballShadow', 'Ball Shadow', .5, .5); ballShadow.alpha = 0.5; self.addChild(ballShadow); var ball = self.addChild(new Ball()); var hoopRim = self.addChild(new HoopRim()); ball.hitElement = ''; hoop.x = 2048 / 2; hoop.y = 2732 / 2; hoopRim.x = hoop.x; hoopRim.y = hoop.y + hoop.children[1].y - 250; ball.x = 2048 / 2; ball.on('down', function (obj) { if (!ball.hasThrown) { 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) > 400) { 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 / 3; ball.speed.y = Math.sin(angle) * 72 * 1.76 * 0.9; ball.hasThrown = true; ball.hitElement = ''; self.removeChild(ball); self.addChild(ball); dragStart = null; } }; stage.on('up', function (obj) { if (dragStart !== null) { var event = obj.event; var pos = event.getLocalPosition(self); var distance = Math.sqrt(Math.pow(pos.x - dragStart.x, 2) + Math.pow(pos.y - dragStart.y, 2)); if (distance > 150) { self.fireBall(obj); } } dragStart = null; }); var floorY = 2732 - 40 + 900 * (ball.scale.y - 1); ball.y = floorY - ball.height; LK.on('tick', function () { if (scoreMultiplier === 3) { for (var i = 0; i < 2; i++) { var particle = new Particle(); particle.alpha = ball.alpha; var angle = Math.random() * Math.PI * 2; var radius = ball.width * 0.5 * Math.sqrt(Math.random()); particle.x = ball.x + Math.cos(angle) * radius; particle.y = ball.y + Math.sin(angle) * radius; self.addChild(particle); } } self.children.forEach(function (child) { if (child instanceof Particle) { child.move(); } }); var floorY = 2732 - 40 + 900 * (ball.scale.y - 1); ball.move(); if (ball.speed.y > 0) { self.removeChild(hoopRim); self.addChild(hoopRim); if (ball.distanceTo(hoop.x + hoop.leftElement.x, hoop.y + hoop.leftElement.y) < ball.width / 2 + hoop.leftElement.width / 2) { ball.moveToDistance(hoop.x + hoop.leftElement.x, hoop.y + hoop.leftElement.y, ball.width / 2 + hoop.leftElement.width / 2 + 1); ball.bounceOffPoint(hoop.x + hoop.leftElement.x, hoop.y + hoop.leftElement.y, 0.5); ball.hitElement = 'left'; } if (ball.distanceTo(hoop.x + hoop.rightElement.x, hoop.y + hoop.rightElement.y) < ball.width / 2 + hoop.rightElement.width / 2) { ball.moveToDistance(hoop.x + hoop.rightElement.x, hoop.y + hoop.rightElement.y, ball.width / 2 + hoop.rightElement.width / 2 + 1); ball.bounceOffPoint(hoop.x + hoop.rightElement.x, hoop.y + hoop.rightElement.y, 0.5); ball.hitElement = 'right'; } } ballShadow.x = ball.x; ballShadow.y = 1800 + ball.height / 2 + 500 * ball.scale.x; var scale = (1 - 2 * (ball.y - 2732 + ball.height) / 2732) * ball.scale.x; ballShadow.scale.set(scale); ballShadow.alpha = (1 - scale + 1) / 2 * ball.alpha; if (ball.y + ball.height > floorY) { ball.y = floorY - ball.height; ball.speed.y *= -0.75; ballShadow.x = ball.x; ballShadow.visible = true; if (ball.hasThrown && !ball.hasScored) { ball.hasBounced = true; ball.x = 2048 / 2; ball.y = floorY - ball.height; ball.speed.x = 0; ball.speed.y = 0; ball.hasThrown = false; ball.hasBounced = false; ball.scale.x = 1; ball.scale.y = 1; ball.alpha = 1; scoreMultiplier = 1; hoop.multiplierLabel.setText(''); hoop.moveTo(Math.random() * (2048 - 1000) + 500, Math.random() * (2732 - 2000) + 1000, hoopRim); } else if (ball.hasScored) { ball.x = 2048 / 2; ball.y = 2532 - ball.height; ball.speed.x = 0; ball.speed.y = 0; ball.hasThrown = false; ball.hasScored = false; ball.hasBounced = false; ball.scale.x = 1; ball.scale.y = 1; if (ball.hitElement === '') { if (scoreMultiplier < 3) { scoreMultiplier++; } } else { scoreMultiplier = 1; } if (scoreMultiplier > 1) { hoop.multiplierLabel.setText('x' + scoreMultiplier); } else { hoop.multiplierLabel.setText(''); } ball.hitElement = ''; hoop.moveTo(Math.random() * (2048 - 1000) + 500, Math.random() * (2732 - 2000) + 1000, hoopRim); } } else if (ball.hasThrown && ball.intersects(hoop.hoopRimGraphics) && ball.speed.y > 0 && !ball.hasScored && !ball.hasBounced && ball.x > hoop.x + hoop.leftElement.x && ball.x < hoop.x + hoop.rightElement.x) { ball.hasScored = true; score += scoreMultiplier; hoop.scoreLabel.setText(score.toString()); hoop.setScore(score); } }); });
===================================================================
--- original.js
+++ change.js
@@ -1,4 +1,28 @@
+var Timer = Container.expand(function () {
+ var self = Container.call(this);
+ self.timeLeft = 180;
+ self.timerLabel = new Text2(self.timeLeft.toString(), {
+ size: 100,
+ fill: '#ffffff',
+ font: 'Impact'
+ });
+ self.timerLabel.anchor.set(.5, .5);
+ self.addChild(self.timerLabel);
+ self.updateTimer = function () {
+ self.timeLeft--;
+ self.timerLabel.setText(self.formatTime(self.timeLeft));
+ if (self.timeLeft <= 0) {
+ LK.showGameOver();
+ }
+ };
+ self.formatTime = function (seconds) {
+ var min = Math.floor(seconds / 60);
+ var sec = seconds % 60;
+ return min + ':' + (sec < 10 ? '0' : '') + sec;
+ };
+ LK.setInterval(self.updateTimer, 1000);
+});
var Particle = Container.expand(function () {
var self = Container.call(this);
self.interactive = false;
var particleGraphics = self.createAsset('fireParticle', 'Fire Particle', 0.5, 0.5);
@@ -106,8 +130,11 @@
});
};
var backboardGraphics = LK.getAsset('backboard', 'Basketball Backboard', .5, .5);
backboardGraphics.y -= 250;
+ var timer = self.addChild(new Timer());
+ timer.x = self.hoopRimGraphics.x;
+ timer.y = backboardGraphics.y - timer.timerLabel.height * 2;
self.addChild(backboardGraphics);
self.hoopRimGraphics = LK.getAsset('hoopRim', 'Basketball Hoop Rim', .5, .5);
self.hoopRimGraphics.y = backboardGraphics.height / 2 - 550 + 20 + 120 + 150 + 100;
self.hoopRimGraphics.alpha = 0;
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
City, night with moon and stars. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
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.