a 2d game where your a monkey trying to get all the stolen bananas in a mountain's game

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

No:8915

101

←

Prev Next

→

a 2d game where your a monkey trying to get a..ALL
Developer User4270｜Date and time 23/7/19 18:54:11
Build time 32.834 sec｜Game capacity 3.948KB｜

Script

Here's an example of a 2D game where you control a monkey trying to collect stolen bananas in a mountain. The game is playable on a smartphone and uses JavaScript with simple pictograms.

To play the game on a smartphone: 1. Copy the code into a new HTML file (e.g., `monkey_bananas.html`). 2. Open the file on your smartphone using a web browser. 3. Control the monkey's movement by swiping on the screen. 4. Try to move the monkey to collect the banana (yellow circle) by touching it. 5. Enjoy playing the game!

←

Prev　Next

→ 　

Back　

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

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

Here's an example of a 2D game where you control a monkey trying to collect stolen bananas in a mountain. The game is playable on a smartphone and uses JavaScript with simple pictograms.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Monkey Bananas</title>
    <style>
        #gameCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Monkey position and speed
        let monkeyX = canvas.width / 2;
        let monkeyY = canvas.height - 30;
        let monkeySpeedX = 2;
        let monkeySpeedY = -2;

// Banana position
        const banana = {
            x: Math.random() * (canvas.width - 10),
            y: 0,
            size: 10,
            stolen: false
        };

// Event listeners for touch controls
        document.addEventListener("touchstart", handleTouchStart, false);
        document.addEventListener("touchmove", handleTouchMove, false);

let xDown = null;
        let yDown = null;

function handleTouchStart(event) {
            xDown = event.touches[0].clientX;
            yDown = event.touches[0].clientY;
        }

function handleTouchMove(event) {
            if (!xDown || !yDown) {
                return;
            }

const xDiff = xDown - event.touches[0].clientX;
            const yDiff = yDown - event.touches[0].clientY;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
                if (xDiff > 0) {
                    // Move left
                    monkeyX -= monkeySpeedX;
                } else {
                    // Move right
                    monkeyX += monkeySpeedX;
                }
            } else {
                if (yDiff > 0) {
                    // Move up
                    monkeyY -= monkeySpeedY;
                } else {
                    // Move down
                    monkeyY += monkeySpeedY;
                }
            }

xDown = null;
            yDown = null;

event.preventDefault();
        }

function drawMonkey() {
            ctx.beginPath();
            ctx.arc(monkeyX, monkeyY, 20, 0, Math.PI * 2);
            ctx.fillStyle = "brown";
            ctx.fill();
            ctx.closePath();
        }

function drawBanana() {
            if (!banana.stolen) {
                ctx.beginPath();
                ctx.arc(banana.x, banana.y, banana.size, 0, Math.PI * 2);
                ctx.fillStyle = "yellow";
                ctx.fill();
                ctx.closePath();
            }
        }

function checkCollision() {
            if (!banana.stolen) {
                if (
                    monkeyX > banana.x - banana.size &&
                    monkeyX < banana.x + banana.size &&
                    monkeyY > banana.y - banana.size &&
                    monkeyY < banana.y + banana.size
                ) {
                    banana.stolen = true;
                    alert("You got the banana!");
                }
            }
        }

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

drawMonkey();
            drawBanana();
            checkCollision();

requestAnimationFrame(update);
        }

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

To play the game on a smartphone:
1. Copy the code into a new HTML file (e.g., `monkey_bananas.html`).
2. Open the file on your smartphone using a web browser.
3. Control the monkey's movement by swiping on the screen.
4. Try to move the monkey to collect the banana (yellow circle) by touching it.
5. Enjoy playing the game!