AI game creator

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

No:37764

←

Prev Next

→

3d model
Developer User17053｜Date and time 24/1/21 15:46:04
Build time 13.691 sec｜Game capacity 4.762KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>

<head>
    <title>3D 모델 게임</title>
    <style>
        #canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

// game variables
        let canvas;
        let context;
        let screenWidth;
        let screenHeight;

// initialize the game
        function init() {
            canvas = document.getElementById('canvas');
            context = canvas.getContext('2d');
            screenWidth = window.innerWidth;
            screenHeight = window.innerHeight;
            canvas.width = screenWidth;
            canvas.height = screenHeight;

player = { x: screenWidth / 2, y: screenHeight / 2, size: 50 };
            obstacles = [];
            score = 0;

// generate initial obstacles
            generateObstacles();

// listen for touch events
            canvas.addEventListener('touchstart', handleTouch);
            canvas.addEventListener('touchmove', handleTouch);
            canvas.addEventListener('touchend', handleTouch);

// start game loop
            gameLoop();
        }

// game loop
        function gameLoop() {
            // clear canvas
            context.clearRect(0, 0, screenWidth, screenHeight);

// update player position
            movePlayer();

// draw player
            drawPlayer();

// update obstacles position
            moveObstacles();

// draw obstacles
            drawObstacles();

// check collision
            checkCollision();

// update score
            updateScore();

// request the next frame
            requestAnimationFrame(gameLoop);
        }

// handle touch events
        function handleTouch(event) {
            event.preventDefault();
            let touch = event.touches[0];
            if (touch.clientY < screenHeight / 2) {
                player.y -= 10; // move player up
            } else {
                player.y += 10; // move player down
            }
        }

// move player vertically
        function movePlayer() {
            if (player.y < 0) {
                player.y = 0;
            }
            if (player.y + player.size > screenHeight) {
                player.y = screenHeight - player.size;
            }
        }

// draw player
        function drawPlayer() {
            context.fillStyle = 'blue';
            context.fillRect(player.x, player.y, player.size, player.size);
        }

// generate new obstacles
        function generateObstacles() {
            let obstacleSize = 100;
            let gapSize = 200;
            let gapPosition = Math.floor(Math.random() * (screenHeight - gapSize));
            obstacles.push({ x: screenWidth, y: 0, width: obstacleSize, height: gapPosition });
            obstacles.push({ x: screenWidth, y: gapPosition + gapSize, width: obstacleSize, height: screenHeight - (gapPosition + gapSize) });
        }

// move obstacles horizontally
        function moveObstacles() {
            for (let i = 0; i < obstacles.length; i++) {
                obstacles[i].x -= 5;
                if (obstacles[i].x + obstacles[i].width < 0) {
                    obstacles.splice(i, 1);
                    score++;
                    generateObstacles();
                }
            }
        }

// draw obstacles
        function drawObstacles() {
            context.fillStyle = 'red';
            for (let i = 0; i < obstacles.length; i++) {
                context.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
            }
        }

// check collision between player and obstacles
        function checkCollision() {
            for (let i = 0; i < obstacles.length; i++) {
                if (player.x < obstacles[i].x + obstacles[i].width &&
                    player.x + player.size > obstacles[i].x &&
                    player.y < obstacles[i].y + obstacles[i].height &&
                    player.y + player.size > obstacles[i].y) {
                    gameOver();
                }
            }
        }

// update score
        function updateScore() {
            context.fillStyle = 'black';
            context.font = '24px Arial';
            context.fillText('Score: ' + score, 10, 30);
        }

// game over
        function gameOver() {
            alert('Game Over! \nYour Score: ' + score);
            init();
        }

// start the game
        window.onload = init;
    </script>
</body>

</html>