javascript - Canvas 简单游戏视口(viewport)

Question

我想让我的游戏可以探索，我们可以在 map 上四处移动。我尽力实现了这段代码:https://jsfiddle.net/gfcarv/QKgHs/但它对我不起作用，我尝试通过多种方式解决这个问题，我搜索了互联网，但找不到任何适合我的代码的简单视口(viewport)。

我只想让玩家始终处于 Canvas 的中间，当我们单击(或按住单击)时它会移动 map ，但每个游戏对象都保持在它们的位置。如果它到达 map 的任何一侧，只要让它这样做，它就可以越过 map 。我想要 map ，简单的图像或一些生成的 Canvas 矩形，或其他任何东西。

这是我的简化代码:

function randomNumberFromRange( min, max ) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function testCollisionRectRect( rectangle1, rectangle2 ) {
    return rectangle1.x - rectangle1.width/2 <= rectangle2.x - rectangle2.width/2 + rectangle2.width
        && rectangle2.x - rectangle2.width/2 <= rectangle1.x - rectangle1.width/2 + rectangle1.width
        && rectangle1.y - rectangle1.height/2 <= rectangle2.y - rectangle2.height/2 + rectangle2.height
        && rectangle2.y - rectangle2.height/2 <= rectangle1.y - rectangle1.height/2 + rectangle1.height;
}

Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
}; // Function to pop specific element drom array by value


