Maro VS Goombas (jumping game k○ll the Goombas)'s game

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

No:16543

←

Prev Next

→

Maro VS Goombas (jumping game k○ll the Goombas)
Developer User7374｜Date and time 23/9/19 12:18:07
Build time 45.705 sec｜Game capacity 5.936KB｜

Script

Sure! Here's an example of a simple jumping game where you play as a character named Maro and try to eliminate Goombas. The game will be implemented as a single HTML file with JavaScript code enclosed in script tags:

In this game, you control Maro using the spacebar to jump over the Goombas. The goal is to avoid colliding with the Goombas and score as many points as possible. The game starts automatically when the page loads, and the score is displayed at the top left corner of the canvas. If Maro collides with a Goomba, the game ends, and the "Game Over!" message is displayed on the screen. Please note that you need to replace the `emozi_all/pictogram.png` and `emozi_all/pictogram.png` with actual pictogram images of Maro and Goombas for the game to work properly.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Maro VS Goombas</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>

// Pictogram images
        var maroImage = new Image();
        maroImage.src = 'maro_pictogram.png';

var goombaImage = new Image();
        goombaImage.src = 'goomba_pictogram.png';

// Maro object
        maro = {
            x: 50,
            y: 0,
            width: 50,
            height: 50,
            xDelta: 0,
            yDelta: 0,
            jumping: true,

draw: function() {
                ctx.drawImage(maroImage, this.x, this.y, this.width, this.height);
            },

jump: function() {
                if (!this.jumping) {
                    this.yDelta = -15;
                    this.jumping = true;
                }
            },

update: function() {
                if (this.yDelta === 0) {
                    this.yDelta = 1;
                } else {
                    this.yDelta += 0.6;
                }

this.y += this.yDelta;

if (this.y > canvas.height - this.height) {
                    this.y = canvas.height - this.height;
                    this.yDelta = 0;
                    this.jumping = false;
                }

if (this.xDelta >= 0) {
                    this.xDelta = 1;
                    this.x += this.xDelta;
                }
            },

rectangle: function() {
                return {
                    top: this.y,
                    right: this.x + this.width,
                    bottom: this.y + this.height,
                    left: this.x
                };
            }
        };

// Goomba object
        function Goomba(x) {
            this.x = x;
            this.y = canvas.height - 50;
            this.width = 50;
            this.height = 50;

this.draw = function() {
                ctx.drawImage(goombaImage, this.x, this.y, this.width, this.height);
            };

this.update = function() {
                this.x -= gameSpeed;
                this.draw();
            };

this.rectangle = function() {
                return {
                    top: this.y,
                    right: this.x + this.width,
                    bottom: this.y + this.height,
                    left: this.x
                };
            };
        }

// Game initialization
        function startGame() {
            canvas = document.getElementById('gameCanvas');
            ctx = canvas.getContext('2d');

goombas = [];
            score = 0;
            isGameOver = false;

for (var i = 0; i < 10; i++) {
                goombas.push(new Goomba(500 + (i * 300)));
            }

document.addEventListener('keydown', function(event) {
                if (event.keyCode === 32) {
                    maro.jump();
                }
            });

updateGame();
        }

// Game loop
        function updateGame() {
            if (isGameOver) {
                return;
            }

ctx.clearRect(0, 0, canvas.width, canvas.height);
            maro.update();
            maro.draw();

for (var i = 0; i < goombas.length; i++) {
                goombas[i].update();

if (isCollision(maro, goombas[i])) {
                    endGame();
                    return;
                }

if (goombas[i].x + goombas[i].width < 0) {
                    score++;
                    goombas.splice(i, 1);
                    goombas.push(new Goomba(canvas.width));
                }
            }

ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText('Score: ' + score, 10, 30);

gameSpeed += 0.005;

requestAnimationFrame(updateGame);
        }

// Check collision between Maro and Goombas
        function isCollision(maro, goomba) {
            return maro.rectangle().left < goomba.rectangle().right &&
                   maro.rectangle().right > goomba.rectangle().left &&
                   maro.rectangle().top < goomba.rectangle().bottom &&
                   maro.rectangle().bottom > goomba.rectangle().top;
        }

// End the game
        function endGame() {
            isGameOver = true;
            ctx.fillStyle = 'black';
            ctx.font = '30px Arial';
            ctx.fillText('Game Over!', canvas.width / 2 - 95, canvas.height / 2 - 10);
        }

startGame();
    </script>
</body>
</html>
```

Please note that you need to replace the `maro_pictogram.png` and `goomba_pictogram.png` with actual pictogram images of Maro and Goombas for the game to work properly.