2D 游戏中的摄像机移动

Question

我真的很想知道如何在 html 和 javascript 中进行 2D 相机移动，所以我写了这段代码，它只是一个字符和一个块，所以我可以测试相机移动是否正常工作。这是我的代码：

var c = document.getElementById("screen");
var ctx = c.getContext("2d");
var rightPressed;
var leftPressed;
var x = (c.width - 75) / 2;
var speed = 10;
function block() {
ctx.fillStyle = "#fff";
ctx.fillRect(390, 225, 80, 25);
}
function character() {
ctx.fillStyle = "#00f"
ctx.fillRect(x, 250, 50, 50);
}
function keyUpHandler(event) {
if (event.keyCode == 37) {
leftPressed = false;
} else if (event.keyCode == 39) {
rightPressed = false;
}
}
function keyDownHandler(event) {
if (event.keyCode == 37) {
leftPressed = true;
} else if (event.keyCode == 39) {
rightPressed = true;
}
}
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("keydown", keyDownHandler, false);
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
block();
character();
if (rightPressed && (x + 50) < c.width) {
x += speed;
} else if (leftPressed && x > 0) {
x -= speed;
}
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

#screen {
display: block;
margin: auto;
background-color: #0f0;
border: 2px solid black;
}
#headline {
text-align: center;
}

<h1 id="headline">2d Camera movement</h1>
<canvas id="screen" width="500" height="300"></canvas>

有没有人知道如何做到这一点，那么请告诉我，如果你能把它放到这个代码中，那就太好了:)

Answer 1

我创建了两个类，一个Game和一个Ball。当玩家按下左键或右键时，球会移动。

球知道自己的位置和速度，游戏不在乎。

只需告诉球根据游戏的当前状态进行更新即可。

---

我从这里改编了很大一部分代码：

"快速提示：如何在 JavaScript 中制作游戏循环">

我添加了 ES6 类、矢量支持和动态游戏元素支持。

---

演示

const canvasTxt = window.canvasTxt.default;
const KeyCodeMap = {
37: 'left',
38: 'up',
39: 'right',
40: 'down',
65: 'left',
68: 'right',
83: 'down',
87: 'up'
};
Object.assign(canvasTxt, {
align: 'left',
vAlign: 'top',
font: 'monospace',
fontSize: 24
});
const main = () => {
Game.DEBUG = true; // Enable global DEBUG mode.
const ctx = document.getElementById('screen').getContext('2d');
const game = new Game(ctx);
game.gameElements.push(...[
new Ball({
speed: new Victor(10, 0),
position: new Victor(game.getWidth() / 2, game.getHeight() / 2),
color: 'red',
size: 20
}),
new Ball({
speed: new Victor(20, 0),
position: new Victor(game.getWidth() / 2, game.getHeight() / 4),
color: 'green',
size: 30
}),
new Ball({
speed: new Victor(20, 50),
position: new Victor(100, 140),
color: 'cyan',
size: 25
}),
]);
game.redraw();
};
class Ball {
constructor(options) {
let opts = Object.assign({}, Ball.defaultOptions, options);
this.position = opts.position;
this.speed = opts.speed;
this.size = opts.size;
this.color = opts.color;
}
update(container, state) {
if (state.pressedKeys.left && !state.pressedKeys.right) {
this.position.subtract(this.speed);
}
if (state.pressedKeys.right && !state.pressedKeys.left) {
this.position.add(this.speed);
}
this.checkBounds(container); // Make sure object is in-bounds...
}
checkBounds(container) {
if (this.position.x > container.width) {
this.position.x = 0;
}
if (this.position.x < 0) {
this.position.x = container.width;
}
if (this.position.y > container.height) {
this.position.y = 0;
}
if (this.position.y < 0) {
this.position.y = container.height;
}
}
draw(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.size / 2, 0, 2 * Math.PI, false);
ctx.fillStyle = this.color;
ctx.fill();
//ctx.lineWidth = 1;
//ctx.strokeStyle = '#000000';
ctx.stroke();
ctx.restore();
}
}
Ball.defaultOptions = {
position: new Victor(0, 0),
speed: new Victor(0, 0),
size: 1,
color: '#FFFFFF'
};
class Game {
constructor(ctx) {
this.ctx = ctx;
this.gameElements = [];
this.resize();
this.state = {
pressedKeys: {} // Capture key pressed
};
this.__lastRender = 0;
this.__animationId = null;
window.onresize = (e) => this.resize(e);
document.addEventListener('click', (e) => this.clickHandler(e), false);
document.addEventListener('keyup', (e) => this.keyUpHandler(e), false);
document.addEventListener('keydown', (e) => this.keyDownHandler(e), false);
}
clickHandler(e) {
this.isRunning() ? this.pause() : this.run(); // Pause, if running
}
keyUpHandler(event) {
let key = KeyCodeMap[event.keyCode];
delete this.state.pressedKeys[key];
}
keyDownHandler(event) {
let key = KeyCodeMap[event.keyCode];
if (key) this.state.pressedKeys[key] = true;
}
getWidth() {
return this.ctx.canvas.width;
}
getHeight() {
return this.ctx.canvas.height;
}
resize(event) {
this.ctx.canvas.width = window.innerWidth * 2
this.ctx.canvas.height = window.innerHeight * 2
}
update(progress) {
this.gameElements.forEach(gameElement => gameElement.update(this.ctx.canvas, this.state));
}
redraw() {
this.ctx.clearRect(0, 0, this.getWidth(), this.getHeight());
this.gameElements.forEach(gameElement => gameElement.draw(this.ctx));
if (Game.DEBUG) {
this.__renderDebugText(this.ctx);
}
}
/* @private */ __renderDebugText(ctx) {
ctx.save();
let text = 'DEBUG OUTPUT:nn' + JSON.stringify(Object.assign({
running: this.isRunning()
}, this.state), null, 2);
let offset = { x: 16, y: 16 };
let bounds = { width: 280,  height: 320 };
ctx.fillStyle = 'rgba(16, 16, 16, 0.8)';
ctx.fillRect(offset.x, offset.y, bounds.width, bounds.height);
ctx.lineWidth = 1;
ctx.strokeStyle = '#333';
ctx.strokeRect(offset.x, offset.y, bounds.width, bounds.height);
ctx.fillStyle = '#FFF';
canvasTxt.drawText(ctx, text, offset.x + 4, offset.y + 4, bounds.width, bounds.height);
ctx.restore();
}
loop(timestamp) {
this.update(timestamp - this.__lastRender);
this.redraw();
this.__lastRender = timestamp;
this.__animationId = window.requestAnimationFrame((ts) => this.loop(ts));
}
isRunning() {
return this.__animationId != null;
}
run() {
this.__animationId = window.requestAnimationFrame((ts) => this.loop(ts));
}
pause() {
cancelAnimationFrame(this.__animationId);
this.__animationId = null;
this.redraw();
}
}
Game.DEBUG = false; // Default is off
main();

html,
body {
margin: 0;
padding: 0;
}
canvas {
background: #000;
height: 100%;
width: 100%;
display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/victor/1.1.0/victor.min.js"></script>
<script src="https://unpkg.com/canvas-txt@2.0.6/build/index.js"></script>
<canvas id="screen" />