function drawLine( startX, startY, endX, endY, color, width ) {
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

function drawBorder( x, y, width, height, lineWidth, strokeColor ) {
    ctx.save();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = strokeColor;
    ctx.strokeRect( x, y, width, height);
    ctx.restore();
}

function drawRect( x, y, width, height, fillColor ) {
    ctx.save();
    ctx.fillStyle = fillColor;
    ctx.fillRect( x, y, width, height );
    ctx.restore();
}


// ====================
//   Global variables
// ====================

var ctx = $("#canvas")[0].getContext('2d'),
canvas = document.getElementById('canvas'),
    cHeight = canvas.height = 500,
    cWidth = canvas.width = 500,
    canvasOffset = $('#canvas').offset(),
    offsetX = canvasOffset.left,
    offsetY = canvasOffset.top,
    frameCounter = 0,
    enemyList = [],
    spawningEnemies_FLAG = true,
    isLeftMouseButtonHeld_FLAG = false,
    cursors = ['default', 'pointer'],
    enemiesOnMap = 100,
    fps = 120,
    mouseX,
    mouseY;


// canvas settings
ctx.font = '22px Arial';


var sharedBehaviour = {
    x: cWidth / 2,
    y: cHeight / 2,
    id: undefined,
    type: 'entity',
    width: 15,
    height: 15,
    fillColor: '#E15258',
    targetX: null,
    targetY: null,
    bulletSpeed: 1,
    speed: 1,

    update( type ) {
        // if there is target
        if( this.targetX !== null ) {
            // Find out distance to target
            var distanceX = this.targetX - this.x; // distance on X axis
            var distanceY = this.targetY - this.y; // distance on Y axis
            var distanceToTarget = Math.sqrt( distanceX*distanceX + distanceY*distanceY ); // distance

            // If distance is smaller or equal speed, then just set position
            if( distanceToTarget <= this.speed ) {
                this.x = this.targetX;
                this.y = this.targetY;
                // Then reset
                this.targetX = this.targetY = null;
            } else { // If distance is bigger than speed, so we want to move with speed
                distanceX = distanceX / distanceToTarget;
                distanceY = distanceY / distanceToTarget;
                distanceX = distanceX * this.speed;
                distanceY = distanceY * this.speed;
                this.x += distanceX;
                this.y += distanceY;
            }
        }
    },
    draw( type ) {
        drawRect( this.x - this.width/2, this.y - this.height/2, this.width, this.height, this.fillColor );
    },
    isColliding( entity ) {
        return testCollisionRectRect( this, entity );
    }
};


var player = Object.assign({}, sharedBehaviour, {
    x: cWidth/2 - 12.5,
    y: cHeight/2 - 12.5,
    id: 980722,
    type: 'player',
    width: 25,
    height: 25,
    fillColor: '#82d877',
    speed: 2.5,
    isWithinRange( entity, val ) {
        // Check if enemy is on player
        var distanceX = this.x - entity.x;
        var distanceY = this.y - entity.y;
        return Math.sqrt( distanceX*distanceX + distanceY*distanceY ) < val;
    }
});


function createEnemy( x, y, type, width, height, fillColor, speed, name ) {
    var newEnemy = Object.assign({}, sharedBehaviour, {
        x,
        y,
        type,
        width,
        height,
        name,
        fillColor,
        speed,
        setTarget( entity ) {
            this.targetX = entity.x + randomNumberFromRange(-50, 50); // Set X with some random number
            this.targetY = entity.y + randomNumberFromRange(-50, 50); // Set Y with some random number
        },
        isOnPlayer( val ) {
            // Check if enemy is on player
            var distanceX = player.x - this.x;
            var distanceY = player.y - this.y;
            return Math.sqrt( distanceX*distanceX + distanceY*distanceY ) < val;
        },
        isMouseOver( ) {
            return (this.mouseX + this.width/2 >= this.x && this.mouseX + this.width/2 <= this.x + this.width && this.mouseY + this.height/2 >= this.y && this.mouseY + this.height/2 <= this.y + this.height);
        }
    });

    enemyList.push( newEnemy );
}

function newGame( ) {
    player.x = cWidth/2 - 12.5;
    player.y = cHeight/2 - 12.5;
    frameCounter = 0;
    enemyList = [];
    spawningEnemies_FLAG = true;
    isLeftMouseButtonHeld_FLAG = false;

    // Spawning enemies
    for( i=0; i < randomNumberFromRange(15, 25); i++ ) {
        createEnemy( randomNumberFromRange(0, cWidth), randomNumberFromRange(0, cHeight), 'passive', randomNumberFromRange(12, 18), randomNumberFromRange(12, 18), 'red', 1, 's' );
        createEnemy( randomNumberFromRange(0, cWidth), randomNumberFromRange(0, cHeight), 'agressive', randomNumberFromRange(10, 16), randomNumberFromRange(10, 16), 'lightblue', 1.5, 'l' ); 
    }

    update();
}


function update( ) {
    frameCounter++;
    ctx.clearRect(0,0,cWidth,cHeight);

    // ========== Update ==========
        // Player
        player.update('player');
        // Enemies
        enemyList.forEach( enemy => { enemy.update(); });


    // ========== Draw ==========
        // Enemies
        enemyList.forEach( enemy => { enemy.draw(); });
        // Player
        player.draw('player');


    // ========== Conditions ==========
        // Enemies
            // Behaviour
            enemyList.forEach( enemy => {
                if ( Math.random() < ( 1 / 15 ) ) {
                    if ( enemy.isOnPlayer( player.circleRadius ) ) {
                        if ( ! (enemy.isOnPlayer( 50 )) ) {
                            enemy.setTarget( player );
                        } 
                    }
                }

                if ( Math.random() < ( 1 / 800 )) {
                    if ( ! (enemy.isOnPlayer( player.circleRadius )) ) enemy.setTarget( enemy );
                }

                if ( enemy.isOnPlayer(player.circleRadius/2 - 25 ) ) {
                    enemy.targetX = enemy.targetY = null;
                }

                ( enemyList.length === enemiesOnMap ) ? spawningEnemies_FLAG = false : spawningEnemies_FLAG = true;
            });

    setTimeout(function() { requestAnimationFrame(update); }, 1000 / fps);
}


function setPlayerTarget_and_checkPlayerPosition( mouse ) {
    player.targetX = mouseX;
    player.targetY = mouseY;

    if (player.targetX < player.width/2)   player.targetX = player.width/2; 
    if (player.targetX > cWidth - player.width/2)   player.targetX = cWidth - player.width/2;
    if (player.targetY < player.height/2)   player.targetY = player.height/2; 
    if (player.targetY > cHeight - player.height/2)   player.targetY = cHeight - player.height/2;
}

canvas.addEventListener('mousedown', function( mouse ) {
    isLeftMouseButtonHeld_FLAG = true;
    setPlayerTarget_and_checkPlayerPosition(mouse);
});

canvas.addEventListener('mouseup', function( mouse ) {
    isLeftMouseButtonHeld_FLAG = false;
});

canvas.addEventListener('mousemove', function( mouse ) {
    if( isLeftMouseButtonHeld_FLAG ) {
        setPlayerTarget_and_checkPlayerPosition(mouse);
    }
});

canvas.addEventListener('mousemove', function( mouse ) {
    mouseX = parseInt(mouse.clientX - offsetX);
    mouseY = parseInt(mouse.clientY - offsetY);
});

newGame();

canvas { border: 1px solid black; background-color: white; }

<canvas id="canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

Answer 1

移动视口(viewport)以使玩家保持居中非常容易:

您可以简单地使用 ctx.setTransform(1, 0, 0, 1, centerX - player.x, centerY - player.Y);

现在，根据您当前的鼠标逻辑，您实际上需要一个 viewPort 对象，它只有两个属性 x 和 y 这样您就可以仍能获得光标与播放器之间的正确距离。

您显然还需要删除在 setPlayerTarget_and_checkPlayerPosition 函数中所做的边界检查。

function randomNumberFromRange( min, max ) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function testCollisionRectRect( rectangle1, rectangle2 ) {
    return rectangle1.x - rectangle1.width/2 <= rectangle2.x - rectangle2.width/2 + rectangle2.width
        && rectangle2.x - rectangle2.width/2 <= rectangle1.x - rectangle1.width/2 + rectangle1.width
        && rectangle1.y - rectangle1.height/2 <= rectangle2.y - rectangle2.height/2 + rectangle2.height
        && rectangle2.y - rectangle2.height/2 <= rectangle1.y - rectangle1.height/2 + rectangle1.height;
}

Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
}; // Function to pop specific element drom array by value


