基于鲲鹏服务器的打砖块小游戏部署

server/2024/12/23 8:45:23/

案例介绍

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

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

实验流程

在这里插入图片描述

自动部署鲲鹏服务器

在云主机桌面右键选择“Open Terminal Here”,打开命令终端窗口。

在这里插入图片描述

执行自动部署命令如下:

hcd deploy --password abcd1234! --time 1800

命令的参数说明:

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

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

在这里插入图片描述
新打开一个命令窗口,在命令窗口中输入命令登录远端服务器,命令如下:

ssh root@远端服务器公网IP

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

在这里插入图片描述

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

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

python3 --version

在这里插入图片描述
在当前存放代码的路径下,使用Python3启动一个简单的Web服务器,命令如下:

python3 -m http.server

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

在这里插入图片描述


http://www.ppmy.cn/server/152450.html

相关文章

Kile5 ST-LINK立即执行

让每次下载好之后立即执行程序&#xff0c;不用按复位按钮才执行。 勾选

如何彻底删除电脑数据以防止隐私泄露

在数字化时代&#xff0c;个人隐私和数据安全成为了人们日益关注的问题。当我们需要处理不再需要的电脑数据时&#xff0c;如何确保这些数据被彻底删除&#xff0c;以防止隐私泄露&#xff0c;成为了一个重要的课题。本文将详细介绍几种彻底删除电脑数据的方法&#xff0c;并给…

linux 安装 ffmpeg 视频转换

下载地址 通过网盘分享的文件&#xff1a;ffmpeg-release-amd64-static.tar.xz 链接: https://pan.baidu.com/s/1cgezDsDVOqK0AAnT3JA9fQ?pwd0012 提取码: 0012 查看版本 ffmpeg -version cd /usr/local/ 解压 xz -d ffmpeg-release-amd64-static.tar.xz tar -xf ffmpeg-re…

【Apache Paimon】-- 11 -- Flink 消费 kakfa 写 S3 File

目录 1、项目构建 2、项目新增和修改 2.1 pom.xml 新增依赖 2.2 本地测试或者 flink on k8s 时,新增 S3FileSystemFactory.java 第一步:创建包=org.apache.flink.fs.s3hadoop 第二步:新增 java 类 S3FileSystemFactory 特别注意 (1)本地测试时需要新增以下内容 (…

【JetPack】WorkManager笔记

WorkManager简介&#xff1a; WorkManager 是 Android Jetpack 库中的一个重要组件。它用于处理那些需要在后台可靠执行的任务&#xff0c;这些任务可以是一次性的&#xff0c;也可以是周期性的&#xff0c;甚至是需要满足特定条件才执行的任务。例如&#xff0c;它可以用于在后…

调整docker bridge地址冲突,通过bip调整 bridge地址

调整docker bridge地址冲突&#xff0c;通过bip调整 bridge地址 背景步骤 背景 我们在使用docker 过程中&#xff0c;docker 默认bridge地址可能会和一些业务地址相互冲突&#xff0c;需要调整docker bridge 的默认值。 步骤 1.清除当前所有镜像&#xff08;这一步非常关键&…

【Linux】shell语法

Shell基础语法全解 一、shell简介二、shell格式2.1 新建一个shell脚本文件2.2 执行脚本方式 三、变量3.1系统变量3.2自定义变量3.3 特殊变量3.3.1 $n 传入变量3.3.2 $# 输入参数个数3.3.3 $*、$ 输入参数内容3.3.4 $? 上一条命令执行结果 四、运算符 $[]、$(())五、条件判断5.…

DIY 集合求并集(union)运算的代码 ← Python

【算法分析】 已知 Python 提供了求并集运算的函数 union。代码示例如下; >>> s1{1,2,3} >>> s2{2,3,7,1,9} >>> s1.union(s2) {1, 2, 3, 7, 9} >>> 不过&#xff0c;知其然也要知其所以然。 本例自己 DIY 集合求并集&#xff08;union…