824 أسطر
34 KiB
HTML
824 أسطر
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>creative kid · copy the painting</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
}
|
||
|
||
body {
|
||
background: #b8d8d0;
|
||
background-image: radial-gradient(circle at 30% 40%, #d4eae2 0%, #b0cfc5 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: 'Segoe UI', 'Comic Sans MS', 'Cairo', sans-serif;
|
||
padding: 16px;
|
||
}
|
||
|
||
.game-box {
|
||
max-width: 1200px;
|
||
width: 100%;
|
||
background: #fcf3e0;
|
||
border-radius: 80px 80px 50px 50px;
|
||
border: 6px solid #ffb882;
|
||
box-shadow: 0 20px 0 #9f7c5f, 0 30px 30px rgba(0,0,0,0.25);
|
||
padding: 30px 25px 25px;
|
||
}
|
||
|
||
.level-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #fad6b3;
|
||
border-radius: 120px;
|
||
padding: 12px 25px;
|
||
margin-bottom: 30px;
|
||
border: 4px solid #c1804b;
|
||
box-shadow: 0 7px 0 #825e3c;
|
||
}
|
||
|
||
.level-badge {
|
||
background: #2b5e5e;
|
||
color: #f5ffd3;
|
||
font-size: 1.8rem;
|
||
font-weight: 700;
|
||
padding: 8px 35px;
|
||
border-radius: 70px;
|
||
border: 3px solid #fbd26a;
|
||
box-shadow: 0 5px 0 #143535;
|
||
transform: rotate(-1deg);
|
||
}
|
||
|
||
.stars-box {
|
||
display: flex;
|
||
gap: 8px;
|
||
background: #fcedb3;
|
||
padding: 10px 30px;
|
||
border-radius: 50px;
|
||
border: 3px solid #ab6f3f;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.message-panel {
|
||
background: #feebc0;
|
||
padding: 15px 25px;
|
||
border-radius: 40px;
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
color: #2a4f4f;
|
||
border: 3px solid #d68b4c;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 5px 0 #ad7b55;
|
||
transition: all 0.3s;
|
||
min-height: 90px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.painting-area {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
justify-content: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.master-piece {
|
||
flex: 1 1 280px;
|
||
min-width: 280px;
|
||
background: #eadac0;
|
||
padding: 25px 20px;
|
||
border-radius: 60px;
|
||
border: 6px solid #a1683a;
|
||
box-shadow: 0 12px 0 #603f24, inset 0 -5px 0 #ffefd1;
|
||
}
|
||
|
||
.master-piece h3 {
|
||
text-align: center;
|
||
background: #a1582b;
|
||
color: white;
|
||
padding: 15px 10px;
|
||
border-radius: 50px;
|
||
margin-top: -50px;
|
||
margin-bottom: 25px;
|
||
font-size: 1.8rem;
|
||
border: 3px solid #ffbe7a;
|
||
}
|
||
|
||
.canvas-master {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
background: white;
|
||
border-radius: 40px;
|
||
box-shadow: 0 8px 0 #6f4f33;
|
||
border: 3px solid #402e1b;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.kid-canvas-wrap {
|
||
flex: 1 1 280px;
|
||
min-width: 280px;
|
||
background: #cfb595;
|
||
padding: 25px 20px;
|
||
border-radius: 60px;
|
||
border: 6px solid #4f7b6e;
|
||
box-shadow: 0 12px 0 #295b4e, inset 0 -5px 0 #dcf2e3;
|
||
}
|
||
|
||
.kid-canvas-wrap h3 {
|
||
text-align: center;
|
||
background: #1e6d5e;
|
||
color: white;
|
||
padding: 15px 10px;
|
||
border-radius: 50px;
|
||
margin-top: -50px;
|
||
margin-bottom: 25px;
|
||
font-size: 1.8rem;
|
||
border: 3px solid #9ef0d6;
|
||
}
|
||
|
||
.canvas-kid {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
background: white;
|
||
border-radius: 40px;
|
||
box-shadow: 0 8px 0 #2e5a4b;
|
||
border: 3px solid #1c463a;
|
||
cursor: crosshair;
|
||
touch-action: none;
|
||
}
|
||
|
||
.draw-tools {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
background: #ffe5ca;
|
||
padding: 15px 25px;
|
||
border-radius: 70px;
|
||
border: 4px solid #c47748;
|
||
box-shadow: 0 8px 0 #9e5b31;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.color-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.color-dot {
|
||
width: 45px;
|
||
height: 45px;
|
||
border-radius: 50%;
|
||
border: 4px solid #3a281b;
|
||
cursor: pointer;
|
||
box-shadow: 0 5px 0 #5d4d3a;
|
||
transition: all 0.1s;
|
||
}
|
||
|
||
.color-dot.active {
|
||
transform: scale(1.15);
|
||
border: 5px solid white;
|
||
box-shadow: 0 0 0 3px #2d6e6e, 0 5px 0 #5d4d3a;
|
||
}
|
||
|
||
.size-pick {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: #b5aa95;
|
||
padding: 5px 15px;
|
||
border-radius: 40px;
|
||
border: 3px solid #564b38;
|
||
}
|
||
|
||
.size-btn {
|
||
background: #fcf3e6;
|
||
border: 3px solid #5d4f3b;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
width: 45px;
|
||
height: 45px;
|
||
border-radius: 30px;
|
||
box-shadow: 0 5px 0 #5e4b32;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
|
||
.size-btn:active {
|
||
transform: translateY(4px);
|
||
box-shadow: none;
|
||
}
|
||
|
||
#sizeDisplay {
|
||
font-size: 1.6rem;
|
||
min-width: 45px;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
background: #f0dbbc;
|
||
padding: 5px 0;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.action-group {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.action-btn {
|
||
background: #fae6cd;
|
||
border: 4px solid #946b42;
|
||
font-size: 1.3rem;
|
||
padding: 10px 22px;
|
||
border-radius: 50px;
|
||
cursor: pointer;
|
||
box-shadow: 0 7px 0 #75583a;
|
||
transition: 0.07s;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.action-btn:active {
|
||
transform: translateY(7px);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.action-btn:disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.level-complete {
|
||
text-align: center;
|
||
background: #b3e4b3;
|
||
border: 4px solid #12874a;
|
||
border-radius: 50px;
|
||
padding: 20px;
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
color: #054d2b;
|
||
margin-top: 20px;
|
||
animation: bounce 1s infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="game-box" id="gameBox">
|
||
<div class="level-header">
|
||
<div class="level-badge"><span>🎨</span> مرحلة <span id="levelNumber">1</span>/15</div>
|
||
<div class="stars-box" id="starDisplay">⭐⭐⭐</div>
|
||
</div>
|
||
|
||
<div class="message-panel" id="gameMessage">
|
||
👆 ابدأ الرسم! انسخ اللوحة الأصل
|
||
</div>
|
||
|
||
<div class="painting-area">
|
||
<div class="master-piece">
|
||
<h3>🖼️ اللوحة الأصل</h3>
|
||
<canvas id="masterCanvas" class="canvas-master" width="300" height="300"></canvas>
|
||
</div>
|
||
|
||
<div class="kid-canvas-wrap">
|
||
<h3>🧑🎤 نسختك</h3>
|
||
<canvas id="kidCanvas" class="canvas-kid" width="300" height="300"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="draw-tools">
|
||
<div class="color-row" id="colorPalette"></div>
|
||
<div class="size-pick">
|
||
<button class="size-btn" id="sizeDown">−</button>
|
||
<span id="sizeDisplay">8</span>
|
||
<button class="size-btn" id="sizeUp">+</button>
|
||
</div>
|
||
<div class="action-group">
|
||
<button class="action-btn" id="clearKidBtn">🧽 امسح</button>
|
||
<button class="action-btn" id="nextLevelBtn">➡️ التالي</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="levelCompleteMsg" class="level-complete hidden">✨ أحسنت! فتحت المرحلة التالية ✨</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
// الألوان المتاحة
|
||
const colors = [
|
||
{ hex: '#1e5fb4', name: 'أزرق' },
|
||
{ hex: '#c93838', name: 'أحمر' },
|
||
{ hex: '#e6b422', name: 'أصفر' },
|
||
{ hex: '#2b7d4d', name: 'أخضر' },
|
||
{ hex: '#8B4513', name: 'بني' },
|
||
{ hex: '#b07d5e', name: 'بني فاتح' },
|
||
{ hex: '#000000', name: 'أسود' },
|
||
{ hex: '#f57eb6', name: 'وردي' },
|
||
{ hex: '#aa80ff', name: 'بنفسجي' },
|
||
{ hex: '#cc6612', name: 'برتقالي' }
|
||
];
|
||
|
||
// 15 مستوى (5 قديمة + 10 جديدة أكثر تعقيداً)
|
||
const levels = [
|
||
{
|
||
name: "الدائرة الزرقاء",
|
||
bg: '#ffffff',
|
||
shapes: [
|
||
{ type: 'circle', x: 150, y: 150, radius: 60, color: '#1e5fb4', fill: true }
|
||
]
|
||
},
|
||
{
|
||
name: "المربع والدائرة",
|
||
bg: '#ffffff',
|
||
shapes: [
|
||
{ type: 'rect', x: 100, y: 100, w: 80, h: 80, color: '#c93838', fill: true },
|
||
{ type: 'circle', x: 220, y: 220, radius: 35, color: '#e6b422', fill: true }
|
||
]
|
||
},
|
||
{
|
||
name: "المثلث والخطوط",
|
||
bg: '#ffffff',
|
||
shapes: [
|
||
{ type: 'triangle', x1: 150, y1: 70, x2: 80, y2: 200, x3: 220, y3: 200, color: '#2b7d4d', fill: true },
|
||
{ type: 'line', x1: 40, y1: 260, x2: 260, y2: 260, color: '#8B4513', width: 6 },
|
||
{ type: 'line', x1: 50, y1: 270, x2: 250, y2: 270, color: '#b07d5e', width: 4 }
|
||
]
|
||
},
|
||
{
|
||
name: "المنزل الجميل",
|
||
bg: '#f0f8ff',
|
||
shapes: [
|
||
{ type: 'rect', x: 110, y: 160, w: 120, h: 100, color: '#b07d5e', fill: true },
|
||
{ type: 'triangle', x1: 80, y1: 160, x2: 260, y2: 160, x3: 170, y3: 70, color: '#c93838', fill: true },
|
||
{ type: 'rect', x: 155, y: 210, w: 30, h: 50, color: '#e6b422', fill: true }
|
||
]
|
||
},
|
||
{
|
||
name: "الشجرة الخضراء",
|
||
bg: '#ecffe7',
|
||
shapes: [
|
||
{ type: 'rect', x: 135, y: 200, w: 30, h: 80, color: '#8B4513', fill: true },
|
||
{ type: 'circle', x: 150, y: 150, radius: 45, color: '#2b7d4d', fill: true },
|
||
{ type: 'circle', x: 115, y: 130, radius: 20, color: '#2b7d4d', fill: true },
|
||
{ type: 'circle', x: 185, y: 130, radius: 20, color: '#2b7d4d', fill: true }
|
||
]
|
||
},
|
||
// المستويات الجديدة الأكثر تعقيداً (6-15)
|
||
{
|
||
name: "الغروب فوق الجبال",
|
||
bg: '#ff9f4b',
|
||
shapes: [
|
||
{ type: 'rect', x: 0, y: 0, w: 300, h: 150, color: '#ffd966', fill: true },
|
||
{ type: 'rect', x: 0, y: 150, w: 300, h: 150, color: '#2b5e5e', fill: true },
|
||
{ type: 'triangle', x1: 0, y1: 180, x2: 80, y2: 80, x3: 160, y3: 180, color: '#4a3729', fill: true },
|
||
{ type: 'triangle', x1: 140, y1: 180, x2: 220, y2: 60, x3: 300, y3: 180, color: '#4a3729', fill: true },
|
||
{ type: 'circle', x: 250, y: 70, radius: 25, color: '#f5e56b', fill: true },
|
||
{ type: 'circle', x: 50, y: 220, radius: 8, color: '#ffffff', fill: true },
|
||
{ type: 'circle', x: 90, y: 240, radius: 6, color: '#ffffff', fill: true },
|
||
{ type: 'circle', x: 200, y: 250, radius: 7, color: '#ffffff', fill: true }
|
||
]
|
||
},
|
||
{
|
||
name: "الوجه المبتسم",
|
||
bg: '#fef9e7',
|
||
shapes: [
|
||
{ type: 'circle', x: 150, y: 150, radius: 80, color: '#ffdb7e', fill: true },
|
||
{ type: 'circle', x: 110, y: 120, radius: 12, color: '#000000', fill: true },
|
||
{ type: 'circle', x: 190, y: 120, radius: 10, color: '#000000', fill: true },
|
||
{ type: 'circle', x: 112, y: 118, radius: 4, color: '#ffffff', fill: true },
|
||
{ type: 'circle', x: 192, y: 118, radius: 3, color: '#ffffff', fill: true },
|
||
{ type: 'arc', x: 150, y: 170, radius: 35, start: 0.1, end: Math.PI - 0.1, color: '#a55d5d', fill: false, width: 5 },
|
||
{ type: 'line', x1: 120, y1: 200, x2: 180, y2: 200, color: '#d96b6b', width: 4 }
|
||
]
|
||
},
|
||
{
|
||
name: "الزهرة الجميلة",
|
||
bg: '#d6f0d6',
|
||
shapes: [
|
||
{ type: 'circle', x: 150, y: 150, radius: 25, color: '#ffaa44', fill: true },
|
||
{ type: 'circle', x: 110, y: 110, radius: 20, color: '#ff6b8b', fill: true },
|
||
{ type: 'circle', x: 190, y: 110, radius: 20, color: '#ff8b9c', fill: true },
|
||
{ type: 'circle', x: 110, y: 190, radius: 20, color: '#ff7b9c', fill: true },
|
||
{ type: 'circle', x: 190, y: 190, radius: 20, color: '#ff9bbd', fill: true },
|
||
{ type: 'line', x1: 150, y1: 150, x2: 150, y2: 250, color: '#2b7d4d', width: 8 },
|
||
{ type: 'rect', x: 140, y: 250, w: 20, h: 30, color: '#2b7d4d', fill: true },
|
||
{ type: 'line', x1: 90, y1: 210, x2: 130, y2: 230, color: '#2b7d4d', width: 4 },
|
||
{ type: 'line', x1: 210, y1: 210, x2: 170, y2: 230, color: '#2b7d4d', width: 4 }
|
||
]
|
||
},
|
||
{
|
||
name: "السمكة المرحة",
|
||
bg: '#add8e6',
|
||
shapes: [
|
||
{ type: 'ellipse', x: 150, y: 150, rx: 70, ry: 40, color: '#ff9933', fill: true, rotation: 0 },
|
||
{ type: 'triangle', x1: 210, y1: 135, x2: 250, y2: 150, x3: 210, y3: 165, color: '#ff9933', fill: true },
|
||
{ type: 'circle', x: 120, y: 135, radius: 6, color: '#000000', fill: true },
|
||
{ type: 'circle', x: 115, y: 130, radius: 2, color: '#ffffff', fill: true },
|
||
{ type: 'arc', x: 130, y: 160, radius: 15, start: 0, end: Math.PI, color: '#cc6600', fill: false, width: 3 },
|
||
{ type: 'circle', x: 60, y: 110, radius: 8, color: '#b0e0e6', fill: true },
|
||
{ type: 'circle', x: 80, y: 190, radius: 6, color: '#b0e0e6', fill: true },
|
||
{ type: 'circle', x: 220, y: 80, radius: 7, color: '#b0e0e6', fill: true },
|
||
{ type: 'circle', x: 240, y: 210, radius: 9, color: '#b0e0e6', fill: true }
|
||
]
|
||
},
|
||
{
|
||
name: "الفراشة الملونة",
|
||
bg: '#f0e68c',
|
||
shapes: [
|
||
{ type: 'ellipse', x: 150, y: 150, rx: 25, ry: 60, color: '#8b4513', fill: true, rotation: 0 },
|
||
{ type: 'circle', x: 150, y: 120, radius: 15, color: '#000000', fill: true },
|
||
{ type: 'circle', x: 140, y: 115, radius: 3, color: '#ffffff', fill: true },
|
||
{ type: 'circle', x: 160, y: 115, radius: 3, color: '#ffffff', fill: true },
|
||
{ type: 'arc', x1: 100, y1: 100, x2: 50, y2: 80, x3: 80, y3: 130, color: '#ff69b4', fill: true },
|
||
{ type: 'arc', x1: 200, y1: 100, x2: 250, y2: 80, x3: 220, y3: 130, color: '#ff69b4', fill: true },
|
||
{ type: 'arc', x1: 100, y1: 180, x2: 50, y2: 200, x3: 80, y3: 150, color: '#ff69b4', fill: true },
|
||
{ type: 'arc', x1: 200, y1: 180, x2: 250, y2: 200, x3: 220, y3: 150, color: '#ff69b4', fill: true },
|
||
{ type: 'line', x1: 150, y1: 180, x2: 150, y2: 220, color: '#8b4513', width: 4 }
|
||
]
|
||
},
|
||
{
|
||
name: "المنزل والحديقة",
|
||
bg: '#c6e9c6',
|
||
shapes: [
|
||
{ type: 'rect', x: 100, y: 150, w: 120, h: 100, color: '#cd853f', fill: true },
|
||
{ type: 'triangle', x1: 70, y1: 150, x2: 250, y2: 150, x3: 160, y3: 70, color: '#8b4513', fill: true },
|
||
{ type: 'rect', x: 145, y: 190, w: 30, h: 60, color: '#d2b48c', fill: true },
|
||
{ type: 'circle', x: 160, y: 220, radius: 8, color: '#8b4513', fill: true },
|
||
{ type: 'rect', x: 40, y: 200, w: 30, h: 50, color: '#228b22', fill: true },
|
||
{ type: 'circle', x: 55, y: 180, radius: 15, color: '#228b22', fill: true },
|
||
{ type: 'circle', x: 250, y: 220, radius: 12, color: '#ffa500', fill: true },
|
||
{ type: 'circle', x: 270, y: 200, radius: 10, color: '#ffa500', fill: true },
|
||
{ type: 'circle', x: 230, y: 200, radius: 10, color: '#ffa500', fill: true },
|
||
{ type: 'line', x1: 20, y1: 250, x2: 280, y2: 250, color: '#8b4513', width: 3 }
|
||
]
|
||
},
|
||
{
|
||
name: "نجمة البحر",
|
||
bg: '#a4d3ee',
|
||
shapes: [
|
||
{ type: 'star', x: 150, y: 150, points: 5, outer: 60, inner: 30, color: '#ffa500', fill: true },
|
||
{ type: 'circle', x: 150, y: 150, radius: 20, color: '#ff8c00', fill: true },
|
||
{ type: 'circle', x: 100, y: 100, radius: 10, color: '#ffb6c1', fill: true },
|
||
{ type: 'circle', x: 200, y: 100, radius: 8, color: '#ffb6c1', fill: true },
|
||
{ type: 'circle', x: 100, y: 200, radius: 9, color: '#ffb6c1', fill: true },
|
||
{ type: 'circle', x: 200, y: 200, radius: 11, color: '#ffb6c1', fill: true },
|
||
{ type: 'circle', x: 150, y: 70, radius: 12, color: '#ffb6c1', fill: true },
|
||
{ type: 'circle', x: 150, y: 230, radius: 10, color: '#ffb6c1', fill: true }
|
||
]
|
||
},
|
||
{
|
||
name: "المركب الشراعي",
|
||
bg: '#b0e2ff',
|
||
shapes: [
|
||
{ type: 'rect', x: 130, y: 180, w: 80, h: 15, color: '#8b4513', fill: true },
|
||
{ type: 'triangle', x1: 150, y1: 180, x2: 190, y2: 180, x3: 170, y3: 80, color: '#ffffff', fill: true },
|
||
{ type: 'triangle', x1: 160, y1: 170, x2: 200, y2: 170, x3: 180, y3: 60, color: '#f0f0f0', fill: true },
|
||
{ type: 'line', x1: 170, y1: 80, x2: 170, y2: 180, color: '#000000', width: 2 },
|
||
{ type: 'rect', x: 190, y: 140, w: 8, h: 40, color: '#8b4513', fill: true },
|
||
{ type: 'triangle', x1: 198, y1: 140, x2: 230, y2: 160, x3: 198, y3: 160, color: '#ff0000', fill: true },
|
||
{ type: 'line', x1: 20, y1: 195, x2: 280, y2: 195, color: '#1e5fb4', width: 3 },
|
||
{ type: 'circle', x: 50, y: 180, radius: 10, color: '#ffff00', fill: true },
|
||
{ type: 'circle', x: 90, y: 160, radius: 8, color: '#ffff00', fill: true },
|
||
{ type: 'circle', x: 250, y: 170, radius: 9, color: '#ffff00', fill: true }
|
||
]
|
||
},
|
||
{
|
||
name: "باقة الزهور",
|
||
bg: '#f5f5dc',
|
||
shapes: [
|
||
{ type: 'circle', x: 100, y: 100, radius: 25, color: '#ff6b8b', fill: true },
|
||
{ type: 'circle', x: 200, y: 80, radius: 22, color: '#ffaa44', fill: true },
|
||
{ type: 'circle', x: 150, y: 150, radius: 30, color: '#aa80ff', fill: true },
|
||
{ type: 'circle', x: 80, y: 180, radius: 20, color: '#ff69b4', fill: true },
|
||
{ type: 'circle', x: 220, y: 170, radius: 23, color: '#ff4500', fill: true },
|
||
{ type: 'circle', x: 130, y: 60, radius: 18, color: '#ffd700', fill: true },
|
||
{ type: 'circle', x: 180, y: 210, radius: 21, color: '#ff1493', fill: true },
|
||
{ type: 'line', x1: 100, y1: 125, x2: 100, y2: 250, color: '#2b7d4d', width: 4 },
|
||
{ type: 'line', x1: 200, y1: 102, x2: 200, y2: 250, color: '#2b7d4d', width: 4 },
|
||
{ type: 'line', x1: 150, y1: 180, x2: 150, y2: 250, color: '#2b7d4d', width: 5 },
|
||
{ type: 'line', x1: 80, y1: 200, x2: 80, y2: 250, color: '#2b7d4d', width: 3 },
|
||
{ type: 'line', x1: 220, y1: 193, x2: 220, y2: 250, color: '#2b7d4d', width: 4 },
|
||
{ type: 'line', x1: 130, y1: 78, x2: 130, y2: 250, color: '#2b7d4d', width: 3 },
|
||
{ type: 'line', x1: 180, y1: 231, x2: 180, y2: 250, color: '#2b7d4d', width: 4 }
|
||
]
|
||
}
|
||
];
|
||
|
||
// عناصر الصفحة
|
||
const masterCanvas = document.getElementById('masterCanvas');
|
||
const kidCanvas = document.getElementById('kidCanvas');
|
||
const ctxMaster = masterCanvas.getContext('2d');
|
||
const ctxKid = kidCanvas.getContext('2d');
|
||
|
||
const levelSpan = document.getElementById('levelNumber');
|
||
const starDisplay = document.getElementById('starDisplay');
|
||
const gameMessage = document.getElementById('gameMessage');
|
||
const nextBtn = document.getElementById('nextLevelBtn');
|
||
const levelCompleteMsg = document.getElementById('levelCompleteMsg');
|
||
const clearKidBtn = document.getElementById('clearKidBtn');
|
||
const colorPalette = document.getElementById('colorPalette');
|
||
const sizeDown = document.getElementById('sizeDown');
|
||
const sizeUp = document.getElementById('sizeUp');
|
||
const sizeDisplay = document.getElementById('sizeDisplay');
|
||
|
||
let currentColor = colors[0].hex;
|
||
let brushSize = 8;
|
||
let currentLevel = 0;
|
||
let drawing = false;
|
||
|
||
// تهيئة منتقي الألوان
|
||
function buildPalette() {
|
||
colorPalette.innerHTML = '';
|
||
colors.forEach((color, index) => {
|
||
const dot = document.createElement('div');
|
||
dot.className = 'color-dot';
|
||
dot.style.backgroundColor = color.hex;
|
||
dot.setAttribute('data-color', color.hex);
|
||
dot.addEventListener('click', () => {
|
||
document.querySelectorAll('.color-dot').forEach(d => d.classList.remove('active'));
|
||
dot.classList.add('active');
|
||
currentColor = color.hex;
|
||
});
|
||
colorPalette.appendChild(dot);
|
||
});
|
||
document.querySelectorAll('.color-dot')[0]?.classList.add('active');
|
||
}
|
||
buildPalette();
|
||
|
||
// تحديث حجم الفرشاة
|
||
function updateSizeDisplay() {
|
||
sizeDisplay.innerText = brushSize;
|
||
}
|
||
|
||
sizeDown.addEventListener('click', () => {
|
||
if (brushSize > 2) {
|
||
brushSize -= 2;
|
||
updateSizeDisplay();
|
||
}
|
||
});
|
||
|
||
sizeUp.addEventListener('click', () => {
|
||
if (brushSize < 30) {
|
||
brushSize += 2;
|
||
updateSizeDisplay();
|
||
}
|
||
});
|
||
updateSizeDisplay();
|
||
|
||
// رسم اللوحة الأصل
|
||
function drawMaster(levelIndex) {
|
||
const level = levels[levelIndex];
|
||
ctxMaster.clearRect(0, 0, 300, 300);
|
||
|
||
// خلفية بيضاء
|
||
ctxMaster.fillStyle = '#ffffff';
|
||
ctxMaster.fillRect(0, 0, 300, 300);
|
||
|
||
// رسم الخلفية المحددة للمستوى
|
||
ctxMaster.fillStyle = level.bg || '#ffffff';
|
||
ctxMaster.fillRect(0, 0, 300, 300);
|
||
|
||
level.shapes.forEach(shape => {
|
||
ctxMaster.beginPath();
|
||
ctxMaster.fillStyle = shape.color;
|
||
ctxMaster.strokeStyle = shape.color;
|
||
ctxMaster.lineWidth = shape.width || 4;
|
||
|
||
switch (shape.type) {
|
||
case 'circle':
|
||
ctxMaster.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
|
||
if (shape.fill) {
|
||
ctxMaster.fill();
|
||
} else {
|
||
ctxMaster.stroke();
|
||
}
|
||
break;
|
||
|
||
case 'rect':
|
||
if (shape.fill) {
|
||
ctxMaster.fillRect(shape.x, shape.y, shape.w, shape.h);
|
||
} else {
|
||
ctxMaster.strokeRect(shape.x, shape.y, shape.w, shape.h);
|
||
}
|
||
break;
|
||
|
||
case 'triangle':
|
||
ctxMaster.moveTo(shape.x1, shape.y1);
|
||
ctxMaster.lineTo(shape.x2, shape.y2);
|
||
ctxMaster.lineTo(shape.x3, shape.y3);
|
||
ctxMaster.closePath();
|
||
if (shape.fill) {
|
||
ctxMaster.fill();
|
||
} else {
|
||
ctxMaster.stroke();
|
||
}
|
||
break;
|
||
|
||
case 'line':
|
||
ctxMaster.beginPath();
|
||
ctxMaster.moveTo(shape.x1, shape.y1);
|
||
ctxMaster.lineTo(shape.x2, shape.y2);
|
||
ctxMaster.stroke();
|
||
break;
|
||
|
||
case 'ellipse':
|
||
ctxMaster.ellipse(shape.x, shape.y, shape.rx, shape.ry, shape.rotation || 0, 0, 2 * Math.PI);
|
||
if (shape.fill) {
|
||
ctxMaster.fill();
|
||
} else {
|
||
ctxMaster.stroke();
|
||
}
|
||
break;
|
||
|
||
case 'arc':
|
||
if (shape.x1 && shape.y1 && shape.x2 && shape.y2 && shape.x3 && shape.y3) {
|
||
// رسم قوس بثلاث نقاط (تقريب)
|
||
ctxMaster.moveTo(shape.x1, shape.y1);
|
||
ctxMaster.quadraticCurveTo(shape.x2, shape.y2, shape.x3, shape.y3);
|
||
if (shape.fill) {
|
||
ctxMaster.fill();
|
||
} else {
|
||
ctxMaster.stroke();
|
||
}
|
||
} else {
|
||
ctxMaster.arc(shape.x, shape.y, shape.radius, shape.start || 0, shape.end || Math.PI * 2);
|
||
if (shape.fill) {
|
||
ctxMaster.fill();
|
||
} else {
|
||
ctxMaster.stroke();
|
||
}
|
||
}
|
||
break;
|
||
|
||
case 'heart':
|
||
// رسم قلب بسيط
|
||
ctxMaster.moveTo(shape.x, shape.y + shape.size * 0.25);
|
||
ctxMaster.bezierCurveTo(shape.x - shape.size * 0.5, shape.y - shape.size * 0.5,
|
||
shape.x - shape.size * 0.2, shape.y - shape.size * 0.8,
|
||
shape.x, shape.y - shape.size * 0.5);
|
||
ctxMaster.bezierCurveTo(shape.x + shape.size * 0.2, shape.y - shape.size * 0.8,
|
||
shape.x + shape.size * 0.5, shape.y - shape.size * 0.5,
|
||
shape.x, shape.y + shape.size * 0.25);
|
||
if (shape.fill) {
|
||
ctxMaster.fill();
|
||
} else {
|
||
ctxMaster.stroke();
|
||
}
|
||
break;
|
||
|
||
case 'star':
|
||
// رسم نجمة بسيطة
|
||
let outer = shape.outer || 40;
|
||
let inner = shape.inner || 20;
|
||
let rot = Math.PI / 2 * 3;
|
||
let step = Math.PI / shape.points;
|
||
ctxMaster.moveTo(shape.x + Math.cos(rot) * outer, shape.y + Math.sin(rot) * outer);
|
||
for (let i = 0; i < shape.points; i++) {
|
||
rot += step;
|
||
ctxMaster.lineTo(shape.x + Math.cos(rot) * inner, shape.y + Math.sin(rot) * inner);
|
||
rot += step;
|
||
ctxMaster.lineTo(shape.x + Math.cos(rot) * outer, shape.y + Math.sin(rot) * outer);
|
||
}
|
||
ctxMaster.closePath();
|
||
if (shape.fill) {
|
||
ctxMaster.fill();
|
||
} else {
|
||
ctxMaster.stroke();
|
||
}
|
||
break;
|
||
|
||
case 'text':
|
||
ctxMaster.font = shape.font || '20px Arial';
|
||
ctxMaster.fillStyle = shape.color;
|
||
ctxMaster.fillText(shape.text, shape.x, shape.y);
|
||
break;
|
||
}
|
||
});
|
||
}
|
||
|
||
// مسح لوحة الطفل
|
||
function clearKid() {
|
||
ctxKid.clearRect(0, 0, 300, 300);
|
||
ctxKid.fillStyle = '#ffffff';
|
||
ctxKid.fillRect(0, 0, 300, 300);
|
||
}
|
||
|
||
// أحداث الرسم
|
||
function startDrawing(e) {
|
||
e.preventDefault();
|
||
drawing = true;
|
||
ctxKid.beginPath();
|
||
draw(e);
|
||
}
|
||
|
||
function stopDrawing() {
|
||
drawing = false;
|
||
ctxKid.beginPath();
|
||
}
|
||
|
||
function draw(e) {
|
||
if (!drawing) return;
|
||
e.preventDefault();
|
||
|
||
let clientX, clientY;
|
||
if (e.touches) {
|
||
clientX = e.touches[0].clientX;
|
||
clientY = e.touches[0].clientY;
|
||
} else {
|
||
clientX = e.clientX;
|
||
clientY = e.clientY;
|
||
}
|
||
|
||
const rect = kidCanvas.getBoundingClientRect();
|
||
const scaleX = kidCanvas.width / rect.width;
|
||
const scaleY = kidCanvas.height / rect.height;
|
||
|
||
const canvasX = (clientX - rect.left) * scaleX;
|
||
const canvasY = (clientY - rect.top) * scaleY;
|
||
|
||
if (canvasX < 0 || canvasX > 300 || canvasY < 0 || canvasY > 300) return;
|
||
|
||
ctxKid.lineCap = 'round';
|
||
ctxKid.lineJoin = 'round';
|
||
ctxKid.strokeStyle = currentColor;
|
||
ctxKid.lineWidth = brushSize;
|
||
|
||
ctxKid.lineTo(canvasX, canvasY);
|
||
ctxKid.stroke();
|
||
ctxKid.beginPath();
|
||
ctxKid.moveTo(canvasX, canvasY);
|
||
}
|
||
|
||
// إضافة مستمعي الأحداث
|
||
kidCanvas.addEventListener('mousedown', startDrawing);
|
||
kidCanvas.addEventListener('mousemove', draw);
|
||
kidCanvas.addEventListener('mouseup', stopDrawing);
|
||
kidCanvas.addEventListener('mouseleave', stopDrawing);
|
||
kidCanvas.addEventListener('touchstart', startDrawing, { passive: false });
|
||
kidCanvas.addEventListener('touchmove', draw, { passive: false });
|
||
kidCanvas.addEventListener('touchend', stopDrawing);
|
||
kidCanvas.addEventListener('touchcancel', stopDrawing);
|
||
kidCanvas.addEventListener('contextmenu', e => e.preventDefault());
|
||
|
||
clearKidBtn.addEventListener('click', clearKid);
|
||
|
||
// الانتقال للمستوى التالي يدوياً
|
||
nextBtn.addEventListener('click', () => {
|
||
if (currentLevel < levels.length - 1) {
|
||
currentLevel++;
|
||
loadLevel(currentLevel);
|
||
levelCompleteMsg.classList.add('hidden');
|
||
} else {
|
||
levelCompleteMsg.classList.remove('hidden');
|
||
levelCompleteMsg.innerText = '🎉 🏆 أنت فنان عظيم! أكملت كل المراحل 🏆 🎉';
|
||
gameMessage.innerHTML = '✨ ألف مبروك! ✨';
|
||
}
|
||
});
|
||
|
||
// تحميل المستوى
|
||
function loadLevel(index) {
|
||
currentLevel = index;
|
||
drawMaster(currentLevel);
|
||
clearKid();
|
||
levelSpan.innerText = (currentLevel + 1) + '/' + levels.length;
|
||
|
||
// تحديث النجوم
|
||
let stars = '';
|
||
for (let i = 0; i < levels.length; i++) {
|
||
stars += i <= currentLevel ? '⭐' : '☆';
|
||
}
|
||
starDisplay.innerText = stars;
|
||
|
||
gameMessage.innerHTML = levels[currentLevel].name + ' - انسخ اللوحة!';
|
||
}
|
||
|
||
// بداية اللعبة
|
||
loadLevel(0);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |