【开发者空间实践指导】基于鲲鹏服务器的打砖块小游戏部署

举报
开发者空间小蜜蜂 发表于 2024/11/20 10:54:39 2024/11/20
【摘要】 鲲鹏服务器是基于鲲鹏处理器的新一代数据中心服务器,适用于大数据、分布式存储、高性能计算和数据库等应用。鲲鹏服务器具有高性能、低功耗、灵活的扩展能力,适合大数据分析、软件定义存储、Web等应用场景。

一、 案例介绍

鲲鹏服务器是基于鲲鹏处理器的新一代数据中心服务器,适用于大数据、分布式存储、高性能计算和数据库等应用。鲲鹏服务器具有高性能、低功耗、灵活的扩展能力,适合大数据分析、软件定义存储、Web等应用场景。

本案例将指导开发者如何在鲲鹏服务器部署并运行web小游戏。

二、免费领取云主机

如您还没有云主机,可点击链接 ,领取专属云主机后进行操作。

如您已领取云主机,可直接开始实验。

三、实验流程

说明:

1、自动部署鲲鹏服务器

2、使用终端连接鲲鹏服务器;

3、创建html文件;

4、启动Web服务器;

5、体验游戏。

四、实验资源

本次实验预计花费总计0

资源名称

规格

单价(元)

时长(h

云主机

2vCPUs | 4GB RAM

免费

1


五、自动部署鲲鹏服务器

1、在下载的更新包目录下点击鼠标右键选择“Open Terminal Here”,打开命令终端窗口。

执行自动部署命令如下:

hcd deploy --password abcd1234! --time 1800

命令的参数说明:

  • passwordpassword关键字后设置的是鲲鹏服务器的root用户密码,命令中给出的默认为abcd1234!,开发者可以替换成自定义密码(至少8个字符)。
  • timetime关键字后面设置的为鲲鹏服务器的可用时间,单位为秒,至少600秒。当前实验预估需要20分钟,为了保证时间充足,在命令中申请的时间为30分钟,即1800秒。

该命令会自动部署鲲鹏服务器。首次部署会直接执行,旧资源未到期时重复部署,会提示是否删除前面创建的资源,可以删除旧资源再次部署。

记录部署远端服务器公网IP,如截图中对应的就是:113.44.86.210。

六、拷贝代码

新打开一个命令窗口,在命令窗口中输入命令登录远端服务器,命令如下:

ssh root@远端服务器公网IP

输入密码,密码为步骤中自动部署命令行中“--password”后面的参数,命令中给出的默认为abcd1234!,如果没有修改,就使用abcd1234!进行登录,如果设置了自定义密码,直接输入自定义的密码(注意:输入过程中密码不会显示,密码输入完成按回车键结束)。

输入密码也可以借助剪切板进行复制粘贴,避免直接在命令窗口输入看不到输入内容而密码错误:

图片2.png

登录成功后创建文件夹用于存放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>

按下ESC按钮退出编辑模式,输入“:wq”,退出并保存game.html文件。

七、安装软件包

安装Python3,命令如下:

sudo yum install -y python3 

图片1.png

安装成功后检查Python3版本确认是否安装成功。

python3 --version

八、浏览器访问

在当前存放代码的路径下,使用Python3启动一个简单的Web服务器,命令如下:

python3 -m http.server

如下图所示,代表当前Web服务器已经启动。

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

至此实验全部完成。

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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