AI game creator

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

No:15845

←

Prev Next

→

Gta
Developer User6928｜Date and time 23/9/12 16:25:58
Build time 23.249 sec｜Game capacity 2.188KB｜

Script

The above code creates a simple game using a canvas element in HTML and JavaScript. The game allows players to control a character by touching and dragging their finger on mobile devices. The player object is represented by an image (player.png) and can be moved around the canvas by swiping in different directions. The game continuously updates the frame by clearing the canvas and redrawing the player's position.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>

// Player's initial position and movement speed
    var playerX = canvas.width / 2;
    var playerY = canvas.height / 2;
    var playerSpeed = 5;

// Load the player image
    var playerImage = new Image();
    playerImage.src = "player.png";

// Function to handle touch events on mobile devices
    function handleTouch(event) {
        // Get the touch coordinates
        var touchX = event.touches[0].clientX - canvas.offsetLeft;
        var touchY = event.touches[0].clientY - canvas.offsetTop;

// Update player's position based on touch direction
        if (touchX < playerX) {
            playerX -= playerSpeed;
        } else if (touchX > playerX + playerImage.width) {
            playerX += playerSpeed;
        }

if (touchY < playerY) {
            playerY -= playerSpeed;
        } else if (touchY > playerY + playerImage.height) {
            playerY += playerSpeed;
        }
    }

// Event listener to handle touch events
    canvas.addEventListener("touchmove", handleTouch, false);

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

// Draw the player
        context.drawImage(playerImage, playerX, playerY);

// Call the update function again
        requestAnimationFrame(update);
    }

// Start the game
    update();

</script>

</body>
</html>
The above code creates a simple game using a canvas element in HTML and JavaScript. The game allows players to control a character by touching and dragging their finger on mobile devices. The player object is represented by an image (player.png) and can be moved around the canvas by swiping in different directions. The game continuously updates the frame by clearing the canvas and redrawing the player's position.