在華為開發者空間，基於鯤鵬伺服器快速開發打磚塊小遊戲

华为云开发者联盟發表於2024-12-02

伺服器遊戲

本文分享自華為雲社群《基於鯤鵬伺服器的打磚塊小遊戲部署》，作者：開發者空間小蜜蜂。

1.1 案例介紹

鯤鵬伺服器是基於鯤鵬處理器的新一代資料中心伺服器，適用於大資料、分散式儲存、高效能運算和資料庫等應用。鯤鵬伺服器具有高效能、低功耗、靈活的擴充套件能力，適合大資料分析、軟體定義儲存、Web等應用場景。

本案例將指導開發者如何在鯤鵬伺服器部署並執行web小遊戲。

1.2 免費領取雲主機

如您還沒有云主機，可點選連結，領取專屬雲主機後進行操作。

如您已領取雲主機，可直接開始實驗。

1.3 實驗流程

說明：

① 在案例中心下載專案；

② 使用終端連線鯤鵬伺服器；

③ 建立html檔案；

④ 啟動Web伺服器；

⑤ 體驗遊戲。

1.4 自動部署鯤鵬伺服器

在雲主機桌面右鍵選擇“Open Terminal Here”，開啟命令終端視窗。

執行自動部署命令如下：

hcd deploy --password 遠端伺服器密碼 --time 1800
# --password    待部署專案所在ECS的root使用者密碼（至少8個字元）
# --time value   待部署資源的保留期（單位為秒，至少600秒，預設600秒）。當前實驗預估需要20分鐘，可以配置time為半小時保留期。

該命令會自動部署鯤鵬伺服器。首次部署會直接執行，舊資源未到期時重複部署，會提示是否刪除前面建立的資源，可以刪除舊資源再次部署。

記錄部署遠端伺服器公網IP，如截圖中對應的就是：113.44.86.210。

1.5 複製程式碼

新開啟一個命令視窗，在命令視窗中輸入命令登入遠端伺服器，命令如下：

ssh root@遠端伺服器公網IP

輸入密碼（密碼不會顯示）。

登入成功後建立資料夾用於存放html檔案，命令如下：

mkdir game
cd game
vi game.html

進入到Vim編輯器，按下鍵盤的“i”鍵進入到插入模式下，複製下列程式碼貼上到編輯器中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arkanoid game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        canvas {
            border: 5px solid #3498db;
            border-radius: 10px;
        }

        /* game start cues */
        .game-start-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: green;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
        }

        /* score display style */
        .score-display {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            color: #333;
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 5px 10px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="score-display" id="scoreDisplay">score:0</div>
<div id="gameStartText" class="game-start-text">start</div>

<audio id="hitBrickSound" preload="auto">
    <source src="hitBrick.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<audio id="hitPaddleSound" preload="auto">
    <source src="hitPaddle.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<audio id="gameOverSound" preload="auto">
    <source src="gameOver.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const ballRadius = 10;
    let x = canvas.width / 2;
    let y = canvas.height - 30;
    let dx = 3;
    let dy = -3;
    const paddleHeight = 10;
    const paddleWidth = 100;
    let paddleX = (canvas.width - paddleWidth) / 2;
    const brickRowCount = 10;
    const brickColumnCount = 15;
    const brickWidth = 48;
    const brickHeight = 20;
    const bricks = [];
    let score = 0;
    let gameStarted = false;

    for (let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for (let r = 0; r < brickRowCount; r++) {
            bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
    }

    document.addEventListener('mousemove', mouseMoveHandler, false);
    document.addEventListener('click', startGame, false);

    function mouseMoveHandler(e) {
        if (gameStarted) {
            const relativeX = e.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }
    }

    function startGame() {
        if (!gameStarted) {
            gameStarted = true;
            document.getElementById('gameStartText').style.display = 'none';
            draw();
        }
    }

    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = '#0095DD';
        ctx.fill();
        ctx.closePath();
    }

    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = '#0095DD';
        ctx.fill();
        ctx.closePath();
    }

    function drawBricks() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                if (bricks[c][r].status === 1) {
                    const brickX = c * (brickWidth + 2) + 20;
                    const brickY = r * (brickHeight + 2) + 20;
                    bricks[c][r].x = brickX;
                    bricks[c][r].y = brickY;
                    ctx.beginPath();
                    ctx.rect(brickX, brickY, brickWidth, brickHeight);
                    ctx.fillStyle = '#0095DD';
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }
    }

    function collisionDetection() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                const b = bricks[c][r];
                if (b.status === 1) {
                    if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
                        dy = -dy;
                        b.status = 0;
                        score++;
                        document.getElementById('scoreDisplay').textContent = 'score:' + score;
                        const hitBrickSound = document.getElementById('hitBrickSound');
                        hitBrickSound.play();
                    }
                }
            }
        }
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (gameStarted) {
            drawBricks();
            drawBall();
            drawPaddle();
            collisionDetection();
            x += dx;
            y += dy;
            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            if (y + dy < ballRadius) {
                dy = -dy;
            } else if (y + dy > canvas.height - ballRadius) {
                if (x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                    const hitPaddleSound = document.getElementById('hitPaddleSound');
                    hitPaddleSound.play();
                } else {
                    const gameOverSound = document.getElementById('gameOverSound');
                    gameOverSound.play();
                    document.location.reload();
                }
            }
        }
        requestAnimationFrame(draw);
    }

    draw();
</script>
</body>
</html>