AI game creator

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

No:38187

←

Prev Next

→

Flappy triangle
Developer User17264｜Date and time 24/1/23 5:51:07
Build time 12.362 sec｜Game capacity 3.851KB｜

Script

Sure! Here's a simple implementation of the Flappy Triangle game using JavaScript and HTML:

To play the game, save the above code into a file with a .html extension (e.g., flappy_triangle.html) and open it in a web browser. Use the spacebar key to make the triangle jump and avoid the obstacles. The score will be displayed on the top left corner of the canvas. If the triangle collides with an obstacle or touches the ground, the game will be over and the score will be shown in an alert dialog. Just refresh the page to restart the game.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's a simple implementation of the Flappy Triangle game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Triangle</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

function startGame() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            triangleX = 50;
            triangleY = canvas.height / 2;
            triangleDY = 0;
            gravity = 0.2;
            gap = 150;
            obstacleWidth = 50;
            obstacleHeight = 200;
            obstacleX = canvas.width;
            obstacleY = canvas.height / 2 - obstacleHeight / 2;
            score = 0;

document.addEventListener("keydown", moveTriangleUp);

setInterval(updateGame, 20);
        }

function moveTriangleUp(event) {
            if (event.keyCode === 32) { // Spacebar key code
                triangleDY = -5; // Move triangle upward
            }
        }

function updateGame() {
            context.clearRect(0, 0, canvas.width, canvas.height);

triangleDY += gravity; // Apply gravity
            triangleY += triangleDY; // Update triangle position

context.fillStyle = "black";
            context.beginPath();
            context.moveTo(triangleX, triangleY);
            context.lineTo(triangleX + 30, triangleY - 20);
            context.lineTo(triangleX + 60, triangleY);
            context.closePath();
            context.fill();
            
            obstacleX -= 2; // Move obstacle to the left

// Draw obstacle
            context.fillStyle = "green";
            context.fillRect(obstacleX, 0, obstacleWidth, obstacleY);
            context.fillRect(
                obstacleX,
                obstacleY + obstacleHeight + gap,
                obstacleWidth,
                canvas.height - obstacleY - obstacleHeight - gap
            );

// Check collision with obstacle
            if (
                triangleX + 60 > obstacleX &&
                triangleX < obstacleX + obstacleWidth &&
                (triangleY < obstacleY || triangleY + 20 > obstacleY + obstacleHeight) ||
                triangleY + 20 > canvas.height
            ) {
                gameOver();
                return;
            }

// Update score if passed the obstacle
            if (triangleX > obstacleX + obstacleWidth) {
                score++;
                obstacleX = canvas.width;
            }

// Display score
            context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 30);
        }

function gameOver() {
            document.removeEventListener("keydown", moveTriangleUp);
            alert("Game Over. Score: " + score);
            location.reload(); // Restart the game
        }

startGame();
    </script>
</body>
</html>
```