آزمایشگاه ضرب اعداد صحیح
by PixelPanda95219 lines8.6 KB
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>آزمایشگاه ضرب اعداد صحیح</title>
<style>
:root {
--primary: #4a148c;
--accent: #ff4081;
--pos-color: #2e7d32;
--pos-bg: #e8f5e9;
--neg-color: #c62828;
--neg-bg: #ffebee;
--card-bg: #ffffff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: Tahoma, system-ui, sans-serif; }
body {
background: linear-gradient(135deg, #f3e5f5, #e1bee7);
margin: 0; padding: 15px;
display: flex; flex-direction: column; align-items: center;
min-height: 100vh;
}
.container {
background: var(--card-bg);
width: 100%; max-width: 380px;
border-radius: 24px;
padding: 20px;
box-shadow: 0 12px 30px rgba(74, 20, 140, 0.15);
display: flex; flex-direction: column; align-items: center;
}
h1 { color: var(--primary); font-size: 1.3rem; margin: 0 0 5px 0; }
.subtitle { font-size: 0.8rem; color: #666; margin-bottom: 15px; }
/* عقربه و دایره جهت */
.circle-box {
position: relative; width: 140px; height: 140px;
border: 6px solid var(--primary);
border-radius: 50%;
background: #fafafa;
display: flex; align-items: center; justify-content: center;
margin-bottom: 15px;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
}
.tag-top { position: absolute; top: 6px; font-weight: bold; font-size: 0.8rem; color: var(--pos-color); }
.tag-bottom { position: absolute; bottom: 6px; font-weight: bold; font-size: 0.8rem; color: var(--neg-color); }
#arrow {
width: 0; height: 0;
border-left: 12px solid transparent; border-right: 12px solid transparent;
border-bottom: 45px solid var(--accent);
position: absolute; left: 50%; top: 50%;
margin-left: -12px; margin-top: -45px;
transform-origin: 50% 100%;
transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ورودی‌های اعداد */
.input-row {
display: flex; align-items: center; justify-content: center;
gap: 10px; width: 100%; margin-bottom: 15px;
}
.num-group {
display: flex; flex-direction: column; align-items: center;
background: #f8f9fa; padding: 8px; border-radius: 12px;
border: 1px solid #e0e0e0; flex: 1;
}
.num-group label { font-size: 0.75rem; color: #555; margin-bottom: 4px; font-weight: bold; }
.num-input {
width: 100%; text-align: center; font-size: 1.3rem; font-weight: bold;
border: 2px solid #ba68c8; border-radius: 8px; padding: 4px;
color: var(--primary); outline: none; background: white;
}
.times-symbol { font-size: 1.5rem; font-weight: bold; color: var(--primary); }
/* دکمه‌های عملکردی */
.btn-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
margin-bottom: 15px;
}
button {
padding: 12px; font-size: 0.9rem; font-weight: bold;
border: none; border-radius: 12px; cursor: pointer;
transition: all 0.15s ease;
}
button:active { transform: scale(0.96); }
.btn-calc {
background: var(--primary); color: white;
box-shadow: 0 4px 0 #310d54; grid-column: span 2;
font-size: 1rem;
}
.btn-rand {
background: #ab47bc; color: white;
box-shadow: 0 3px 0 #7b1fa2;
}
.btn-reset {
background: #78909c; color: white;
box-shadow: 0 3px 0 #455a64;
}
/* کارت نمایش نتیجه */
.result-box {
width: 100%; background: #fdf7ff;
border: 2px dashed #ce93d8; border-radius: 14px;
padding: 12px; text-align: center;
}
.step-text { font-size: 0.85rem; color: #444; margin: 4px 0; }
.final-ans {
font-size: 1.4rem; font-weight: bold; margin-top: 8px;
padding: 6px 12px; border-radius: 8px; display: inline-block;
}
.pos { color: var(--pos-color); background: var(--pos-bg); }
.neg { color: var(--neg-color); background: var(--neg-bg); }
</style>
</head>
<body>
<div class="container">
<h1>✨ کارگاه ضرب اعداد صحیح ✨</h1>
<div class="subtitle">چرخش ۱۸۰ درجه با هر بار علامت منفی (-)</div>
<!-- دایره نمایش جهت علامت -->
<div class="circle-box">
<span class="tag-top">مثبت (+)</span>
<div id="arrow"></div>
<span class="tag-bottom">منفی (-)</span>
</div>
<!-- بخش ورود اعداد -->
<div class="input-row">
<div class="num-group">
<label>عدد اول</label>
<input type="number" id="num1" class="num-input" value="-3" step="1">
</div>
<span class="times-symbol">×</span>
<div class="num-group">
<label>عدد دوم</label>
<input type="number" id="num2" class="num-input" value="4" step="1">
</div>
</div>
<!-- دکمه‌ها -->
<div class="btn-grid">
<button class="btn-calc" onclick="calculate()">🚀 محاسبه و چرخش جادویی</button>
<button class="btn-rand" onclick="randomNumbers()">🎲 سوال تصادفی</button>
<button class="btn-reset" onclick="resetAll()">🔄 ریست</button>
</div>
<!-- تحلیل مرحله به مرحله -->
<div class="result-box">
<div id="step-sign" class="step-text">ضرب علامت‌ها: <b>(-) × (+) = (-)</b></div>
<div id="step-val" class="step-text">ضرب مقدارها: <b>۳ × ۴ = ۱۲</b></div>
<div id="final-res" class="final-ans neg">پاسخ نهایی: ۱۲-</div>
</div>
</div>
<script>
let rotation = 0;
function calculate() {
const n1 = parseInt(document.getElementById('num1').value) || 0;
const n2 = parseInt(document.getElementById('num2').value) || 0;
const product = n1 * n2;
// مشخص کردن علامت‌ها
const sign1 = n1 >= 0 ? '+' : '-';
const sign2 = n2 >= 0 ? '+' : '-';
const finalSign = product >= 0 ? '+' : '-';
// محاسبه زاویه چرخش فلش بر اساس تعداد منفی‌ها
// هر منفی = ۱۸۰ درجه چرخش
let negativeCount = (n1 < 0 ? 1 : 0) + (n2 < 0 ? 1 : 0);
rotation = negativeCount * 180;
document.getElementById('arrow').style.transform = `rotate(${rotation}deg)`;
// نمایش ضرب علامت‌ها
const stepSignEl = document.getElementById('step-sign');
stepSignEl.innerHTML = `ضرب علامت‌ها: <b>(${sign1}) × (${sign2}) = (${finalSign})</b>`;
// نمایش ضرب مقادیر مطلق
const abs1 = Math.abs(n1);
const abs2 = Math.abs(n2);
const absProd = Math.abs(product);
const stepValEl = document.getElementById('step-val');
stepValEl.innerHTML = `ضرب مقدارها: <b>${abs1} × ${abs2} = ${absProd}</b>`;
// پاسخ نهایی
const finalEl = document.getElementById('final-res');
if (product >= 0) {
finalEl.className = "final-ans pos";
finalEl.innerHTML = `پاسخ نهایی: <b>${product > 0 ? '+' + product : 0}</b>`;
} else {
finalEl.className = "final-ans neg";
finalEl.innerHTML = `پاسخ نهایی: <b>${product}</b>`;
}
}
function randomNumbers() {
// تولید اعداد تصادفی بین -9 تا 9 (غیر صفر)
let r1 = 0, r2 = 0;
while (r1 === 0) r1 = Math.floor(Math.random() * 19) - 9;
while (r2 === 0) r2 = Math.floor(Math.random() * 19) - 9;
document.getElementById('num1').value = r1;
document.getElementById('num2').value = r2;
calculate();
}
function resetAll() {
document.getElementById('num1').value = 1;
document.getElementById('num2').value = 1;
calculate();
}
// اجرای اولیه هنگام باز شدن
calculate();
</script>
</body>
</html>
Game Source: آزمایشگاه ضرب اعداد صحیح
Creator: PixelPanda95
Libraries: none
Complexity: complex (219 lines, 8.6 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-pixelpanda95-mtbwf3vy" to link back to the original. Then publish at arcadelab.ai/publish.