画面全体の入力処理について

###現状
現在、ゲームを自作しようとしているのですが、入力処理で困ってしまいました。
ネットで調べたところ、キャラクターにタッチして入力する方法は理解したのですが、
自分が作成しているのは、早押しゲームですので表示された画面ならどこをタッチしても反応するような入力処理をしたいのです。

###コード

作成途中のコードの為（自分が初心者の為）、無駄に長く読みにくいコードですが、よろしくお願いします。

lang
1enchant();
2
3var start;      //スタートシーン
4var STFunc;
5
6var Pscene;     //待期シーン
7var PFunc;
8
9
10//ゲームの状態
11var START = 0;
12var PLAY = 1;
13
14var gameState = 0;
15
16var time = 0;       //全体の時間
17
18//タッチ用変数
19var touchFlag = false;
20
21window.onload = function(){
22
23
24    var game = new Core(320, 320);
25    game.preload('img/chara1.png','img/sirokuma.png','img/start.png');
26    game.fps = 15;
27
28    game.onload = function(){
29
30        //startシーンの作成
31        start = new Scene();
32        var startflag = new Sprite(236, 48);
33        startflag.image = game.assets['img/start.png'];
34        startflag.x = 10;
35        startflag.y = 20;
36        startflag.frame = 0;
37        start.addChild(startflag);
38
39        STFunc = function(){
40            game.pushScene(start);
41        }
42
43        //Psceneの作成
44        Pscene = new Scene();
45
46        var bear = new Sprite(32, 32);
47        bear.image = game.assets['img/chara1.png'];
48        bear.x = 30;
49        bear.y = 80;
50        bear.frame = 0;
51        Pscene.addChild(bear);
52
53        var enemy = new Sprite(32, 32);
54        enemy.image = game.assets['img/sirokuma.png'];
55        enemy.x = 200;
56        enemy.y = 80;
57        enemy.scaleX = -1;
58        enemy.frame = 2;
59        Pscene.addChild(enemy);
60
61        PFunc = function(){
62            game.pushScene(Pscene);
63        }
64
65
66
67        //タッチイベントの追加！
68        document.addEventListener(Event.TOUCH_START, clickfunc);
69
70
71         //メインループの開始
72
73
74             switch (gameState){
75
76                 case START:
77                    startFunc();
78                    break;
79
80                 case PLAY:
81                    playFunc();
82                    break;
83                 
84                 default:
85                    break;
86
87             }
88
89
90
91         function startFunc(){
92             STFunc();
93
94             if (touchFlag == true) {
95                 gameState = PLAY;
96                 touchFlag = false;
97                 time = 0;
98                 game.popScene(start);
99             }
100         }
101
102         function playFunc(){
103             PFunc();
104         }
105
106
107         function clickfunc(){
108             touchFlag = true;
109         }
110
111    }
112    game.debug();
113};
114

###疑問点
現在のコードで実行すると、START画面が表示されたままで画面をクリックしても全く変わりません、エラーを見てみても何も表示されていません。
そのため、
・現在の入力処理であるgame.rootScene.addEventListener()が正しく使用できているか

・画面全体のタッチを認識する入力処理の方法

・その他文法的に間違えているところ

を、ご指摘いただきたいです。

#追記

現在、学生の身ですので、返信に時間がかかることがあります。
現在の環境
下のHTMLファイルをGoogle Chromeで開いています。

lang
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="x-ua-compatible" content="IE=Edge">
6    <meta name="viewport" content="width=device-width, user-scalable=no">
7    <meta name="apple-mobile-web-app-capable" content="yes">
8    <script type="text/javascript" src="js/lib/enchant.js"></script>
9    <script type="text/javascript" src="js/main.js"></script>
10    <style type="text/css">
11        body {
12            margin: 0;
13            padding: 0;
14            background-color: #ffffff;
15        }
16    </style>
17</head>
18<body>
19</body>
20</html>
21

行動規範の内容に同意します

回答4件

ベストアンサー

画面の遷移が行われない原因が分かりました。
今回使用しているenchant.jsの環境下で、setInterval関数を使うと画面のイベントが発行されないようです。
なので、setInterval関数を消してください。

タイマーの用途で使用していると思いますが、タイマーは以下のコードで実現可能です。

javascript
1var time_label = new Label();
2time_label.x = time_label.y = 2;
3time_label.addEventListener(enchant.Event.ENTER_FRAME, function(){
4            var progress = parseInt(game.frame/game.fps);
5            time = LIMIT_TIME - parseInt(game.frame/game.fps)+"";
6            this.text = "リミット : " + time;
7            // タイムが0以下になったらゲームオーバーシーンに移行する
8            if (time <= 0) { changeToGameOverScene(); }
9});
10Pscene.addChild(time_label);

私の環境では、画面遷移の問題以外にも、前のシーンの画像が残るなど別の問題も有りましたが、
今回の問題からは外れますので、修正していません。
フラグ管理などいろいろと大変だと思いますが、頑張ってください。

投稿2017/07/11 17:14

papi_tokei

総合スコア106

kamecha

2017/07/12 14:06

どうしてだろう・・・やはり、反応しないなぁ何か他にも原因があるのかもしれません。僕の環境下では、駄目な理由が他にあると思います。しかし、頑張ってみます。

papi_tokei

2017/07/12 16:41

