Code edit (1 edits merged)
Please save this source code
User prompt
F1 Reflex Lights
Initial prompt
We have a 5 lights ( formula1 start lights ) lights turn ln order. Then at a random time they all turn green. When we touch the screen, the time after the green light turns on should be displayed (in seconds and seconds, for example 1.134). If it is pressed before the green light is on, a warning should be given and there should be a button to restart the game. After the specified time, another notification will appear and it can be restarted.
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// Light class: represents a single light (red or green)
var StartLight = Container.expand(function () {
var self = Container.call(this);
// By default, start as "off" (invisible)
self.state = 'off'; // 'off', 'red', 'green'
self.lightAsset = null;
// Set state: 'off', 'red', 'green'
self.setState = function (state) {
if (self.lightAsset) {
self.removeChild(self.lightAsset);
self.lightAsset = null;
}
self.state = state;
if (state === 'red') {
self.lightAsset = self.attachAsset('redLight', {
anchorX: 0.5,
anchorY: 0.5
});
self.lightAsset.alpha = 1;
} else if (state === 'green') {
self.lightAsset = self.attachAsset('greenLight', {
anchorX: 0.5,
anchorY: 0.5
});
self.lightAsset.alpha = 1;
}
// else: off, do not show anything
};
// Flash effect for green
self.flashGreen = function () {
if (self.state === 'green' && self.lightAsset) {
self.lightAsset.alpha = 0.5;
tween(self.lightAsset, {
alpha: 1
}, {
duration: 200,
easing: tween.easeOut
});
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x181818
});
/****
* Game Code
****/
// We'll use tween for light animations
// Green light asset
// Red light asset
// We'll use shapes for the lights
// 5 red lights (circles), 1 green light (circle), warning text, result text
// --- Layout constants ---
var NUM_LIGHTS = 5;
var LIGHT_SPACING = 260; // px between lights
var LIGHT_Y = 900; // vertical position of lights
var LIGHT_START_X = (2048 - (NUM_LIGHTS - 1) * LIGHT_SPACING) / 2; // center the row
// --- State variables ---
var lights = [];
var currentPhase = 'idle'; // 'idle', 'lights', 'waitGreen', 'green', 'result', 'falseStart'
var lightIndex = 0;
var timers = [];
var greenTimestamp = 0;
var tapTimestamp = 0;
var resultText = null;
var warningText = null;
var instructionText = null;
// --- GUI elements ---
var guiResultText = null;
// --- Helper functions ---
function clearTimers() {
for (var i = 0; i < timers.length; ++i) {
LK.clearTimeout(timers[i]);
}
timers = [];
}
function resetLights() {
for (var i = 0; i < lights.length; ++i) {
lights[i].setState('off');
}
}
function showInstruction(msg) {
if (!instructionText) {
instructionText = new Text2(msg, {
size: 90,
fill: 0xFFFFFF
});
instructionText.anchor.set(0.5, 0);
LK.gui.top.addChild(instructionText);
instructionText.y = 180;
}
instructionText.setText(msg);
instructionText.visible = true;
}
function hideInstruction() {
if (instructionText) instructionText.visible = false;
}
function showWarning(msg) {
if (!warningText) {
warningText = new Text2(msg, {
size: 120,
fill: 0xFF4444
});
warningText.anchor.set(0.5, 0.5);
LK.gui.center.addChild(warningText);
}
warningText.setText(msg);
warningText.visible = true;
}
function hideWarning() {
if (warningText) warningText.visible = false;
}
function showResult(msg) {
if (!resultText) {
resultText = new Text2(msg, {
size: 120,
fill: 0x22FF22
});
resultText.anchor.set(0.5, 0.5);
LK.gui.center.addChild(resultText);
}
resultText.setText(msg);
resultText.visible = true;
}
function hideResult() {
if (resultText) resultText.visible = false;
}
// --- Game logic ---
function startSequence() {
clearTimers();
resetLights();
hideWarning();
hideResult();
showInstruction("Wait for green, then tap as fast as you can!");
currentPhase = 'lights';
lightIndex = 0;
// Start lighting up the reds, one by one
timers.push(LK.setTimeout(lightNext, 700));
}
function lightNext() {
if (lightIndex < NUM_LIGHTS) {
lights[lightIndex].setState('red');
lightIndex += 1;
timers.push(LK.setTimeout(lightNext, 700));
} else {
// All reds are on, now wait random time before green
currentPhase = 'waitGreen';
// Random delay: 0.7s to 2.2s
var delay = 700 + Math.floor(Math.random() * 1500);
timers.push(LK.setTimeout(showGreen, delay));
}
}
function showGreen() {
// All lights turn green
for (var i = 0; i < lights.length; ++i) {
lights[i].setState('green');
lights[i].flashGreen();
}
currentPhase = 'green';
greenTimestamp = Date.now();
showInstruction("GO!");
}
function handleTap() {
if (currentPhase === 'idle' || currentPhase === 'result' || currentPhase === 'falseStart') {
// Start new round
startSequence();
return;
}
if (currentPhase === 'lights' || currentPhase === 'waitGreen') {
// False start!
clearTimers();
currentPhase = 'falseStart';
hideInstruction();
showWarning("False Start!\nTap to try again");
resetLights();
return;
}
if (currentPhase === 'green') {
tapTimestamp = Date.now();
var reaction = tapTimestamp - greenTimestamp;
currentPhase = 'result';
hideInstruction();
showResult("Reaction Time:\n" + formatReaction(reaction) + "\n\nTap to try again");
resetLights();
return;
}
}
function formatReaction(ms) {
var s = Math.floor(ms / 1000);
var msPart = ms % 1000;
var str = '';
if (s > 0) {
str += s + '.';
if (msPart < 100) str += '0';
if (msPart < 10) str += '0';
str += msPart;
str += " s";
} else {
str += msPart + " ms";
}
return str;
}
// --- Setup lights ---
for (var i = 0; i < NUM_LIGHTS; ++i) {
var light = new StartLight();
light.x = LIGHT_START_X + i * LIGHT_SPACING;
light.y = LIGHT_Y;
light.setState('off');
game.addChild(light);
lights.push(light);
}
// --- Setup instruction text ---
showInstruction("Tap to start!");
// --- Input handling ---
game.down = function (x, y, obj) {
handleTap();
};
// --- Clean up on game over (not needed, but for completeness) ---
game.destroy = function () {
clearTimers();
};
// --- Start in idle state ---
currentPhase = 'idle';
// --- No update loop needed --- ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,238 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+
+/****
+* Classes
+****/
+// Light class: represents a single light (red or green)
+var StartLight = Container.expand(function () {
+ var self = Container.call(this);
+ // By default, start as "off" (invisible)
+ self.state = 'off'; // 'off', 'red', 'green'
+ self.lightAsset = null;
+ // Set state: 'off', 'red', 'green'
+ self.setState = function (state) {
+ if (self.lightAsset) {
+ self.removeChild(self.lightAsset);
+ self.lightAsset = null;
+ }
+ self.state = state;
+ if (state === 'red') {
+ self.lightAsset = self.attachAsset('redLight', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.lightAsset.alpha = 1;
+ } else if (state === 'green') {
+ self.lightAsset = self.attachAsset('greenLight', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.lightAsset.alpha = 1;
+ }
+ // else: off, do not show anything
+ };
+ // Flash effect for green
+ self.flashGreen = function () {
+ if (self.state === 'green' && self.lightAsset) {
+ self.lightAsset.alpha = 0.5;
+ tween(self.lightAsset, {
+ alpha: 1
+ }, {
+ duration: 200,
+ easing: tween.easeOut
+ });
+ }
+ };
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x181818
+});
+
+/****
+* Game Code
+****/
+// We'll use tween for light animations
+// Green light asset
+// Red light asset
+// We'll use shapes for the lights
+// 5 red lights (circles), 1 green light (circle), warning text, result text
+// --- Layout constants ---
+var NUM_LIGHTS = 5;
+var LIGHT_SPACING = 260; // px between lights
+var LIGHT_Y = 900; // vertical position of lights
+var LIGHT_START_X = (2048 - (NUM_LIGHTS - 1) * LIGHT_SPACING) / 2; // center the row
+// --- State variables ---
+var lights = [];
+var currentPhase = 'idle'; // 'idle', 'lights', 'waitGreen', 'green', 'result', 'falseStart'
+var lightIndex = 0;
+var timers = [];
+var greenTimestamp = 0;
+var tapTimestamp = 0;
+var resultText = null;
+var warningText = null;
+var instructionText = null;
+// --- GUI elements ---
+var guiResultText = null;
+// --- Helper functions ---
+function clearTimers() {
+ for (var i = 0; i < timers.length; ++i) {
+ LK.clearTimeout(timers[i]);
+ }
+ timers = [];
+}
+function resetLights() {
+ for (var i = 0; i < lights.length; ++i) {
+ lights[i].setState('off');
+ }
+}
+function showInstruction(msg) {
+ if (!instructionText) {
+ instructionText = new Text2(msg, {
+ size: 90,
+ fill: 0xFFFFFF
+ });
+ instructionText.anchor.set(0.5, 0);
+ LK.gui.top.addChild(instructionText);
+ instructionText.y = 180;
+ }
+ instructionText.setText(msg);
+ instructionText.visible = true;
+}
+function hideInstruction() {
+ if (instructionText) instructionText.visible = false;
+}
+function showWarning(msg) {
+ if (!warningText) {
+ warningText = new Text2(msg, {
+ size: 120,
+ fill: 0xFF4444
+ });
+ warningText.anchor.set(0.5, 0.5);
+ LK.gui.center.addChild(warningText);
+ }
+ warningText.setText(msg);
+ warningText.visible = true;
+}
+function hideWarning() {
+ if (warningText) warningText.visible = false;
+}
+function showResult(msg) {
+ if (!resultText) {
+ resultText = new Text2(msg, {
+ size: 120,
+ fill: 0x22FF22
+ });
+ resultText.anchor.set(0.5, 0.5);
+ LK.gui.center.addChild(resultText);
+ }
+ resultText.setText(msg);
+ resultText.visible = true;
+}
+function hideResult() {
+ if (resultText) resultText.visible = false;
+}
+// --- Game logic ---
+function startSequence() {
+ clearTimers();
+ resetLights();
+ hideWarning();
+ hideResult();
+ showInstruction("Wait for green, then tap as fast as you can!");
+ currentPhase = 'lights';
+ lightIndex = 0;
+ // Start lighting up the reds, one by one
+ timers.push(LK.setTimeout(lightNext, 700));
+}
+function lightNext() {
+ if (lightIndex < NUM_LIGHTS) {
+ lights[lightIndex].setState('red');
+ lightIndex += 1;
+ timers.push(LK.setTimeout(lightNext, 700));
+ } else {
+ // All reds are on, now wait random time before green
+ currentPhase = 'waitGreen';
+ // Random delay: 0.7s to 2.2s
+ var delay = 700 + Math.floor(Math.random() * 1500);
+ timers.push(LK.setTimeout(showGreen, delay));
+ }
+}
+function showGreen() {
+ // All lights turn green
+ for (var i = 0; i < lights.length; ++i) {
+ lights[i].setState('green');
+ lights[i].flashGreen();
+ }
+ currentPhase = 'green';
+ greenTimestamp = Date.now();
+ showInstruction("GO!");
+}
+function handleTap() {
+ if (currentPhase === 'idle' || currentPhase === 'result' || currentPhase === 'falseStart') {
+ // Start new round
+ startSequence();
+ return;
+ }
+ if (currentPhase === 'lights' || currentPhase === 'waitGreen') {
+ // False start!
+ clearTimers();
+ currentPhase = 'falseStart';
+ hideInstruction();
+ showWarning("False Start!\nTap to try again");
+ resetLights();
+ return;
+ }
+ if (currentPhase === 'green') {
+ tapTimestamp = Date.now();
+ var reaction = tapTimestamp - greenTimestamp;
+ currentPhase = 'result';
+ hideInstruction();
+ showResult("Reaction Time:\n" + formatReaction(reaction) + "\n\nTap to try again");
+ resetLights();
+ return;
+ }
+}
+function formatReaction(ms) {
+ var s = Math.floor(ms / 1000);
+ var msPart = ms % 1000;
+ var str = '';
+ if (s > 0) {
+ str += s + '.';
+ if (msPart < 100) str += '0';
+ if (msPart < 10) str += '0';
+ str += msPart;
+ str += " s";
+ } else {
+ str += msPart + " ms";
+ }
+ return str;
+}
+// --- Setup lights ---
+for (var i = 0; i < NUM_LIGHTS; ++i) {
+ var light = new StartLight();
+ light.x = LIGHT_START_X + i * LIGHT_SPACING;
+ light.y = LIGHT_Y;
+ light.setState('off');
+ game.addChild(light);
+ lights.push(light);
+}
+// --- Setup instruction text ---
+showInstruction("Tap to start!");
+// --- Input handling ---
+game.down = function (x, y, obj) {
+ handleTap();
+};
+// --- Clean up on game over (not needed, but for completeness) ---
+game.destroy = function () {
+ clearTimers();
+};
+// --- Start in idle state ---
+currentPhase = 'idle';
+// --- No update loop needed ---
\ No newline at end of file