soduko
عمر اسماعيل الكردي
لعبة سودوكو 4×4
الإصدار النهائي
عنوان المشروع البرمجي:
لعبة سودوكو 4×4
فكرة المشروع
لعبة سودوكو مصغرة بحجم 4×4 مناسبة للمبتدئين. الهدف من اللعبة هو ملء الشبكة بالأرقام من 1 إلى 4 بحيث لا يتكرر الرقم في نفس الصف أو العمود أو المربع الصغير 2×2. تحتوي اللعبة على زر للتحقق من صحة الحل، زر لعبة جديدة، وزر للحل التلقائي. تعتبر هذه اللعبة تمريناً ممتازاً لتنمية مهارات التفكير المنطقي وحل المشكلات.
SOURCE CODE
<!-- لعبة سودوكو 4×4 - إعداد عمر الكردي -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>سودوكو 4×4</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Tajawal', 'Cairo', sans-serif;
background: linear-gradient(135deg, #0B3526 0%, #1a4d3a 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.sudoku-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
padding: 35px;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
max-width: 500px;
width: 100%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,215,0,0.3);
text-align: center;
}
h1 {
color: #0B3526;
margin-bottom: 25px;
font-size: 1.8rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.sudoku-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
background: #0B3526;
padding: 4px;
border-radius: 12px;
margin-bottom: 25px;
}
.sudoku-cell {
aspect-ratio: 1 / 1;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.sudoku-cell input {
width: 100%;
height: 100%;
text-align: center;
font-size: 28px;
border: 2px solid #ddd;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
font-family: monospace;
}
.sudoku-cell input:focus {
outline: none;
border-color: #D4AF37;
}
.sudoku-cell.border-right input {
border-left: 3px solid #0B3526;
}
.sudoku-cell.border-bottom input {
border-bottom: 3px solid #0B3526;
}
.buttons {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
button {
background: linear-gradient(135deg, #0B3526, #1a4d3a);
color: white;
border: none;
padding: 12px 20px;
border-radius: 12px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: all 0.3s ease;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.message {
margin-top: 20px;
padding: 12px;
border-radius: 12px;
font-weight: bold;
font-size: 14px;
}
.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.info {
margin-top: 15px;
font-size: 12px;
color: #666;
}
@media (max-width: 500px) {
.sudoku-container { padding: 20px; }
.sudoku-cell input { font-size: 20px; }
button { padding: 8px 15px; font-size: 12px; }
}
</style>
</head>
<body>
<div class="sudoku-container">
<h1>🎲 سودوكو 4×4</h1>
<div class="sudoku-grid" id="sudokuGrid"></div>
<div class="buttons">
<button onclick="checkSolution()">✅ تحقق</button>
<button onclick="newGame()">🔄 جديدة</button>
<button onclick="solveSudoku()">💡 حل</button>
</div>
<div class="message" id="message"></div>
<div class="info">
✨ أدخل أرقاماً من 1 إلى 4 | لا تتكرر في الصف والعمود والمربع 2×2
</div>
</div>
<script>
let board = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
const solution = [
[1, 2, 3, 4],
[3, 4, 1, 2],
[2, 1, 4, 3],
[4, 3, 2, 1]
];
function createGrid() {
const grid = document.getElementById('sudokuGrid');
grid.innerHTML = '';
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const cell = document.createElement('div');
cell.className = 'sudoku-cell';
if ((j + 1) % 2 === 0 && j < 3) cell.classList.add('border-right');
if ((i + 1) % 2 === 0 && i < 3) cell.classList.add('border-bottom');
const input = document.createElement('input');
input.type = 'text';
input.maxLength = 1;
input.value = board[i][j] !== 0 ? board[i][j] : '';
input.oninput = (function(row, col) {
return function(e) {
let val = e.target.value;
if (val >= '1' && val <= '4') {
board[row][col] = parseInt(val);
} else if (val === '') {
board[row][col] = 0;
} else {
e.target.value = '';
board[row][col] = 0;
}
};
})(i, j);
cell.appendChild(input);
grid.appendChild(cell);
}
}
}
function isValidMove(board, row, col, num) {
for (let j = 0; j < 4; j++) {
if (board[row][j] === num && j !== col) return false;
}
for (let i = 0; i < 4; i++) {
if (board[i][col] === num && i !== row) return false;
}
const boxRow = Math.floor(row / 2) * 2;
const boxCol = Math.floor(col / 2) * 2;
for (let i = boxRow; i < boxRow + 2; i++) {
for (let j = boxCol; j < boxCol + 2; j++) {
if (board[i][j] === num && (i !== row || j !== col)) return false;
}
}
return true;
}
function checkSolution() {
let isValid = true;
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const val = board[i][j];
if (val === 0 || val < 1 || val > 4 || !isValidMove(board, i, j, val)) {
isValid = false;
break;
}
}
}
const message = document.getElementById('message');
if (isValid) {
let allFilled = true;
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (board[i][j] === 0) allFilled = false;
}
}
if (allFilled) {
message.className = 'message success';
message.innerHTML = '🎉 ممتاز! لقد أكملت اللعبة بنجاح! 🎉';
} else {
message.className = 'message success';
message.innerHTML = '✅ حتى الآن صحيح! استمر في إكمال الأرقام.';
}
} else {
message.className = 'message error';
message.innerHTML = '❌ هناك خطأ! تأكد من عدم تكرار الأرقام.';
}
}
function solveSudoku() {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
board[i][j] = solution[i][j];
}
}
createGrid();
const message = document.getElementById('message');
message.className = 'message success';
message.innerHTML = '💡 تم حل اللعبة! انظر إلى الإجابة الصحيحة.';
setTimeout(() => {
message.className = '';
message.innerHTML = '';
}, 3000);
}
function newGame() {
board = [
[0, 2, 0, 4],
[0, 0, 0, 0],
[0, 0, 0, 0],
[4, 0, 2, 0]
];
createGrid();
const message = document.getElementById('message');
message.className = 'message success';
message.innerHTML = '🎮 لعبة جديدة! املأ الخانات الفارغة.';
setTimeout(() => {
message.className = '';
message.innerHTML = '';
}, 2000);
}
newGame();
</script>
</body>
</html>
نتيجة التنفيذ
اضغط على "تشغيل المشروع" لرؤية النتيجة
لعبة سودوكو 4×4 - تحقق من ذكائك
تم التنفيذ والمراجعة تحت إشراف معلم أول المادة:
المهندس/ محمد محمود شاهين
مدرسة الشهيد أحمد مالك الثانوية
إدارة قلين التعليمية