Javascript Html5画布游戏，创建一个比查看画布大得多的地图

因此，让我先说，我正在尝试创建一个大的图像或房间，比如5000乘3750，画布或查看区域只有800乘599，始终跟随玩家的作品。我确实找到了一个很好的指南，使用java脚本绘制的背景和播放器（不是从sprite表中提取的）。但是我有一个带有背景的精灵表，播放器，我让播放器在JavaScript的背景上工作，但不是像我想做的那样从精灵表上。 下面是一些代码：

// wrapper for "class" Map
(function(){
    function Map(width, height){
// map dimensions
    this.width = width;
    this.height = height;       
// map texture
    this.image = null;
    }
// generate an example of a large map
    Map.prototype.generate = function(){
    ctxBg.drawImage(imgSprite,0,2250,5000,3750,0,0,5000,3750);  
    }       
// draw the map adjusted to camera
    Map.prototype.draw = function(context, xView, yView){                       
    var sx, sy, dx, dy;
    var sWidth, sHeight, dWidth, dHeight;   
// offset point to crop the image
    sx = xView;
    sy = yView; 
// dimensions of cropped image          
    sWidth =  800;
    sHeight = 599;
// if cropped image is smaller than canvas we need to change the source dimensions
    if(800 - sx < sWidth){
        sWidth = 800 - sx;
    }
    if(599 - sy < sHeight){
        sHeight = 599 - sy; 
    }           
// location on canvas to draw the croped image
    dx = 0;
    dy = 0;
// match destination with source to not scale the image
    dWidth = sWidth;
    dHeight = sHeight;                                  
    context.drawImage(imgSprite, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);         
    }       
// add "class" Map to our Game object
    Game.Map = Map; 
    })();
