User prompt
I'm drawing a circle, but it's still on zero percent.
User prompt
Move the reset button, and make sure you can't draw over the reset button.
User prompt
It doesn't show any percentage when you draw a circle. Fix that.
User prompt
remove the score and best score and put the percentage of a perfect circle that you drew in the middle and and put the best
Code edit (1 edits merged)
Please save this source code
User prompt
Perfect Circle Challenge
Initial prompt
make a game where you have to draw the perfect circle with and when you draw you know just make a game where you draw a perfect circle
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");
/****
* Classes
****/
var DrawingPoint = Container.expand(function () {
var self = Container.call(this);
var pointGraphics = self.attachAsset('drawingLine', {
anchorX: 0.5,
anchorY: 0.5
});
return self;
});
var ResetButton = Container.expand(function () {
var self = Container.call(this);
var buttonGraphics = self.attachAsset('resetButton', {
anchorX: 0.5,
anchorY: 0.5
});
var buttonText = new Text2('Try Again', {
size: 40,
fill: 0xFFFFFF
});
buttonText.anchor.set(0.5, 0.5);
self.addChild(buttonText);
self.down = function (x, y, obj) {
resetGame();
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf0f0f0
});
/****
* Game Code
****/
// Game state variables
var isDrawing = false;
var drawingPoints = [];
var drawnPath = [];
var currentScore = 0;
var bestScore = storage.bestScore || 0;
var gameCompleted = false;
var centerX = 1024;
var centerY = 1366;
var targetRadius = 200;
// UI Elements
var instructionText = new Text2('Touch and drag to draw a perfect circle!', {
size: 60,
fill: 0x333333
});
instructionText.anchor.set(0.5, 0.5);
instructionText.x = centerX;
instructionText.y = 400;
game.addChild(instructionText);
var scoreText = new Text2('Score: 0', {
size: 80,
fill: 0x333333
});
scoreText.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreText);
var bestScoreText = new Text2('Best: ' + bestScore, {
size: 50,
fill: 0x666666
});
bestScoreText.anchor.set(0.5, 0);
bestScoreText.y = 100;
LK.gui.top.addChild(bestScoreText);
// Perfect circle guide (faint)
var perfectGuide = game.addChild(LK.getAsset('perfectCircle', {
anchorX: 0.5,
anchorY: 0.5,
x: centerX,
y: centerY,
alpha: 0.2
}));
// Reset button
var resetBtn = game.addChild(new ResetButton());
resetBtn.x = centerX;
resetBtn.y = centerY + 400;
resetBtn.alpha = 0;
function resetGame() {
isDrawing = false;
gameCompleted = false;
currentScore = 0;
// Clear drawn path
for (var i = 0; i < drawingPoints.length; i++) {
drawingPoints[i].destroy();
}
drawingPoints = [];
drawnPath = [];
// Reset UI
instructionText.setText('Touch and drag to draw a perfect circle!');
scoreText.setText('Score: 0');
resetBtn.alpha = 0;
// Reset guide
perfectGuide.alpha = 0.2;
}
function startDrawing(x, y) {
if (gameCompleted) return;
isDrawing = true;
drawnPath = [];
// Clear previous drawing
for (var i = 0; i < drawingPoints.length; i++) {
drawingPoints[i].destroy();
}
drawingPoints = [];
instructionText.setText('Drawing...');
addDrawingPoint(x, y);
}
function addDrawingPoint(x, y) {
if (!isDrawing) return;
var point = game.addChild(new DrawingPoint());
point.x = x;
point.y = y;
drawingPoints.push(point);
drawnPath.push({
x: x,
y: y
});
// Color coding based on distance from perfect circle
var distance = Math.sqrt((x - centerX) * (x - centerX) + (y - centerY) * (y - centerY));
var deviation = Math.abs(distance - targetRadius);
if (deviation < 20) {
point.children[0].tint = 0x00ff00; // Green - excellent
} else if (deviation < 50) {
point.children[0].tint = 0xffff00; // Yellow - good
} else {
point.children[0].tint = 0xff0000; // Red - poor
}
}
function finishDrawing() {
if (!isDrawing || drawnPath.length < 10) return;
isDrawing = false;
gameCompleted = true;
// Calculate score
currentScore = calculateCircleScore(drawnPath);
// Update UI
scoreText.setText('Score: ' + currentScore);
instructionText.setText('Score: ' + currentScore + '/100');
// Update best score
if (currentScore > bestScore) {
bestScore = currentScore;
storage.bestScore = bestScore;
bestScoreText.setText('Best: ' + bestScore);
// Celebration for new best
if (currentScore >= 90) {
LK.effects.flashScreen(0x00ff00, 1000);
LK.getSound('perfectScore').play();
}
} else if (currentScore >= 80) {
LK.getSound('goodScore').play();
}
// Show reset button
tween(resetBtn, {
alpha: 1
}, {
duration: 500
});
// Celebration effects for high scores
if (currentScore >= 95) {
for (var i = 0; i < drawingPoints.length; i++) {
tween(drawingPoints[i], {
scaleX: 2,
scaleY: 2
}, {
duration: 300
});
tween(drawingPoints[i], {
scaleX: 1,
scaleY: 1
}, {
duration: 300
});
}
}
}
function calculateCircleScore(path) {
if (path.length < 10) return 0;
var score = 100;
var totalDeviation = 0;
var pointCount = path.length;
// Calculate average deviation from perfect circle
for (var i = 0; i < path.length; i++) {
var point = path[i];
var distance = Math.sqrt((point.x - centerX) * (point.x - centerX) + (point.y - centerY) * (point.y - centerY));
var deviation = Math.abs(distance - targetRadius);
totalDeviation += deviation;
}
var avgDeviation = totalDeviation / pointCount;
// Scoring based on deviation (lower is better)
if (avgDeviation < 10) {
score = 100;
} else if (avgDeviation < 20) {
score = 95 - (avgDeviation - 10);
} else if (avgDeviation < 40) {
score = 85 - (avgDeviation - 20);
} else if (avgDeviation < 60) {
score = 65 - (avgDeviation - 40) * 0.5;
} else {
score = Math.max(0, 55 - (avgDeviation - 60) * 0.3);
}
// Check for circle completeness (bonus for closed circles)
var firstPoint = path[0];
var lastPoint = path[path.length - 1];
var closureDistance = Math.sqrt((firstPoint.x - lastPoint.x) * (firstPoint.x - lastPoint.x) + (firstPoint.y - lastPoint.y) * (firstPoint.y - lastPoint.y));
if (closureDistance < 30) {
score += 5; // Bonus for closed circle
}
return Math.min(100, Math.max(0, Math.round(score)));
}
// Event handlers
game.down = function (x, y, obj) {
startDrawing(x, y);
};
game.move = function (x, y, obj) {
if (isDrawing) {
addDrawingPoint(x, y);
}
};
game.up = function (x, y, obj) {
if (isDrawing) {
finishDrawing();
}
};
game.update = function () {
// Update score display during drawing
if (isDrawing && drawnPath.length > 0) {
var tempScore = calculateCircleScore(drawnPath);
scoreText.setText('Score: ' + tempScore);
}
}; ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,241 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+var storage = LK.import("@upit/storage.v1");
+
+/****
+* Classes
+****/
+var DrawingPoint = Container.expand(function () {
+ var self = Container.call(this);
+ var pointGraphics = self.attachAsset('drawingLine', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ return self;
+});
+var ResetButton = Container.expand(function () {
+ var self = Container.call(this);
+ var buttonGraphics = self.attachAsset('resetButton', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ var buttonText = new Text2('Try Again', {
+ size: 40,
+ fill: 0xFFFFFF
+ });
+ buttonText.anchor.set(0.5, 0.5);
+ self.addChild(buttonText);
+ self.down = function (x, y, obj) {
+ resetGame();
+ };
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0xf0f0f0
+});
+
+/****
+* Game Code
+****/
+// Game state variables
+var isDrawing = false;
+var drawingPoints = [];
+var drawnPath = [];
+var currentScore = 0;
+var bestScore = storage.bestScore || 0;
+var gameCompleted = false;
+var centerX = 1024;
+var centerY = 1366;
+var targetRadius = 200;
+// UI Elements
+var instructionText = new Text2('Touch and drag to draw a perfect circle!', {
+ size: 60,
+ fill: 0x333333
+});
+instructionText.anchor.set(0.5, 0.5);
+instructionText.x = centerX;
+instructionText.y = 400;
+game.addChild(instructionText);
+var scoreText = new Text2('Score: 0', {
+ size: 80,
+ fill: 0x333333
+});
+scoreText.anchor.set(0.5, 0);
+LK.gui.top.addChild(scoreText);
+var bestScoreText = new Text2('Best: ' + bestScore, {
+ size: 50,
+ fill: 0x666666
+});
+bestScoreText.anchor.set(0.5, 0);
+bestScoreText.y = 100;
+LK.gui.top.addChild(bestScoreText);
+// Perfect circle guide (faint)
+var perfectGuide = game.addChild(LK.getAsset('perfectCircle', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: centerX,
+ y: centerY,
+ alpha: 0.2
+}));
+// Reset button
+var resetBtn = game.addChild(new ResetButton());
+resetBtn.x = centerX;
+resetBtn.y = centerY + 400;
+resetBtn.alpha = 0;
+function resetGame() {
+ isDrawing = false;
+ gameCompleted = false;
+ currentScore = 0;
+ // Clear drawn path
+ for (var i = 0; i < drawingPoints.length; i++) {
+ drawingPoints[i].destroy();
+ }
+ drawingPoints = [];
+ drawnPath = [];
+ // Reset UI
+ instructionText.setText('Touch and drag to draw a perfect circle!');
+ scoreText.setText('Score: 0');
+ resetBtn.alpha = 0;
+ // Reset guide
+ perfectGuide.alpha = 0.2;
+}
+function startDrawing(x, y) {
+ if (gameCompleted) return;
+ isDrawing = true;
+ drawnPath = [];
+ // Clear previous drawing
+ for (var i = 0; i < drawingPoints.length; i++) {
+ drawingPoints[i].destroy();
+ }
+ drawingPoints = [];
+ instructionText.setText('Drawing...');
+ addDrawingPoint(x, y);
+}
+function addDrawingPoint(x, y) {
+ if (!isDrawing) return;
+ var point = game.addChild(new DrawingPoint());
+ point.x = x;
+ point.y = y;
+ drawingPoints.push(point);
+ drawnPath.push({
+ x: x,
+ y: y
+ });
+ // Color coding based on distance from perfect circle
+ var distance = Math.sqrt((x - centerX) * (x - centerX) + (y - centerY) * (y - centerY));
+ var deviation = Math.abs(distance - targetRadius);
+ if (deviation < 20) {
+ point.children[0].tint = 0x00ff00; // Green - excellent
+ } else if (deviation < 50) {
+ point.children[0].tint = 0xffff00; // Yellow - good
+ } else {
+ point.children[0].tint = 0xff0000; // Red - poor
+ }
+}
+function finishDrawing() {
+ if (!isDrawing || drawnPath.length < 10) return;
+ isDrawing = false;
+ gameCompleted = true;
+ // Calculate score
+ currentScore = calculateCircleScore(drawnPath);
+ // Update UI
+ scoreText.setText('Score: ' + currentScore);
+ instructionText.setText('Score: ' + currentScore + '/100');
+ // Update best score
+ if (currentScore > bestScore) {
+ bestScore = currentScore;
+ storage.bestScore = bestScore;
+ bestScoreText.setText('Best: ' + bestScore);
+ // Celebration for new best
+ if (currentScore >= 90) {
+ LK.effects.flashScreen(0x00ff00, 1000);
+ LK.getSound('perfectScore').play();
+ }
+ } else if (currentScore >= 80) {
+ LK.getSound('goodScore').play();
+ }
+ // Show reset button
+ tween(resetBtn, {
+ alpha: 1
+ }, {
+ duration: 500
+ });
+ // Celebration effects for high scores
+ if (currentScore >= 95) {
+ for (var i = 0; i < drawingPoints.length; i++) {
+ tween(drawingPoints[i], {
+ scaleX: 2,
+ scaleY: 2
+ }, {
+ duration: 300
+ });
+ tween(drawingPoints[i], {
+ scaleX: 1,
+ scaleY: 1
+ }, {
+ duration: 300
+ });
+ }
+ }
+}
+function calculateCircleScore(path) {
+ if (path.length < 10) return 0;
+ var score = 100;
+ var totalDeviation = 0;
+ var pointCount = path.length;
+ // Calculate average deviation from perfect circle
+ for (var i = 0; i < path.length; i++) {
+ var point = path[i];
+ var distance = Math.sqrt((point.x - centerX) * (point.x - centerX) + (point.y - centerY) * (point.y - centerY));
+ var deviation = Math.abs(distance - targetRadius);
+ totalDeviation += deviation;
+ }
+ var avgDeviation = totalDeviation / pointCount;
+ // Scoring based on deviation (lower is better)
+ if (avgDeviation < 10) {
+ score = 100;
+ } else if (avgDeviation < 20) {
+ score = 95 - (avgDeviation - 10);
+ } else if (avgDeviation < 40) {
+ score = 85 - (avgDeviation - 20);
+ } else if (avgDeviation < 60) {
+ score = 65 - (avgDeviation - 40) * 0.5;
+ } else {
+ score = Math.max(0, 55 - (avgDeviation - 60) * 0.3);
+ }
+ // Check for circle completeness (bonus for closed circles)
+ var firstPoint = path[0];
+ var lastPoint = path[path.length - 1];
+ var closureDistance = Math.sqrt((firstPoint.x - lastPoint.x) * (firstPoint.x - lastPoint.x) + (firstPoint.y - lastPoint.y) * (firstPoint.y - lastPoint.y));
+ if (closureDistance < 30) {
+ score += 5; // Bonus for closed circle
+ }
+ return Math.min(100, Math.max(0, Math.round(score)));
+}
+// Event handlers
+game.down = function (x, y, obj) {
+ startDrawing(x, y);
+};
+game.move = function (x, y, obj) {
+ if (isDrawing) {
+ addDrawingPoint(x, y);
+ }
+};
+game.up = function (x, y, obj) {
+ if (isDrawing) {
+ finishDrawing();
+ }
+};
+game.update = function () {
+ // Update score display during drawing
+ if (isDrawing && drawnPath.length > 0) {
+ var tempScore = calculateCircleScore(drawnPath);
+ scoreText.setText('Score: ' + tempScore);
+ }
+};
\ No newline at end of file