华为云之基于鲲鹏服务器部署打砖块小游戏全流程【玩转华为云】

举报
江湖有缘 发表于 2025/08/31 01:35:30 2025/08/31
【摘要】 华为云之基于鲲鹏服务器部署打砖块小游戏全流程【玩转华为云】


一、本次实践介绍

1.1 实践环境简介

本实验旨在指导开发者在鲲鹏服务器上完成 Web 小游戏的部署与运行,深入体验基于国产化硬件平台的云服务开发与应用能力。

实验平台:华为云开发者云实验平台
华为云官方实验平台提供一键式实验环境创建功能,开发者可依据实验手册指引,快速上手并完成云服务的实践、调试与验证。平台具备以下优势:

  • 轻量级环境:按需分配资源,快速启动
  • 操作便捷:全程可视化操作,降低学习门槛
  • 体验流畅:真实云环境,贴近实际开发场景

在这里插入图片描述

1.2 实验流程概览

通过本实验,我们将完整体验从资源准备到应用部署的全流程,掌握在鲲鹏架构服务器上运行Web应用的核心技能。

步骤 操作内容
1 预置实验资源
2 登录云账户
3 打开云控制台
4 远程登录ECS实例
5 搭建Python运行环境
6 部署并运行“打砖块”Web小游戏

1.3 本次实践目标

 掌握鲲鹏服务器的基本使用方法
 熟悉华为云ECS实例的登录与管理操作
 完成Python开发环境的搭建与配置
 成功部署并运行一个基于Web的“打砖块”小游戏
 理解国产化硬件平台在轻量级应用部署中的优势与适用场景

🎯 最终成果:在浏览器中访问部署好的小游戏,实现可交互式运行体验。


二、 相关服务介绍

2.1 华为云ECS云服务器介绍

华为云弹性云服务器(ECS)是一种高效、安全的云上计算服务,支持用户按需自助获取资源,具备灵活的弹性伸缩能力。ECS 为各类应用提供稳定可靠的运行环境,有效保障业务的连续性与高可用性。凭借其卓越的性能与高度的灵活性,ECS 能够满足多样化的应用场景需求,无论是Web服务、开发测试,还是大数据处理,均可从容应对,为用户带来高效、便捷的云端使用体验。

image.png

2.2 鲲鹏服务器介绍

鲲鹏服务器是基于华为自主研发的鲲鹏处理器构建的高性能计算平台,依托ARM架构优势,具备高能效、强算力和自主可控等特点。它面向云计算、大数据、分布式存储和企业级应用等场景,提供稳定强劲的算力支持,具备良好的兼容性与扩展性。依托华为全栈自主创新技术,鲲鹏服务器在安全性、可靠性方面表现卓越,广泛应用于政企、金融、运营商等行业,助力构建安全可信的数字基础设施。

三、预置实验环境

3.1 登录华为云

查看华为云实验账号信息:进入实验环境后,我们在左侧的实验手册中可以看到华为云实验账号。

在这里插入图片描述

进入【实验操作桌面】,打开Chrome浏览器,填写左侧的实验账号信息登录并进入华为云控制台页面。

在这里插入图片描述

登录完毕后,我们进入华为云控制台管理首页。

在这里插入图片描述

3.2 查看弹性云服务器状态

我们在云服务器控制台,可以看到系统为我们自动创建好了一台鲲鹏云服务器,如下所示:

在这里插入图片描述

3.3 登录云服务器

我们通过实验桌面的Xfce工具进行SSH连接ECS,将以下命令的EIP替换我们实际ECS的弹性公网IP地址。如果无法登录,需要修改安全组配置,放行22端口。ECS的登录账号密码信息,我们在左侧点击【查看预置信息】按钮即可查询。

ssh root@*EIP*

在这里插入图片描述

3.4 检查系统环境

检查操作系统版本和内核版本,如下所示:

[root@ecs-name ~]# cat /etc/os-release 
NAME="CentOS Linux"
VERSION="7 (AltArch)"
ID="centos"
ID_LIKE="rhel fedora"
VERSION_ID="7"
PRETTY_NAME="CentOS Linux 7 (AltArch)"
ANSI_COLOR="0;31"
CPE_NAME="cpe:/o:centos:centos:7"
HOME_URL="https://www.centos.org/"
BUG_REPORT_URL="https://bugs.centos.org/"

CENTOS_MANTISBT_PROJECT="CentOS-7"
CENTOS_MANTISBT_PROJECT_VERSION="7"
REDHAT_SUPPORT_PRODUCT="centos"
REDHAT_SUPPORT_PRODUCT_VERSION="7"

[root@ecs-name ~]# uname -r 
4.18.0-80.7.2.el7.aarch64



四、环境准备工作

4.1 安装python环境

我们在运行小游戏项目之前,需要提前部署python环境。

sudo yum install -y python3

在这里插入图片描述

4.2 检查python版本

安装python完毕后,我们查询python版本。

python3 --version

在这里插入图片描述

五、运行小游戏项目

4.1 编辑项目文件

  • 创建项目目录,用于存放game.html文件。
mkdir game   && cd game
  • 编辑game.html文件
<!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>

4.2 运行小游戏

执行以下命令,我们开始运行打砖块小游戏。

python3 -m http.server

在这里插入图片描述

五、访问打砖块小游戏

我们打开本地浏览器,在地址栏输入“http://弹性云服务器IP:8000/game.html”即可体验游戏。

在这里插入图片描述
点击中间的“start”,开始试玩游戏,我们按住鼠标左键拖动鼠标即可控制左右滑动。

在这里插入图片描述

至此,本次实践成功完成!

六、总结

本次实践成功在鲲鹏服务器上完成了打砖块小游戏的部署与运行,验证了华为云ECS在ARM架构下的良好兼容性与稳定性。通过Python环境的搭建与项目部署,充分体验了华为云服务的高效性与易用性。未来可进一步探索鲲鹏平台在更多应用场景下的潜力,助力国产化生态建设。


【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。