Desenhador de Ponte para moto passar's game

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

No:28929

101

←

Prev Next

→

Desenhador de Ponte para moto passar
Developer User14167｜Date and time 23/12/15 6:42:09
Build time 36.222 sec｜Game capacity 2.109KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Desenhador de Ponte</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // Variáveis do jogo
        var canvas;
        var canvasContext;
        var motoX = 200;
        var motoY = 400;
        var ponteHeight = 10;
        var ponteWidth = 250;
        var ponteX = 100;
        var ponteY = 200;

window.onload = function() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

// Evento de toque na tela
            canvas.addEventListener('touchstart', handleTouch, false);
            
            // Loop do jogo
            var framesPerSecond = 30;
            setInterval(updateGame, 1000/framesPerSecond);
        }

function handleTouch(evt) {
            var touchX = evt.touches[0].clientX;
            var touchY = evt.touches[0].clientY;

// Movimenta a moto junto com o toque
            motoX = touchX - 25;
            motoY = touchY - 25;

// Verifica se a moto passou pela ponte
            if (motoX > ponteX && motoX < (ponteX + ponteWidth) && motoY < ponteY) {
                alert('Parabéns! Você conseguiu atravessar a ponte!');
            }
        }

function updateGame() {
            // Limpa o canvas
            colorRect(0, 0, canvas.width, canvas.height, 'black');

// Desenha a ponte
            colorRect(ponteX, ponteY, ponteWidth, ponteHeight, 'orange');

// Desenha a moto
            colorCircle(motoX, motoY, 25, 'blue');
        }

function colorRect(leftX, topY, width, height, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(leftX, topY, width, height);
        }

function colorCircle(centerX, centerY, radius, color) {
            canvasContext.fillStyle = color;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
            canvasContext.fill();
        }
    </script>
</body>
</html>