地図画像移動実験ページソース
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta name="copyright" content="(C) 2013 Seishin Nakama All Rights Reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<!-- css -->
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/docstyle.css" />
<!-- ビューポートの設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- 表題 -->
<title>はじまりの自作ゲーム</title>
<!-- jquery js -->
<script type="text/javascript" src="../../../jquery/js/jquery.js"></script>
<!-- アプリケーション js -->
<script type="text/javascript" src="../js/clsCalcPoints.js"></script>
<!-- ページ処理 -->
<script type="text/javascript">
var xPos = 0;
var yPos = 0;
var posInfo = null;
var oCalc = new clsCalcPoints();
// ゲーム初期処理
$(document).ready(function(){
// ボタンでの移動
$('#lmove,#rmove,#umove,#dmove').click(function() {
var move = parseInt($(this).data('move'));
// 移動方向によりＸ加減、Ｙ加減の分岐
if ($(this).data('vect') == 'x')
xPos += move;
else
yPos += move;
// 背景地図の移動
$('#map').css("background-position", xPos + "px " + yPos + "px");
});
// 地図のマウス押下
$('body').mousedown (
function(e) {
if ($(e.target).attr('id') == 'front') {
var o = $('#map').offset();
var l = (e.pageX - o.left);
var t = (e.pageY - o.top);
// 座標変換位置取得
var mdPos = oCalc.GetHexPoint(l, t, 52, 41, 2496, 1968);
var s = "マウス押下位置<br/> 左:" + e.pageX + "<br/> 上:" + e.pageY + "<br/>";
var c = "ABCDEFGHIJKLMNOPQRSTUVWX";
// 情報編集
if (mdPos) {
s += "マウス押下の座標変換位置<br/>";
s += " 開始指標<br/>";
s += " 行 = " + mdPos[2] + '<br/>'
s += " 列 = " + mdPos[3] + '(' + c.substr(mdPos[3] , 1) + ')<br/>'
s += " 六角形の相対中心点<br/>";
s += " 水平位置 = " + mdPos[0] + '<br/>'
s += " 垂直位置 = " + mdPos[1] + '<br/>'
s += " 六角形の絶対中心点<br/>";
s += " 水平位置 = " + oCalc.GetPtMapping(mdPos[0] - xPos, 2496) + '<br/>'
s += " 垂直位置 = " + oCalc.GetPtMapping(mdPos[1] - yPos, 1968) + '<br/>'
//
posInfo = { hPosX:mdPos[0], hPosY:mdPos[1] };
//
oCalc.DrawRect('front', mdPos[2], mdPos[3], 52, 41, 624, 534);
}
else {
s = "座標変換失敗(TT)";
posInfo = null;
}
// 情報表示のエレメント更新
$('#mdHex').empty();
$('#mdHex').append(s);
// 範囲選択禁止
$("body").css('user-select', 'none');
}
}
);
// マウスの移動
$('body').mousemove (
function(e) {
if (posInfo) {
var o = $('#map').offset();
var l = (e.pageX - o.left);
var t = (e.pageY - o.top);
// 座標変換位置取得
var x = oCalc.GetPtMapping(l, 2496);
var y = oCalc.GetPtMapping(t, 1968);
var mvPos = oCalc.GetHexPoint(x, y, 52, 41, 2496, 1968);
var s = "マウス移動位置<br/> 左:" + e.pageX + "<br/> 上:" + e.pageY + "<br/>";
// 情報編集
s += (
"地図画像(background-position)<br/>"
+ " 左位置：" + (mvPos ? xPos + (mvPos[0] - posInfo.hPosX) : 'null')+ "<br/>"
+ " 上位置：" + (mvPos ? yPos + (mvPos[1] - posInfo.hPosY) : 'null')+ "<br/>"
);
// 情報表示のエレメント更新
$('#mvHex').empty();
$('#mvHex').append(s);
// 背景地図の移動
if (mvPos) {
xPos += (mvPos[0] - posInfo.hPosX);
yPos += (mvPos[1] - posInfo.hPosY);
posInfo.hPosX = mvPos[0];
posInfo.hPosY = mvPos[1];
$('#map').css("background-position", xPos + "px " + yPos + "px");
}
}
}
);
// マウスの解放
$('body').mouseup (
function(e) {
posInfo = null;
// 範囲選択禁止解除
$("body").css('user-select', 'auto');
}
);
});
</script>
</head>
<body style="background:#FFFFCC;">
<h1>地図画像移動実験</h1>
<div class="outerblock">
<div style="margin:0px;padding:0px;">
<p style="margin:0px;margin-left:34px;padding:0px;letter-spacing:18px;">ABCDEFGHIJKLMNOPQRSTUVWX</p>
</div>
<div style="float:left;width:24px;margin:0px;padding:0px;">
<p style="margin-top:2px;line-height:20.5px;">
0<br/> 1<br/> 2<br/> 3<br/> 4<br/> 5<br/> 6<br/> 7<br/> 8<br/> 9<br/>
10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20<br/>21<br/>22<br/>23<br/>24<br/>25
</p>
</div>
<div id="map" class="map">
<div id="grid" class="grid">
<canvas id="front" width="624px" height="534px" class="front"></canvas>
</div>
</div>
<div class="info">
<div style="margin-left:6px;margin-top:6px;">
<input id="lmove" type="button" value="左へ" data-vect="x", data-move="-78" />
<input id="rmove" type="button" value="右へ" data-vect="x", data-move="78" />
<input id="umove" type="button" value="上へ" data-vect="y", data-move="-41" />
<input id="dmove" type="button" value="下へ" data-vect="y", data-move="41" />
</div>
<div id="mdHex" style="margin-left:6px;margin-top:6px;">
</div>
<div id="mvHex" style="margin-left:6px;margin-top:6px;">
</div>
</div>
</div>
<br/>
</body>
</html>