AI game creator

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

No:38581

←

Prev Next

→

A bike racing game
Developer User17416｜Date and time 24/1/25 4:02:07
Build time 14.073 sec｜Game capacity 3.825KB｜

Script

Sure! Here is a simple bike racing game implemented as a single HTML file with JavaScript. The game will be playable on a smartphone and use pictograms.

To play the game, save the above code as an HTML file and open it on a smartphone. The game will display a bike image on a canvas. Use touch input to control the bike's movement. Swipe left or right to move horizontally and swipe up or down to move vertically. The game will continuously update the bike's position and redraw the canvas accordingly.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here is a simple bike racing game implemented as a single HTML file with JavaScript. The game will be playable on a smartphone and use pictograms.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bike Racing Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Bike properties
        const bikeWidth = 50;
        const bikeHeight = 30;
        const bikeSpeed = 5;

// Pictograms
        const bikeImageSrc = 'https://example.com/bike.png';

// Game variables
        let canvas;
        let canvasContext;
        let bikeX;
        let bikeY;

// Load assets
        let bikeImage = new Image();
        bikeImage.src = bikeImageSrc;

// Initialize game
        function startGame() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

bikeX = 50;
            bikeY = canvasHeight / 2 - bikeHeight / 2;

setInterval(updateGame, 20);
        }

// Update game state
        function updateGame() {
            moveBike();
            drawGame();
        }

// Move bike based on user input
        function moveBike() {
            // Get touch event information
            document.addEventListener('touchstart', handleTouchStart, false);
            document.addEventListener('touchmove', handleTouchMove, false);
            document.addEventListener('touchend', handleTouchEnd, false);

let touchStartX = 0;
            let touchStartY = 0;
            let touchEndX = 0;
            let touchEndY = 0;

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

function handleTouchMove(event) {
                event.preventDefault();
                touchEndX = event.touches[0].clientX;
                touchEndY = event.touches[0].clientY;
            }

function handleTouchEnd(event) {
                let swipeX = touchEndX - touchStartX;
                let swipeY = touchEndY - touchStartY;

if (Math.abs(swipeX) > Math.abs(swipeY)) {
                    if (swipeX > 0) {
                        // Swipe right
                        bikeX += bikeSpeed;
                    } else {
                        // Swipe left
                        bikeX -= bikeSpeed;
                    }
                } else {
                    if (swipeY > 0) {
                        // Swipe down
                        bikeY += bikeSpeed;
                    } else {
                        // Swipe up
                        bikeY -= bikeSpeed;
                    }
                }
            }
        }

// Draw the game on the canvas
        function drawGame() {
            // Clear the canvas
            canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);

// Draw the bike image
            canvasContext.drawImage(bikeImage, bikeX, bikeY, bikeWidth, bikeHeight);
        }

// Start the game when the page loads
        window.onload = function() {
            startGame();
        };
    </script>
</body>
</html>
```