/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Cube = Container.expand(function (wRatio, hRatio, dRatio) { var self = Container.call(this); wRatio = wRatio || 1; hRatio = hRatio || 1; dRatio = dRatio || 1; self.z = 0; self.baseSize = 100; self.frontFace = new SimpleFace({ w: self.baseSize * wRatio, h: self.baseSize * hRatio, d: self.baseSize, dx: 0, dy: 0, dz: 1 * dRatio, rx: 0, ry: 0, rz: 0, ti: 0xFFFFFF }); self.backFace = new SimpleFace({ w: self.baseSize * wRatio, h: self.baseSize * hRatio, d: self.baseSize, dx: 0, dy: 0, dz: -1 * dRatio, rx: Math.PI, ry: 0, rz: 0, ti: 0xFFFFFF }); self.leftFace = new SimpleFace({ w: self.baseSize * dRatio, h: self.baseSize * hRatio, d: self.baseSize, dx: -1 * wRatio / dRatio, dy: 0, dz: 0, rx: 0, ry: Math.PI / 2, rz: 0, ti: 0xFFFFFF }); self.rightFace = new SimpleFace({ w: self.baseSize * dRatio, h: self.baseSize * hRatio, d: self.baseSize, dx: 1 * wRatio / dRatio, dy: 0, dz: 0, rx: 0, ry: -Math.PI * 0.5, rz: 0, ti: 0xFFFFFF }); self.topFace = new SimpleFace({ w: self.baseSize * wRatio, h: self.baseSize * dRatio, d: self.baseSize, dx: 0, dy: -1 * hRatio / dRatio, dz: 0, rx: -Math.PI / 2, ry: 0, rz: 0, ti: 0xFFFFFF }); self.bottomFace = new SimpleFace({ w: self.baseSize * wRatio, h: self.baseSize * dRatio, d: self.baseSize, dx: 0, dy: 1 * hRatio / dRatio, dz: 0, rx: Math.PI / 2, ry: 0, rz: 0, ti: 0xFFFFFF }); self.faces = [self.frontFace, self.backFace, self.leftFace, self.rightFace, self.topFace, self.bottomFace]; self.faces.forEach(function (face) { self.addChild(face); }); self.speedX = 5; self.speedY = 5; self.speedZ = 5; self.rotate3D = function (angleX, angleY, angleZ) { self.rotation = angleZ; var zScaleFactor = 1 + self.z / 500; self.faces.forEach(function (face) { face.rotate3D(angleX, angleY, angleZ, zScaleFactor); }); }; }); var Face = Container.expand(function (options) { var self = Container.call(this); options = options || {}; var points = Math.max(2, Math.min(100, options.points || 4)); self.baseSize = 100; self.w = options.w || self.baseSize; self.h = options.h || self.baseSize; self.d = options.d || self.baseSize; self.dx = options.dx || 0; self.dy = options.dy || 0; self.dz = options.dz || 0; self.rx = options.rx || 0; self.ry = options.ry || 0; self.rz = options.rz || 0; self.tint = options.ti || 0xFFFFFF; self.baseFaceCoordinates = []; for (var i = 0; i < points; i++) { var angle = 2 * Math.PI * (i / points); self.baseFaceCoordinates.push({ x: self.w / 2 * Math.cos(angle) + self.dx * self.w, y: self.h / 2 * Math.sin(angle) + self.dy * self.h, z: self.dz * self.d }); } self.baseFaceCoordinates.forEach(function (point) { point.z += self.dz * Math.cos(self.rx) * Math.cos(self.ry); }); self.face = new Shape(self.baseFaceCoordinates, self.tint); self.addChild(self.face); self.rotate3D = function (angleX, angleY, angleZ, scale) { scale = scale || 1; self.faceCoordinates = self.baseFaceCoordinates.map(function (coord) { var x = coord.x - self.dx * self.w, y = coord.y - self.dy * self.h, z = coord.z - self.dz * self.d; var newY = y * Math.cos(self.rx) - z * Math.sin(self.rx); var newZ = y * Math.sin(self.rx) + z * Math.cos(self.rx); var newX = x * Math.cos(self.ry) + newZ * Math.sin(self.ry); newZ = -x * Math.sin(self.ry) + newZ * Math.cos(self.ry); x = newX * Math.cos(self.rz) - newY * Math.sin(self.rz); y = newX * Math.sin(self.rz) + newY * Math.cos(self.rz); newY = y * Math.cos(angleX) - newZ * Math.sin(angleX); newZ = y * Math.sin(angleX) + newZ * Math.cos(angleX); newX = x * Math.cos(angleY) + newZ * Math.sin(angleY); newZ = -x * Math.sin(angleY) + newZ * Math.cos(angleY); x = newX * Math.cos(angleZ) - newY * Math.sin(angleZ); y = newX * Math.sin(angleZ) + newY * Math.cos(angleZ); return { x: (x + self.dx * self.w) * scale, y: (y + self.dy * self.h) * scale, z: (newZ + self.dz * self.d) * scale }; }); self.face.updateCoordinates(self.faceCoordinates); }; self.rotate3D(0, 0, 0, 1); }); var Paddle = Container.expand(function () { var self = Container.call(this); var paddleGraphics = self.attachAsset('paddle', { anchorX: 0.5, anchorY: 0.5 }); self.speed = 15; self.update = function () {}; }); var Shape = Container.expand(function (coordinates, tint) { var self = Container.call(this); self.polygon = drawPolygon(coordinates, tint); self.tint = tint; self.attachLines = function () { self.polygon.forEach(function (line) { self.addChild(line); }); }; self.attachLines(); self.updateCoordinates = function (newCoordinates) { if (!Array.isArray(newCoordinates) || newCoordinates.length !== self.polygon.length) { error("Invalid newCoordinates length"); return; } self.polygon = updatePolygon(self.polygon, newCoordinates); }; }); var SimpleFace = Container.expand(function (options) { var self = Container.call(this); self.baseSize = 100; options = options || {}; self.w = options.w || self.baseSize; self.h = options.h || self.baseSize; self.d = options.d || self.baseSize; self.dx = options.dx || 0; self.dy = options.dy || 0; self.dz = options.dz || 0; self.rx = options.rx || 0; self.ry = options.ry || 0; self.rz = options.rz || 0; self.tint = options.ti || 0xFFFFFF; self.baseFaceCoordinates = [{ x: -self.w + self.dx * self.w, y: -self.h + self.dy * self.h, z: self.dz * self.d }, { x: self.w + self.dx * self.w, y: -self.h + self.dy * self.h, z: self.dz * self.d }, { x: self.w + self.dx * self.w, y: self.h + self.dy * self.h, z: self.dz * self.d }, { x: -self.w + self.dx * self.w, y: self.h + self.dy * self.h, z: self.dz * self.d }]; self.baseFaceCoordinates.forEach(function (point) { point.z += self.dz * Math.cos(self.rx) * Math.cos(self.ry); }); self.face = new Shape(self.baseFaceCoordinates, self.tint); self.addChild(self.face); self.rotate3D = function (angleX, angleY, angleZ, scale) { scale = scale || 1; self.faceCoordinates = self.baseFaceCoordinates.map(function (coord) { return { x: coord.x, y: coord.y, z: coord.z }; }); self.faceCoordinates = self.faceCoordinates.map(function (coord) { var xZ = coord.x * Math.cos(self.rz) - coord.y * Math.sin(self.rz); var yZ = coord.x * Math.sin(self.rz) + coord.y * Math.cos(self.rz); var xY = xZ * Math.cos(self.ry) + coord.z * Math.sin(self.ry); var zY = coord.z * Math.cos(self.ry) - xZ * Math.sin(self.ry); var yX = yZ * Math.cos(self.rx) - zY * Math.sin(self.rx); var zX = yZ * Math.sin(self.rx) + zY * Math.cos(self.rx); return { x: xY, y: yX, z: zX }; }); var centerX = self.faceCoordinates.reduce(function (acc, coord) { return acc + coord.x; }, 0) / self.faceCoordinates.length; var centerY = self.faceCoordinates.reduce(function (acc, coord) { return acc + coord.y; }, 0) / self.faceCoordinates.length; var centerZ = self.faceCoordinates.reduce(function (acc, coord) { return acc + coord.z; }, 0) / self.faceCoordinates.length; self.faceCoordinates = self.faceCoordinates.map(function (coord) { var translatedY = (coord.y + self.dy * self.h - centerY) * Math.cos(angleX) - (coord.z + self.dz * self.d - centerZ) * Math.sin(angleX); var translatedZ = (coord.y + self.dy * self.h - centerY) * Math.sin(angleX) + (coord.z + self.dz * self.d - centerZ) * Math.cos(angleX); return { x: coord.x + self.dx * self.w - centerX, y: translatedY + centerY, z: translatedZ + centerZ }; }); self.faceCoordinates = self.faceCoordinates.map(function (coord) { var translatedX = (coord.z - centerZ) * Math.sin(angleY) + (coord.x - centerX) * Math.cos(angleY); var translatedZ = (coord.z - centerZ) * Math.cos(angleY) - (coord.x - centerX) * Math.sin(angleY); return { x: translatedX + centerX, y: coord.y, z: translatedZ + centerZ }; }); self.faceCoordinates = self.faceCoordinates.map(function (coord) { return { x: coord.x * scale, y: coord.y * scale, z: coord.z * scale }; }); self.face.updateCoordinates(self.faceCoordinates); }; self.rotate3D(0, 0, 0, 1); }); var Sphere = Container.expand(function () { var self = Container.call(this); self.z = 0; self.radius = 50; self.faces = []; var segments = 5; for (var i = 0; i < segments; i++) { var angle = 2 * Math.PI / segments; var face = new Face({ points: 33, w: self.radius * 2, h: self.radius * 2, d: self.radius * 2, dx: 0, dy: 0, dz: 0, rx: 0, ry: i * angle, rz: 0, ti: 0xFFFFFF }); self.faces.push(face); self.addChild(face); } self.speedX = 5; self.speedY = 5; self.speedZ = 5; self.rotationSpeedX = 0.02; self.rotationSpeedY = 0.02; self.rotationSpeedZ = 0.02; self.currentRotationX = 0; self.currentRotationY = 0; self.currentRotationZ = 0; self.rotate3D = function (angleX, angleY, angleZ) { self.rotation = angleZ; var zScaleFactor = 1 + self.z / 500; for (var i = 0; i < self.faces.length; i++) { self.faces[i].rotate3D(angleX, angleY, angleZ, zScaleFactor); } }; self.update = function () { if (gameStarted) { self.x += self.speedX; self.y += self.speedY; if (Math.abs(self.speedX) < 1) { self.speedX = self.speedX < 0 ? -1 : 1; } if (Math.abs(self.speedY) < 1) { self.speedY = self.speedY < 0 ? -1 : 1; } self.currentRotationX += self.rotationSpeedX; self.currentRotationY += self.rotationSpeedY; self.currentRotationZ += self.rotationSpeedZ; self.rotate3D(self.currentRotationX, self.currentRotationY, self.currentRotationZ); } }; self.rotate3D(0, 0, 0); }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ function drawPolygon(coordinates, tint) { var lines = []; for (var i = 0; i < coordinates.length; i++) { var startPoint = coordinates[i]; var endPoint = coordinates[(i + 1) % coordinates.length]; var line = drawLine(startPoint.x, startPoint.y, endPoint.x, endPoint.y, tint); lines.push(line); } return lines; } function updatePolygon(lines, newCoordinates, scale) { if (lines.length !== newCoordinates.length) { error("updatePolygon error: lines and newCoordinates length mismatch"); return lines; } for (var i = 0; i < lines.length; i++) { var startPoint = newCoordinates[i]; var endPoint = newCoordinates[(i + 1) % newCoordinates.length]; updateLine(lines[i], startPoint.x, startPoint.y, endPoint.x, endPoint.y, scale); } return lines; } function drawLine(x1, y1, x2, y2, tint) { var line = LK.getAsset('line', { anchorX: 0.0, anchorY: 0.0, x: x1, y: y1, tint: tint }); line.startX = x1; line.startY = y1; line.endX = x2; line.endY = y2; var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); line.width = distance; var angle = Math.atan2(y2 - y1, x2 - x1); line.rotation = angle; return line; } function updateLine(line, newX1, newY1, newX2, newY2, scale) { scale = scale === undefined ? 1 : scale; var midX = (newX1 + newX2) / 2; var midY = (newY1 + newY2) / 2; newX1 = midX + (newX1 - midX) * scale; newY1 = midY + (newY1 - midY) * scale; newX2 = midX + (newX2 - midX) * scale; newY2 = midY + (newY2 - midY) * scale; line.x = newX1; line.y = newY1; line.startX = newX1; line.startY = newY1; line.endX = newX2; line.endY = newY2; var distance = Math.sqrt(Math.pow(newX2 - newX1, 2) + Math.pow(newY2 - newY1, 2)); line.width = distance; var angle = Math.atan2(newY2 - newY1, newX2 - newX1); line.rotation = angle; return line; } function log() { var isDebug = false; if (isDebug) { console.log(arguments); } } function error() { var isDebug = true; if (isDebug) { console.error(arguments); } } var centerLine; var leftPaddle; var rightPaddle; var ball; var leftScore = 0; var rightScore = 0; var leftScoreTxt; var rightScoreTxt; var gameStarted = false; function gameInitialize() { centerLine = new Container(); var lineHeight = 20; var lineSpacing = 20; for (var y = 0; y < 2732; y += lineHeight + lineSpacing) { var lineSegment = LK.getAsset('paddle', { width: 10, height: lineHeight, color: 0xffffff, anchorX: 0.5, anchorY: 0.5 }); lineSegment.x = 2048 / 2; lineSegment.y = y + lineHeight / 2; centerLine.addChild(lineSegment); } game.addChild(centerLine); leftPaddle = game.addChild(new Paddle()); rightPaddle = game.addChild(new Paddle()); ball = game.addChild(new Sphere()); leftPaddle.x = 100; leftPaddle.y = 2732 / 2; rightPaddle.x = 2048 - 50; rightPaddle.y = 2732 / 2; ball.x = 2048 / 2; ball.y = 2732 / 2; leftScoreTxt = new Text2('0', { size: 100, fill: 0xFFFFFF, font: "Teko Regular" }); rightScoreTxt = new Text2('0', { size: 100, fill: 0xFFFFFF, font: "Teko Regular" }); leftScoreTxt.anchor.set(0.5, 0); leftScoreTxt.x += 600; rightScoreTxt.anchor.set(0.5, 0); rightScoreTxt.x -= 600; LK.gui.topLeft.addChild(leftScoreTxt); LK.gui.topRight.addChild(rightScoreTxt); } function updateScore() { leftScoreTxt.setText(leftScore); rightScoreTxt.setText(rightScore); LK.getSound('sayac').play(); } function resetBall() { ball.x = 2048 / 2; ball.y = 2732 / 2; ball.speedX = 5 * (Math.random() > 0.5 ? 1 : -1); ball.speedY = 5 * (Math.random() > 0.5 ? 1 : -1); } game.update = function () { if (!gameStarted) { return; } ball.update(); if (ball.y <= 0 && ball.speedY < 0 || ball.y >= 2732 && ball.speedY > 0) { ball.speedY *= -1; LK.getSound('carp1').play(); } if (ball.intersects(leftPaddle)) { if (ball.y < leftPaddle.y) { ball.speedY = -Math.abs(ball.speedY); } else { ball.speedY = Math.abs(ball.speedY); } ball.speedX *= -1.05; if (Math.abs(ball.speedX) < 1) { ball.speedX = ball.speedX < 0 ? -1 : 1; } if (Math.abs(ball.speedY) < 1) { ball.speedY = ball.speedY < 0 ? -1 : 1; } LK.getSound('carp1').play(); } if (ball.intersects(rightPaddle)) { if (ball.y < rightPaddle.y) { ball.speedY = -Math.abs(ball.speedY); } else { ball.speedY = Math.abs(ball.speedY); } ball.speedX *= -1.05; if (Math.abs(ball.speedX) < 1) { ball.speedX = ball.speedX < 0 ? -1 : 1; } if (Math.abs(ball.speedY) < 1) { ball.speedY = ball.speedY < 0 ? -1 : 1; } LK.getSound('carp1').play(); } if (ball.x <= 0) { rightScore++; updateScore(); if (rightScore >= 10) { LK.showGameOver("Right Player Wins!"); } else { resetBall(); } } else if (ball.x >= 2048) { leftScore++; updateScore(); if (leftScore >= 10) { LK.showGameOver("Left Player Wins!"); } else { resetBall(); } } if (ball.speedX > 0) { if (ball.y > rightPaddle.y) { rightPaddle.y += Math.min(rightPaddle.speed * 1.5, Math.abs(ball.y - rightPaddle.y)); } else if (ball.y < rightPaddle.y) { rightPaddle.y -= Math.min(rightPaddle.speed * 1.5, Math.abs(ball.y - rightPaddle.y)); } } }; game.move = function (x, y, obj) { if (x < 2048 / 2) { leftPaddle.y = y; LK.getSound('cubuk1').play(); } }; var startTextBackground = LK.getAsset('paddle', { width: 400, height: 200, color: 0x303030, alpha: 0.5, anchorX: 0.5, anchorY: 0.5 }); startTextBackground.scaleX = 1.5; startTextBackground.x = 30 / 2; startTextBackground.y = 10; LK.gui.center.addChild(startTextBackground); var startText = new Text2('Pongi 3D', { size: 130, fill: 0x19202d, font: "Teko Regular", shadow: { color: 0x808080, blur: 10, offsetX: 5, offsetY: 5 } }); startText.anchor.set(0.5, 0.5); startText.x = 30 / 2; startText.y = 10; LK.gui.center.addChild(startText); LK.playMusic('fon'); gameStarted = false; gameInitialize(); LK.setTimeout(function () { LK.gui.center.removeChild(startText); LK.gui.center.removeChild(startTextBackground); gameStarted = true; }, 3000);