Creat an exciting educational program for 2nd grade math using bouncing graphics and colorful backgrounds's game

Click here for free DL of the app version that can save data.

No:40204

←

Prev Next

→

Creat an exciting educational program for 2nd grad..ALL
Developer User18016｜Date and time 24/2/1 18:03:06
Build time 18.157 sec｜Game capacity 4.505KB｜

Script

Sure! Here's a simple example of an educational math game for 2nd graders using bouncing graphics and colorful backgrounds. This example focuses on addition and subtraction:

This HTML file creates a canvas where the game is rendered. Each question displays a pictogram symbol (+ or -), and the player needs to choose the correct answer by clicking the corresponding button. The score is shown on the canvas as well as feedback after each answer. The game starts automatically and generates new questions as the player responds.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

Sure! Here's a simple example of an educational math game for 2nd graders using bouncing graphics and colorful backgrounds. This example focuses on addition and subtraction:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Math Game</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        canvas {
            background-color: #fff;
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// Pictograms
        var pictograms = [
            // You can replace these with your own pictograms
            { symbol: "+", value: 1 },
            { symbol: "-", value: -1 },
            { symbol: "+", value: 2 },
            { symbol: "-", value: -2 },
        ];

// Game initialization
        var answerBtns = document.createElement("div");
        answerBtns.className = "answer-btns";
        canvas.insertAdjacentElement("afterend", answerBtns);

function startGame() {
            gameStarted = true;
            generateQuestion();
        }

function generateQuestion() {
            var randomPictogram = pictograms[Math.floor(Math.random() * pictograms.length)];
            var operand = randomPictogram.symbol;
            var value = randomPictogram.value;

questionCount++;

var question = "Question " + questionCount + ": ";

if (value > 0) {
                question += "Add " + value + " to the number!";
            } else {
                question += "Subtract " + Math.abs(value) + " from the number!";
            }

var answer = value;

drawQuestion(question, answer);
            createAnswerButtons(answer);
        }

function drawQuestion(question, answer) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw background
            ctx.fillStyle = "#66ccff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw question text
            ctx.fillStyle = "#000";
            ctx.font = "bold 24px Arial";
            ctx.fillText(question, 20, 50);

// Draw score
            ctx.fillStyle = "#000";
            ctx.fillText("Score: " + score, 20, 100);

// Draw answer feedback if available
            if (answer !== null) {
                var feedback = "Correct!";
                if (answer !== true) {
                    feedback = "Sorry, incorrect!";
                }
                ctx.fillStyle = "#00bb00";
                ctx.fillText(feedback, 20, 150);

// Delay next question
                setTimeout(generateQuestion, 2000);
            }
        }

function createAnswerButtons(answer) {
            answerBtns.innerHTML = "";
            var correctBtn = createButton(answer, true);
            answerBtns.appendChild(correctBtn);

var wrongBtn = createButton(answer + 1, false);
            answerBtns.appendChild(wrongBtn);
        }

function createButton(value, isCorrect) {
            var button = document.createElement("button");
            button.innerHTML = value;
            button.value = value;
            button.onclick = function () {
                if (gameStarted) {
                    var selectedAnswer = parseInt(this.value);
                    var correctAnswer = (value === selectedAnswer);

if (correctAnswer) {
                        score++;
                    }

drawQuestion(null, correctAnswer);
                }
            };

if (isCorrect) {
                button.style.backgroundColor = "green";
            } else {
                button.style.backgroundColor = "red";
            }

return button;
        }

// Start the game
        startGame();
    </script>
</body>
</html>
```