Obstacle course game's game

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

No:22023

←

Prev Next

→

Obstacle course game
Developer User10166｜Date and time 23/10/20 0:14:28
Build time 124.244 sec｜Game capacity 4.292KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Jogo de Obstáculos</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<script>
    // Função para randomizar a posição dos obstáculos no jogo
    function randomizeObstaclePosition() {
        return Math.floor(Math.random() * 400) + 100;
    }

// Variáveis do jogo
    var canvas, ctx, playerX, playerY, obstacles, score;

// Inicialização do jogo
    function init() {
        canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        canvas.width = 480;
        canvas.height = 320;
        document.body.appendChild(canvas);

playerX = 50; // Posição inicial do jogador na horizontal
        playerY = canvas.height / 2; // Posição inicial do jogador na vertical
        obstacles = [{x: canvas.width, y: randomizeObstaclePosition()}]; // Array para guardar os obstáculos
        score = 0; // Pontuação inicial

movePlayer(); // Função para controlar o movimento do jogador

setInterval(update, 20); // Loop para atualizar o estado do jogo a cada 20ms
    }

// Função para desenhar o jogador na tela
    function drawPlayer() {
        ctx.beginPath();
        ctx.arc(playerX, playerY, 10, 0, Math.PI * 2, false);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.closePath();
    }

// Função para desenhar os obstáculos na tela
    function drawObstacles() {
        for (var i = 0; i < obstacles.length; i++) {
            ctx.beginPath();
            ctx.rect(obstacles[i].x, obstacles[i].y, 20, 20);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }
    }

// Função para verificar colisões entre o jogador e os obstáculos
    function checkCollision() {
        for (var i = 0; i < obstacles.length; i++) {
            if (playerX + 10 > obstacles[i].x && playerX - 10 < obstacles[i].x + 20 && playerY + 10 > obstacles[i].y && playerY - 10 < obstacles[i].y + 20) {
                return true; // Retorna verdadeiro caso haja uma colisão
            }
        }
        return false; // Retorna falso caso não haja colisão
    }

// Função para atualizar o estado do jogo
    function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        drawObstacles();
        playerY += 1; // Movimenta o jogador para baixo

if (checkCollision()) {
            alert("Game Over! Pontuação: " + score);
            document.location.reload(); // Reinicia o jogo em caso de colisão
        }

if (obstacles[obstacles.length - 1].x < canvas.width - 100) {
            obstacles.push({x: canvas.width, y: randomizeObstaclePosition()}); // Cria um novo obstáculo
            score += 1; // Incrementa a pontuação
        }
        
        if (obstacles.length > 5) {
            obstacles.shift(); // Remove o obstáculo mais antigo
        }
    }

// Função para controlar o movimento do jogador (touchscreen)
    function movePlayer() {
        var el = canvas;

el.addEventListener("touchstart", touchHandler, false);
        el.addEventListener("touchmove", touchHandler, false);
        el.addEventListener("touchend", touchHandler, false);

function touchHandler(event) {
            var touches = event.changedTouches,
                first = touches[0],
                type = "";

switch (event.type) {
                case "touchstart":
                    type = "mousedown";
                    break;
                case "touchmove":
                    type = "mousemove";
                    break;
                case "touchend":
                    type = "mouseup";
                    break;
                default:
                    return;
            }

var simulatedEvent = document.createEvent("MouseEvent");
            simulatedEvent.initMouseEvent(type, true, true, window, 1,
                first.screenX, first.screenY,
                first.clientX, first.clientY, false,
                false, false, false, 0, null);

first.target.dispatchEvent(simulatedEvent);
        }
    }

// Inicia o jogo no carregamento da página
    window.onload = init;
</script>
</body>
</html>