AI game creator

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

No:27767

100

←

Prev Next

→

Merge Game
Developer User13831｜Date and time 23/12/9 0:48:02
Build time 27.587 sec｜Game capacity 2.695KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <script>
        // Game Variables
        var canvas, context, gameLoop, player;

// Define pictograms
        var pictogram1 = "🌑"; // Moon
        var pictogram2 = "🌞"; // Sun
        var pictogram3 = "🌊"; // Wave

// Player object definition
        function Player(x, y, pictogram) {
            this.x = x;
            this.y = y;
            this.pictogram = pictogram;
            this.moveUp = function () {
                this.y -= 10;
            };
            this.moveDown = function () {
                this.y += 10;
            };
            this.moveLeft = function () {
                this.x -= 10;
            };
            this.moveRight = function () {
                this.x += 10;
            };
        }

// Initialize the game
        function startGame() {
            canvas = document.createElement('canvas');
            canvas.width = window.innerWidth * 0.9;
            canvas.height = window.innerHeight * 0.9;
            document.body.appendChild(canvas);
            context = canvas.getContext('2d');

player = new Player(canvas.width / 2, canvas.height / 2, pictogram1);

gameLoop = setInterval(updateGame, 20); // Game loop
        }

// Update the game state
        function updateGame() {
            clearCanvas();
            drawPlayer();
        }

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

// Draw the player on the canvas
        function drawPlayer() {
            context.font = "48px Arial";
            context.fillText(player.pictogram, player.x, player.y);
        }

// Handle touch events for smartphone operation
        function handleTouchEvent(event) {
            event.preventDefault(); // Prevent default touch event behavior

var touch = event.changedTouches[0];

// Detect the gesture based on touch position
            if (touch.pageX < window.innerWidth / 3) {
                player.moveLeft();
            } else if (touch.pageX > window.innerWidth / 3 && touch.pageX < (window.innerWidth / 3) * 2) {
                player.moveRight();
            } else {
                player.moveUp();
            }
        }

// Bind touch event listener
        document.addEventListener('touchstart', handleTouchEvent, false);

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