AI game creator

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

No:29111

←

Prev Next

→

RJ,rrgg
Developer User14405｜Date and time 23/12/16 3:12:35
Build time 39.064 sec｜Game capacity 4.468KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f2f2f2;
        }
        
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Pictograms
        var playerImg = new Image();
        playerImg.src = "player.png";
        
        var targetImg = new Image();
        targetImg.src = "target.png";

// Game initialization
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            player = { x: 100, y: 100, width: 50, height: 50 };
            target = { x: 300, y: 300, width: 50, height: 50 };
            score = 0;
            gameSpeed = 2;
            isGameOver = false;

canvas.addEventListener("touchstart", handleTouchStart, false);
            canvas.addEventListener("touchmove", handleTouchMove, false);

draw();
        }

// Game update
        function updateGame() {
            if (!isGameOver) {
                // Move player according to touch position
                if (player.x < target.x) {
                    player.x += gameSpeed;
                } else if (player.x > target.x) {
                    player.x -= gameSpeed;
                }

if (player.y < target.y) {
                    player.y += gameSpeed;
                } else if (player.y > target.y) {
                    player.y -= gameSpeed;
                }

// Check collision with target
                if (player.x < target.x + target.width &&
                    player.x + player.width > target.x &&
                    player.y < target.y + target.height &&
                    player.y + player.height > target.y) {
                    score++;
                    moveTarget();
                }

draw();
            }
        }

// Move target randomly
        function moveTarget() {
            var randomX = Math.floor(Math.random() * (canvas.width - target.width));
            var randomY = Math.floor(Math.random() * (canvas.height - target.height));

target.x = randomX;
            target.y = randomY;
        }

// Draw game elements on canvas
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

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

// Draw target
            context.drawImage(targetImg, target.x, target.y, target.width, target.height);

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

if (isGameOver) {
                // Display game over message
                context.fillStyle = "#000";
                context.font = "30px Arial";
                context.fillText("Game Over", (canvas.width / 2) - 80, canvas.height / 2 - 30);
            }
        }

// Handle touchstart event
        function handleTouchStart(event) {
            event.preventDefault();
            if (isGameOver) {
                return;
            }
            var touch = event.touches[0];
            player.x = touch.pageX - player.width / 2;
            player.y = touch.pageY - player.height / 2;
        }

// Handle touchmove event
        function handleTouchMove(event) {
            event.preventDefault();
            if (isGameOver) {
                return;
            }
            var touch = event.touches[0];
            player.x = touch.pageX - player.width / 2;
            player.y = touch.pageY - player.height / 2;
        }

// Game over function
        function gameOver() {
            isGameOver = true;
        }

// Start the game
        startGame();
        setInterval(updateGame, 10); // Update game every 10 milliseconds

</script>
</body>
</html>