// Game Script
(function(){
// prepaire our game canvas
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
// game settings:   
var FPS = 30;
var INTERVAL = 1000/FPS; // milliseconds
var STEP = INTERVAL/1000 // seconds     
// setup an object that represents the room
var room = {
width: 5000,
height: 3750,
map: new Game.Map(5000, 3750)
};  
room.map.generate(); 

//类映射的包装器
（功能（）{
功能图（宽度、高度）{
//地图尺寸
这个。宽度=宽度；
高度=高度；
//贴图纹理
this.image=null；
}
//生成大型地图的示例
Map.prototype.generate=函数（）{
ctxBg.图纸图像（imgSprite，0225050003750,0,050003750）；
}       
//绘制调整到相机的地图
Map.prototype.draw=函数（context，xView，yView）{
变量sx，sy，dx，dy；
var sWidth、sHeight、dWidth、dHeight；
//用于裁剪图像的偏移点
sx=xView；
sy=yView；
//裁剪图像的维数
sWidth=800；
sHeight=599；
//如果裁剪的图像小于画布，我们需要更改源尺寸
如果（800-sx

以下是camra/播放器代码：

(function(){
    function Rectangle(left, top, width, height){
    this.left = left || 0;
    this.top = top || 0;
    this.right = (left + width) || 0;
    this.bottom = (top + height) || 0;
    }

Rectangle.prototype.set = function(left, top, /*optional*/width, /*optional*/height){
    this.left = left;
    this.top = top;
    this.width = width || this.width;
    this.height = height || this.height;
    this.right = (this.left + this.width);
    this.bottom = (this.top + this.height);
    }
Rectangle.prototype.within = function(r) {
    return (r.left <= this.left && 
        r.right >= this.right &&
        r.top <= this.top && 
        r.bottom >= this.bottom);
    }       
Rectangle.prototype.overlaps = function(r) {
    return (this.left < r.right && 
            r.left < this.right && 
            this.top < r.bottom &&
            r.top < this.bottom);
    }
// add "class" Rectangle to our Game object
Game.Rectangle = Rectangle;
    })();   
    // wrapper for "class" Camera (avoid global objects)
(function(){
    // possibles axis to move the camera
    var AXIS = {
        NONE: "none", 
        HORIZONTAL: "horizontal", 
        VERTICAL: "vertical", 
        BOTH: "both"
    };
    // Camera constructor
function Camera(xView, yView, canvasWidth, canvasHeight, worldWidth, worldHeight)
    {
// position of camera (left-top coordinate)
    this.xView = xView || 0;
    this.yView = yView || 0;        
// distance from followed object to border before camera starts move
    this.xDeadZone = 0; // min distance to horizontal borders
    this.yDeadZone = 0; // min distance to vertical borders         
// viewport dimensions
    this.wView = 800;
    this.hView = 599;                       
// allow camera to move in vertical and horizontal axis
    this.axis = AXIS.BOTH;          
// object that should be followed
    this.followed = null;           
// rectangle that represents the viewport
    this.viewportRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView);                                     
// rectangle that represents the world's boundary (room's boundary)
    this.worldRect = new Game.Rectangle(this.xView, this.yView, this.wView, this.hView);        
    }
// gameObject needs to have "x" and "y" properties (as world(or room) position)
    Camera.prototype.follow = function(gameObject, xDeadZone, yDeadZone)
    {       
    this.followed = gameObject; 
    this.xDeadZone = xDeadZone;
    this.yDeadZone = yDeadZone;
    }                       
    Camera.prototype.update = function()
    {
// keep following the player (or other desired object)
    if(this.followed != null)
    {       
    if(this.axis == AXIS.HORIZONTAL || this.axis == AXIS.BOTH)
    {       
// moves camera on horizontal axis based on followed object position
    if(this.followed.x - this.xView  + this.xDeadZone > this.wView)
        this.xView = this.followed.x - (this.wView - this.xDeadZone);
    else if(this.followed.x  - this.xDeadZone < this.xView)
        this.xView = this.followed.x  - this.xDeadZone;     
    }
    if(this.axis == AXIS.VERTICAL || this.axis == AXIS.BOTH)
    {
// moves camera on vertical axis based on followed object position
    if(this.followed.y - this.yView + this.yDeadZone > this.hView)
        this.yView = this.followed.y - (this.hView - this.yDeadZone);
    else if(this.followed.y - this.yDeadZone < this.yView)
        this.yView = this.followed.y - this.yDeadZone;
    }                               
    }       
// update viewportRect
    this.viewportRect.set(this.xView, this.yView);  
// don't let camera leaves the world's boundary
    if(!this.viewportRect.within(this.worldRect))
{
    if(this.viewportRect.left < this.worldRect.left)
        this.xView = this.worldRect.left;
    if(this.viewportRect.top < this.worldRect.top)                  
        this.yView = this.worldRect.top;
    if(this.viewportRect.right > this.worldRect.right)
        this.xView = this.worldRect.right - this.wView;
    if(this.viewportRect.bottom > this.worldRect.bottom)                    
        this.yView = this.worldRect.bottom - this.hView;
    }
    }   
// add "class" Camera to our Game object
        Game.Camera = Camera;
    })();
// wrapper for "class" Player
(function(){
    function Player(x, y){
// (x, y) = center of object
// ATTENTION:
// it represents the player position on the world(room), not the canvas position
    this.x = x;
    this.y = y; 
    this.srcX = 1700;
    this.srcY = 599;
    this.drawX = 350;
    this.drawY = 400;   
    xView = this.x-this.width/2;
    yView = this.y-this.height/2;           
// move speed in pixels per second
    this.speed = 100;           
// render properties
    this.width = 85;
    this.height = 80;
    }
Player.prototype.update = function(step, worldWidth, worldHeight){
// parameter step is the time between frames ( in seconds ) 
// check controls and move the player accordingly
    if(Game.controls.left)
        this.x -= this.speed * step;
    if(Game.controls.up)
        this.y -= this.speed * step;
    if(Game.controls.right)
        this.x += this.speed * step;
    if(Game.controls.down)
        this.y += this.speed * step;        
// don't let player leaves the world's boundary
    if(this.x - this.width/2 < 0){
        this.x = this.width/2;
    }
    if(this.y - this.height/2 < 0){
        this.y = this.height/2;
    }
    if(this.x + this.width/2 > worldWidth){
        this.x = worldWidth - this.width/2;
    }
    if(this.y + this.height/2 > worldHeight){
        this.y = worldHeight - this.height/2;
    }
    }
Player.prototype.draw = function(/*context,*/ xView, yView){
    ctxPlayer.clearRect(0,0,800,599);
    context.save();
    ctxPlayer.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,(this.x-this.width/2),(this.y-this.height/2),this.width,this.height);
    context.restore();          
    }
// add "class" Player to our Game object
    Game.Player = Player;   
    })();

（函数（）{
功能矩形（左、上、宽、高）{
this.left=左| | 0；
this.top=top | | 0；
this.right=（左+宽）| | 0；
this.bottom=（顶部+高度）| | 0；
}
Rectangle.prototype.set=函数（左、上、/*可选*/宽度、/*可选*/高度）{
this.left=左；
this.top=top；
this.width=宽度| | this.width；
this.height=高度| | this.height；
this.right=（this.left+this.width）；
this.bottom=（this.top+this.height）；
}
Rectangle.prototype.within=函数（r）{
返回（r.left=this.right&&
r、 顶部=这个。底部）；
}       
Rectangle.prototype.overlaps=函数（r）{
返回（此左<右&&
r、 左this.wView）
this.xView=this.followed.x-（this.wView-this.xDeadZone）；
else if（this.followed.x-this.xDeadZonethis.hView）
this.yView=this.followed.y-（this.hView-this.yDeadZone）；
else if（this.followed.y-this.yDeadZone(function(){
function Map(width, height){
this.width = width;
this.height = height;
this.image = null;
}
Map.prototype.generate = function(){
var ctx = document.createElement("canvas").getContext("2d");        
ctx.canvas.width = this.width;
ctx.canvas.height = this.height;        
var rows = ~~(this.width/44) + 1;
var columns = ~~(this.height/44) + 1;
var color = "red";              
ctx.save();         
ctx.fillStyle = "red";          
for (var x = 0, i = 0; i < rows; x+=44, i++) {
ctx.beginPath();            
for (var y = 0, j=0; j < columns; y+=44, j++) {            
ctx.rect (x, y, 40, 40);                
}
color = (color == "red" ? "blue" : "red");
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();            
}       
ctx.restore();
this.image = new Image();
this.image.src = ctx.canvas.toDataURL("image/png");                 
// clear context
ctx = null;
}
// draw the map adjusted to camera
Map.prototype.draw = function(context, xView, yView){                   
var sx, sy, dx, dy;
var sWidth, sHeight, dWidth, dHeight;
// offset point to crop the image
sx = xView;
sy = yView;
// dimensions of cropped image          
sWidth =  context.canvas.width;
sHeight = context.canvas.height;
// if cropped image is smaller than canvas we need to change the source dimensions
if(this.image.width - sx < sWidth){
sWidth = this.image.width - sx;
}
if(this.image.height - sy < sHeight){
sHeight = this.image.height - sy; 
}
dx = 0;
dy = 0;
dWidth = sWidth;
dHeight = sHeight;                                  
context.drawImage(this.image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);            
}
Game.Map = Map;
})();