お困りのようですのでいくつかアドバイスを。まず、 document.addEventListener(Event.TOUCH_START, clickfunc); がよくありません。 enchant.jsでは、シーンという考え方をするようです。一番上のシーンのみイベントをキャッチできます。なので、documentはイベントをキャッチできません。初期状態では、一番上のイベントはgame.rootSceneです。次に、switch文についてです。今回は一般的なフロー駆動型ではなくイベント駆動型です。 switch文は毎回実行したい部分だと思いますが、今回は一度しか実行されません。イベント駆動について理解を深めると、switch文の記述がおかしいことに気付くと思います。上記を参考に頑張ってください。

kamecha

2017/07/16 11:58

有り難うございます。基本をしっかりと学び直してからもう一度作成してみます。

行動規範の内容に同意します

まずdocument自体にイベントを追加しておけばどこでも反応します。

javascript
1document.addEventListener('click',function(e){
2  console.log(e.target.nodeName);
3});
4

あとは、ターゲットを限定していけば要素ごとの処理が可能です。
またquerySelectorやquerySelectorAllで絞り込むのも有効です

投稿2017/07/10 13:27

yambejp

総合スコア114769

kamecha

2017/07/11 14:33

変更したつもりですが、反応しませんでした。ということは、関数が間違っているのでしょうか？

行動規範の内容に同意します

全体を見ていませんので、適切かどうかわかりませんが、ソースを載せます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Hello</title>
6	<script>
7		var context = null;
8		var context = null;
9		var x 		= 300;
10		var y 		= 350;
11		var dx 		= 5;
12		
13		function initial(){
14			canvas 	= document.querySelector('#canvas');
15			context = canvas.getContext('2d');
16			
17			context.fillStyle 	= "#EEFFEE";
18			context.fillRect(0, 0, 800, 400);
19			context.fillStyle 	= "black";
20			context.font = "128pt 'san serif'";
21			context.fillText('Hello', 150, 150);
22			
23			canvas.addEventListener('click', onClicked, true);
24		}
25		function onClicked(){
26			setInterval(draw, 50);
27		}
28		function draw(){
29			//背景を描画
30			context.fillStyle 	= "#EEFFEE";
31			context.fillRect(0, 0, 800, 400);
32			
33			//赤い四角を描画
34			context.fillStyle 	= "red";
35			context.fillRect(x, y, 50, 50);
36			
37			x += dx;
38			if(x < 0){dx *= -1;}
39			if(x > 750){dx *= -1;}
40		}
41	</script>
42</head>
43<body onload="initial();">
44	<canvas id="canvas" width="800" height="400" />
45	
46</body>
47</html>

上記のソースを拡張子「html」で保存してブラウザで実行して下さい。
タイトル画面が表示されて、クリックで赤色の四角が動くようになると思います。

上記でもご指摘頂いている通り、まず動くソースコードを作ってから、そのソースを拡張していくといいかと思います。
また、長いソースコードを記載しますと、読むほうも大変ですので、本当に重要な部分のみ、記載頂くといいと思います。
不必要と思われる変数定義や関数などは、出来るだけ排除した状態で、質問頂ければと思います。

内容を深く理解していませんので、的外れな回答をしているかもしれません。
ご参考程度に見て頂ければと思います。

投稿2017/07/09 18:10

編集2017/07/09 18:12

papi_tokei

総合スコア106

kamecha

2017/07/10 13:02

コード有り難うございました。現在Canvasの知識が無いため難しく感じましたが、自分の言うgame.rootSceneがCanvasといった感じでよろしいのでしょうか。また、コード削減しました。（読みやすくなっていると幸いです。）

papi_tokei

2017/07/10 17:16

コードの修正ありがとうございます。おっしゃる通り、canvasがgame.rootSceneと同じようなものだと思います。ただ、私もenchant.jsに詳しくないので、正確には分かりません。少し調べたのだけなのですが、以下に修正して見てはどうでしょうか。 before) game.rootScene.addEventListener('click', clickfunc); after) game.rootScene.addEventListener(Event.TOUCH_START, clickfunc);

kamecha

2017/07/11 14:27

有り難うございます。コードを変更してみたのですが、上手く作動しませんでした。５秒後には、画面変更するので、やはり入力処理が難しいですね..

行動規範の内容に同意します

全体は見ていませんが、下記部分は関数が渡せていません。

JavaScript
1	//タッチイベントの追加！
2//	game.rootScene.addEventListener('click', clickfunc());
3// 	↓
4	game.rootScene.addEventListener('click', clickfunc );
5
6	//メインループの開始
7//	setInterval(loop(), 100);
8// 	↓
9	setInterval(loop, 100);

投稿2017/07/08 02:10

kei344

総合スコア69398

kamecha

2017/07/09 08:01

変更しました。けれども、現状は変化しませんでした。論理的に間違っているのでしょうか？

kei344

2017/07/09 09:44

> 論理的に間違っているのでしょうか？「論理的に間違っている」は「ロジックが間違っている」「組み方が間違っている」ということでしょうか。「こう動くだろう」と思って動かないのであれば、ほとんどの場合コードの書き方が問題です。まず、どこまで動きますか？動くところまでコードを削ってください。そうやって問題を切り分けていくことで「動くコード」が作れるようになると思います。【enchant.js ゲーム制作 Tips – マウスクリックやタッチでプレイヤーを移動させてみよう!! | TM Life】 http://tmlife.net/programming/javascript/enchant-js-game-create-tips-mouse-touch.html 【Let’s start enchant.js | enchant.js - A simple JavaScript framework for creating games and apps.】 http://enchantjs.com/ja/tutorial/lets-start-enchant-js/

kamecha

2017/07/10 12:59

減らしてみました。やはり、STARTシーンからPLAYシーンへの移行が出来ません。何が問題なのでしょうか・・・すいません、自分の現在の知識では分かりませんでした。

行動規範の内容に同意します

あなたの回答