function drawLine( startX, startY, endX, endY, color, width ) {
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.restore();
}

function drawBorder( x, y, width, height, lineWidth, strokeColor ) {
    ctx.save();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = strokeColor;
    ctx.strokeRect( x, y, width, height);
    ctx.restore();
}

function drawRect( x, y, width, height, fillColor ) {
    ctx.save();
    ctx.fillStyle = fillColor;
    ctx.fillRect( x, y, width, height );
    ctx.restore();
}


// ====================
//   Global variables
// ====================

var ctx = $("#canvas")[0].getContext('2d'),
canvas = document.getElementById('canvas'),
    cHeight = canvas.height = 500,
    cWidth = canvas.width = 500,
    canvasOffset = $('#canvas').offset(),
    offsetX = canvasOffset.left,
    offsetY = canvasOffset.top,
    frameCounter = 0,
    enemyList = [],
    spawningEnemies_FLAG = true,
    isLeftMouseButtonHeld_FLAG = false,
    cursors = ['default', 'pointer'],
    enemiesOnMap = 100,
    fps = 120,
    mouseX,
    mouseY;


// canvas settings
ctx.font = '22px Arial';

var viewPort = {
  x: cWidth/2,
  y: cHeight/2,
  update() {
    this.x = cWidth / 2 - player.x;
    this.y = cHeight / 2 - player.y;
  }
};
var sharedBehaviour = {
    x: cWidth / 2,
    y: cHeight / 2,
    id: undefined,
    type: 'entity',
    width: 15,
    height: 15,
    fillColor: '#E15258',
    targetX: null,
    targetY: null,
    bulletSpeed: 1,
    speed: 1,

    update( type ) {
        // if there is target
        if( this.targetX !== null ) {
            // Find out distance to target
            var distanceX = this.targetX - this.x; // distance on X axis
            var distanceY = this.targetY - this.y; // distance on Y axis
            var distanceToTarget = Math.sqrt( distanceX*distanceX + distanceY*distanceY ); // distance

            // If distance is smaller or equal speed, then just set position
            if( distanceToTarget <= this.speed ) {
                this.x = this.targetX;
                this.y = this.targetY;
                // Then reset
                this.targetX = this.targetY = null;
            } else { // If distance is bigger than speed, so we want to move with speed
                distanceX = distanceX / distanceToTarget;
                distanceY = distanceY / distanceToTarget;
                distanceX = distanceX * this.speed;
                distanceY = distanceY * this.speed;
                this.x += distanceX;
                this.y += distanceY;
            }
        }
    },
    draw( type ) {
        drawRect( this.x - this.width/2, this.y - this.height/2, this.width, this.height, this.fillColor );
    },
    isColliding( entity ) {
        return testCollisionRectRect( this, entity );
    }
};


var player = Object.assign({}, sharedBehaviour, {
    x: cWidth/2 - 12.5,
    y: cHeight/2 - 12.5,
    id: 980722,
    type: 'player',
    width: 25,
    height: 25,
    fillColor: '#82d877',
    speed: 2.5,
    isWithinRange( entity, val ) {
        // Check if enemy is on player
        var distanceX = this.x - entity.x;
        var distanceY = this.y - entity.y;
        return Math.sqrt( distanceX*distanceX + distanceY*distanceY ) < val;
    }
});


