Little Einsteins activity game's game

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

No:50072

135

←

Prev Next

→

Little Einsteins activity game
Developer User21218｜Date and time 24/3/7 15:01:35
Build time 9.875 sec｜Game capacity 2.53KB｜

Script

In this code, a simple Little Einsteins activity game is created using HTML5 canvas and JavaScript. The game features a rocket pictogram that can be moved using the keyboard arrow keys. The rocket moves smoothly on the canvas based on the key presses. The background is cleared and the rocket is redrawn at its new position to create the illusion of movement. Players can play the game by moving the rocket around the screen.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Little Einsteins Activity Game</title>
</head>

const rocketImage = new Image();
        rocketImage.src = 'rocket.png';

let rocketX = canvas.width / 2;
        let rocketY = canvas.height / 2;

const rocketWidth = 50;
        const rocketHeight = 80;
        const rocketSpeed = 5;

function drawRocket() {
            ctx.drawImage(rocketImage, rocketX, rocketY, rocketWidth, rocketHeight);
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function updateGameArea() {
            clearCanvas();
            drawRocket();
        }

function moveRocket(direction) {
            switch (direction) {
                case 'up':
                    rocketY -= rocketSpeed;
                    break;
                case 'down':
                    rocketY += rocketSpeed;
                    break;
                case 'left':
                    rocketX -= rocketSpeed;
                    break;
                case 'right':
                    rocketX += rocketSpeed;
                    break;
            }
        }

window.addEventListener('keydown', (e) => {
            switch (e.keyCode) {
                case 38: // Up arrow
                    moveRocket('up');
                    break;
                case 40: // Down arrow
                    moveRocket('down');
                    break;
                case 37: // Left arrow
                    moveRocket('left');
                    break;
                case 39: // Right arrow
                    moveRocket('right');
                    break;
            }
        });

setInterval(updateGameArea, 20);
    </script>
</body>

</html>
```
In this code, a simple Little Einsteins activity game is created using HTML5 canvas and JavaScript. The game features a rocket pictogram that can be moved using the keyboard arrow keys. The rocket moves smoothly on the canvas based on the key presses. The background is cleared and the rocket is redrawn at its new position to create the illusion of movement. Players can play the game by moving the rocket around the screen.