forked: 2014-06-08 1st

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body { background-color: #000; font: 30px sans-serif; text-align:center;overflow:hidden;}

jsdoit.html

<canvas id="testCanvas" width="640" height="930" style="width:320px;height:465px;"></canvas>

jsdoit.js

// forked from kingpanda's "2014-06-08 1st" http://jsdo.it/kingpanda/nsga
var canvas;
var ctx;
var timerDrawID;  //描画タイマーID
var cW = 640;  //キャンバス横サイズ
var cH = 930;  //キャンバス縦サイズ
var mouseDownFlag = false;  //マウスダウンしているかどうか
var mouseX1;  //ドラッグ開始した座標
var mouseY1;  //ドラッグ開始した座標
var mouseX2;  //ドラッグ中の座標
var mouseY2;  //ドラッグ中の座標
var dragDivX;  //ドラッグ開始地点と現在の差
var dragDivY;  //ドラッグ開始地点と現在の差
var obj;


var map = new Image();
map.src="http://jsrun.it/assets/l/K/P/H/lKPHO.jpg";

window.onload = function() {
  init();
};


function init(){
      //キャンバスの初期処理
      canvas = document.getElementById('testCanvas');
      if ( ! canvas || ! canvas.getContext ) return false;
      //2Dコンテキスト
      ctx = canvas.getContext('2d');
      
      //イベント
      canvas.addEventListener("mousedown", mouseDownListner, false);
      canvas.addEventListener("mousemove", mouseMoveListner, false);
      canvas.addEventListener("mouseup", mouseUpListner, false);
      canvas.addEventListener("mouseout", mouseUpListner, false);
      canvas.addEventListener("touchstart", mouseDownListner, false);
      canvas.addEventListener("touchmove", mouseMoveListner, false);
      canvas.addEventListener("touchend", mouseUpListner, false);
      canvas.addEventListener("touchcancel", mouseUpListner, false);
      
      //オブジェクト
      obj = new Object();
      obj.x = 0;
      obj.y = 0;
      obj.w = 1280;
      obj.h = 960;
      
      //タイマー開始
      setTimerDraw();
}

function setTimerDraw(){
      clearInterval(timerDrawID);
      timerDrawID = setInterval("draw()", 100);
}

function draw() {
      for(i=0;i<2;i++){
    //表示クリア
      ctx.clearRect(0, 0, cW, cH);
      ctx.beginPath();
      //画像を描く
      if (mouseDownFlag) {
        ctx.drawImage(map,obj.x + dragDivX,obj.y , obj.w, obj.h);
      } else {
        ctx.drawImage(map,obj.x, obj.y, obj.w, obj.h);
      }
    }

}

//マウスイベント
function mouseDownListner(e) {
      
      var rect = e.target.getBoundingClientRect();
      
      //ユーザーエージェント
      var isiPad = navigator.userAgent.match(/iPad/i) != null;
      var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
      
      //座標取得
      if (isiPad || isiPhone) {
        //iPad & iPhone用処理
        mouseX1 = e.touches[0].pageX - rect.left;
        mouseY1 = e.touches[0].pageY - rect.top;
      } else {
        //PC用処理
        mouseX1 = e.clientX - rect.left;
        mouseY1 = e.clientY - rect.top;
      }
      if (mouseX1 > obj.x && mouseX1 < obj.x + obj.w) {
        if (mouseY1 > obj.y && mouseY1 < obj.y + obj.h) {
          dragDivX = 0;
          dragDivY = 0;
          mouseDownFlag = true;
        }
      }
}

function mouseMoveListner(e) {
  if (mouseDownFlag) {
    
    //縦スクロールをしない（iPad & iPhone）
    e.preventDefault();
    
    //ユーザーエージェント
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
    
    //座標取得
    var rect = e.target.getBoundingClientRect();
    if (isiPad || isiPhone) {
     
            //iPad & iPhone用処理
              mouseX2 = e.touches[0].pageX - rect.left;
              mouseY2 = e.touches[0].pageY - rect.top;
        
        } else {
         
            //PC用処理
              mouseX2 = e.clientX - rect.left;
              mouseY2 = e.clientY - rect.top;
        }
        
        if (mouseX2 < 0 || mouseX2 > cW || mouseY2 < 0 || mouseY2 > cH) dragEnd();
        dragDivX = (mouseX2 - mouseX1);
        dragDivY = (mouseY2 - mouseY1);
  }
}

//マウスアップの処理

function mouseUpListner(e) {
      if (mouseDownFlag) {
        dragEnd();
  }
}

function dragEnd() {
      mouseDownFlag = false;      
     
    if (dragDivX <-150) {
      obj.x = -640;
        } 
    if (dragDivX>-150){
             obj.x = 0;
  }
}