Movable character that collects bananas's game

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

No:10201

154

←

Prev Next

→

Movable character that collects bananas
Developer User4464｜Date and time 23/7/29 8:38:35
Build time 27.218 sec｜Game capacity 5.313KB｜

Script

Sure! Here's an example of a simple game where the player controls a movable character that collects bananas. The game is implemented as a single HTML file, using JavaScript and pictograms for visuals. Please note that due to the text-based nature of this platform, I am unable to provide you with the actual pictogram visuals. However, you can replace the relevant parts with your own pictogram images in the code.

Make sure to replace the "emozi_all/pictogram.png" and "emozi_all/pictogram.png" with the actual paths to your character and banana pictogram images. Keep in mind that the dimensions and size of the images might need adjusting depending on your specific images. To play the game on a smartphone, simply open the HTML file in a mobile browser. The character can be moved using the on-screen keyboard or arrow keys if your smartphone supports it. The goal is to collect as many bananas as possible, with each collection increasing the score.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS for the game canvas */
        #gameCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Character properties
        var characterX = 50;
        var characterY = 50;
        var characterSpeed = 5;

// Banana properties
        var bananaX = 300;
        var bananaY = 300;
        var bananaSize = 20;

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

character = new Image();
            character.src = 'path_to_character_pictogram.png'; // Replace with character pictogram image path
            character.onload = draw;

bananas = new Image();
            bananas.src = 'path_to_banana_pictogram.png'; // Replace with banana pictogram image path
            bananas.onload = draw;

score = 0;

document.addEventListener('keydown', handleKeyPress);
        }

// Draw game objects on canvas
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw character
            ctx.drawImage(character, characterX, characterY);

// Draw banana
            ctx.drawImage(bananas, bananaX, bananaY, bananaSize, bananaSize);

// Draw score
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 20, 30);
        }

// Update game state
        function update() {
            // Move character based on user input
            if (keys.up && characterY > 0) {
                characterY -= characterSpeed;
            }
            if (keys.down && characterY < canvas.height - character.height) {
                characterY += characterSpeed;
            }
            if (keys.left && characterX > 0) {
                characterX -= characterSpeed;
            }
            if (keys.right && characterX < canvas.width - character.width) {
                characterX += characterSpeed;
            }

// Check collision between character and banana
            if (
                characterX < bananaX + bananaSize &&
                characterX + character.width > bananaX &&
                characterY < bananaY + bananaSize &&
                characterY + character.height > bananaY
            ) {
                // Collision detected, increase score and reposition banana
                score++;
                bananaX = Math.random() * (canvas.width - bananaSize);
                bananaY = Math.random() * (canvas.height - bananaSize);
            }

draw(); // Redraw game objects
        }

// Event handler for key presses
        var keys = {
            up: false,
            down: false,
            left: false,
            right: false
        };

function handleKeyPress(event) {
            event.preventDefault();

// Game loop
        function gameLoop() {
            update();
            requestAnimationFrame(gameLoop);
        }

init();
        gameLoop();
    </script>
</body>
</html>
```

Make sure to replace the "path_to_character_pictogram.png" and "path_to_banana_pictogram.png" with the actual paths to your character and banana pictogram images. Keep in mind that the dimensions and size of the images might need adjusting depending on your specific images.

To play the game on a smartphone, simply open the HTML file in a mobile browser. The character can be moved using the on-screen keyboard or arrow keys if your smartphone supports it. The goal is to collect as many bananas as possible, with each collection increasing the score.