【发布时间】：2020-06-06 00:28:39
【问题描述】：
我写了这段代码。这是一个简单的游戏引擎。 仍然缺少一些东西（碰撞、声音、文字描述），但这只是开始:-) 玩家可以使用箭头来控制。 但我有两个问题。也许有人会告诉我怎么做。
- 移动播放器 现在，当玩家移动时，屏幕会以不同的速度移动。 其效果是，播放器在短时间内被屏幕边缘遮挡。
我怀疑问题出在此处： ctx.translate(player.x, player.y); 但我不知道我在这段代码中写错了什么。
- 相机视图 默认情况下，画布将非常大，最大为 10,000 x 10,000 点。数百条路径和房间（绿色和沙色矩形）将被绘制在画布上。 我想现在整个画布都被渲染了，即使是屏幕外的部分。 这可能是对计算机资源的相当大的浪费。 但我不知道该怎么做。
当然，如果这里有什么需要改进的地方，我会很感激地接受任何建议。
window.addEventListener('load', function(event) {
initCanvas();
});
let ctx;
let cW = 3000; // canvas width
let cH = 3000; // canvas height
let playerImgTop;
let playerImgBottom;
let playerImgLeft;
let playerImgRight;
let playerSpeed = 20;
let playerDir = 0;
function initCanvas() {
ctx = document.getElementById('mycanvas').getContext('2d');
ctx.canvas.width = cW;
ctx.canvas.height = cH;
let animateInterval = setInterval(render, 1000/30);
playerImgTop = new Image();
playerImgTop.src = "http://www.itbvega.pl/io/img/player-top.png";
playerImgBottom = new Image();
playerImgBottom.src = "http://www.itbvega.pl/io/img/player-bottom.png";
playerImgLeft = new Image();
playerImgLeft.src = "http://www.itbvega.pl/io/img/player-left.png";
playerImgRight = new Image();
playerImgRight.src = "http://www.itbvega.pl/io/img/player-right.png";
let gameLocations = [
{"id": "room0", "x": 180, "y": 180, "rw": 60, "rh": 60, "type": "room"},
{"id": "room1", "x": 160, "y": 380, "rw": 100, "rh": 100, "type": "room"},
{"id": "path0", "x": 200, "y": 240, "rw": 20, "rh": 140, "type": "path"}
];
function renderGameLocations() {
for (let i = 0; i < gameLocations.length; i++) {
let loc = gameLocations[i];
if (loc.type === "path") {
ctx.fillStyle = "#62d299";
} else if (loc.type === "room") {
ctx.fillStyle = "#e4b65e";
}
ctx.fillRect(loc.x, loc.y, loc.rw, loc.rh);
}
}
function render() {
ctx.save();
ctx.clearRect(0,0, cW, cH);
renderGameLocations();
player.render();
ctx.translate(player.x, player.y);
ctx.restore();
}
}
function Player() {
this.x = 200;
this.y = 200;
this.render = function() {
if (playerDir === 0) {
ctx.drawImage(playerImgTop, this.x, this.y);
} else if (playerDir === 1) {
ctx.drawImage(playerImgRight, this.x, this.y);
} else if (playerDir === 2) {
ctx.drawImage(playerImgBottom, this.x, this.y);
} else if (playerDir === 3) {
ctx.drawImage(playerImgLeft, this.x, this.y);
}
}
}
let player = new Player();
document.addEventListener('keydown', function(event) {
let key_press = event.keyCode;
//alert(event.keyCode + " | " + key_press);
if (key_press === 38 ) { // top
player.y -= playerSpeed;
playerDir = 0;
} else if (key_press === 40) { // bottom
player.y += playerSpeed;
playerDir = 2;
} else if (key_press === 37) { // left
player.x -= playerSpeed;
playerDir = 3;
} else if (key_press === 39) { // right
player.x += playerSpeed;
playerDir = 1;
}
});<canvas id="mycanvas"></canvas>【问题讨论】：
标签： javascript canvas html5-canvas game-engine