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 currentPercentage = 0;
var bestPercentage = storage.bestPercentage || 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 percentageText = new Text2('0%', {
size: 120,
fill: 0x333333
});
percentageText.anchor.set(0.5, 0.5);
percentageText.x = centerX;
percentageText.y = centerY;
game.addChild(percentageText);
var bestPercentageText = new Text2('Best: ' + bestPercentage + '%', {
size: 50,
fill: 0x666666
});
bestPercentageText.anchor.set(0.5, 0);
bestPercentageText.y = 50;
LK.gui.top.addChild(bestPercentageText);
// 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 = 1900;
resetBtn.y = 2600;
resetBtn.alpha = 0;
function resetGame() {
isDrawing = false;
gameCompleted = false;
currentPercentage = 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!');
percentageText.setText('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;
// Check if point is over reset button area
var buttonLeft = resetBtn.x - 100;
var buttonRight = resetBtn.x + 100;
var buttonTop = resetBtn.y - 40;
var buttonBottom = resetBtn.y + 40;
if (x >= buttonLeft && x <= buttonRight && y >= buttonTop && y <= buttonBottom) {
return; // Don't draw over reset button
}
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 percentage
currentPercentage = calculateCircleScore(drawnPath);
// Update UI
percentageText.setText(currentPercentage + '%');
instructionText.setText('Perfect: ' + currentPercentage + '%');
// Update best percentage
if (currentPercentage > bestPercentage) {
bestPercentage = currentPercentage;
storage.bestPercentage = bestPercentage;
bestPercentageText.setText('Best: ' + bestPercentage + '%');
// Celebration for new best
if (currentPercentage >= 90) {
LK.effects.flashScreen(0x00ff00, 1000);
LK.getSound('perfectScore').play();
}
} else if (currentPercentage >= 80) {
LK.getSound('goodScore').play();
}
// Show reset button
tween(resetBtn, {
alpha: 1
}, {
duration: 500
});
// Celebration effects for high scores
if (currentPercentage >= 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 < 1) 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;
// More generous scoring for real-time feedback (lower deviation is better)
if (avgDeviation < 15) {
score = 100 - avgDeviation * 2; // 100% at perfect, 70% at 15px deviation
} else if (avgDeviation < 30) {
score = 70 - (avgDeviation - 15) * 2; // 70% to 40%
} else if (avgDeviation < 50) {
score = 40 - (avgDeviation - 30) * 1; // 40% to 20%
} else {
score = Math.max(5, 20 - (avgDeviation - 50) * 0.3); // Minimum 5%
}
// Check for circle completeness (bonus for closed circles) - only if we have enough points
if (path.length >= 10) {
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 < 50) {
score += 10; // 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 percentage display during drawing
if (isDrawing && drawnPath.length > 0) {
currentPercentage = calculateCircleScore(drawnPath);
percentageText.setText(currentPercentage + '%');
}
}; ===================================================================
--- original.js
+++ change.js
@@ -206,27 +206,25 @@
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;
+ // More generous scoring for real-time feedback (lower deviation is better)
+ if (avgDeviation < 15) {
+ score = 100 - avgDeviation * 2; // 100% at perfect, 70% at 15px deviation
+ } else if (avgDeviation < 30) {
+ score = 70 - (avgDeviation - 15) * 2; // 70% to 40%
+ } else if (avgDeviation < 50) {
+ score = 40 - (avgDeviation - 30) * 1; // 40% to 20%
} else {
- score = Math.max(0, 55 - (avgDeviation - 60) * 0.3);
+ score = Math.max(5, 20 - (avgDeviation - 50) * 0.3); // Minimum 5%
}
// Check for circle completeness (bonus for closed circles) - only if we have enough points
if (path.length >= 10) {
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
+ if (closureDistance < 50) {
+ score += 10; // Bonus for closed circle
}
}
return Math.min(100, Math.max(0, Math.round(score)));
}
@@ -246,8 +244,8 @@
};
game.update = function () {
// Update percentage display during drawing
if (isDrawing && drawnPath.length > 0) {
- var tempPercentage = calculateCircleScore(drawnPath);
- percentageText.setText(tempPercentage + '%');
+ currentPercentage = calculateCircleScore(drawnPath);
+ percentageText.setText(currentPercentage + '%');
}
};
\ No newline at end of file