لبناء المشروع الخاص بنا نحتاج متابعة قسم البايثون في الخطة الشاملة لتعليم البرمجة
فكرة المستطيل مستقاة من الصفحة التالية
https://ahmadnaser.com/gist-type/rotate-360-cube/
التصميم من
https://bootswatch.com/
وفكرة اللعبة مستقاة من فديو قديم احسب حسابك" مع توفيق جبران
بداية نحتاج لتعريف ملف css بالمحتويات التالية
`
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 80px;
perspective: 400px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }
.cube__face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front { background: hsla( 0, 100%, 50%, 0.7); }
.cube__face--right { background: hsla( 60, 100%, 50%, 0.7); }
.cube__face--back { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }
.cube__face--front { transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
label { margin-right: 10px; }
img.img-responsive {
width: 100%;
height: 100%;
}
`
بعدها نحتاج عمل صفحة البداية للمسابقة وصفحة للاختيار
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.min.css">
<link rel="stylesheet" href="./cube.css?refresh">
<title>Fee Wella Maa Fee?</title>
</head>
<body>
<div class="container">
<h1 class="display-4 text-center">Fee Wella Maa Fee?</h1>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-xs-12 col-sm-6 col-lg-6">
<a href="#" >
<img src="https://library.anbilarabi.com/uploads/images/gallery/2020-08/scaled-1680-/image-1598451579783.png" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<a href="#" >
<img src="https://library.anbilarabi.com/uploads/images/gallery/2020-08/scaled-1680-/image-1598451812023.png" class="img-responsive">
</a>
</div>
</div>
</div>
<h3 class="bg-dark text-white p-2 my-5">%s</h3>
<form method="post">
<input type="hidden" name="started" value="%s" autofocus>
<button type="submit" value="fee">FEE</button>
<button type="submit" value="mafee">MA FEE</button>
</form>
</div>
</body>
</html>
صفحة الاختبار
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.min.css">
<link rel="stylesheet" href="./cube.css">
<title>Mastermind</title>
</head>
<body>
<div class="container">
<h1 class="display-4 text-center">Fee Wella Maa Fee?</h1>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div id="backCube" class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
<p class="radio-group">
<label>
<input type="radio" name="rotate-cube-side" value="front" checked /> front
</label>
<label>
<input type="radio" name="rotate-cube-side" value="back" /> Check Back
</label>
</p>
<style>
body > div > p > label:nth-child(1) {
display: none;
}
body > div > p > label:nth-child(2) {
padding: 10px;
transition-duration: 0.4s;
background-color: #4CAF50;
color: white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
min-width: 320px;
border-bottom: 2px solid black;
border: 1px solid green;
cursor: pointer;
}
</style>
<script>
var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.radio-group');
var currentClass = '';
function changeSide() {
var checkedRadio = radioGroup.querySelector(':checked');
var showClass = 'show-' + checkedRadio.value;
if ( currentClass ) {
cube.classList.remove( currentClass );
}
cube.classList.add( showClass );
currentClass = showClass;
if(initial > 0){
document.getElementById("backCube").innerHTML = '%s';
}
}
var initial = 0;
// set initial side
changeSide();
initial = initial + 1;
radioGroup.addEventListener( 'change', changeSide );
</script>
<h3 class="bg-dark text-white p-2 my-5">%s</h3>
<form method="post" action="game.py">
<button type="submit" value="restart">Play Again</button>
</form>
</div>
</body>
</html>
النتيجة النهائية
