JavaScript Touch Events

iPhone に変更してからスマホゲームを始めた。
ひたすらポチポチするだけだとバカにしていたがコレが意外に面白い。

こんなのを Web アプリで作ってみたい、ということで。

とりあえず画面をポチると少しずつ一行文字列が流し込まれていく方法を。
エロゲでよく見かけるやつね、凄く古いのしか知らないけど。

ソレっぽいワードで検索すると基本みたいなのは日本語でゴロゴロ出る。
筆者メインの Python for GTK+ じゃ英語しか見つからないので逆に戸惑うよ。

JavaScriptプログラミング講座【タッチスクリーン操作について】

addEventListener で touchend のハンドラを処理すればよさそう。
それだけだとパソコンからは動かないので mouseup も同じハンドラで。
touchstart, mousedown ではないのはオンラインソフトでの経験から。

JavaScriptを解説します

文字列流し込みはこの上書きする手段がよさそう。
しかし clearInterval しなくてもいいのかな?
しかしみんな関数名が、GTK+ を主に使っていると凄く気になる。

結構簡単に作れたけど色々問題があった。
touchend, mouseup 両方を Android Chrome は拾ってしまう。
表示が終る前にポチるとハンドラが多重発生してしまう。
表示が終わるまで何らかの手段で排他制御を行うしかないな。

removeEventListener で一時ハンドラを外す方法が沢山見付かる。
でも筆者の実装手段が悪いのかうまくいかない。
最適ではないかもだけど下記がうまくいった方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<title>test</title>
<script type="text/javascript"><!--

    var count = 0;
    var lock = false;
    var lines = [
        "JavaScript で一文字ずつ表示する。",
        "日本語(Japanese)も一文字として扱ってくれるよ。",
        "end." ];

    // Text Out Function
    var writeLine = function(line) {
        lock = true;
        var i = 0;
        var id = null;
        var setText = function() {
            if (i <= line.length) {
                document.getElementById("text_area").innerHTML = line.substring(0, i);
                i++;
            } else {
                clearInterval(id);
                lock = false;
            }
        }
        id = setInterval(setText, 50);
    }
    // Event Handler
    var onTouchEnd = function() {
        if (lock == false) {
            if (count < lines.length) {
                writeLine(lines[count]);
                count++;
            }
        }
    }
    // Connect
    var init = function() {
        if (window.TouchEvent) {
            document.getElementById("event_check_area").innerHTML = "Support the Touch Events.";
            document.addEventListener("touchend",onTouchEnd);
        }
        document.addEventListener("mouseup",onTouchEnd);
    }
    //-->
</script>
</head>
<body onLoad="init()">
<p id="event_check_area">Don't Support the Touch Events.</p>
<p id="text_area"></p>
</body>
</html>

touch_event

iPhone, Android でもうまくいった、IE はしらない。
しかし Google Chrome は Linux デスクトップ版もタッチ対応なのか。
意味があるのかな?

あとはエレメントを特定 canvas にして美少女画像を別に表示すれば
くるぉおえるめぇぇるですおおお^q^
みたいなのが作れるかも、まだ先は長いけど。