ساخت بازی ریاضی با جاوا اسکریپت ( آزمون آنلاین ، آزمون زمان دار )
بازی ریاضی با جاوا اسکریپت – با کمک این آموزش جذاب یک بازی زمان دار و دارای ویژگی امتیاز را با javascript پیاده سازی می کنیم .
شرح برنامه به این شکل است سوالات ریاضی ضرب ، تقیسم ، تفریق ، جمع صورت و جواب را نمایش می دهد و دو گزینه درست و غلط پیش رو کاربر است در صورتی که جواب کاربر درست باشد 10 امتیاز به آن اضافه می شود و در صورتی که اشتباه بود بازی Game Over می شود و از مجدد قابل اجرا می باشد .
نمایش کارکرد بازی ریاضی با JS
فایل index.html
در این برنامه از cute alert برای نمایش پیغام استفاده کرده ایم .
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/main.css">
<link rel="stylesheet" href="static/css/lib/style.css">
<script src="static/js/lib/cute-alert.js"></script>
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<div class="score-wrapper hide">
<h3>امتیاز : <span id="score">0</span></h3>
</div>
<div class="timer-wrapper hide">
<canvas id="canvas" width="100" height="100"></canvas>
<span id="timing"></span>
</div>
<div id="question-wrapper" class="hide">
<strong class="question variable" id="var1">Z</strong>
<strong class="question operator" id="operator1">×</strong>
<strong class="question variable" id="var2">Y</strong>
<strong class="question operator" id="operator2">=</strong>
<strong class="question variable" id="var3">D</strong>
</div>
<div id="answer-wrapper" class="hide">
<strong class="answer" id="correct">درسته</strong>
<strong class="answer" id="wrong">غلطه</strong>
</div>
<strong id="load-game">شروع</strong>
</div>
<script src="static/js/app.js"></script>
</body>
</html>
اسکریپت app.js کنترل امتیاز و بازی
// DOM
const canvasDOM = document.getElementById('canvas'),
spanTimingDOM = document.getElementById('timing'),
context2d = canvasDOM.getContext('2d');
scoreWrapperDOM = document.getElementsByClassName('score-wrapper')[0],
timerWrapperDOM = document.getElementsByClassName('timer-wrapper')[0],
questionWrapperDOM = document.getElementById('question-wrapper'),
answerWrapperDOM = document.getElementById('answer-wrapper'),
loadGameDOM = document.getElementById('load-game'),
questionDOM = document.getElementsByClassName('question');
answerButtonsDOM = answerWrapperDOM.querySelectorAll(".answer");
// property
let score = 0;
const scoreRate = 10;
const audioSource = ['static/sound/correct.mp3', 'static/sound/wrong.mp3']
const audio = new Audio();
// call functions
initialElements();
// set handlers
loadGameDOM.addEventListener('click', loadGameDOMHandlerClick);
loopThrowTheArray(Array.from(answerButtonsDOM), (element) => element.addEventListener('click', answerButtonDOMHandler))
// handlers
function resetScore() {
score = 0;
scoreWrapperDOM.querySelector("#score").innerHTML = score;
}
function loadNextQuestion() {
putQuestionToDOM();
timerProgress(7);
}
function loadGameDOMHandlerClick() {
const thisElement = this;
thisElement.classList.add('hide');
loopThrowTheArray(getListOfHiddenDOM(), function (element, index, elements) {
if (thisElement.classList.contains('reload')) {
element.classList.remove('disabled');
if (elements.length == index + 1)
thisElement.classList.remove('reload')
} else {
element.classList.remove('hide');
}
});
resetScore();
loadNextQuestion();
}
function answerButtonDOMHandler() {
const thisElement = this;
checkQuestionAnswer(thisElement.id, window.baseQuestion)
}
// helpers
function checkQuestionAnswer(state, question) {
const answer = eval(question);
const scoreOld = score;
if (answer == window.justAnswer) {
if (state == "correct") {
score += scoreRate;
}
} else if (answer != window.justAnswer) {
if (state == "wrong") {
score += scoreRate;
}
}
scoreWrapperDOM.querySelector("#score").innerHTML = score;
if (scoreOld != score) {
loadAndPlaySound(audioSource[0]);
loadNextQuestion();
} else if (scoreOld == score) {
clearInterval(acrInterval);
previewScoreAndShowLoadGame(false, answer);
}
}
function putQuestionToDOM() {
const question = generateQuestion().split(" ");
loopThrowTheArray(Array.from(questionDOM), function (element, index) {
element.innerHTML = question[index];
});
}
function generateQuestionAnswerCorrectOrWrongRandom(x, y, operator) {
const possibleAnswers = [eval(`${x} ${operator} ${y}`)];
possibleAnswers[1] = possibleAnswers[0] - generateRandomIntNumber(5, 16);
if (possibleAnswers[1] < 0)
possibleAnswers[1] = possibleAnswers[0] + generateRandomIntNumber(5, 16);
const answer = possibleAnswers[generateRandomIntNumber(0, 1)];
const questionVsAnswer = `${x} ${operator} ${y} = ${answer}`;
window.baseQuestion = `${x} ${operator} ${y}`;
window.justAnswer = answer;
return questionVsAnswer;
}
function generateQuestionPlus(operator) {
var minX = 10,
maxX = 100,
minY = 10,
maxY = 100,
x, y;
x = generateRandomIntNumber(minX, maxX);
y = generateRandomIntNumber(minY, maxY);
return generateQuestionAnswerCorrectOrWrongRandom(x, y, operator);
}
function generateQuestionMinus(operator) {
return generateQuestionPlus('-');
}
function generateQuestionMultiply(operator) {
var minX = 2,
maxX = 9,
minY = 2,
maxY = 9,
x, y;
x = generateRandomIntNumber(minX, maxX);
y = generateRandomIntNumber(minY, maxY);
return generateQuestionAnswerCorrectOrWrongRandom(x, y, operator);
}
function generateQuestionDivision(operator) {
var minX = 11,
maxX = 50,
minY = 2,
maxY = 9,
x, y;
x = generateRandomIntNumber(minX, maxX);
y = generateRandomIntNumber(minY, maxY);
while (x % y != 0) {
x = generateRandomIntNumber(minX, maxX);
y = generateRandomIntNumber(minY, maxY);
}
return generateQuestionAnswerCorrectOrWrongRandom(x, y, operator);
}
function generateQuestion() {
var operators, operatorIndex, currentOperator;
operators = ['+', '-', '*', '/'];
operatorIndex = generateRandomIntNumber(0, operators.length - 1);
currentOperator = operators[operatorIndex];
var question = '';
switch (currentOperator) {
case '+':
question = generateQuestionPlus(currentOperator);
break;
case '-':
question = generateQuestionMinus(currentOperator);
break;
case '*':
question = generateQuestionMultiply(currentOperator);
break;
case '/':
question = generateQuestionDivision(currentOperator);
break;
default:
console.warn('unallowed operator')
break;
}
return question;
}
function generateRandomIntNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getListOfHiddenDOM() {
const hiddenDOM = [scoreWrapperDOM, timerWrapperDOM, questionWrapperDOM, answerWrapperDOM];
return hiddenDOM;
}
function loopThrowTheArray(arr, func) {
arr.forEach(func);
}
function timerProgress(seconds) {
if (typeof acrInterval != 'undefined') clearInterval(acrInterval)
var posX = canvasDOM.width / 2,
posY = canvasDOM.height / 2,
updateRate = 1000,
toMaxRadian = Math.PI * 2,
radius = 40;
context2d.lineCap = 'round';
var deegres = 0;
var counter = 0;
window.acrInterval = setInterval(function () {
counter++;
deegres += 360 / seconds;
context2d.clearRect(0, 0, canvasDOM.width, canvasDOM.height);
var progress = counter / seconds * 100,
color = "00bcd4";
spanTimingDOM.innerHTML = counter;
if (0 <= progress && progress < 33)
color = "00bcd4";
else if (33 <= progress && progress < 66)
color = "ff9800";
else if (66 <= progress)
color = "f44336";
context2d.beginPath();
context2d.arc(posX, posY, radius, 0, toMaxRadian);
context2d.strokeStyle = '#b1b1b1';
context2d.lineWidth = 5;
context2d.stroke();
context2d.beginPath();
context2d.strokeStyle = `#${color}`;
spanTimingDOM.style.color = `#${color}`;
context2d.lineWidth = 5;
context2d.arc(posX, posY, radius, 0, radianDegress(true, deegres));
context2d.stroke();
if (radianDegress(true, deegres).toFixed(2) == toMaxRadian.toFixed(2)) {
previewScoreAndShowLoadGame(true);
clearInterval(acrInterval);
}
}, updateRate);
}
function previewScoreAndShowLoadGame(timesUp, answer = "") {
loadAndPlaySound(audioSource[1]);
if (timesUp) {
cuteToast({
type: "info",
message: "دیر جواب دادی",
timer: "3500"
})
} else {
if (answer < 0)
answer = "منفی " + answer.toString().replace("-", "");
cuteToast({
type: "error",
message: `جوابت اشتباه بود درستش میشه ${answer}`,
timer: "3500"
})
}
loadGameDOM.classList.remove('hide');
loadGameDOM.classList.add('reload');
loopThrowTheArray(getListOfHiddenDOM(), function (element) {
if (element.classList.contains('score-wrapper')) return;
element.classList.add("disabled")
});
}
function radianDegress(toRadianConvert, val) {
const radian = Math.PI;
const deegree = 180;
const tmpVal = toRadianConvert ? radian / deegree * val : deegree / radian * radian * val;
return tmpVal;
}
String.prototype.getBaseConversionNumber = function (label) {
const faDigits = ['۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰'];
const enDigits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
const arDigits = ['٠', '٩', '٨', '٧', '٦', '٥', '٤', '٣', '٢', '١']
var whichDigit = {};
switch (label) {
case 'fa':
whichDigit[label] = faDigits;
break;
case 'en':
whichDigit[label] = enDigits;
break;
case 'ar':
whichDigit[label] = arDigits;
break;
case 'all':
whichDigit = {
"fa": faDigits,
"en": enDigits,
"ar": arDigits
};
break;
default:
whichDigit = [];
}
return whichDigit;
}
String.prototype.CvnFromTo = function (fromDigits, toDigits, str) {
var str = str == undefined ? this : str;
for (var i = 0; i < toDigits.length; i++) {
const currentFromDigit = fromDigits[i];
const currentToDigit = toDigits[i];
const regex = new RegExp(currentFromDigit, 'g');
str = str.replace(regex, currentToDigit);
}
return str;
}
String.prototype.convertDigits = function (to) {
let str = this;
const toCvn = (this.getBaseConversionNumber(to))[to];
const allDigits = this.getBaseConversionNumber("all");
delete allDigits[to];
const Objkeys = Object.keys(allDigits);
for (var i = 0; i < Objkeys.length; i++) {
const currentKey = Objkeys[i];
const fromCvn = allDigits[currentKey];
str = this.CvnFromTo(fromCvn, toCvn, str)
}
return str;
}
function loadAndPlaySound(src) {
audio.src = src;
audio.load();
audio.play();
}
function initialElements() {
audioSource.forEach(element => {
audio.src = element;
audio.load();
});
}
شیک سازی برنامه با main.css
.container {
margin: 0 auto;
width: 80%;
text-align: center;
direction: rtl;
}
#introduce {
display: block;
width: 100%;
font-size: 35px;
font-weight: bold;
color: white;
padding-bottom: 5px;
background-color: #4CAF50;
text-decoration: none;
margin-bottom: 15px;
}
/* Page Style */
@font-face {
font-family: shik;
font-display: fallback;
src: url("../font/shik.eot");
src: url("../font/shik.eot?#iefix") format("embedded-opentype"),
url("../font/shik.woff2") format("woff2"),
url("../font/shik.woff") format("woff"),
url("../font/shik.ttf") format("truetype");
}
body {
font-family: shik;
}
.timer-wrapper {
position: relative;
width: 100px;
height: 100px;
}
#canvas {
transform: rotate(-90deg);
}
span#timing {
display: block;
position: absolute;
left: 50%;
top: 55%;
font-size: 50px;
transform: translate(-50%, -50%);
color: #3949AB;
}
.hide {
display: none !important;
}
.disabled {
opacity: 0.1;
position: relative;
}
.disabled::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
top: 0;
z-index: 10;
}
.score-wrapper h3 #score {
background-color: gold;
color: #3b3b3b;
text-shadow: 0 0 5px #e91e63;
padding: 2px 25px;
}
#question-wrapper {
direction: ltr;
}
#question-wrapper .question {
font-size: 104px;
margin: 0 15px;
}
#question-wrapper .variable {
color: #4b4b4b;
;
}
#question-wrapper .operator {
color: #03a9f4;
}
.answer,
#load-game {
width: 260px;
padding: 25px;
font-size: 25px;
color: white;
display: inline-block;
margin: 0 55px;
border-radius: 45px;
cursor: pointer;
}
.answer:hover,
#load-game:hover {
color: black;
}
.answer#correct {
background-image: linear-gradient(337deg, #4caf50, #8bc34a);
}
.answer#wrong {
background-image: linear-gradient(337deg, #dd0f00, #e79a95)
}
#load-game {
background-color: #03a9f4;
width: 140px;
}
همچنین اگر به بازی سازی با js علاقه مند هستید می توانید آموزش ساخت بازی دوز با js را تجربه کنید .
ارسال نظر