325 lines
8.1 KiB
JavaScript
325 lines
8.1 KiB
JavaScript
// ====== GLOBALS ======
|
|
let trail = [];
|
|
let velocities = [];
|
|
let particles = [];
|
|
let flashAlpha = 0;
|
|
let score = 0;
|
|
let bgBlue = 0; // 0=dark, 255=blue, fades out
|
|
|
|
let coconut = {
|
|
x: 0, y: 0, // setup()에서 초기화
|
|
r: 0,
|
|
state: 0,
|
|
shakeX: 0,
|
|
shakeTimer: 0,
|
|
// fly-away
|
|
flying: false,
|
|
flyVX: 0, flyVY: 0,
|
|
flyAlpha: 255,
|
|
flyRotation: 0, flyRotSpeed: 0
|
|
};
|
|
|
|
let coconutImgs = [];
|
|
let kakomoraImgs = [];
|
|
let flyingKakamoraList = [];
|
|
|
|
// ====== PRELOAD ======
|
|
function preload() {
|
|
for (let i = 0; i < 5; i++) {
|
|
coconutImgs[i] = loadImage(`assets/coconut/coconut_${i}.png`);
|
|
}
|
|
kakomoraImgs[0] = loadImage('assets/kakamora characters/Kakamora-TikiRob-Claw-Edition.png');
|
|
kakomoraImgs[1] = loadImage('assets/kakamora characters/Kokomoro-TikiRob-Fishhead-Edition.webp');
|
|
kakomoraImgs[2] = loadImage('assets/kakamora characters/Kokomoro-TikiRob-Mickey-Mouse-Edition-1-250x250.png');
|
|
kakomoraImgs[3] = loadImage('assets/kakamora characters/Kokomoro-TikiRob-Seashell-Edition.png');
|
|
kakomoraImgs[4] = loadImage('assets/kakamora characters/Kokomoro-TikiRob-Starfish-Edition-250x250.png');
|
|
}
|
|
|
|
// ====== SETUP ======
|
|
function setup() {
|
|
createCanvas(windowWidth, windowHeight);
|
|
resetCoconutHome();
|
|
}
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, windowHeight);
|
|
resetCoconutHome();
|
|
}
|
|
|
|
function resetCoconutHome() {
|
|
coconut.r = min(windowWidth, windowHeight) * 0.13;
|
|
coconut.x = width / 2;
|
|
coconut.y = height * 0.42;
|
|
}
|
|
|
|
// ====== DRAW ======
|
|
function draw() {
|
|
background(lerpColor(color(30), color(25, 90, 200), bgBlue / 255));
|
|
if (bgBlue > 0) bgBlue = max(0, bgBlue - 4);
|
|
|
|
updateShake();
|
|
updateFlyAway();
|
|
drawCoconut();
|
|
drawTrail();
|
|
|
|
drawParticles();
|
|
drawFlash();
|
|
drawScore();
|
|
drawKakamoraSlots();
|
|
updateFlyingKakamoraList();
|
|
drawFlyingKakamoraList();
|
|
}
|
|
|
|
// ====== COCONUT ======
|
|
function drawCoconut() {
|
|
imageMode(CENTER);
|
|
if (coconut.flying) {
|
|
push();
|
|
translate(coconut.x, coconut.y);
|
|
rotate(coconut.flyRotation);
|
|
tint(255, coconut.flyAlpha);
|
|
image(coconutImgs[coconut.state], 0, 0, coconut.r * 2, coconut.r * 2);
|
|
noTint();
|
|
pop();
|
|
} else {
|
|
image(coconutImgs[coconut.state], coconut.x + coconut.shakeX, coconut.y, coconut.r * 2, coconut.r * 2);
|
|
}
|
|
}
|
|
|
|
function updateShake() {
|
|
if (coconut.shakeTimer > 0) {
|
|
coconut.shakeX = sin(coconut.shakeTimer * 2.2) * coconut.shakeTimer * 0.55;
|
|
coconut.shakeTimer--;
|
|
} else {
|
|
coconut.shakeX = 0;
|
|
}
|
|
}
|
|
|
|
function updateFlyAway() {
|
|
if (!coconut.flying) return;
|
|
|
|
coconut.x += coconut.flyVX;
|
|
coconut.y += coconut.flyVY;
|
|
coconut.flyVY += 0.9;
|
|
coconut.flyRotation += coconut.flyRotSpeed;
|
|
coconut.flyAlpha -= 14;
|
|
|
|
if (coconut.flyAlpha <= 0 || coconut.y > height + 100) {
|
|
if (score < 10) launchKakamoraToSlot(score);
|
|
score++;
|
|
coconut.x = width / 2;
|
|
coconut.y = height * 0.42;
|
|
coconut.state = 0;
|
|
coconut.flying = false;
|
|
coconut.flyAlpha = 255;
|
|
coconut.flyRotation = 0;
|
|
coconut.shakeX = 0;
|
|
coconut.shakeTimer = 0;
|
|
}
|
|
}
|
|
|
|
// ====== TRAIL INPUT ======
|
|
function mouseDragged() {
|
|
let pos = createVector(mouseX, mouseY);
|
|
trail.push(pos);
|
|
|
|
let dx = 0, dy = 0;
|
|
if (trail.length > 1) {
|
|
let prev = trail[trail.length - 2];
|
|
dx = pos.x - prev.x;
|
|
dy = pos.y - prev.y;
|
|
velocities.push(sqrt(dx * dx + dy * dy));
|
|
} else {
|
|
velocities.push(0);
|
|
}
|
|
|
|
// 날아가는 중엔 드래그 무시
|
|
if (dist(mouseX, mouseY, coconut.x, coconut.y) < coconut.r && !coconut.flying) {
|
|
spawnParticles(mouseX, mouseY, dx, dy);
|
|
coconut.shakeTimer = max(coconut.shakeTimer, 10);
|
|
}
|
|
|
|
if (trail.length > 15) trail.shift();
|
|
if (velocities.length > 15) velocities.shift();
|
|
}
|
|
|
|
function mouseReleased() {
|
|
// 드래그가 코코넛을 지나쳤는지 확인
|
|
let hits = trail.filter(p => dist(p.x, p.y, coconut.x, coconut.y) < coconut.r).length;
|
|
|
|
if (hits >= 2 && !coconut.flying) {
|
|
coconut.state++;
|
|
flashAlpha = 25;
|
|
if (coconut.state >= 4) {
|
|
// 4번째 드래그 → 날아가기 시작
|
|
coconut.flying = true;
|
|
coconut.flyVX = random([-1, 1]) * random(10, 16);
|
|
coconut.flyVY = random(-22, -16);
|
|
coconut.flyRotSpeed = random(-0.28, 0.28);
|
|
bgBlue = 255;
|
|
}
|
|
}
|
|
|
|
trail = [];
|
|
velocities = [];
|
|
}
|
|
|
|
// ====== TRAIL DRAW ======
|
|
function drawTrail() {
|
|
noFill();
|
|
for (let i = 1; i < trail.length; i++) {
|
|
let speed = velocities[i] || 0;
|
|
strokeWeight(map(speed, 0, 50, 1, 8));
|
|
stroke(255, 200);
|
|
line(trail[i-1].x, trail[i-1].y, trail[i].x, trail[i].y);
|
|
}
|
|
}
|
|
|
|
|
|
// ====== SCORE ======
|
|
function drawScore() {
|
|
noStroke();
|
|
textSize(22);
|
|
textAlign(LEFT, TOP);
|
|
|
|
fill(255, 255, 255, 220);
|
|
text(`coconut x${score}`, 20, 20);
|
|
}
|
|
|
|
// ====== SLOT POSITION HELPER ======
|
|
function getSlotPos(i) {
|
|
const size = constrain(floor(width * 0.055), 40, 62);
|
|
const gap = 6;
|
|
return {
|
|
x: width - 20 - size / 2 - (9 - i) * (size + gap),
|
|
y: 20 + size / 2,
|
|
size
|
|
};
|
|
}
|
|
|
|
// ====== KAKAMORA SLOTS ======
|
|
function drawKakamoraSlots() {
|
|
for (let i = 0; i < 10; i++) {
|
|
let { x, y, size } = getSlotPos(i);
|
|
let filled = i < score;
|
|
|
|
if (filled) {
|
|
drawingContext.save();
|
|
drawingContext.beginPath();
|
|
drawingContext.arc(x, y, size / 2, 0, Math.PI * 2);
|
|
drawingContext.clip();
|
|
imageMode(CORNER);
|
|
image(kakomoraImgs[i % 5], x - size / 2, y - size / 2, size, size);
|
|
drawingContext.restore();
|
|
|
|
noFill();
|
|
stroke(255);
|
|
strokeWeight(2.5);
|
|
ellipse(x, y, size, size);
|
|
} else {
|
|
fill(50, 50, 50, 190);
|
|
stroke(110, 110, 110);
|
|
strokeWeight(1.5);
|
|
ellipse(x, y, size, size);
|
|
|
|
noStroke();
|
|
fill(170, 170, 170);
|
|
textSize(size * 0.28);
|
|
textAlign(CENTER, CENTER);
|
|
text('?', x, y);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====== FLYING KAKAMORA ======
|
|
function launchKakamoraToSlot(slotIdx) {
|
|
let { x: tx, y: ty, size } = getSlotPos(slotIdx);
|
|
flyingKakamoraList.push({
|
|
startX: width / 2,
|
|
startY: height * 0.42,
|
|
targetX: tx,
|
|
targetY: ty,
|
|
t: 0,
|
|
imgIdx: slotIdx % 5,
|
|
size
|
|
});
|
|
}
|
|
|
|
function updateFlyingKakamoraList() {
|
|
for (let k of flyingKakamoraList) k.t += 0.032;
|
|
flyingKakamoraList = flyingKakamoraList.filter(k => k.t <= 1);
|
|
}
|
|
|
|
function drawFlyingKakamoraList() {
|
|
for (let k of flyingKakamoraList) {
|
|
let ease = 1 - pow(1 - min(k.t, 1), 2);
|
|
let x = lerp(k.startX, k.targetX, ease);
|
|
let y = lerp(k.startY, k.targetY, ease) - sin(k.t * PI) * height * 0.3;
|
|
let sz = lerp(k.size * 1.8, k.size, ease);
|
|
|
|
drawingContext.save();
|
|
drawingContext.beginPath();
|
|
drawingContext.arc(x, y, sz / 2, 0, Math.PI * 2);
|
|
drawingContext.clip();
|
|
imageMode(CORNER);
|
|
image(kakomoraImgs[k.imgIdx], x - sz / 2, y - sz / 2, sz, sz);
|
|
drawingContext.restore();
|
|
|
|
noFill();
|
|
stroke(255, 200);
|
|
strokeWeight(2);
|
|
ellipse(x, y, sz, sz);
|
|
}
|
|
}
|
|
|
|
// ====== PARTICLES ======
|
|
class Particle {
|
|
constructor(x, y, dx, dy) {
|
|
this.pos = createVector(x, y);
|
|
// 드래그 반대 방향 + 랜덤 퍼짐
|
|
let baseAngle = (dx !== 0 || dy !== 0)
|
|
? atan2(dy, dx) + PI + random(-0.7, 0.7)
|
|
: random(TWO_PI);
|
|
let spd = random(1.5, 5);
|
|
this.vel = createVector(cos(baseAngle) * spd, sin(baseAngle) * spd);
|
|
this.life = 255;
|
|
this.r = random(3, 7);
|
|
this.isHusk = random() > 0.4; // 60% 껍질(갈색), 40% 과육(크림)
|
|
}
|
|
|
|
update() {
|
|
this.pos.add(this.vel);
|
|
this.vel.y += 0.18; // 중력
|
|
this.vel.mult(0.93); // 마찰
|
|
this.life -= 7;
|
|
}
|
|
|
|
draw() {
|
|
noStroke();
|
|
if (this.isHusk) fill(158, 108, 52, this.life);
|
|
else fill(242, 224, 188, this.life);
|
|
ellipse(this.pos.x, this.pos.y, this.r, this.r * 0.55);
|
|
}
|
|
}
|
|
|
|
function spawnParticles(x, y, dx, dy) {
|
|
for (let i = 0; i < 5; i++) particles.push(new Particle(x, y, dx, dy));
|
|
}
|
|
|
|
function drawParticles() {
|
|
for (let i = particles.length - 1; i >= 0; i--) {
|
|
particles[i].update();
|
|
particles[i].draw();
|
|
if (particles[i].life <= 0) particles.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
// ====== FLASH ======
|
|
function drawFlash() {
|
|
if (flashAlpha > 0) {
|
|
fill(255, flashAlpha);
|
|
rect(0, 0, width, height);
|
|
flashAlpha -= 20;
|
|
}
|
|
}
|