Click and drag whole background (game-like)

Question

I would like to make a strategy/management game. I want the user to be able to click the background to move around the content. (the full content cannot be showed on the screen because it's supposed to be much bigger) It's a common functionality but I can't figure out how to do it. Is there something build-in for this ? Any libraries maybe ?

Answer 1

Here is a big World map,You can drag.You can change image as you want for your game.

var ctx = canvas.getContext('2d'),
    
    ix = 0, iy = 0,           /// image position
    offsetX = 0, offsetY = 0, /// current offsets
    deltaX, deltaY,           /// deltas from mouse down
    mouseDown = false,        /// in mouse drag
    img = null,               /// background
    rect,                     /// rect position
    rectW = 200, rectH = 150; /// size of highlight area

/// we start off with setting sizes
setSize();

/// load background, then start
img = new Image();
img.onload = update;
img.src = 'http://www.mytripolog.com/wp-content/uploads/2011/05/large-size-world-map.jpg';

canvas.onmousedown = function(e) {

    /// don't do anything until we have an image
    if (img === null) return;

    /// correct mouse pos
    var coords = getPos(e),
        x = coords[0],
        y = coords[1];
    
    /// store current position to calc deltas
    deltaX = x;
    deltaY = y;
    
    /// here we go..
    mouseDown = true;
}

canvas.onmousemove = function(e) {
    
    /// in a drag?
    if (mouseDown === true) {
        
        var coords = getPos(e),
            x = coords[0],
            y = coords[1];

        /// offset = current - original position
        offsetX = x - deltaX;
        offsetY = y - deltaY; 
        
        /// redraw what we have so far
        update();
    }
}
document.onmouseup = function(e) {
    
    /// was in a drag?
    if (mouseDown === true) {
        /// not any more!!!
        mouseDown = false;
        
        /// make image pos. permanent
        ix += offsetX;
        iy += offsetY;
        
        /// so we need to reset offsets as well
        offsetX = offsetY = 0;
    }
}

/// window resize so recalc canvas and rect
window.onresize = setSize;

/// main draw
function update() {
    if (img === null) return;
    
    /// limit x/y as drawImage cannot draw with negative
    /// offsets for clipping
    if (ix + offsetX > rect[0]) ix = rect[0] - offsetX;
    if (iy + offsetY > rect[1]) iy = rect[1] - offsetY;
    
    /// clear background to clear off garbage
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    /// make everything transparent
    ctx.globalAlpha = 0.2;
    
    /// draw complete background
    ctx.drawImage(img, ix + offsetX, iy + offsetY);
    
    /// reset alpha as we need opacity for next draw
    ctx.globalAlpha = 1;

    /// draw a clipped version of the background and
    /// adjust for offset and image position
    ctx.drawImage(img, -ix - offsetX + rect[0],  /// sx
                       -iy - offsetY + rect[1],  /// sy
                       rect[2], rect[3],         /// sw/h
                  
                       /// destination
                       rect[0], rect[1], rect[2], rect[3]);
    
    /// make a nice sharp border by offsetting it half pixel
    ctx.strokeRect(rect[0] + 0.5, rect[1] + 0.5, rect[2], rect[3]);
}

/// correct mouse position by making it relative to canvas
function getPos(e) {
    var r = canvas.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;
    return [x, y];
}

/// calc canvas w/h in relation to window as well as
/// setting rectangle in center with the pre-defined
/// width and height
function setSize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    rect = [canvas.width * 0.5 - rectW * 0.5,
            canvas.height * 0.5 - rectH * 0.5,
            rectW, rectH]
    update();
}

<canvas id="canvas"></canvas>

For zooming the canvas I believe this is already answered in this post - you should be able to merge this with the answer given here: Zoom Canvas to Mouse Cursor

use this css to hide scrollbars

   html, body {margin:0;padding:0;overflow:hidden}