html5地图边界,当玩家到达边界时如何使RPG地图延伸？ Javascript HTML5

我努力在谷歌上找到我的问题的答案,所以想到了id帖子.

我正在使用html5,javascript和jquery构建一个自上而下的基于tile的RPG游戏.

我已在阵列中设置图像.我已经在一个数组中设置了我的地图,只是循环遍历它以显示屏幕上的图块.

我希望在画布上显示大地图的750px x 600px部分,当玩家移动到4个边界中的一个时,地图将更新并显示地图的下一部分,或者如果没有地图可用则保持不变.

我该如何实现？

如果你不明白我要求生病的尝试更好地解释：p但是我的代码：

$(document).ready(function(){

var canvas = $("#TBG");

var context = canvas.get(0).getContext("2d");

var canvasWidth = canvas.width();

var canvasHeight = canvas.height();

//Player Controls -------------------------------------------------------------------------

$(window).keydown(function(e){

var keyCode = e.keyCode;

if (keyCode == arrowRight){

Player.moveRight = true;

}

else if (keyCode == arrowLeft){

Player.moveLeft = true;

}

else if (keyCode == arrowUp){

Player.moveUp = true;

}

else if (keyCode == arrowDown) {

Player.moveDown = true;

}

});

$(window).keyup(function(e){

var keyCode = e.keyCode;

if (keyCode == arrowRight){

Player.moveRight = false;

}

else if (keyCode == arrowLeft){

Player.moveLeft = false;

}

else if (keyCode == arrowUp){

Player.moveUp = false;

}

else if (keyCode == arrowDown) {

Player.moveDown = false;

}

});

function player() {

this.x = 100;

this.y = 100;

this.vX = 0;

this.vY = 0;

var moveRight = false;

var moveLeft = false;

var moveUp = false;

var moveDown = false;

}

var Player = new player();

var arrowLeft = 37;

var arrowUp = 38;

var arrowRight = 39;

var arrowDown = 40;

//End Player controls ------------------------------------------------------------------------------

//Map initialisation -------------------------------------------------------------------------------------

var images = new Array(3);

images[0] = new Image();

images[0].src = "images/player.png";

images[1] = new Image();

images[1].src = "images/wall.png";

images[2] = new Image();

images[2].src = "images/grass.png";

images[3] = new Image();

images[3].src = "images/floor.png";

var tileMap = [

[3,1,3,3,3,3,3,3,3,3],

[3,1,1,2,2,2,2,2,2,3],

[3,1,1,1,2,2,2,2,2,3],

[3,2,1,1,1,2,2,2,2,3],

[3,2,2,1,1,1,2,2,2,3],

[3,2,2,2,1,1,1,1,1,3],

[3,2,2,2,2,1,1,1,1,3],

[3,2,2,2,2,1,1,1,1,3],

[3,2,2,2,2,1,1,1,1,3],

[3,3,3,3,3,3,3,3,3,3]

];

//Animate Loop -------------------------------------------------------------------------------------------

function animate () {

context.clearRect(0,0,canvasWidth,canvasHeight);

Player.vX = 0;

Player.vY = 0;

//Player Animation

if (Player.moveRight) {

Player.vX =2;

};

if (Player.moveUp) {

Player.vY = -2;

};

if (Player.moveDown) {

Player.vY = 2;

};

if (Player.moveLeft) {

Player.vX = -2;

};

Player.x += Player.vX;

Player.y += Player.vY;

if (Player.x < 0){

Player.x = 0;

Player.vX *= -2;

}

else if (Player.x + 64 > canvasWidth) {

Player.x = canvasWidth - 64;

Player.vX *= -2;

};

if (Player.y < 0){

Player.y = 0;

Player.vY *= -2;

}

else if (Player.y + 64 > canvasHeight) {

Player.y = canvasWidth - 64;

Player.vY *= -2;

};

for (var i = 0; i < 10; i++) {

for (var j = 0; j < 10; j++){

var tileId = tileMap[i][j];

var tileWidth = 32;

var tileHeight = 32;

context.drawImage(images[tileId],i * tileWidth, j * tileHeight);

}

}

context.drawImage(images[0], Player.x, Player.y);

setTimeout(animate, 0);

}

// End Loop ------------------------------------------------------------------------------------------------

animate();

});

我不是很喜欢Javascript,但学习和了解编程的舒适程度.

提前致谢

汤姆