ساخت بازی ریاضی با جاوا اسکریپت ( آزمون آنلاین ، آزمون زمان دار )

ساخت بازی ریاضی با جاوا اسکریپت ( آزمون آنلاین ، آزمون زمان دار )

بازی ریاضی با جاوا اسکریپت – با کمک این آموزش جذاب یک بازی زمان دار و دارای ویژگی امتیاز را با 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 علاقه مند هستید می توانید آموزش ساخت بازی دوز با js را تجربه کنید .

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

پکیج غول آموزش برنامه نویسی PHP با ساخت فروشگاه { دیجیکالا }


This will close in 0 seconds