/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var ColorPalette = Container.expand(function () { var self = Container.call(this); var colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFA500, 0x800080, 0xFFC0CB, 0x8B4513, 0x000000, 0xFFFFFF]; var colorButtons = []; for (var i = 0; i < colors.length; i++) { var button = LK.getAsset('colorButton', { anchorX: 0.5, anchorY: 0.5, x: i % 6 * 100, y: Math.floor(i / 6) * 100 }); button.tint = colors[i]; button.colorValue = colors[i]; colorButtons.push(button); self.addChild(button); } self.colorButtons = colorButtons; return self; }); var DrawingCanvas = Container.expand(function () { var self = Container.call(this); var border = self.attachAsset('canvasBorder', { anchorX: 0.5, anchorY: 0.5 }); var canvas = self.attachAsset('canvas', { anchorX: 0.5, anchorY: 0.5 }); var strokes = []; var templateElements = []; self.addStroke = function (x, y, color) { var stroke = LK.getAsset('brushStroke', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); stroke.tint = color; strokes.push(stroke); self.addChild(stroke); }; self.clearCanvas = function () { for (var i = 0; i < strokes.length; i++) { strokes[i].destroy(); } strokes = []; for (var j = 0; j < templateElements.length; j++) { templateElements[j].destroy(); } templateElements = []; }; self.addTemplate = function (templateType) { self.clearCanvas(); if (templateType === 'house') { var house = LK.getAsset('houseTemplate', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 50 }); var roof = LK.getAsset('roofTemplate', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -20 }); templateElements.push(house); templateElements.push(roof); self.addChild(house); self.addChild(roof); } else if (templateType === 'nature') { var sun = LK.getAsset('sunTemplate', { anchorX: 0.5, anchorY: 0.5, x: -200, y: -200 }); var tree = LK.getAsset('treeTemplate', { anchorX: 0.5, anchorY: 0.5, x: 100, y: 100 }); var cloud1 = LK.getAsset('cloudTemplate', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -300 }); var cloud2 = LK.getAsset('cloudTemplate', { anchorX: 0.5, anchorY: 0.5, x: 150, y: -280 }); templateElements.push(sun); templateElements.push(tree); templateElements.push(cloud1); templateElements.push(cloud2); self.addChild(sun); self.addChild(tree); self.addChild(cloud1); self.addChild(cloud2); } }; return self; }); var Pango = Container.expand(function () { var self = Container.call(this); var body = self.attachAsset('pangoBody', { anchorX: 0.5, anchorY: 0.5 }); var head = self.attachAsset('pangoHead', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -40 }); var leftEar = self.attachAsset('pangoEar', { anchorX: 0.5, anchorY: 0.5, x: -20, y: -60 }); var rightEar = self.attachAsset('pangoEar', { anchorX: 0.5, anchorY: 0.5, x: 20, y: -60 }); var leftEye = self.attachAsset('pangoEye', { anchorX: 0.5, anchorY: 0.5, x: -15, y: -45 }); var rightEye = self.attachAsset('pangoEye', { anchorX: 0.5, anchorY: 0.5, x: 15, y: -45 }); var leftPupil = self.attachAsset('pangoPupil', { anchorX: 0.5, anchorY: 0.5, x: -15, y: -45 }); var rightPupil = self.attachAsset('pangoPupil', { anchorX: 0.5, anchorY: 0.5, x: 15, y: -45 }); var nose = self.attachAsset('pangoNose', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -35 }); var stripe1 = self.attachAsset('pangoStripe', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -10 }); var stripe2 = self.attachAsset('pangoStripe', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 10 }); self.wave = function () { tween(self, { rotation: 0.1 }, { duration: 500, easing: tween.easeInOut, onFinish: function onFinish() { tween(self, { rotation: -0.1 }, { duration: 500, easing: tween.easeInOut, onFinish: function onFinish() { tween(self, { rotation: 0 }, { duration: 500, easing: tween.easeInOut }); } }); } }); }; return self; }); var Rabbit = Container.expand(function () { var self = Container.call(this); var body = self.attachAsset('rabbitBody', { anchorX: 0.5, anchorY: 0.5 }); var head = self.attachAsset('rabbitHead', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -35 }); var leftEar = self.attachAsset('rabbitEar', { anchorX: 0.5, anchorY: 0.5, x: -12, y: -55 }); var rightEar = self.attachAsset('rabbitEar', { anchorX: 0.5, anchorY: 0.5, x: 12, y: -55 }); var leftEye = self.attachAsset('rabbitEye', { anchorX: 0.5, anchorY: 0.5, x: -10, y: -40 }); var rightEye = self.attachAsset('rabbitEye', { anchorX: 0.5, anchorY: 0.5, x: 10, y: -40 }); var nose = self.attachAsset('rabbitNose', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -30 }); return self; }); var TemplateSelector = Container.expand(function () { var self = Container.call(this); var blankBorder = self.attachAsset('templateBorder', { anchorX: 0.5, anchorY: 0.5, x: -120, y: 0 }); var blankButton = self.attachAsset('templateButton', { anchorX: 0.5, anchorY: 0.5, x: -120, y: 0 }); var blankText = new Text2('Blank', { size: 24, fill: '#000000' }); blankText.anchor.set(0.5, 0.5); blankText.x = -120; blankText.y = 0; self.addChild(blankText); var houseBorder = self.attachAsset('templateBorder', { anchorX: 0.5, anchorY: 0.5, x: 120, y: 0 }); var houseButton = self.attachAsset('templateButton', { anchorX: 0.5, anchorY: 0.5, x: 120, y: 0 }); var houseText = new Text2('House', { size: 24, fill: '#000000' }); houseText.anchor.set(0.5, 0.5); houseText.x = 120; houseText.y = 0; self.addChild(houseText); var natureBorder = self.attachAsset('templateBorder', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 200 }); var natureButton = self.attachAsset('templateButton', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 200 }); var natureText = new Text2('Nature', { size: 24, fill: '#000000' }); natureText.anchor.set(0.5, 0.5); natureText.x = 0; natureText.y = 200; self.addChild(natureText); self.blankButton = blankButton; self.houseButton = houseButton; self.natureButton = natureButton; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87CEEB }); /**** * Game Code ****/ var gameState = 'template_selection'; var selectedColor = 0xFF0000; var isDrawing = false; var lastDrawX = 0; var lastDrawY = 0; var pango = new Pango(); pango.x = 200; pango.y = 400; game.addChild(pango); var rabbit = new Rabbit(); rabbit.x = 1800; rabbit.y = 400; game.addChild(rabbit); var templateSelector = new TemplateSelector(); templateSelector.x = 1024; templateSelector.y = 1200; game.addChild(templateSelector); var drawingCanvas = new DrawingCanvas(); drawingCanvas.x = 1024; drawingCanvas.y = 800; drawingCanvas.visible = false; game.addChild(drawingCanvas); var colorPalette = new ColorPalette(); colorPalette.x = 200; colorPalette.y = 1400; colorPalette.visible = false; game.addChild(colorPalette); var titleText = new Text2('Choose a Canvas!', { size: 80, fill: '#FFFFFF' }); titleText.anchor.set(0.5, 0.5); titleText.x = 1024; titleText.y = 300; game.addChild(titleText); var instructionText = new Text2('Tap to select a template', { size: 40, fill: '#FFFFFF' }); instructionText.anchor.set(0.5, 0.5); instructionText.x = 1024; instructionText.y = 400; game.addChild(instructionText); var eraserButton = LK.getAsset('colorButton', { anchorX: 0.5, anchorY: 0.5, x: 200, y: 1600 }); eraserButton.tint = 0xFFFFFF; eraserButton.visible = false; game.addChild(eraserButton); var eraserText = new Text2('Eraser', { size: 24, fill: '#000000' }); eraserText.anchor.set(0.5, 0.5); eraserText.x = 200; eraserText.y = 1600; eraserText.visible = false; game.addChild(eraserText); function startDrawingMode(templateType) { gameState = 'drawing'; templateSelector.visible = false; titleText.visible = false; instructionText.visible = false; drawingCanvas.visible = true; colorPalette.visible = true; eraserButton.visible = true; eraserText.visible = true; if (templateType !== 'blank') { drawingCanvas.addTemplate(templateType); } titleText.setText('Start Coloring!'); titleText.visible = true; titleText.y = 150; pango.wave(); LK.getSound('templateSelect').play(); } function handleMove(x, y, obj) { if (gameState === 'drawing' && isDrawing) { var canvasPos = drawingCanvas.toLocal({ x: x, y: y }); if (Math.abs(canvasPos.x) <= 700 && Math.abs(canvasPos.y) <= 500) { var distance = Math.sqrt(Math.pow(canvasPos.x - lastDrawX, 2) + Math.pow(canvasPos.y - lastDrawY, 2)); if (distance > 15) { drawingCanvas.addStroke(canvasPos.x, canvasPos.y, selectedColor); lastDrawX = canvasPos.x; lastDrawY = canvasPos.y; LK.getSound('brushStroke').play(); } } } } game.move = handleMove; game.down = function (x, y, obj) { if (gameState === 'template_selection') { var localPos = templateSelector.toLocal({ x: x, y: y }); if (Math.abs(localPos.x + 120) <= 100 && Math.abs(localPos.y) <= 75) { startDrawingMode('blank'); } else if (Math.abs(localPos.x - 120) <= 100 && Math.abs(localPos.y) <= 75) { startDrawingMode('house'); } else if (Math.abs(localPos.x) <= 100 && Math.abs(localPos.y - 200) <= 75) { startDrawingMode('nature'); } } else if (gameState === 'drawing') { var canvasPos = drawingCanvas.toLocal({ x: x, y: y }); if (Math.abs(canvasPos.x) <= 700 && Math.abs(canvasPos.y) <= 500) { isDrawing = true; lastDrawX = canvasPos.x; lastDrawY = canvasPos.y; drawingCanvas.addStroke(canvasPos.x, canvasPos.y, selectedColor); LK.getSound('brushStroke').play(); } for (var i = 0; i < colorPalette.colorButtons.length; i++) { var button = colorPalette.colorButtons[i]; var buttonPos = colorPalette.toLocal({ x: x, y: y }); var buttonLocalX = buttonPos.x - button.x; var buttonLocalY = buttonPos.y - button.y; if (Math.abs(buttonLocalX) <= 40 && Math.abs(buttonLocalY) <= 40) { selectedColor = button.colorValue; LK.getSound('colorSelect').play(); break; } } var eraserPos = game.toLocal({ x: x, y: y }); if (Math.abs(eraserPos.x - 200) <= 40 && Math.abs(eraserPos.y - 1600) <= 40) { selectedColor = 0xFFFFFF; LK.getSound('colorSelect').play(); } } }; game.up = function (x, y, obj) { if (gameState === 'drawing') { isDrawing = false; } }; game.update = function () { if (LK.ticks % 300 === 0 && gameState === 'template_selection') { pango.wave(); } if (LK.ticks % 400 === 0 && gameState === 'drawing') { tween(rabbit, { y: rabbit.y - 10 }, { duration: 200, easing: tween.easeInOut, onFinish: function onFinish() { tween(rabbit, { y: rabbit.y + 10 }, { duration: 200, easing: tween.easeInOut }); } }); } };