AI game creator

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

No:17522

←

Prev Next

→

One piece
Developer User7708｜Date and time 23/9/23 18:01:47
Build time 40.885 sec｜Game capacity 4.752KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and uses pictograms.

In this game, you control a player character represented by a pictogram. The player can move left and right by touching and dragging on the screen. The objective is to avoid the falling enemy pictograms and survive as long as possible. The score increases by dodging enemies successfully. When the player collides with an enemy, the game ends and the score is displayed. To play again, simply refresh the page.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and uses pictograms.

```html
<!DOCTYPE html>
<html>
<head>
    <title>One Piece Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
        // Game initialization
        function init() {
            // Get the canvas element and its context
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");

// Images for game objects
            var playerImg = new Image();
            playerImg.src = "player.png";

var enemyImg = new Image();
            enemyImg.src = "enemy.png";

// Game objects
            var player = {
                x: canvas.width / 2 - 16,
                y: canvas.height - 64,
                width: 32,
                height: 32
            };

var enemies = [];
            var score = 0;

// Event listeners for touch controls
            canvas.addEventListener("touchstart", touchStartHandler, false);
            canvas.addEventListener("touchmove", touchMoveHandler, false);
            canvas.addEventListener("touchend", touchEndHandler, false);

// Function to handle touchstart event
            function touchStartHandler(e) {
                e.preventDefault();
                // Get the x-coordinate of the touch
                var touchX = e.changedTouches[0].pageX;
                // Move the player to the touch position
                player.x = touchX - player.width / 2;
            }

// Function to handle touchmove event
            function touchMoveHandler(e) {
                e.preventDefault();
                // Get the x-coordinate of the touch
                var touchX = e.changedTouches[0].pageX;
                // Move the player to the touch position
                player.x = touchX - player.width / 2;
            }

// Function to handle touchend event
            function touchEndHandler(e) {
                e.preventDefault();
            }

// Function to update game state
            function update() {
                // Clear the canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
                ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);

// Generate enemies randomly
                if (Math.random() < 0.01) {
                    var enemy = {
                        x: Math.random() * (canvas.width - 32),
                        y: 0,
                        width: 32,
                        height: 32
                    };
                    enemies.push(enemy);
                }

// Move and draw the enemies
                for (var i = 0; i < enemies.length; i++) {
                    enemies[i].y += 2;
                    ctx.drawImage(enemyImg, enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);

// Check collision with player
                    if (player.x < enemies[i].x + enemies[i].width &&
                        player.x + player.width > enemies[i].x &&
                        player.y < enemies[i].y + enemies[i].height &&
                        player.y + player.height > enemies[i].y) {
                        // Game over
                        alert("Game Over! Your score: " + score);
                        location.reload(); // restart the game
                    }

// Remove enemies that pass the screen
                    if (enemies[i].y > canvas.height) {
                        enemies.splice(i, 1);
                        score++;
                    }
                }

// Display the score
                ctx.font = "20px Arial";
                ctx.fillStyle = "#000";
                ctx.fillText("Score: " + score, 10, 30);

// Request the next animation frame
                requestAnimationFrame(update);
            }

// Start the game
            update();
        }

// Run the game after the page is loaded
        window.onload = function() {
            init();
        };
    </script>
</body>
</html>
```