hakobera's blog

技術メモ。たまに雑談

JavaScript で PSP アナログパッド風コントローラ

HTML5 jQuery

MHP3rd にハマっている今日この頃ですが、PSP のアナログパッドを JavaScript で作るとどうなるのか、ふと思い立ったので作ってみました。

hakobera/jquery-analogpad-plugin · GitHub

ソースは上記 GitHub で公開してます。ライセンスは MIT ライセンスです。

PC 上でも使えますが、基本的には iPhone/iPad/Android などのタッチデバイスでの使用を主目的に作ってあります。なので、実はデザインは PSP よりは、Cave の iPhoneアプリ「虫姫さまバグパニック」を参考にしています。

デモ（要 HTML5 Canvas 対応ブラウザ)

使い方

HTML で空の div を用意

<div id="analogpad"></div>

JavaScript で以下のように書く

var analogpad = $('#analogpad').analogpad();

var input = analogpad.input();
var x = input.x; // X軸の値
var y = input.y; // Y軸の値

Y軸は上方向が正、X軸は右方向が正で、それぞれ、-1.0〜1.0の値が返るようになっていますので、実際に利用する際は適当にスケーリングしてください。

デモのソース

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>[DEMO] jquery-analogpad-plugin</title>
    <link href="./css/jquery.analogpad.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="./js/jquery.analogpad.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <canvas id="canvas" width="300" height="300"></canvas>
    </div>
    <div id="analogpad" style="width: 300px; padding-left: 100px;"></div>
    
<script type="text/javascript">
$(function() {
    var analogpad = $('#analogpad').analogpad();

    var width = 300;
    var height = 300;
    var x = width / 2;
    var y = height / 2;
    var scale = 3;

    var draw = function() {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.fillStyle = '#000';
        context.fillRect(0, 0, width, height);
        context.fillStyle = '#fff';
        context.fillRect(x-5, y-5, 10, 10);
    };

    setInterval(function() {
        var input = analogpad.input();
        x = x + input.x * scale;
        y = y - input.y * scale;
        draw();
    }, 50);
});
</script>
</body>
</html>