如何实现类似于Slither.io的相机/运动风格？
我知道这已经被问过几次了，但是他们都在使用其他库，我需要它只使用P5.js和JavaScript。
我有一个基本的游戏设置，玩家加入一个房间使用速成和Socket.io和产卵作为一艘船。，我希望有一个可玩的地图区域，而客户端看到的是地图的一部分，客户端的船在中间
如何通过p5.js使用HTML画布实现这一点？
我尝试过的一种方法是将整个可玩区域的船坐标映射到客户端浏览器的宽度。这是很好的工作，但没有客户的船在中心，所以他们只是漂移离开屏幕，如果移动足够多。
这里有一个图表来解释我想要实现的目标：
黑匣子表示整个可玩区域(地图)。每一个绿色的圆圈都是一艘船，每个红色的方框代表控制这艘船的客户端和他们能看到的地图上的部分。
回答 1
Stack Overflow用户
发布于 2021-10-26 17:49:58
您要寻找的是翻译函数：
指定在“显示”窗口中替换对象的金额。X参数指定左/右转换，y参数指定上/下转换。
你想让玩家成为他们屏幕的中心，所以你应该翻译成玩家在屏幕的中心。
translate(width/2 - player.x, height/2 - player.y);
我已经列出了一个非常简单的例子，它可以为你指明正确的方向。它基本上只是一个圆圈，你可以在游戏世界中移动，我在游戏中添加了几个矩形，所以很明显，你用箭头键移动玩家：
let player;
function setup() {
createCanvas(400, 400);
player = {
x: width/2,
y: height/2
}
}
function draw() {
background(220);
translate(width/2 - player.x, height/2 - player.y);
rect(-100, 100, 50, 50);
rect(100, 50, 50, 50);
if (keyIsDown(LEFT_ARROW)) {
player.x--;
} else if (keyIsDown(RIGHT_ARROW)) {
player.x++;
} else if (keyIsDown(UP_ARROW)) {
player.y--;
} else if (keyIsDown(DOWN_ARROW)) {
player.y++;
}
ellipse(player.x, player.y, 10, 10);
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
另外，这里有一个指向p5.js素描的链接
https://stackoverflow.com/questions/69723213
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号