Upit | Learn about creating the game ColorCircle Memory Challenge with gen AI

/**** * Classes ****/ var ColorCircle = Container.expand(function () { var self = Container.call(this); self.attachAsset('colorCircle', { anchorX: 0.5, anchorY: 0.5 }); self.segments = []; var colors = [0x0000FF, 0xFFFF00, 0x8A2BE2, 0x00FFFF, 0xFFA500, 0x008000]; // BLEU, JAUNE, VIOLET, AZUR, ORANGE, VERT // Correction: Création des segments avec les bonnes couleurs et angles colors.forEach(function (color, index) { var angle = index * (Math.PI / 3); // Calcul de l'angle pour chaque segment var segmentName = "colorSegment".concat(colorNames[index]); // Utilisation des noms de couleur pour référencer les assets var segment = new ColorSegment(color, angle, segmentName); self.segments.push(segment); self.addChild(segment); }); }); var ColorSegment = Container.expand(function (color, angle, assetName) { var self = Container.call(this); var segmentGraphic = self.attachAsset(assetName, { anchorX: 0.5, anchorY: 0.5 }); segmentGraphic.tint = color; self.rotation = angle; }); /**** * Initialize Game ****/ /**** * Initialisation du Jeu ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // JAUNE // VIOLET // ORANGE // VERT // BLEU // AZUR // Correction des couleurs pour Azur et Orange pour qu'elles correspondent aux noms var colorNames = ['Blue', 'Yellow', 'Purple', 'Azur', 'Orange', 'Green']; // Noms des couleurs en anglais var currentSequence = []; var playerSequence = []; var score = 0; var isPlayerTurn = false; var colorCircle = game.addChild(new ColorCircle()); colorCircle.x = game.width / 2; colorCircle.y = game.height / 2; var scoreText = new Text2('Score: 0', { size: 24, fill: '#ffffff', x: 10, y: 10 }); game.addChild(scoreText); // Fonction pour générer la séquence de couleurs function generateColorSequence() { var randomIndex = Math.floor(Math.random() * colors.length); currentSequence.push(randomIndex); // Ajoute un index de couleur aléatoire à la séquence } // Fonction pour afficher la séquence de couleurs function displayCurrentSequence() { var index = 0; function illuminateNextColor() { if (index < currentSequence.length) { var colorIndex = currentSequence[index]; // Logique pour "illuminer" le segment correspondant à colorIndex // Ceci est une opération fictive, vous devez l'implémenter en fonction de votre moteur de jeu console.log("Illuminer: ".concat(colorNames[colorIndex])); // Remplacer par une réelle illumination index++; setTimeout(illuminateNextColor, 1000); // Attendre 1 seconde avant d'illuminer la couleur suivante } else { isPlayerTurn = true; // Permet au joueur de commencer à cliquer sur les segments } } illuminateNextColor(); } // Fonction pour gérer le clic sur un segment function handleSegmentClick(clickedIndex) { if (!isPlayerTurn) { return; } // Ignorer si ce n'est pas le tour du joueur var expectedIndex = currentSequence[playerSequence.length]; if (clickedIndex === expectedIndex) { playerSequence.push(clickedIndex); if (playerSequence.length === currentSequence.length) { // Le joueur a réussi à suivre la séquence score += 100; // Augmenter le score playerSequence = []; // Réinitialiser la séquence du joueur pour le prochain tour isPlayerTurn = false; // Attendre avant de commencer le prochain tour setTimeout(function () { generateColorSequence(); // Générer la prochaine couleur displayCurrentSequence(); // Afficher la nouvelle séquence }, 1000); } } else { // Le joueur a cliqué sur la mauvaise couleur alert("Jeu termin\xE9! Score final: ".concat(score)); restartGame(); // Recommencer le jeu } } // Fonction pour démarrer ou redémarrer le jeu function restartGame() { currentSequence = []; playerSequence = []; score = 0; isPlayerTurn = false; // Mettre à jour l'affichage du score, si vous avez un élément d'interface utilisateur pour cela console.log("Score: " + score); // Remplacer par une mise à jour de l'UI generateColorSequence(); displayCurrentSequence(); } // Event listeners pour les clics sur les segments // Ceci est pseudocode, vous devez adapter en fonction de votre bibliothèque // colorCircle.segments.forEach((segment, index) => { // segment.on('click', () => handleSegmentClick(index)); // }); // Démarrer le jeu restartGame();

/**** 
* Classes
****/
var ColorCircle = Container.expand(function () {
	var self = Container.call(this);
	self.attachAsset('colorCircle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.segments = [];
	var colors = [0x0000FF, 0xFFFF00, 0x8A2BE2, 0x00FFFF, 0xFFA500, 0x008000]; // BLEU, JAUNE, VIOLET, AZUR, ORANGE, VERT
	// Correction: Création des segments avec les bonnes couleurs et angles
	colors.forEach(function (color, index) {
		var angle = index * (Math.PI / 3); // Calcul de l'angle pour chaque segment
		var segmentName = "colorSegment".concat(colorNames[index]); // Utilisation des noms de couleur pour référencer les assets
		var segment = new ColorSegment(color, angle, segmentName);
		self.segments.push(segment);
		self.addChild(segment);
	});
});
var ColorSegment = Container.expand(function (color, angle, assetName) {
	var self = Container.call(this);
	var segmentGraphic = self.attachAsset(assetName, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	segmentGraphic.tint = color;
	self.rotation = angle;
});

/**** 
* Initialize Game
****/
/**** 
* Initialisation du Jeu
****/
var game = new LK.Game({
	backgroundColor: 0x000000
});

/**** 
* Game Code
****/
// JAUNE
// VIOLET
// ORANGE
// VERT
// BLEU
// AZUR
// Correction des couleurs pour Azur et Orange pour qu'elles correspondent aux noms
var colorNames = ['Blue', 'Yellow', 'Purple', 'Azur', 'Orange', 'Green']; // Noms des couleurs en anglais
var currentSequence = [];
var playerSequence = [];
var score = 0;
var isPlayerTurn = false;
var colorCircle = game.addChild(new ColorCircle());
colorCircle.x = game.width / 2;
colorCircle.y = game.height / 2;
var scoreText = new Text2('Score: 0', {
	size: 24,
	fill: '#ffffff',
	x: 10,
	y: 10
});
game.addChild(scoreText);
// Fonction pour générer la séquence de couleurs
function generateColorSequence() {
	var randomIndex = Math.floor(Math.random() * colors.length);
	currentSequence.push(randomIndex); // Ajoute un index de couleur aléatoire à la séquence
}
// Fonction pour afficher la séquence de couleurs
function displayCurrentSequence() {
	var index = 0;
	function illuminateNextColor() {
		if (index < currentSequence.length) {
			var colorIndex = currentSequence[index];
			// Logique pour "illuminer" le segment correspondant à colorIndex
			// Ceci est une opération fictive, vous devez l'implémenter en fonction de votre moteur de jeu
			console.log("Illuminer: ".concat(colorNames[colorIndex])); // Remplacer par une réelle illumination
			index++;
			setTimeout(illuminateNextColor, 1000); // Attendre 1 seconde avant d'illuminer la couleur suivante
		} else {
			isPlayerTurn = true; // Permet au joueur de commencer à cliquer sur les segments
		}
	}
	illuminateNextColor();
}
// Fonction pour gérer le clic sur un segment
function handleSegmentClick(clickedIndex) {
	if (!isPlayerTurn) {
		return;
	} // Ignorer si ce n'est pas le tour du joueur
	var expectedIndex = currentSequence[playerSequence.length];
	if (clickedIndex === expectedIndex) {
		playerSequence.push(clickedIndex);
		if (playerSequence.length === currentSequence.length) {
			// Le joueur a réussi à suivre la séquence
			score += 100; // Augmenter le score
			playerSequence = []; // Réinitialiser la séquence du joueur pour le prochain tour
			isPlayerTurn = false; // Attendre avant de commencer le prochain tour
			setTimeout(function () {
				generateColorSequence(); // Générer la prochaine couleur
				displayCurrentSequence(); // Afficher la nouvelle séquence
			}, 1000);
		}
	} else {
		// Le joueur a cliqué sur la mauvaise couleur
		alert("Jeu termin\xE9! Score final: ".concat(score));
		restartGame(); // Recommencer le jeu
	}
}
// Fonction pour démarrer ou redémarrer le jeu
function restartGame() {
	currentSequence = [];
	playerSequence = [];
	score = 0;
	isPlayerTurn = false;
	// Mettre à jour l'affichage du score, si vous avez un élément d'interface utilisateur pour cela
	console.log("Score: " + score); // Remplacer par une mise à jour de l'UI
	generateColorSequence();
	displayCurrentSequence();
}
// Event listeners pour les clics sur les segments
// Ceci est pseudocode, vous devez adapter en fonction de votre bibliothèque
// colorCircle.segments.forEach((segment, index) => {
//     segment.on('click', () => handleSegmentClick(index));
// });
// Démarrer le jeu
restartGame();

Creation History

Images