我以2d标题地图游戏为基础，并创建了机芯和视口，但是由于我是游戏创建的初学者，因此遇到了一些问题。截至目前，我的游戏是这样的... What my games movement looks like而且，我希望它看起来像这种类型的运动和视口。 This is a game called zombs.io
我不太确定该怎么做。
到目前为止，我的代码在这里。
window.onload = function() {
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var objects = [];
var Box = function(x, y, size) {
this.x = x * 60;
this.y = y * 60;
this.size = size;
}
Box.prototype = {
draw: function(context, color) {
context.fillStyle = color;
context.fillRect(this.x, this.y, this.size, this.size);
}
}
var Sprite = function(img, x, y, size) {
this.x = x * 60;
this.y = y * 60;
this.size = size;
this.img = img;
}
Sprite.prototype = {
draw: function(context) {
var tag = new Image()
var t = this;
tag.onload = function() {
context.drawImage(tag, t.x, t.y, this.size, this.size);
}
tag.src = this.img;
}
}
var player = {
x: 15,
y: 7,
viewx: 0,
viewy: 0,
nexttime: new Date().getTime()
}
var map = {
cols: 64,
rows: 10,
tsize: 640,
tiles: [
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,2,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
],
getTile: function(col, row) {
return this.tiles[row * map.cols + col]
}
};
function move(e) {
if (e.keyCode == 68) {
if (new Date().getTime() >= player.nexttime) {
player.x += 1;
player.viewx += 60
player.nexttime = new Date().getTime() + 0;
}
console.log("right");
}
if (e.keyCode == 65) {
if (new Date().getTime() >= player.nexttime) {
player.x -= 1;
player.viewx -= 60
player.nexttime = new Date().getTime() + 0;
}
console.log("left");
}
if (e.keyCode == 87) {
if (new Date().getTime() >= player.nexttime) {
player.y -= 1;
player.viewy -= 60
player.nexttime = new Date().getTime() + 0;
}
console.log("Up");
}
if (e.keyCode == 83) {
if (new Date().getTime() >= player.nexttime) {
player.y += 1;
player.viewy += 60;
player.nexttime = new Date().getTime() + 0;
}
console.log("Down");
}
if (e.keyCode == 27) {
$("#menu").fadeIn("slow");
}
}
document.onkeydown = move;
function drawBoard(bw, bh, p) {
var p = p;
var cw = bw + (p * 2) + 1;
var ch = bh + (p * 2) + 1;
for (var x = 0; x <= bw; x += 60) {
context.moveTo(1 + x + p, p);
context.lineTo(1 + x + p, bh + p);
}
for (var x = 0; x <= bh; x += 60) {
context.moveTo(p, 1 + x + p);
context.lineTo(bw + p, 1 + x + p);
}
context.strokeStyle = "#677e53";
context.stroke();
}
var floor = new Image()
floor.src = "https://www.exper.pw/assets/images/PNG/Topdown/Default%20size/topdownTile_17.png";
var santa = new Image()
santa.src = "https://www.exper.pw/assets/images/player.png";
santa.id = "player";
var tree = new Image();
tree.src = "https://www.exper.pw/assets/images/PNG/Topdown/Default%20size/topdownTile_33.png";
function drawArrow(angle) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate((15 * 60), (7 * 60));
context.rotate(-Math.PI / 2); // correction for image starting position
context.rotate(angle);
context.drawImage(santa, -santa.width / 2, -santa.height / 2);
context.restore();
}
var drawScene = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#71885a";
context.fillRect(0, 0, canvas.width, canvas.height);
context.setTransform(1, 0, 0, 1, 0, 0);
context.translate(-player.viewx, -player.viewy);
for (var c = 0; c < map.cols; c++) {
for (var r = 0; r < map.rows; r++) {
var tile = map.getTile(c, r);
if (tile == 1) { // 0 => empty tile
new Box(c, r, 60).draw(context, "#45583d");
} else {
if (tile == 0) {
} else {
if (tile == 2) {
context.drawImage(tree, c * 60, r * 60);
} else {
if (tile == 3) {
} else {
if (tile == 4) {
}
}
}
}
}
}
}
//new Box(player.x, player.y, 60).draw(context, "#45583d");
drawBoard(window.innerWidth, window.innerHeight);
context.font = "20px Fredoka One";
context.color = "#fff"
context.fillText($(".username").val(), (player.x * 60) , (player.y * 60) - 15);
context.drawImage(santa, player.x * 60, player.y * 60, 60, 60);
};
initialize();
function initialize() {
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.log("Drawing")
drawBoard(window.innerWidth, window.innerHeight, 0);
}
var tick = function() {
drawScene();
requestAnimationFrame(tick);
}
document.onmousemove = function(e) {
var dx = e.pageX - (15 * 60);
var dy = e.pageY - (7 * 60);
var theta = Math.atan2(dy, dx);
drawArrow(theta);
};
$(".username").click(() => tick());
};