ペイント練習用の「チャート隠し」ツール ver3

先日(昨年)作った「ペイント練習用のチャート隠しツール ver2」

ペイント練習用の「チャート隠し」ツール ver2

を使って、自分のペイント練習で使おうとしたら、
いくつか不便を感じたので、少し改良してみることにした。

・対象ファイル名を 選択できるようにしたい!
・マウス(あるいはタップ)だけで、一時停止と再開をしたい!
(タブレットPCだと、カーソルキーが使えないので。)

こういうことも、「enchant.js」や「phina.js」を使うと、簡単に実現可能である。

そして、暫定的にできあがったのが、このページ。

< ペイント練習用の、チャート隠しツール ver3 >
http://shunichi.hosono.com/chart-mask3.html

 

残念ながら、ブラウザソフト側のセキュリティの関係で、
選択したファイルの「パス名」を取得することができない。

したがって、対象となるペイント練習画像ファイルがすべて、
このツールと同じフォルダ内に存在していることが利用条件となる。

設置方法は、ver2 と同じで、
次の3ファイルを、右クリックで ダウンロード選択して、
ペイント練習画像を溜めているのと同じフォルダへ入れておき、
chart-mask3.html をブラウザで起動すればよい。

・ダウンロードするページ 3種類

< ペイント練習用の、チャート隠しツール ver3 >
http://shunichi.hosono.com/chart-mask3.html

< enchant.js >
http://shunichi.hosono.com/enchant.js

< ブランク画像 >
http://shunichi.hosono.com/mask.png

 

多少の html または javascript の知識がある人は、
テキストエディタでカスタマイズすることも可能だし、
「enchant.js」や、他の開発技術を持っている人は、
これをきっかけ&ヒントに、もっともっと高機能な
練習支援ツールを開発してくれることをぜひ期待したい。

< chart-mask3.htmlのソース > ※未完成の箇所あり

<!DOCTYPE html>
<html>
<head>
<meta charset="Shift_JIS">
<title>Chart mask ver3</title>
<style>
body { margin: 0; }
</style>
<script src="enchant.js"></script>
</head>
<body>

<input type="file" id="targetfile" size="50" accept="image/*" onchange="chartmask()"><br>
<a href="#" onclick="chartmask()">start</a>

<script>
function chartmask(){

// ファイル名を取得
var imgFileName0 = document.getElementById("targetfile").value;
var array = imgFileName0.split(/\\|\\/);
var imgFileName = array[ array.length - 1];

// ライブラリの初期化
enchant();

// 変数の定義
var startX = 150; // スライド表示を開始する左位置
var maskspeed = 1; // スライド表示する速度
var maskadd = maskspeed; //
var isTouch = true; // タッチフラグ(タッチ中のみ true にする)
var isLeft = false; // タッチフラグ(右フリックで true にする)
var isRight = false; // タッチフラグ(左フリックで true にする)
var currentX = null; // 現在のX座標
var currentY = null; // 現在のY座標
var touchX = null; // タッチX座標
var touchY = null; // タッチY座標

// 1920×1080ピクセルサイズの画面(Canvas)を作成
var game = new Game(1920, 1080);

// フレームレートの設定。30fpsに設定
game.fps = 30;

// 画像データをあらかじめ読み込ませる
game.preload( imgFileName, 'mask.png' );

// データの読み込みが完了したら処理
game.onload = function(){

// チャート画像 を設定
var chart = new Sprite(1920, 1080);
// chart.image = game.assets['screenshot.png'];
chart.image = game.assets[ imgFileName ];
game.rootScene.addChild(chart);

// マスク画像 を設定
var mask = new Sprite(1920, 1080);
mask.image = game.assets["mask.png"];
game.rootScene.addChild(mask);
mask.x = startX;

// 説明文を表示します。
var Label1 = new Label("");
Label1.text = "マウスのクリック:一時停止と再開<br>" +
"左キー:少し戻る<br>" +
"右キー:少し加速<br>" +
"上キー:最初に戻る<br>" +
"下キー:一時停止";
Label1.font = "16px monospace";
Label1.color = "red";
Label1.x = startX; // X座標
Label1.y = 100; // Y座標
game.rootScene.addChild(Label1);

// シーンに「毎フレーム実行イベント」を追加します。
game.rootScene.addEventListener(Event.ENTER_FRAME, function(e) {
if( isTouch == true ) {
mask.x += maskadd;
}
});

// タッチイベントを登録
this.rootScene.addEventListener("touchstart", function(e) {
// タッチ開始
if( isTouch == true ) {
isTouch = false;
} else if( isTouch == false ) {
isTouch = true;
}

// 現在のマウス位置の取得
currentX = e.localX;
currentY = e.localY;

});

// フリック操作を監視
this.rootScene.addEventListener("touchmove", function(e) {
// 移動後のマウス位置の取得
touchX = e.localX;
touchY = e.localY;

if( touchX < currentX ) {
// 左フリック
isLeft = true;
} else if( touchX > currentX ) {
// 右フリック
isRight = true;
}

});

// フリック操作の判定
this.addEventListener("touchend", function(e) {
// タッチ位置をセット

if( isLeft == true ) {
// 左フリック
this.x -= (maskspeed + 1);
} else if( isRight == true ) {
// 右フリック
this.x += maskspeed;
}

});

// キー操作時に処理
mask.addEventListener('enterframe', function(){
if (game.input.left) this.x -= (maskspeed + 1);
if (game.input.right) this.x += maskspeed;
if (game.input.up) this.x = startX;
if (game.input.down) isTouch = false;
});

}

// 処理開始
game.start();

}
</script>

</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


My Company Links

合資会社ユースマネージメント
ドメインサービス
インターネット活用の入り口

My Website Links

細野俊一のトレーディング日記
日経225+JPX400銘柄の PPP(パンパカパン) 一覧
「生命の科学」学習メモ
大安心と大冒険を求めて

Facebook Pages

ポイント&フィギュア活用研究会
合資会社ユースマネージメント
アダムスキー「生命の科学」活用研究会
細野俊一 (宇宙哲学研究家)