AI game creator

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

No:125

5518

←

Prev Next

→

balancing on a ball
Developer anonymous｜Date and time 70/1/1 10:03:45
Build time unknown sec｜Game capacity 3.825KB｜

Script

[GAME SUMMARY Move the platform.、This is a game of bouncing balls. Without dropping the ball.、Bounce back well on the platform、Get as many pictograms as possible. If you drop a ball, the game is over.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>玉乗り</title>
<style>
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<div id="game">
    <canvas id="canvas" width="300" height="400"></canvas>
    <div id="score"></div>
    <button id="start">スタート</button>
</div>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const score = document.getElementById("score");
const startButton = document.getElementById("start");
const emoji = ["👦", "🔴", "🟢", "🔵", "🟡", "🟠"];

let gameStarted = false;
let timerId = null;

let ballX = 150; // ボールの位置
let ballY = 350;
let ballSpeedX = 5; // ボールの速度
let ballSpeedY = -10;

let platformWidth = 80; // プラットフォームのサイズ
let platformSpeed = 15;
let platformX = (canvas.width - platformWidth) / 2;

let scoreValue = 0;

function drawBall() {
    context.beginPath();
    context.arc(ballX, ballY, 10, 0, 2*Math.PI);
    context.fillStyle = "black";
    context.fill();
}

function drawPlatform() {
    context.fillStyle = "gray";
    context.fillRect(platformX, canvas.height-20, platformWidth, 10);
}

function drawEmoji() {
    for (let i = 0; i < emoji.length; i++) {
        context.fillText(emoji[i], 20+i*30, 30);
    }
}

function movePlatform() {
    if (rightPressed && platformX < canvas.width - platformWidth) {
        platformX += platformSpeed;
    } else if (leftPressed && platformX > 0) {
        platformX -= platformSpeed;
    }
}

let rightPressed = false;
let leftPressed = false;

document.addEventListener("keydown", (event) => {
    if (event.keyCode === 39) {
        rightPressed = true;
    } else if (event.keyCode === 37) {
        leftPressed = true;
    }
});

document.addEventListener("keyup", (event) => {
    if (event.keyCode === 39) {
        rightPressed = false;
    } else if (event.keyCode === 37) {
        leftPressed = false;
    }
});

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

function draw() {
    clearCanvas();
    drawBall();
    drawPlatform();
    drawEmoji();
    moveBall();
    movePlatform();
    if (gameStarted) {
        timerId = setTimeout(draw, 20);
    }
}

startButton.addEventListener("click", () => {
    if (gameStarted) {
        gameStarted = false;
        clearInterval(timerId);
        startButton.textContent = "スタート";
    } else {
        ballX = 150;
        ballY = 350;
        ballSpeedX = 5;
        ballSpeedY = -10;
        platformX = (canvas.width - platformWidth) / 2;
        scoreValue = 0;
        score.textContent = "Score: " + scoreValue;
        gameStarted = true;
        startButton.textContent = "ストップ";
        draw();
    }
});

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

【ゲームの概要】
プラットフォームを動かして、玉を跳ね返すゲームです。玉を落とさずに、プラットフォームで上手く跳ね返し、できるだけ多くの絵文字を取得しましょう。玉を落とすとゲームオーバーです。