1733 lines
67 KiB
HTML
1733 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0068)file:///C:/Users/Student/Downloads/Qwen_html_20260320_yc63rybc6.html -->
|
||
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>💕 K-Beauty Makeup Date Game - Taylor Swift Edition 💕</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', 'Comic Sans MS', 'Arial', sans-serif;
|
||
background: linear-gradient(135deg, #ffeef8 0%, #ffe0f0 50%, #ffd0e8 100%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
user-select: none;
|
||
}
|
||
|
||
#game-container {
|
||
position: relative;
|
||
width: 1200px;
|
||
height: 750px;
|
||
background: linear-gradient(135deg, #fff5f8 0%, #ffe4f5 100%);
|
||
border-radius: 30px;
|
||
box-shadow: 0 15px 60px rgba(255, 20, 147, 0.4);
|
||
overflow: hidden;
|
||
border: 6px solid #ff69b4;
|
||
}
|
||
|
||
canvas {
|
||
display: block;
|
||
background: linear-gradient(180deg, #fff0f5 0%, #ffe4ec 50%, #ffd6e7 100%);
|
||
}
|
||
|
||
/* Floating Hearts */
|
||
.heart-bg {
|
||
position: absolute;
|
||
opacity: 0.2;
|
||
animation: float 8s ease-in-out infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
|
||
50% { transform: translateY(-30px) rotate(10deg) scale(1.1); }
|
||
}
|
||
|
||
/* Overlays */
|
||
.overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 240, 245, 0.98);
|
||
z-index: 100;
|
||
padding: 20px;
|
||
}
|
||
|
||
.overlay.active {
|
||
display: flex;
|
||
}
|
||
|
||
/* Menu Styles */
|
||
.main-title {
|
||
font-size: 52px;
|
||
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 50%, #ffb6c1 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 15px;
|
||
text-align: center;
|
||
text-shadow: 3px 3px 6px rgba(255, 105, 180, 0.3);
|
||
animation: glow 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes glow {
|
||
0%, 100% { filter: brightness(1); }
|
||
50% { filter: brightness(1.2); }
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 22px;
|
||
color: #9370db;
|
||
margin-bottom: 10px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.taylor-note {
|
||
font-size: 16px;
|
||
color: #ff69b4;
|
||
margin-bottom: 30px;
|
||
background: rgba(255, 105, 180, 0.1);
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.menu-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.menu-btn {
|
||
width: 280px;
|
||
padding: 18px 30px;
|
||
font-size: 18px;
|
||
font-family: inherit;
|
||
font-weight: bold;
|
||
border: none;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.menu-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
||
transition: left 0.5s;
|
||
}
|
||
|
||
.menu-btn:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.menu-btn:hover {
|
||
transform: translateY(-5px) scale(1.03);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
|
||
}
|
||
|
||
.btn-start {
|
||
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-music {
|
||
background: linear-gradient(135deg, #dda0dd 0%, #ba55d3 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-settings {
|
||
background: linear-gradient(135deg, #87ceeb 0%, #4682b4 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-quit {
|
||
background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);
|
||
color: white;
|
||
}
|
||
|
||
/* Settings Panel */
|
||
.settings-panel {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,240,245,0.9) 100%);
|
||
padding: 40px;
|
||
border-radius: 30px;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
|
||
max-width: 700px;
|
||
width: 90%;
|
||
}
|
||
|
||
.settings-title {
|
||
font-size: 36px;
|
||
color: #ff1493;
|
||
margin-bottom: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.setting-section {
|
||
margin: 25px 0;
|
||
padding: 20px;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 15px;
|
||
border: 2px solid #ffb6c1;
|
||
}
|
||
|
||
.setting-label {
|
||
font-size: 18px;
|
||
color: #9370db;
|
||
margin-bottom: 15px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.slider-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.volume-slider {
|
||
flex: 1;
|
||
height: 25px;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
background: linear-gradient(90deg, #ffb6c1 0%, #ff69b4 50%, #ff1493 100%);
|
||
border-radius: 15px;
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.volume-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 35px;
|
||
height: 35px;
|
||
background: white;
|
||
border: 4px solid #ff1493;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
box-shadow: 0 3px 15px rgba(0,0,0,0.3);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.volume-slider::-webkit-slider-thumb:hover {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.volume-value {
|
||
min-width: 70px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #ff1493;
|
||
text-align: center;
|
||
background: white;
|
||
padding: 8px 15px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.btn-control {
|
||
width: 45px;
|
||
height: 45px;
|
||
font-size: 20px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: linear-gradient(135deg, #87ceeb 0%, #4682b4 100%);
|
||
color: white;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.btn-control:hover {
|
||
transform: scale(1.15);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.music-file-input {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.file-input-label {
|
||
display: inline-block;
|
||
padding: 12px 25px;
|
||
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
|
||
color: white;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
|
||
}
|
||
|
||
.file-input-label:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(255, 105, 180, 0.6);
|
||
}
|
||
|
||
input[type="file"] {
|
||
display: none;
|
||
}
|
||
|
||
/* Game UI */
|
||
.game-header {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 75px;
|
||
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 50%, #ff69b4 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30px;
|
||
z-index: 50;
|
||
box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3);
|
||
}
|
||
|
||
.game-title-text {
|
||
color: white;
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
text-shadow: 2px 2px 6px rgba(0,0,0,0.3);
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.music-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: white;
|
||
font-size: 14px;
|
||
background: rgba(255,255,255,0.2);
|
||
padding: 8px 15px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.music-playing {
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.6; }
|
||
}
|
||
|
||
/* Left Panel - Makeup Categories */
|
||
.left-panel {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 90px;
|
||
width: 220px;
|
||
max-height: 640px;
|
||
overflow-y: auto;
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,240,245,0.95) 100%);
|
||
border-radius: 20px;
|
||
padding: 15px;
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
||
border: 4px solid #ff69b4;
|
||
z-index: 50;
|
||
}
|
||
|
||
.panel-header {
|
||
color: #ff1493;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 3px solid #ffb6c1;
|
||
}
|
||
|
||
.category-btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
margin: 8px 0;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.category-btn:hover {
|
||
transform: translateX(5px);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.category-btn.active {
|
||
box-shadow: 0 0 0 4px #ffd700, 0 6px 20px rgba(0,0,0,0.25);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Right Panel - Colors/Options */
|
||
.right-panel {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 90px;
|
||
width: 220px;
|
||
max-height: 640px;
|
||
overflow-y: auto;
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,248,255,0.95) 100%);
|
||
border-radius: 20px;
|
||
padding: 15px;
|
||
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
||
border: 4px solid #4682b4;
|
||
z-index: 50;
|
||
}
|
||
|
||
.color-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.option-btn {
|
||
width: 100%;
|
||
height: 50px;
|
||
border: 3px solid white;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.option-btn:hover {
|
||
transform: scale(1.08);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
|
||
}
|
||
|
||
.option-btn.selected {
|
||
border-color: #ffd700;
|
||
box-shadow: 0 0 0 3px #ffd700, 0 5px 20px rgba(0,0,0,0.3);
|
||
transform: scale(1.12);
|
||
}
|
||
|
||
.option-btn::after {
|
||
content: '✓';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) scale(0);
|
||
color: white;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.option-btn.selected::after {
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
|
||
/* Bottom Controls */
|
||
.bottom-controls {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 15px;
|
||
z-index: 50;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 15px 35px;
|
||
font-size: 16px;
|
||
font-family: inherit;
|
||
font-weight: bold;
|
||
border: none;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
transform: translateY(-3px) scale(1.05);
|
||
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.btn-done {
|
||
background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-reset {
|
||
background: linear-gradient(135deg, #87ceeb 0%, #4682b4 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-menu-return {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 20px;
|
||
background: linear-gradient(135deg, #ba55d3 0%, #9370db 100%);
|
||
color: white;
|
||
z-index: 50;
|
||
}
|
||
|
||
/* Result Screen */
|
||
.result-container {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,240,245,0.95) 100%);
|
||
padding: 40px;
|
||
border-radius: 30px;
|
||
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
|
||
max-width: 900px;
|
||
width: 90%;
|
||
text-align: center;
|
||
}
|
||
|
||
.result-title {
|
||
font-size: 42px;
|
||
color: #ff1493;
|
||
margin-bottom: 20px;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.ranking-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20px;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.rank-item {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,240,245,0.8) 100%);
|
||
padding: 20px;
|
||
border-radius: 15px;
|
||
border: 3px solid #ffb6c1;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.rank-label {
|
||
font-size: 16px;
|
||
color: #9370db;
|
||
margin-bottom: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.rank-stars {
|
||
font-size: 32px;
|
||
color: #ffd700;
|
||
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.rank-score {
|
||
font-size: 24px;
|
||
color: #ff1493;
|
||
margin-top: 8px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.total-score {
|
||
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
|
||
color: white;
|
||
padding: 25px;
|
||
border-radius: 20px;
|
||
margin: 30px 0;
|
||
box-shadow: 0 8px 25px rgba(255, 105, 180, 0.4);
|
||
}
|
||
|
||
.total-label {
|
||
font-size: 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.total-value {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.date-message {
|
||
font-size: 22px;
|
||
color: #9370db;
|
||
margin: 25px 0;
|
||
font-style: italic;
|
||
padding: 20px;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
border-radius: 15px;
|
||
border-left: 5px solid #ff69b4;
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Scrollbar Styling */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
|
||
}
|
||
|
||
/* Sparkle Animation */
|
||
@keyframes sparkle {
|
||
0%, 100% { opacity: 0; transform: scale(0); }
|
||
50% { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
.sparkle {
|
||
position: absolute;
|
||
width: 10px;
|
||
height: 10px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
animation: sparkle 1s ease-in-out;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="game-container">
|
||
<!-- Floating Hearts Background -->
|
||
<div id="hearts-container"><div class="heart-bg" style="left: 55.9249%; top: 47.4325%; font-size: 42.0732px; animation-duration: 4.69292s;">💝</div><div class="heart-bg" style="left: 37.8447%; top: 98.0292%; font-size: 47.4963px; animation-duration: 6.04715s;">💗</div><div class="heart-bg" style="left: 20.0734%; top: 93.7839%; font-size: 21.2824px; animation-duration: 6.20198s;">💗</div><div class="heart-bg" style="left: 68.0107%; top: 76.2095%; font-size: 35.9589px; animation-duration: 5.33246s;">💕</div><div class="heart-bg" style="left: 39.2658%; top: 43.1841%; font-size: 32.2588px; animation-duration: 4.84314s;">💝</div><div class="heart-bg" style="left: 94.8125%; top: 3.13949%; font-size: 44.4063px; animation-duration: 6.47385s;">💕</div><div class="heart-bg" style="left: 63.4783%; top: 92.5841%; font-size: 36.882px; animation-duration: 7.86811s;">💕</div><div class="heart-bg" style="left: 11.3771%; top: 48.1976%; font-size: 42.6264px; animation-duration: 7.36787s;">💝</div><div class="heart-bg" style="left: 5.7549%; top: 92.2685%; font-size: 27.7911px; animation-duration: 7.91178s;">💝</div><div class="heart-bg" style="left: 40.1443%; top: 69.5267%; font-size: 36.3715px; animation-duration: 5.89601s;">💝</div></div>
|
||
|
||
<!-- Canvas for Character -->
|
||
<canvas id="gameCanvas" width="1200" height="750"></canvas>
|
||
|
||
<!-- Main Menu -->
|
||
<div id="menuOverlay" class="overlay active">
|
||
<h1 class="main-title">💕 K-BEAUTY MAKEUP DATE 💕</h1>
|
||
<p class="subtitle">Get Ready for Your Perfect Date! 💑</p>
|
||
<p class="taylor-note">🎵 Taylor Swift Edition - Love Story in the Making! 🎵</p>
|
||
|
||
<div class="menu-grid">
|
||
<button class="menu-btn btn-start" onclick="startGame()">▶ START MAKEUP</button>
|
||
<button class="menu-btn btn-music" onclick="showMusicPlayer()">🎵 TAYLOR SWIFT MUSIC</button>
|
||
<button class="menu-btn btn-settings" onclick="showSettings()">⚙ SETTINGS</button>
|
||
<button class="menu-btn btn-quit" onclick="quitGame()">❌ QUIT</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Music Player -->
|
||
<div id="musicOverlay" class="overlay">
|
||
<div class="settings-panel">
|
||
<h2 class="settings-title">🎵 TAYLOR SWIFT MUSIC PLAYER 🎵</h2>
|
||
|
||
<div class="setting-section">
|
||
<div class="setting-label">📀 Select Taylor Swift Song:</div>
|
||
<div class="music-file-input">
|
||
<label for="musicFile" class="file-input-label">
|
||
📂 Choose MP3 File
|
||
</label>
|
||
<input type="file" id="musicFile" accept="audio/*" onchange="loadMusicFile(event)">
|
||
</div>
|
||
<p style="margin-top: 15px; color: #666; font-size: 14px;">
|
||
💡 Tip: Add your favorite Taylor Swift songs like "Love Story", "You Belong With Me", "Shake It Off", etc.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="setting-section">
|
||
<div class="setting-label">🎼 Now Playing:</div>
|
||
<div id="currentSong" style="font-size: 18px; color: #ff1493; font-weight: bold; min-height: 30px;">
|
||
No song selected
|
||
</div>
|
||
<div style="margin-top: 15px; display: flex; gap: 10px; justify-content: center;">
|
||
<button class="btn-control" onclick="playMusic()">▶️</button>
|
||
<button class="btn-control" onclick="pauseMusic()">⏸️</button>
|
||
<button class="btn-control" onclick="stopMusic()">⏹️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-section">
|
||
<div class="setting-label">🔊 Volume Control:</div>
|
||
<div class="slider-wrapper">
|
||
<button class="btn-control" onclick="changeVolume(-0.1)">➖</button>
|
||
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="0.5" oninput="updateVolume(this.value)">
|
||
<button class="btn-control" onclick="changeVolume(0.1)">➕</button>
|
||
<div class="volume-value" id="volumeValue">90%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="menu-btn btn-settings" onclick="showMenu()" style="margin-top: 20px;">↩ BACK TO MENU</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Overlay -->
|
||
<div id="settingsOverlay" class="overlay">
|
||
<div class="settings-panel">
|
||
<h2 class="settings-title">⚙ GAME SETTINGS </h2>
|
||
|
||
<div class="setting-section">
|
||
<div class="setting-label">🎨 Makeup Difficulty:</div>
|
||
<div style="display: flex; gap: 10px; justify-content: center;">
|
||
<button class="menu-btn" id="diff-easy" onclick="setDifficulty('easy')" style="flex: 1; background: linear-gradient(135deg, #90EE90 0%, #228B22 100%);">🟢 Easy</button>
|
||
<button class="menu-btn" id="diff-medium" onclick="setDifficulty('medium')" style="flex: 1; background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);">🟡 Medium</button>
|
||
<button class="menu-btn active" id="diff-hard" onclick="setDifficulty('hard')" style="flex: 1; background: linear-gradient(135deg, #FF6347 0%, #DC143C 100%);">🔴 Hard</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-section">
|
||
<div class="setting-label">💖 Ranking Criteria:</div>
|
||
<ul style="list-style: none; padding: 10px; color: #666; line-height: 2;">
|
||
<li>✨ Color Harmony (25%)</li>
|
||
<li>💄 Trendiness (25%)</li>
|
||
<li>👦 Boyfriend Appeal (30%)</li>
|
||
<li>🎨 Creativity (20%)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<button class="menu-btn btn-settings" onclick="showMenu()" style="margin-top: 20px;">↩ BACK TO MENU</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Result Overlay -->
|
||
<div id="resultOverlay" class="overlay">
|
||
<div class="result-container">
|
||
<h2 class="result-title">🎉 DATE NIGHT RESULTS! 🎉</h2>
|
||
|
||
<div class="ranking-grid">
|
||
<div class="rank-item">
|
||
<div class="rank-label">🎨 Color Harmony</div>
|
||
<div class="rank-stars" id="stars-harmony">⭐⭐⭐</div>
|
||
<div class="rank-score" id="score-harmony">75%</div>
|
||
</div>
|
||
<div class="rank-item">
|
||
<div class="rank-label">✨ Trendiness</div>
|
||
<div class="rank-stars" id="stars-trend">⭐⭐⭐</div>
|
||
<div class="rank-score" id="score-trend">75%</div>
|
||
</div>
|
||
<div class="rank-item">
|
||
<div class="rank-label">💑 Boyfriend Appeal</div>
|
||
<div class="rank-stars" id="stars-appeal">⭐⭐⭐</div>
|
||
<div class="rank-score" id="score-appeal">75%</div>
|
||
</div>
|
||
<div class="rank-item">
|
||
<div class="rank-label"> Creativity</div>
|
||
<div class="rank-stars" id="stars-creativity">⭐⭐⭐</div>
|
||
<div class="rank-score" id="score-creativity">75%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="total-score">
|
||
<div class="total-label">💕 TOTAL DATE SCORE 💕</div>
|
||
<div class="total-value" id="totalScore">75%</div>
|
||
</div>
|
||
|
||
<div class="date-message" id="dateMessage">
|
||
He's absolutely smitten! You look like a K-pop idol! 💖
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 15px; justify-content: center; margin-top: 30px;">
|
||
<button class="menu-btn btn-start" onclick="startGame()">🔄 TRY AGAIN</button>
|
||
<button class="menu-btn btn-settings" onclick="showMenu()">🏠 MAIN MENU</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Game UI -->
|
||
<div id="gameUI" class="hidden">
|
||
<div class="game-header">
|
||
<div class="game-title-text">💄 K-BEAUTY MAKEUP STUDIO 💄</div>
|
||
<div class="music-indicator" id="musicIndicator">
|
||
<span>🎵</span>
|
||
<span id="musicStatus">Music Ready</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Left Panel - Categories -->
|
||
<div class="left-panel">
|
||
<div class="panel-header">💅 MAKEUP STAGES</div>
|
||
<button class="category-btn active" id="cat-foundation" onclick="selectCategory('foundation')" style="background: linear-gradient(135deg, #ffe4c4 0%, #deb887 100%);">
|
||
<span>🧴</span> Foundation
|
||
</button>
|
||
<button class="category-btn" id="cat-concealer" onclick="selectCategory('concealer')" style="background: linear-gradient(135deg, #ffdab9 0%, #ffcc99 100%);">
|
||
<span>✨</span> Concealer
|
||
</button>
|
||
<button class="category-btn" id="cat-eyebrows" onclick="selectCategory('eyebrows')" style="background: linear-gradient(135deg, #d2b48c 0%, #8b7355 100%); color: white;">
|
||
<span>✏️</span> Eyebrows
|
||
</button>
|
||
<button class="category-btn" id="cat-eyeshadow" onclick="selectCategory('eyeshadow')" style="background: linear-gradient(135deg, #dda0dd 0%, #9370db 100%);">
|
||
<span>👁️</span> Eyeshadow
|
||
</button>
|
||
<button class="category-btn" id="cat-eyeliner" onclick="selectCategory('eyeliner')" style="background: linear-gradient(135deg, #e6e6fa 0%, #9370db 100%);">
|
||
<span>✒️</span> Eyeliner
|
||
</button>
|
||
<button class="category-btn" id="cat-mascara" onclick="selectCategory('mascara')" style="background: linear-gradient(135deg, #000000 0%, #4a4a4a 100%); color: white;">
|
||
<span>👁️🗨️</span> Mascara
|
||
</button>
|
||
<button class="category-btn" id="cat-blush" onclick="selectCategory('blush')" style="background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);">
|
||
<span>🌸</span> Blush
|
||
</button>
|
||
<button class="category-btn" id="cat-highlighter" onclick="selectCategory('highlighter')" style="background: linear-gradient(135deg, #fffacd 0%, #ffd700 100%);">
|
||
<span>✨</span> Highlighter
|
||
</button>
|
||
<button class="category-btn" id="cat-lipstick" onclick="selectCategory('lipstick')" style="background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);">
|
||
<span>💋</span> Lipstick
|
||
</button>
|
||
<button class="category-btn" id="cat-lipgloss" onclick="selectCategory('lipgloss')" style="background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);">
|
||
<span>💄</span> Lip Gloss
|
||
</button>
|
||
<button class="category-btn" id="cat-perfume" onclick="selectCategory('perfume')" style="background: linear-gradient(135deg, #e6e6fa 0%, #dda0dd 100%);">
|
||
<span>🌺</span> Perfume
|
||
</button>
|
||
<button class="category-btn" id="cat-earrings" onclick="selectCategory('earrings')" style="background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);">
|
||
<span>💎</span> Earrings
|
||
</button>
|
||
<button class="category-btn" id="cat-necklace" onclick="selectCategory('necklace')" style="background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%);">
|
||
<span>📿</span> Necklace
|
||
</button>
|
||
<button class="category-btn" id="cat-hairstyle" onclick="selectCategory('hairstyle')" style="background: linear-gradient(135deg, #8b4513 0%, #654321 100%); color: white;">
|
||
<span>💇♀️</span> Hairstyle
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Right Panel - Options -->
|
||
<div class="right-panel">
|
||
<div class="panel-header" id="optionsHeader">FOUNDATION</div>
|
||
<div id="optionsContainer" class="color-grid"><button class="option-btn" title="Porcelain (Trend: 8/10)" style="background: rgb(255, 228, 196);"></button><button class="option-btn" title="Natural Beige (Trend: 9/10)" style="background: rgb(245, 222, 179);"></button><button class="option-btn" title="Warm Ivory (Trend: 7/10)" style="background: rgb(255, 219, 172);"></button><button class="option-btn" title="Golden (Trend: 8/10)" style="background: rgb(230, 201, 168);"></button></div>
|
||
</div>
|
||
|
||
<button class="menu-btn btn-menu-return" onclick="showMenu()">🏠 MENU</button>
|
||
|
||
<div class="bottom-controls">
|
||
<button class="action-btn btn-reset" onclick="resetMakeup()">🔄 RESET ALL</button>
|
||
<button class="action-btn btn-done" onclick="calculateResults()">✨ FINISH & RATE</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Game State
|
||
const canvas = document.getElementById('gameCanvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
let currentState = 'menu';
|
||
let musicVolume = 0.5;
|
||
let audioElement = null;
|
||
let currentSongName = '';
|
||
let difficulty = 'medium';
|
||
|
||
// Makeup Data - Enhanced
|
||
const makeupOptions = {
|
||
foundation: [
|
||
{ name: 'Porcelain', color: '#ffe4c4', trend: 8 },
|
||
{ name: 'Natural Beige', color: '#f5deb3', trend: 9 },
|
||
{ name: 'Warm Ivory', color: '#ffdbac', trend: 7 },
|
||
{ name: 'Golden', color: '#e6c9a8', trend: 8 }
|
||
],
|
||
concealer: [
|
||
{ name: 'Light', color: '#ffe4c4', trend: 7 },
|
||
{ name: 'Medium', color: '#deb887', trend: 8 },
|
||
{ name: 'Full Coverage', color: '#d2b48c', trend: 9 }
|
||
],
|
||
eyebrows: [
|
||
{ name: 'Natural Brown', color: '#8b7355', trend: 9 },
|
||
{ name: 'Dark Brown', color: '#654321', trend: 8 },
|
||
{ name: 'Soft Gray', color: '#a9a9a9', trend: 7 },
|
||
{ name: 'Black', color: '#2f2f2f', trend: 8 }
|
||
],
|
||
eyeshadow: [
|
||
{ name: 'Rose Gold', color: '#b76e79', trend: 10 },
|
||
{ name: 'Coral Pink', color: '#f88379', trend: 9 },
|
||
{ name: 'Lavender', color: '#e6e6fa', trend: 8 },
|
||
{ name: 'Champagne', color: '#f7e7ce', trend: 9 },
|
||
{ name: 'Peach', color: '#ffdab9', trend: 8 },
|
||
{ name: 'Mauve', color: '#e0b0ff', trend: 7 }
|
||
],
|
||
eyeliner: [
|
||
{ name: 'Classic Black', color: '#000000', trend: 9 },
|
||
{ name: 'Brown', color: '#8b4513', trend: 8 },
|
||
{ name: 'Navy', color: '#000080', trend: 7 },
|
||
{ name: 'Purple', color: '#9370db', trend: 8 }
|
||
],
|
||
mascara: [
|
||
{ name: 'Black', color: '#000000', trend: 9 },
|
||
{ name: 'Brown Black', color: '#3b2f2f', trend: 8 },
|
||
{ name: 'Volume', color: '#1a1a1a', trend: 10 }
|
||
],
|
||
blush: [
|
||
{ name: 'Baby Pink', color: '#ffb6c1', trend: 9 },
|
||
{ name: 'Coral', color: '#ff7f50', trend: 8 },
|
||
{ name: 'Peach', color: '#ffdab9', trend: 9 },
|
||
{ name: 'Rose', color: '#ff007f', trend: 8 },
|
||
{ name: 'Plum', color: '#dda0dd', trend: 7 }
|
||
],
|
||
highlighter: [
|
||
{ name: 'Pearl', color: '#f8f8ff', trend: 9 },
|
||
{ name: 'Gold', color: '#ffd700', trend: 10 },
|
||
{ name: 'Rose Gold', color: '#b76e79', trend: 10 },
|
||
{ name: 'Champagne', color: '#f7e7ce', trend: 9 }
|
||
],
|
||
lipstick: [
|
||
{ name: 'Cherry Red', color: '#dc143c', trend: 9 },
|
||
{ name: 'Coral Pink', color: '#f88379', trend: 10 },
|
||
{ name: 'Nude', color: '#e6be8a', trend: 9 },
|
||
{ name: 'Berry', color: '#8b008b', trend: 8 },
|
||
{ name: 'Rose', color: '#ff69b4', trend: 10 },
|
||
{ name: 'Plum', color: '#dda0dd', trend: 7 }
|
||
],
|
||
lipgloss: [
|
||
{ name: 'Clear', color: 'rgba(255,255,255,0.6)', trend: 8 },
|
||
{ name: 'Pink Shine', color: 'rgba(255,182,193,0.7)', trend: 9 },
|
||
{ name: 'Gold Shine', color: 'rgba(255,215,0,0.5)', trend: 9 },
|
||
{ name: 'Coral', color: 'rgba(255,127,80,0.6)', trend: 8 }
|
||
],
|
||
perfume: [
|
||
{ name: 'Floral', color: '#ffb6c1', trend: 9 },
|
||
{ name: 'Sweet', color: '#dda0dd', trend: 8 },
|
||
{ name: 'Fresh', color: '#98fb98', trend: 8 },
|
||
{ name: 'Vanilla', color: '#f5deb3', trend: 9 }
|
||
],
|
||
earrings: [
|
||
{ name: 'Gold Hoops', color: '#ffd700', trend: 9 },
|
||
{ name: 'Pearl Studs', color: '#f8f8ff', trend: 10 },
|
||
{ name: 'Diamond', color: '#e0ffff', trend: 10 },
|
||
{ name: 'Rose Gold', color: '#b76e79', trend: 9 },
|
||
{ name: 'None', color: 'transparent', trend: 6 }
|
||
],
|
||
necklace: [
|
||
{ name: 'Gold Chain', color: '#ffd700', trend: 8 },
|
||
{ name: 'Pearl', color: '#f8f8ff', trend: 9 },
|
||
{ name: 'Diamond', color: '#e0ffff', trend: 10 },
|
||
{ name: 'Choker', color: '#ff69b4', trend: 9 },
|
||
{ name: 'None', color: 'transparent', trend: 6 }
|
||
],
|
||
hairstyle: [
|
||
{ name: 'Long Waves', color: '#654321', trend: 10 },
|
||
{ name: 'Straight', color: '#4a3728', trend: 9 },
|
||
{ name: 'Half Up', color: '#8b7355', trend: 10 },
|
||
{ name: 'Ponytail', color: '#654321', trend: 8 },
|
||
{ name: 'Braids', color: '#8b7355', trend: 9 }
|
||
]
|
||
};
|
||
|
||
let selectedMakeup = {};
|
||
let currentCategory = 'foundation';
|
||
|
||
// Initialize
|
||
window.onload = function() {
|
||
createFloatingHearts();
|
||
loadSavedSettings();
|
||
drawGame();
|
||
selectCategory('foundation');
|
||
};
|
||
|
||
function loadSavedSettings() {
|
||
const saved = localStorage.getItem('makeupGameSettings');
|
||
if (saved) {
|
||
const settings = JSON.parse(saved);
|
||
musicVolume = settings.volume || 0.5;
|
||
difficulty = settings.difficulty || 'medium';
|
||
document.getElementById('volumeSlider').value = musicVolume;
|
||
document.getElementById('volumeValue').textContent = Math.round(musicVolume * 100) + '%';
|
||
updateDifficultyButtons();
|
||
}
|
||
}
|
||
|
||
function saveSettings() {
|
||
localStorage.setItem('makeupGameSettings', JSON.stringify({
|
||
volume: musicVolume,
|
||
difficulty: difficulty
|
||
}));
|
||
}
|
||
|
||
// Floating Hearts
|
||
function createFloatingHearts() {
|
||
const container = document.getElementById('hearts-container');
|
||
const hearts = ['💕', '💗', '💖', '💝', '💘'];
|
||
|
||
setInterval(() => {
|
||
if (currentState === 'menu' || currentState === 'result') {
|
||
const heart = document.createElement('div');
|
||
heart.className = 'heart-bg';
|
||
heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];
|
||
heart.style.left = Math.random() * 100 + '%';
|
||
heart.style.top = Math.random() * 100 + '%';
|
||
heart.style.fontSize = (Math.random() * 30 + 20) + 'px';
|
||
heart.style.animationDuration = (Math.random() * 4 + 4) + 's';
|
||
container.appendChild(heart);
|
||
|
||
setTimeout(() => heart.remove(), 8000);
|
||
}
|
||
}, 800);
|
||
}
|
||
|
||
// Music Functions
|
||
function loadMusicFile(event) {
|
||
const file = event.target.files[0];
|
||
if (file) {
|
||
if (audioElement) {
|
||
audioElement.pause();
|
||
}
|
||
audioElement = new Audio(URL.createObjectURL(file));
|
||
audioElement.volume = musicVolume;
|
||
currentSongName = file.name.replace('.mp3', '').replace('.wav', '');
|
||
document.getElementById('currentSong').textContent = '🎵 ' + currentSongName;
|
||
|
||
audioElement.addEventListener('ended', function() {
|
||
document.getElementById('musicStatus').textContent = 'Song Ended';
|
||
});
|
||
}
|
||
}
|
||
|
||
function playMusic() {
|
||
if (audioElement) {
|
||
audioElement.play();
|
||
document.getElementById('musicStatus').textContent = 'Playing: ' + currentSongName;
|
||
document.getElementById('musicIndicator').classList.add('music-playing');
|
||
}
|
||
}
|
||
|
||
function pauseMusic() {
|
||
if (audioElement) {
|
||
audioElement.pause();
|
||
document.getElementById('musicStatus').textContent = 'Paused';
|
||
document.getElementById('musicIndicator').classList.remove('music-playing');
|
||
}
|
||
}
|
||
|
||
function stopMusic() {
|
||
if (audioElement) {
|
||
audioElement.pause();
|
||
audioElement.currentTime = 0;
|
||
document.getElementById('musicStatus').textContent = 'Stopped';
|
||
document.getElementById('musicIndicator').classList.remove('music-playing');
|
||
}
|
||
}
|
||
|
||
function updateVolume(value) {
|
||
musicVolume = parseFloat(value);
|
||
document.getElementById('volumeValue').textContent = Math.round(musicVolume * 100) + '%';
|
||
if (audioElement) {
|
||
audioElement.volume = musicVolume;
|
||
}
|
||
saveSettings();
|
||
}
|
||
|
||
function changeVolume(delta) {
|
||
let newVolume = musicVolume + delta;
|
||
newVolume = Math.max(0, Math.min(1, newVolume));
|
||
document.getElementById('volumeSlider').value = newVolume;
|
||
updateVolume(newVolume);
|
||
}
|
||
|
||
// Category Selection
|
||
function selectCategory(category) {
|
||
currentCategory = category;
|
||
|
||
// Update active button
|
||
document.querySelectorAll('.category-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
document.getElementById('cat-' + category).classList.add('active');
|
||
|
||
// Update options panel
|
||
updateOptionsPanel();
|
||
}
|
||
|
||
function updateOptionsPanel() {
|
||
const container = document.getElementById('optionsContainer');
|
||
const header = document.getElementById('optionsHeader');
|
||
container.innerHTML = '';
|
||
|
||
const options = makeupOptions[currentCategory];
|
||
header.textContent = currentCategory.toUpperCase().replace('_', ' ');
|
||
|
||
options.forEach((option, index) => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'option-btn';
|
||
|
||
if (option.color.includes('rgba')) {
|
||
btn.style.background = option.color;
|
||
btn.style.border = '2px solid #ddd';
|
||
} else {
|
||
btn.style.background = option.color;
|
||
}
|
||
|
||
btn.title = option.name + ' (Trend: ' + option.trend + '/10)';
|
||
|
||
if (selectedMakeup[currentCategory] === index) {
|
||
btn.classList.add('selected');
|
||
}
|
||
|
||
btn.onclick = () => selectOption(index);
|
||
container.appendChild(btn);
|
||
});
|
||
}
|
||
|
||
function selectOption(index) {
|
||
selectedMakeup[currentCategory] = index;
|
||
updateOptionsPanel();
|
||
drawGame();
|
||
createSparkle();
|
||
}
|
||
|
||
function createSparkle() {
|
||
const sparkle = document.createElement('div');
|
||
sparkle.className = 'sparkle';
|
||
sparkle.style.left = (Math.random() * 400 + 400) + 'px';
|
||
sparkle.style.top = (Math.random() * 300 + 200) + 'px';
|
||
document.getElementById('game-container').appendChild(sparkle);
|
||
setTimeout(() => sparkle.remove(), 1000);
|
||
}
|
||
|
||
// Drawing Functions
|
||
function drawHeart(x, y, size, color) {
|
||
ctx.fillStyle = color;
|
||
ctx.beginPath();
|
||
const topCurveHeight = size * 0.3;
|
||
ctx.moveTo(x, y + topCurveHeight);
|
||
ctx.bezierCurveTo(x, y, x - size / 2, y, x - size / 2, y + topCurveHeight);
|
||
ctx.bezierCurveTo(x - size / 2, y + (size + topCurveHeight) / 2, x, y + (size + topCurveHeight) / 2, x, y + size);
|
||
ctx.bezierCurveTo(x, y + (size + topCurveHeight) / 2, x + size / 2, y + (size + topCurveHeight) / 2, x + size / 2, y + topCurveHeight);
|
||
ctx.bezierCurveTo(x + size / 2, y, x, y, x, y + topCurveHeight);
|
||
ctx.fill();
|
||
}
|
||
|
||
function drawKoreanGirl() {
|
||
const x = 600;
|
||
const y = 375;
|
||
|
||
// Get selected options
|
||
const foundation = makeupOptions.foundation[selectedMakeup.foundation || 1];
|
||
const eyeshadow = makeupOptions.eyeshadow[selectedMakeup.eyeshadow || 2];
|
||
const eyeliner = makeupOptions.eyeliner[selectedMakeup.eyeliner || 0];
|
||
const blush = makeupOptions.blush[selectedMakeup.blush || 1];
|
||
const lipstick = makeupOptions.lipstick[selectedMakeup.lipstick || 2];
|
||
const lipgloss = makeupOptions.lipgloss[selectedMakeup.lipgloss || 0];
|
||
const hairstyle = makeupOptions.hairstyle[selectedMakeup.hairstyle || 0];
|
||
const earrings = makeupOptions.earrings[selectedMakeup.earrings || 1];
|
||
const necklace = makeupOptions.necklace[selectedMakeup.necklace || 1];
|
||
|
||
// Hair (based on selection)
|
||
const hairColors = {
|
||
'Long Waves': '#654321',
|
||
'Straight': '#4a3728',
|
||
'Half Up': '#8b7355',
|
||
'Ponytail': '#654321',
|
||
'Braids': '#8b7355'
|
||
};
|
||
const hairColor = hairColors[hairstyle.name] || '#654321';
|
||
|
||
ctx.fillStyle = hairColor;
|
||
|
||
// Hair style variations
|
||
if (hairstyle.name === 'Long Waves') {
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y + 80, 90, 120, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
// Waves
|
||
for (let i = 0; i < 5; i++) {
|
||
ctx.beginPath();
|
||
ctx.arc(x - 70 + i * 35, y + 150, 20, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
} else if (hairstyle.name === 'Straight') {
|
||
ctx.fillRect(x - 75, y - 50, 150, 250);
|
||
ctx.beginPath();
|
||
ctx.arc(x, y - 40, 75, Math.PI, 0);
|
||
ctx.fill();
|
||
} else if (hairstyle.name === 'Half Up') {
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y + 100, 85, 100, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
// Half up bun
|
||
ctx.beginPath();
|
||
ctx.arc(x, y - 70, 35, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
} else if (hairstyle.name === 'Ponytail') {
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y + 50, 85, 90, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
// Ponytail
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 100, y - 20, 30, 80, 0.3, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
} else if (hairstyle.name === 'Braids') {
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y + 80, 85, 100, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
// Braids
|
||
for (let side = -1; side <= 1; side += 2) {
|
||
for (let i = 0; i < 6; i++) {
|
||
ctx.beginPath();
|
||
ctx.arc(x + side * 70, y - 30 + i * 25, 15, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
}
|
||
|
||
// Hair bangs
|
||
ctx.beginPath();
|
||
ctx.arc(x, y - 35, 70, Math.PI, 0);
|
||
ctx.fill();
|
||
|
||
// Side hair
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 75, y + 20, 20, 80, 0.2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 75, y + 20, 20, 80, -0.2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Face with foundation
|
||
ctx.fillStyle = foundation.color;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y, 65, 75, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Eyes (enhanced Korean style)
|
||
const eyeY = y - 20;
|
||
|
||
// Eyeshadow
|
||
ctx.fillStyle = eyeshadow.color;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 35, eyeY - 8, 32, 22, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 35, eyeY - 8, 32, 22, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Gradient eyeshadow effect
|
||
const gradient = ctx.createRadialGradient(x - 35, eyeY - 8, 5, x - 35, eyeY - 8, 30);
|
||
gradient.addColorStop(0, eyeshadow.color);
|
||
gradient.addColorStop(1, 'rgba(255,255,255,0)');
|
||
ctx.fillStyle = gradient;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 35, eyeY - 8, 32, 22, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Eye whites
|
||
ctx.fillStyle = 'white';
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 35, eyeY, 28, 18, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 35, eyeY, 28, 18, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Eyeliner (winged)
|
||
ctx.strokeStyle = eyeliner.color;
|
||
ctx.lineWidth = 3;
|
||
ctx.lineCap = 'round';
|
||
ctx.beginPath();
|
||
ctx.moveTo(x - 60, eyeY - 5);
|
||
ctx.quadraticCurveTo(x - 35, eyeY - 12, x - 10, eyeY - 5);
|
||
ctx.stroke();
|
||
// Wing
|
||
ctx.beginPath();
|
||
ctx.moveTo(x - 10, eyeY - 5);
|
||
ctx.lineTo(x, eyeY - 15);
|
||
ctx.stroke();
|
||
|
||
ctx.beginPath();
|
||
ctx.moveTo(x + 60, eyeY - 5);
|
||
ctx.quadraticCurveTo(x + 35, eyeY - 12, x + 10, eyeY - 5);
|
||
ctx.stroke();
|
||
ctx.beginPath();
|
||
ctx.moveTo(x + 10, eyeY - 5);
|
||
ctx.lineTo(x, eyeY - 15);
|
||
ctx.stroke();
|
||
|
||
// Pupils (big and sparkly)
|
||
ctx.fillStyle = '#4a3728';
|
||
ctx.beginPath();
|
||
ctx.arc(x - 35, eyeY, 9, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.arc(x + 35, eyeY, 9, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Eye highlights (multiple for sparkle)
|
||
ctx.fillStyle = 'white';
|
||
ctx.beginPath();
|
||
ctx.arc(x - 32, eyeY - 4, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.arc(x - 38, eyeY + 2, 2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.arc(x + 38, eyeY - 4, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.arc(x + 32, eyeY + 2, 2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Eyebrows (straight Korean style)
|
||
ctx.strokeStyle = '#4a3728';
|
||
ctx.lineWidth = 3;
|
||
ctx.lineCap = 'round';
|
||
ctx.beginPath();
|
||
ctx.moveTo(x - 55, eyeY - 28);
|
||
ctx.lineTo(x - 20, eyeY - 28);
|
||
ctx.stroke();
|
||
ctx.beginPath();
|
||
ctx.moveTo(x + 20, eyeY - 28);
|
||
ctx.lineTo(x + 55, eyeY - 28);
|
||
ctx.stroke();
|
||
|
||
// Blush (soft gradient)
|
||
ctx.fillStyle = blush.color;
|
||
ctx.globalAlpha = 0.35;
|
||
const blushGradient1 = ctx.createRadialGradient(x - 50, eyeY + 25, 5, x - 50, eyeY + 25, 30);
|
||
blushGradient1.addColorStop(0, blush.color);
|
||
blushGradient1.addColorStop(1, 'rgba(255,255,255,0)');
|
||
ctx.fillStyle = blushGradient1;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 50, eyeY + 25, 30, 18, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
const blushGradient2 = ctx.createRadialGradient(x + 50, eyeY + 25, 5, x + 50, eyeY + 25, 30);
|
||
blushGradient2.addColorStop(0, blush.color);
|
||
blushGradient2.addColorStop(1, 'rgba(255,255,255,0)');
|
||
ctx.fillStyle = blushGradient2;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 50, eyeY + 25, 30, 18, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.globalAlpha = 1;
|
||
|
||
// Nose (small and cute)
|
||
ctx.fillStyle = 'rgba(200, 180, 170, 0.4)';
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y + 18, 10, 14, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Lips with gradient
|
||
const lipY = y + 48;
|
||
|
||
// Base lipstick color
|
||
ctx.fillStyle = lipstick.color;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x - 28, lipY);
|
||
ctx.quadraticCurveTo(x - 14, lipY - 12, x, lipY);
|
||
ctx.quadraticCurveTo(x + 14, lipY - 12, x + 28, lipY);
|
||
ctx.quadraticCurveTo(x + 14, lipY + 8, x, lipY + 8);
|
||
ctx.quadraticCurveTo(x - 14, lipY + 8, x - 28, lipY);
|
||
ctx.fill();
|
||
|
||
// Lower lip
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, lipY + 10, 28, 14, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Lip gloss overlay
|
||
if (lipgloss.name !== 'Clear') {
|
||
ctx.fillStyle = lipgloss.color;
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, lipY + 8, 22, 10, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
|
||
// Lip highlight
|
||
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 10, lipY + 6, 12, 5, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 10, lipY + 12, 10, 4, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Neck
|
||
ctx.fillStyle = foundation.color;
|
||
ctx.fillRect(x - 22, y + 70, 44, 40);
|
||
|
||
// Earrings
|
||
if (earrings.name !== 'None') {
|
||
ctx.fillStyle = earrings.color;
|
||
// Left earring
|
||
ctx.beginPath();
|
||
ctx.arc(x - 68, y + 10, 8, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.strokeStyle = earrings.color;
|
||
ctx.lineWidth = 2;
|
||
ctx.stroke();
|
||
|
||
// Right earring
|
||
ctx.beginPath();
|
||
ctx.arc(x + 68, y + 10, 8, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Necklace
|
||
if (necklace.name !== 'None') {
|
||
ctx.strokeStyle = necklace.color;
|
||
ctx.lineWidth = 4;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y + 90, 50, 0.2, Math.PI - 0.2);
|
||
ctx.stroke();
|
||
|
||
// Pendant
|
||
ctx.fillStyle = necklace.color;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y + 135, 8, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
|
||
// Dress (elegant date outfit)
|
||
ctx.fillStyle = '#ff69b4';
|
||
ctx.beginPath();
|
||
ctx.moveTo(x - 100, y + 100);
|
||
ctx.quadraticCurveTo(x, y + 90, x + 100, y + 100);
|
||
ctx.lineTo(x + 110, y + 250);
|
||
ctx.quadraticCurveTo(x, y + 260, x - 110, y + 250);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
|
||
// Dress details
|
||
ctx.fillStyle = '#ffb6c1';
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y + 180, 80, 50, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Heart on dress
|
||
drawHeart(x, y + 180, 25, '#ff1493');
|
||
|
||
// Perfume sparkle effect
|
||
if (selectedMakeup.perfume !== undefined) {
|
||
const perfume = makeupOptions.perfume[selectedMakeup.perfume];
|
||
ctx.fillStyle = 'rgba(255, 215, 0, 0.6)';
|
||
for (let i = 0; i < 5; i++) {
|
||
const px = x - 150 + Math.random() * 50;
|
||
const py = y + 50 + Math.random() * 100;
|
||
ctx.beginPath();
|
||
ctx.arc(px, py, 3, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
}
|
||
|
||
function drawBoyfriend() {
|
||
const x = 850;
|
||
const y = 375;
|
||
|
||
// Hair
|
||
ctx.fillStyle = '#4a3728';
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y - 25, 75, 55, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 65, y, 18, 65, 0.2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 65, y, 18, 65, -0.2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Face
|
||
ctx.fillStyle = '#f5deb3';
|
||
ctx.beginPath();
|
||
ctx.ellipse(x, y, 55, 65, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Eyes (heart-shaped pupils showing he's in love)
|
||
ctx.fillStyle = '#4a3728';
|
||
ctx.beginPath();
|
||
ctx.arc(x - 22, y - 12, 7, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.arc(x + 22, y - 12, 7, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Heart eyes
|
||
ctx.fillStyle = '#ff1493';
|
||
drawHeart(x - 22, y - 12, 12, '#ff1493');
|
||
drawHeart(x + 22, y - 12, 12, '#ff1493');
|
||
|
||
// Smile (big and happy)
|
||
ctx.strokeStyle = '#4a3728';
|
||
ctx.lineWidth = 4;
|
||
ctx.lineCap = 'round';
|
||
ctx.beginPath();
|
||
ctx.arc(x, y + 15, 30, 0.1, Math.PI - 0.1);
|
||
ctx.stroke();
|
||
|
||
// Blush (he's blushing too!)
|
||
ctx.fillStyle = 'rgba(255, 182, 193, 0.4)';
|
||
ctx.beginPath();
|
||
ctx.ellipse(x - 40, y + 5, 15, 10, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.beginPath();
|
||
ctx.ellipse(x + 40, y + 5, 15, 10, 0, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Body (nice outfit)
|
||
ctx.fillStyle = '#4682b4';
|
||
ctx.fillRect(x - 55, y + 60, 110, 100);
|
||
|
||
// Tie
|
||
ctx.fillStyle = '#dc143c';
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, y + 60);
|
||
ctx.lineTo(x - 12, y + 90);
|
||
ctx.lineTo(x, y + 120);
|
||
ctx.lineTo(x + 12, y + 90);
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
|
||
// Hearts floating around him
|
||
drawHeart(x + 80, y - 50, 20, '#ff69b4');
|
||
drawHeart(x - 80, y - 30, 15, '#ff1493');
|
||
}
|
||
|
||
function drawGame() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// Background gradient
|
||
const bgGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
|
||
bgGradient.addColorStop(0, '#fff0f5');
|
||
bgGradient.addColorStop(0.5, '#ffe4ec');
|
||
bgGradient.addColorStop(1, '#ffd6e7');
|
||
ctx.fillStyle = bgGradient;
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// Decorative pattern
|
||
ctx.fillStyle = 'rgba(255, 182, 193, 0.2)';
|
||
for (let i = 0; i < canvas.width; i += 40) {
|
||
for (let j = 0; j < canvas.height; j += 40) {
|
||
ctx.beginPath();
|
||
ctx.arc(i, j, 3, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
|
||
if (currentState === 'game' || currentState === 'result') {
|
||
drawKoreanGirl();
|
||
|
||
if (currentState === 'result') {
|
||
drawBoyfriend();
|
||
|
||
// Hearts between them
|
||
drawHeart(725, 325, 45, '#ff1493');
|
||
drawHeart(690, 370, 30, '#ff69b4');
|
||
drawHeart(760, 370, 30, '#ff69b4');
|
||
|
||
// Sparkles
|
||
for (let i = 0; i < 10; i++) {
|
||
const sx = 650 + Math.random() * 150;
|
||
const sy = 300 + Math.random() * 100;
|
||
ctx.fillStyle = 'rgba(255, 215, 0, 0.8)';
|
||
ctx.beginPath();
|
||
ctx.arc(sx, sy, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// State Management
|
||
function showMenu() {
|
||
currentState = 'menu';
|
||
document.getElementById('menuOverlay').classList.add('active');
|
||
document.getElementById('musicOverlay').classList.remove('active');
|
||
document.getElementById('settingsOverlay').classList.remove('active');
|
||
document.getElementById('resultOverlay').classList.remove('active');
|
||
document.getElementById('gameUI').classList.add('hidden');
|
||
drawGame();
|
||
}
|
||
|
||
function showMusicPlayer() {
|
||
currentState = 'music';
|
||
document.getElementById('menuOverlay').classList.remove('active');
|
||
document.getElementById('musicOverlay').classList.add('active');
|
||
}
|
||
|
||
function showSettings() {
|
||
currentState = 'settings';
|
||
document.getElementById('menuOverlay').classList.remove('active');
|
||
document.getElementById('settingsOverlay').classList.add('active');
|
||
}
|
||
|
||
function setDifficulty(diff) {
|
||
difficulty = diff;
|
||
updateDifficultyButtons();
|
||
saveSettings();
|
||
}
|
||
|
||
function updateDifficultyButtons() {
|
||
['easy', 'medium', 'hard'].forEach(d => {
|
||
const btn = document.getElementById('diff-' + d);
|
||
if (d === difficulty) {
|
||
btn.classList.add('active');
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
function startGame() {
|
||
currentState = 'game';
|
||
selectedMakeup = {};
|
||
document.getElementById('menuOverlay').classList.remove('active');
|
||
document.getElementById('musicOverlay').classList.remove('active');
|
||
document.getElementById('settingsOverlay').classList.remove('active');
|
||
document.getElementById('resultOverlay').classList.remove('active');
|
||
document.getElementById('gameUI').classList.remove('hidden');
|
||
|
||
selectCategory('foundation');
|
||
drawGame();
|
||
}
|
||
|
||
function resetMakeup() {
|
||
selectedMakeup = {};
|
||
selectCategory('foundation');
|
||
drawGame();
|
||
}
|
||
|
||
// Advanced Ranking System
|
||
function calculateResults() {
|
||
currentState = 'result';
|
||
|
||
// Calculate scores for each category
|
||
let harmonyScore = 0;
|
||
let trendScore = 0;
|
||
let appealScore = 0;
|
||
let creativityScore = 0;
|
||
|
||
const categories = Object.keys(makeupOptions);
|
||
let totalTrend = 0;
|
||
let colorHarmony = true;
|
||
let hasMatching = false;
|
||
|
||
// Analyze selections
|
||
categories.forEach(cat => {
|
||
if (selectedMakeup[cat] !== undefined) {
|
||
const option = makeupOptions[cat][selectedMakeup[cat]];
|
||
totalTrend += option.trend;
|
||
|
||
// Check color harmony
|
||
if (cat === 'eyeshadow' || cat === 'blush' || cat === 'lipstick') {
|
||
// Simple harmony check - similar warm/cool tones
|
||
const warmColors = ['#ff69b4', '#ff7f50', '#ffdab9', '#f88379', '#dc143c', '#ff007f'];
|
||
const coolColors = ['#e6e6fa', '#9370dd', '#dda0dd', '#8b008b'];
|
||
|
||
if (warmColors.some(c => option.color.includes(c.replace('#', '')))) {
|
||
if (!hasMatching) hasMatching = 'warm';
|
||
if (hasMatching !== 'warm') colorHarmony = false;
|
||
} else if (coolColors.some(c => option.color.includes(c.replace('#', '')))) {
|
||
if (!hasMatching) hasMatching = 'cool';
|
||
if (hasMatching !== 'cool') colorHarmony = false;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// Calculate individual scores
|
||
const avgTrend = totalTrend / Math.max(1, Object.keys(selectedMakeup).length);
|
||
trendScore = Math.min(100, Math.round((avgTrend / 10) * 100));
|
||
|
||
harmonyScore = colorHarmony ? 85 + Math.random() * 15 : 50 + Math.random() * 30;
|
||
harmonyScore = Math.round(harmonyScore);
|
||
|
||
// Boyfriend appeal based on trendiness and completeness
|
||
const completeness = Object.keys(selectedMakeup).length / categories.length;
|
||
appealScore = Math.round((trendScore * 0.4 + completeness * 100 * 0.6));
|
||
|
||
// Creativity based on variety and bold choices
|
||
const uniqueColors = new Set(Object.values(selectedMakeup)).size;
|
||
creativityScore = Math.round(60 + (uniqueColors * 5) + Math.random() * 20);
|
||
creativityScore = Math.min(100, creativityScore);
|
||
|
||
// Apply difficulty modifier
|
||
const difficultyMultiplier = difficulty === 'easy' ? 1.2 : difficulty === 'medium' ? 1.0 : 0.9;
|
||
harmonyScore = Math.min(100, Math.round(harmonyScore * difficultyMultiplier));
|
||
trendScore = Math.min(100, Math.round(trendScore * difficultyMultiplier));
|
||
appealScore = Math.min(100, Math.round(appealScore * difficultyMultiplier));
|
||
creativityScore = Math.min(100, Math.round(creativityScore * difficultyMultiplier));
|
||
|
||
// Calculate total
|
||
const totalScore = Math.round((harmonyScore * 0.25 + trendScore * 0.25 + appealScore * 0.30 + creativityScore * 0.20));
|
||
|
||
// Update UI
|
||
updateStars('harmony', harmonyScore);
|
||
updateStars('trend', trendScore);
|
||
updateStars('appeal', appealScore);
|
||
updateStars('creativity', creativityScore);
|
||
|
||
document.getElementById('score-harmony').textContent = harmonyScore + '%';
|
||
document.getElementById('score-trend').textContent = trendScore + '%';
|
||
document.getElementById('score-appeal').textContent = appealScore + '%';
|
||
document.getElementById('score-creativity').textContent = creativityScore + '%';
|
||
document.getElementById('totalScore').textContent = totalScore + '%';
|
||
|
||
// Generate message based on score
|
||
const messages = [
|
||
{ threshold: 95, text: "PERFECT! You're a makeup artist! He's completely mesmerized! 💖✨" },
|
||
{ threshold: 85, text: "Absolutely stunning! You look like a K-pop idol! He can't take his eyes off you! 💕" },
|
||
{ threshold: 75, text: "Gorgeous! He's totally smitten! Perfect date look! 😍" },
|
||
{ threshold: 65, text: "Very pretty! He really likes your style! Great job! 💗" },
|
||
{ threshold: 55, text: "Nice! You look good! He's interested! 👍" },
|
||
{ threshold: 0, text: "Good effort! Keep practicing your makeup skills! 💪" }
|
||
];
|
||
|
||
const message = messages.find(m => totalScore >= m.threshold) || messages[messages.length - 1];
|
||
document.getElementById('dateMessage').textContent = message.text;
|
||
|
||
// Show result
|
||
document.getElementById('gameUI').classList.add('hidden');
|
||
document.getElementById('resultOverlay').classList.add('active');
|
||
|
||
drawGame();
|
||
}
|
||
|
||
function updateStars(category, score) {
|
||
const starCount = Math.ceil(score / 20);
|
||
const stars = '⭐'.repeat(starCount) + '☆'.repeat(5 - starCount);
|
||
document.getElementById('stars-' + category).textContent = stars;
|
||
}
|
||
|
||
function quitGame() {
|
||
if (confirm('Are you sure you want to quit? Your progress will be lost! 💔')) {
|
||
if (audioElement) {
|
||
audioElement.pause();
|
||
}
|
||
window.close();
|
||
document.body.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100vh;font-size:28px;color:#ff1493;text-align:center;">Thanks for playing K-Beauty Makeup Game! 💕<br>You can close this tab now.</div>';
|
||
}
|
||
}
|
||
|
||
// Initialize
|
||
drawGame();
|
||
</script>
|
||
|
||
</body></html> |