AI game creator

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

No:10236

149

←

Prev Next

→

the rake in 3D .js
Developer User4498｜Date and time 23/7/29 12:59:41
Build time 26.694 sec｜Game capacity 5.033KB｜

Script

Sure! Here's a simple game called "The Rake in 3D" implemented as a single HTML file using JavaScript. The game is designed for smartphone operation and uses pictograms for visualization.

Notes: - Please make sure to replace the file paths for the pictogram images (`emozi_all/pictogram.png` and `emozi_apple.png`) with the actual paths to the images on your system. - The game uses touch events to control the player's movement on the canvas. You can tap and hold on the canvas to move the player in the desired direction. - The game loop continuously updates the game state, moves the player and rake objects, and checks for collisions. If a collision occurs, the game will display a "Game Over!" message and reloads the page to restart the game. - The game randomly generates the initial position of the rake object within the canvas boundaries. Feel free to modify the game code and visuals to suit your preferences and requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple game called "The Rake in 3D" implemented as a single HTML file using JavaScript. The game is designed for smartphone operation and uses pictograms for visualization.

```html
<!DOCTYPE html>
<html>
<head>
    <title>The Rake in 3D</title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Game code goes here
        
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        const pictogramSize = 100; // Size of pictograms in pixels

// Define the game objects
        const player = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            size: pictogramSize,
            speed: 5,
            direction: null
        };

const rake = {
            x: generateRandomPosition(canvas.width),
            y: generateRandomPosition(canvas.height),
            size: pictogramSize,
            speed: 3
        };

// Handle touch events on the canvas
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);

function handleTouchStart(event) {
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;

// Determine the direction based on the touch position
            if (touchX < player.x) {
                player.direction = "left";
            } else if (touchX > player.x + player.size) {
                player.direction = "right";
            } else if (touchY < player.y) {
                player.direction = "up";
            } else if (touchY > player.y + player.size) {
                player.direction = "down";
            }
        }

function handleTouchEnd(event) {
            player.direction = null;
        }

// Game loop
        function gameLoop() {
            clearCanvas();
            movePlayer();
            moveRake();
            drawPlayer();
            drawRake();

if (checkCollision()) {
                gameOver();
            } else {
                requestAnimationFrame(gameLoop);
            }
        }

// Helper functions
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

function moveRake() {
            // Move the rake towards the player's position
            if (rake.x < player.x) {
                rake.x += rake.speed;
            } else if (rake.x > player.x) {
                rake.x -= rake.speed;
            }

if (rake.y < player.y) {
                rake.y += rake.speed;
            } else if (rake.y > player.y) {
                rake.y -= rake.speed;
            }
        }

function drawPlayer() {
            const playerIcon = new Image();
            playerIcon.src = "pictogram_player.png";
            context.drawImage(playerIcon, player.x, player.y, player.size, player.size);
        }

function drawRake() {
            const rakeIcon = new Image();
            rakeIcon.src = "pictogram_rake.png";
            context.drawImage(rakeIcon, rake.x, rake.y, rake.size, rake.size);
        }

function checkCollision() {
            return player.x < rake.x + rake.size &&
                player.x + player.size > rake.x &&
                player.y < rake.y + rake.size &&
                player.y + player.size > rake.y;
        }

function gameOver() {
            alert("Game Over!");
            location.reload();
        }

function generateRandomPosition(max) {
            return Math.floor(Math.random() * (max - pictogramSize));
        }

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

Notes:
- Please make sure to replace the file paths for the pictogram images (`pictogram_player.png` and `pictogram_rake.png`) with the actual paths to the images on your system.
- The game uses touch events to control the player's movement on the canvas. You can tap and hold on the canvas to move the player in the desired direction.
- The game loop continuously updates the game state, moves the player and rake objects, and checks for collisions. If a collision occurs, the game will display a "Game Over!" message and reloads the page to restart the game.
- The game randomly generates the initial position of the rake object within the canvas boundaries.

Feel free to modify the game code and visuals to suit your preferences and requirements.