function createEnemy( x, y, type, width, height, fillColor, speed, name ) {
    var newEnemy = Object.assign({}, sharedBehaviour, {
        x,
        y,
        type,
        width,
        height,
        name,
        fillColor,
        speed,
        setTarget( entity ) {
            this.targetX = entity.x + randomNumberFromRange(-50, 50); // Set X with some random number
            this.targetY = entity.y + randomNumberFromRange(-50, 50); // Set Y with some random number
        },
        isOnPlayer( val ) {
            // Check if enemy is on player
            var distanceX = player.x - this.x;
            var distanceY = player.y - this.y;
            return Math.sqrt( distanceX*distanceX + distanceY*distanceY ) < val;
        },
        isMouseOver( ) {
            return (this.mouseX + this.width/2 >= this.x && this.mouseX + this.width/2 <= this.x + this.width && this.mouseY + this.height/2 >= this.y && this.mouseY + this.height/2 <= this.y + this.height);
        }
    });

    enemyList.push( newEnemy );
}

function newGame( ) {
    player.x = cWidth/2 - 12.5;
    player.y = cHeight/2 - 12.5;
    frameCounter = 0;
    enemyList = [];
    spawningEnemies_FLAG = true;
    isLeftMouseButtonHeld_FLAG = false;

    // Spawning enemies
    for( i=0; i < randomNumberFromRange(15, 25); i++ ) {
        createEnemy( randomNumberFromRange(0, cWidth), randomNumberFromRange(0, cHeight), 'passive', randomNumberFromRange(12, 18), randomNumberFromRange(12, 18), 'red', 1, 's' );
        createEnemy( randomNumberFromRange(0, cWidth), randomNumberFromRange(0, cHeight), 'agressive', randomNumberFromRange(10, 16), randomNumberFromRange(10, 16), 'lightblue', 1.5, 'l' ); 
    }

    update();
}


function update( ) {
    frameCounter++;
    
    ctx.setTransform(1,0,0,1,0,0); // reset before clearing
    ctx.clearRect(0,0,cWidth,cHeight);

    // ========== Update ==========
        // Player
        player.update('player');
        // Enemies
        enemyList.forEach( enemy => { enemy.update(); });
        // viewPort
        viewPort.update()
    // ========== Draw ==========
        // viewPort
        ctx.setTransform(1,0,0,1, viewPort.x, viewPort.y);
        // Enemies
        enemyList.forEach( enemy => { enemy.draw(); });
        // Player
        player.draw('player');


    // ========== Conditions ==========
        // Enemies
            // Behaviour
            enemyList.forEach( enemy => {
                if ( Math.random() < ( 1 / 15 ) ) {
                    if ( enemy.isOnPlayer( player.circleRadius ) ) {
                        if ( ! (enemy.isOnPlayer( 50 )) ) {
                            enemy.setTarget( player );
                        } 
                    }
                }

                if ( Math.random() < ( 1 / 800 )) {
                    if ( ! (enemy.isOnPlayer( player.circleRadius )) ) enemy.setTarget( enemy );
                }

                if ( enemy.isOnPlayer(player.circleRadius/2 - 25 ) ) {
                    enemy.targetX = enemy.targetY = null;
                }

                ( enemyList.length === enemiesOnMap ) ? spawningEnemies_FLAG = false : spawningEnemies_FLAG = true;
            });
// this is bad vvv
//    setTimeout(function() {
requestAnimationFrame(update);
//}, 1000 / fps);
}


function setPlayerTarget_and_checkPlayerPosition( mouse ) {
    player.targetX = mouseX;
    player.targetY = mouseY;
// a few lines are gone here...
}

canvas.addEventListener('mousedown', function( mouse ) {
    isLeftMouseButtonHeld_FLAG = true;
    setPlayerTarget_and_checkPlayerPosition(mouse);
});

canvas.addEventListener('mouseup', function( mouse ) {
    isLeftMouseButtonHeld_FLAG = false;
});

canvas.addEventListener('mousemove', function( mouse ) {
    if( isLeftMouseButtonHeld_FLAG ) {
        setPlayerTarget_and_checkPlayerPosition(mouse);
    }
});

canvas.addEventListener('mousemove', function( mouse ) {
    var rect = canvas.getBoundingClientRect(); // offset may change in snippets
    mouseX = parseInt(mouse.clientX - rect.left - viewPort.x);
    mouseY = parseInt(mouse.clientY - rect.top - viewPort.y);
});

newGame();

canvas { border: 1px solid black; background-color: white; }

<canvas id="canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>