Pac-Man (chess game)'s game

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

No:1222

225

←

Prev Next

→

Pac-Man (chess game)
Developer User3193｜Date and time 23/6/18 8:47:54
Build time 62.415 sec｜Game capacity 5.92KB｜

Script

このHTMLファイルは、JavaScriptを含むため、ブラウザ上で動作します。このファイルは、ゲームのフレームワークを含みます。プレイヤーは、キーボードでパックマンの動きを制御し、緑色のドットを消費する必要があります。プレイヤーが赤いゴーストに衝突した場合、ゲームオーバーになります。スコアは、プレーヤーが消費したドットの数によって計算されます。

←

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>Pac-Man</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

#canvas {
            width: 100%;
            height: 100vh;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>

// パックマンの初期位置と速度
    let positionX = canvas.width / 2;
    let positionY = canvas.height / 2;
    let speedX = 0;
    let speedY = 0;
    let direction = 'right'; // パックマンの初期向き

// ゴーストの初期位置と速度
    let ghostPositionX = canvas.width / 2 - 100;
    let ghostPositionY = canvas.height / 2 - 100;
    let ghostSpeedX = 2;
    let ghostSpeedY = 2;

// スコア
    let score = 0;

// レイアウト
    const blockSize = 50;
    const layout = [
        [1,1,1,1,1,1,1,1,1,1],
        [1,0,0,1,0,0,0,0,0,1],
        [1,0,0,1,0,1,1,1,0,1],
        [1,0,0,1,0,1,0,0,0,1],
        [1,0,0,1,0,1,0,0,0,1],
        [1,0,0,0,0,0,0,0,0,1],
        [1,0,1,1,1,0,1,1,0,1],
        [1,0,0,0,0,0,0,0,0,1],
        [1,0,0,1,1,1,0,1,0,1],
        [1,1,1,1,1,1,1,1,1,1]
    ];

// パックマンの描画
    function drawPacMan() {
        ctx.fillStyle = 'yellow';
        ctx.beginPath();
        ctx.arc(positionX, positionY, blockSize / 2 - 10, Math.PI / 4, 7 * Math.PI / 4);
        ctx.lineTo(positionX, positionY);
        ctx.closePath();
        ctx.fill();
    }

// ゴーストの描画
    function drawGhost() {
        ctx.fillStyle = 'red';
        ctx.fillRect(ghostPositionX, ghostPositionY, blockSize, blockSize);
    }

// スコアの描画
    function drawScore() {
        ctx.fillStyle = 'white';
        ctx.font = '24px sans-serif';
        ctx.fillText(`Score: ${score}`, 10, 30);
    }

// ゲームオーバーの描画
    function drawGameOver() {
        ctx.fillStyle = 'white';
        ctx.font = '48px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2);
    }

// ゲームの処理
    function gameLoop() {
        // 画面をクリア
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// レイアウトの描画
        for (let i = 0; i < layout.length; i++) {
            for (let j = 0; j < layout[i].length; j++) {
                if (layout[i][j] === 1) {
                    ctx.fillStyle = 'blue';
                    ctx.fillRect(j * blockSize, i * blockSize, blockSize, blockSize);
                }
            }
        }

// パックマンの移動
        if ((positionX + speedX > 0) && (positionX + speedX < canvas.width - blockSize)) {
            positionX += speedX;
        }
        if ((positionY + speedY > 0) && (positionY + speedY < canvas.height - blockSize)) {
            positionY += speedY;
        }
        if (positionX <= 0) {
            positionX = canvas.width - blockSize;
        }
        if (positionX >= canvas.width - blockSize) {
            positionX = 0;
        }

// ゴーストの移動
        if ((ghostPositionX + ghostSpeedX > 0) && (ghostPositionX + ghostSpeedX < canvas.width - blockSize)) {
            ghostPositionX += ghostSpeedX;
        } else {
            ghostSpeedX = -ghostSpeedX;
        }
        if ((ghostPositionY + ghostSpeedY > 0) && (ghostPositionY + ghostSpeedY < canvas.height - blockSize)) {
            ghostPositionY += ghostSpeedY;
        } else {
            ghostSpeedY = -ghostSpeedY;
        }

// パックマンとゴーストの衝突判定
        if ((positionX + blockSize > ghostPositionX) && (positionX < ghostPositionX + blockSize) && (positionY + blockSize > ghostPositionY) && (positionY < ghostPositionY + blockSize)) {
            drawGameOver();
            return;
        }

// スコアの加算
        if (layout[Math.floor(positionY / blockSize)][Math.floor(positionX / blockSize)] === 0) {
            layout[Math.floor(positionY / blockSize)][Math.floor(positionX / blockSize)] = 2;
            score++;
        }

// パックマンの描画
        drawPacMan();

// ゴーストの描画
        drawGhost();

// スコアの描画
        drawScore();

// ゲームループの呼び出し
        window.requestAnimationFrame(gameLoop);
    }

// キー入力の処理
    document.addEventListener('keydown', (event) => {
        switch (event.key) {
            case 'ArrowLeft':
                speedX = -blockSize / 4;
                speedY = 0;
                direction = 'left';
                break;
            case 'ArrowRight':
                speedX = blockSize / 4;
                speedY = 0;
                direction = 'right';
                break;
            case 'ArrowUp':
                speedX = 0;
                speedY = -blockSize / 4;
                direction = 'up';
                break;
            case 'ArrowDown':
                speedX = 0;
                speedY = blockSize / 4;
                direction = 'down';
                break;
        }
    });

// ゲームループの呼び出し
    gameLoop();
</script>
</body>
</html>