常連

###前提・実現したいこと
こんにちは。プログラミング完全初心者の学生です。

この度Monaca＆enchant.jsを用いてスマホゲームのプログラミングに挑戦することにしました。
その両者を利用したゲームの作り方が記されている本を購入し、それに従ってコードを書く前の下準備（実機デバッグなど）を済ませました。

そしてまず最初のページをつくり、そのページ内にスタートボタンを設置して、そこからゲームの内容画面に移動するようにしようと思いました。
しかし、本にはゲームの内容のことはある程度書かれているのですが、その手前のスタートページのことは何も書かれておらず、ネット情報に頼りながら自力でやっています。

そこでどうしても解決できていないことがあります。それがタイトルにもありますが、
自作の画像を別ページにリンクするボタンにする、そしてそのボタンを画面中央に配置する、ことです。


###該当のソースコード
index.HTMLと、スタートページをつくるために利用したmain.jsというファイル(javascript)を載せます。(簡略化しました。)
HTML組み込みっていうんでしたっけ...indexの中にmain.jsを呼び出すコードを入れています。

ここに何を加えれば画像ボタンが実現できるのか、知りたいです。
コード内の「＊＊＊.png」の画像をボタンにしたいと考えています。
```
↓index.HTML↓

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">


    <script>
        ons.ready(function() {
            console.log("Onsen UI is ready!");
        });
    </script>
    <script src="lib/enchant.min.js"></script>
    <script src="main.js"></script>
    
<body>
 
</body>
</html>


↓main.js↓

// This is a JavaScript file
enchant();

window.onload = function(){
    var game = new Game(window.innerWidth, window.innerHeight);
    game.preload('＊＊＊.png');
    
    game.onload = function(){
       
       var char1=new Sprite(305,67);
       char1.image=game.assets['＊＊＊.png'];
       char1.x=0;
       char1.y=40;
       
     document.body.style.backgroundImage = 'url(＊＊＊)';
    game.rootScene.addChild(char1);
    
    };
    
    game.start();
    };
```

###試したこと
<form>
 <button>
 <img src="＊＊＊.png"><br>ボタン名
 </button>
 </form>
をindex.HTMLのbody部分に入れる。

<input type=image onclick="location.reload();" src="＊＊＊.jpg">
を同じくindex.HTMLのbody部分に入れる。

確か前者は何も変化がなく、後者は左上にボタンが出てきましたが灰色になっていて画像が出てきませんでした。後者でreloadとなっているのはネットから拾ったコードがそうなっていたからです。試しにそれで入れてみました。

<input type="button" value="＊＊＊">
ちなみにこれがよく使われるパターンらしいですが、画像ではないですし、
左上ではなく中央にボタンを配置するやり方も見つからないんですよね...


###補足情報(言語/FW/ツール等のバージョンなど)
載せたコードの時点では、プレビューには画面が正常に表示されています。

どうかよろしくお願いいたします。

画像を、別ページにリンクするボタンにしたいです。

### 実現したいこと

enchant.jsで斜め移動しながら攻撃できるようにしたい

### 前提

enchant.jsでシューティングゲームを作っています。
キーボードの矢印キーで自機を移動させて、スペースキーで攻撃するという一般的な操作です。

### 発生している問題・エラーメッセージ

スペースキー単独および、上or下or左or右+スペースキーで真っすぐ移動しながらの攻撃は出来るのですが、
例えば、右＋下＋スペースキーで右下に移動しながら攻撃しようとすると、いずれかのキー入力が無視され、斜め移動しながら同時に攻撃する事ができません。
ですからすぐにやられてしまいます。

### 該当のソースコード

原因を特定させやすいように必要最小限のコードを書き下ろしました。
game.addEventListener(Event.ENTER_FRAME, function() {
　if(this.input.up) icon.y--
　else if(this.input.down) icon.y++
　if(this.input.left) icon.x--
　else if(this.input.right) icon.x++
　if(game.input.a) icon.frame = game.frame % 10
})

### 試したこと

enchant.jsのバグを疑って、少し読んでみたのですが、難しくていったん中断しました。

### 補足情報（FW/ツールのバージョンなど）

enchant.js v0.8.3を使っています。


enchant.jsで斜め移動しながら攻撃できない

音を出すため、書籍「はじめて学ぶ　enchant.jsゲーム開発」のプログラムをまねて以下のプログラムを書いたところ、音は出ず、エラーが発生しました。

```JavaScript
enchant();

window.onload = function(){
    core = new Core(320,320);
    core.fps = 16;
    core.preload('one_0.mp3','Ready.wav');

    core.bgm = Sound.load('one_0.mp3');
    core.se = Sound.load('Ready.wav');

    core.onload = function(){

        core.bgm.volume = 0.5;
        core.bgm.play();
        core.se.play();
        
   //省略//

        var infoLabel = new Label('enchant.js サンプル');
        infoLabel.x = 16;
        infoLabel.y = 0;
        infoLabel.color = '#0000FF';
        infoLabel.font = '14px sens-serif';

        core.rootScene.addChild(infoLabel);
    }
    core.start();
}
```
出てきたエラーはこちらです。

---
enchant.js:5605 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

---
対処法を教えてください。

enchant.jsで、音が出てこない

Chromeのセキュリティ上の問題でローカルだとサウンドがエラーになって動かないと思ったので、似たような症状で解決した事例を探しました。
こちらで問題なくローカル上だと音が出るようになったのですが、Xampp環境では、以前と変わらずエラーを吐いたままの状態です。
解決策を教えて下さい。よろしくおねがいします。

参考にしたurl
https://teratail.com/questions/252196


```javascript
// enchant.js本体やクラスをエクスポートする
enchant();

// ページが読み込まれたときに実行される関数
window.onload = function() {

  // コアオブジェクトを作成する
  core = new Core(320, 320);
  
  // 1秒あたりの画面の描画回数を設定する(省略時は「30」)
  core.fps = 16;
  
  // ゲームで使用する画像ファイル、サウンドファイルを読み込む
  // mp3形式のサウンドファイルはプリロードする(FireFox,Safari対応)
  core.preload('betty.png', 'flowers.png', 'one_0.mp3');

  // BGM用のサウンドファイルを読み込む
  core.bgm = Sound.load('one_0.mp3');
  // SE用のサウンドファイルを読み込む
  core.se = Sound.load('Ready.wav');
  
 
  // ファイルのプリロードが完了したときに実行される関数
  core.onload = function() {
 
    // BGMのボリュームを設定する(0~1)
    core.bgm.volume = 0.5;
    // BGMを再生する
    core.bgm.play();
    // SEを再生する
    core.se.play();

    // サーフィスを作成する
    var image = new Surface(320, 320);
    // 「flowers.png」の(0, 96)の位置から幅「126」ピクセル、高さ「64」ピクセルの領域を
    // サーフィスの(64, 64)の位置に幅「126」ピクセル、高さ「64」ピクセルで描画する
    image.draw(core.assets['flowers.png'], 0, 96, 126, 64, 64, 64, 126, 64);
    
    // サーフィスを表示するためのスプライトを作成する
    var bg = new Sprite(320, 320);
    // スプライトにサーフィスを設定する
    bg.image = image;
    
    core.rootScene.addChild(bg);
   
    // スプライトを作成する
    var player = new Sprite(48, 48);
    // スプライトで表示する画像を設定する
    player.image = core.assets['betty.png'];
    // 表示するフレームの番号を設定する
    player.frame = 3;
    // 表示位置のx座標を設定する
    player.x = 120;
    // 表示位置のy座標を設定する
    player.y = 50;
    
    // フレーム数をカウントするプロパティを追加する
    player.tick = 0;

    // rootSceneにスプライトを追加する
    core.rootScene.addChild(player);

    // 「enterframe」イベントが発生したときに実行するリスナを登録する
    player.addEventListener('enterframe', function(e) {

      // 左ボタンが押されたら、スプライトをx方向に「-4」ピクセル移動する
      if (core.input.left) {
        this.x -= 4;
        // スプライトのフレーム番号を切り替えてアニメーション表示する
        this.frame = this.tick % 4 * 4 + 1;
        // フレーム数をインクリメントする
        this.tick ++;
      }

      // 右ボタンが押されたら、スプライトをx方向に「4」ピクセル移動する
      if (core.input.right) {
        this.x += 4;
        this.frame = this.tick % 4 * 4 + 3;
        this.tick ++;
      }

      // 上ボタンが押されたら、スプライトをy方向に「-4」ピクセル移動する
      if (core.input.up) {
        this.y -= 4;
        this.frame = this.tick % 4 * 4 + 2;
        this.tick ++;
      }

      // 下ボタンが押されたら、スプライトをy方向に「4」ピクセル移動する 
      if (core.input.down) {
        this.y += 4;
        this.frame = this.tick % 4 * 4;
        this.tick ++;
      }
      
    });

    // 「touchmove」イベントが発生したときに実行するリスナを登録する
    player.addEventListener('touchmove', function(e) {
      // スプライトをタッチして移動した場所、またはドラッグした場所に移動する
      this.x = e.x - this.width / 2;
      this.y = e.y - this.height / 2;
    });

    // ラベルを作成する
    var infoLabel = new Label('enchant.js サンプル');
    // 表示位置のx座標を設定する
    infoLabel.x = 16;
    // 表示位置のy座標を設定する
    infoLabel.y = 0;
    // 文字色を設定する
    infoLabel.color = '#0000FF';
    // フォントサイズとフォントの種類を指定する
    infoLabel.font ='14px sens-serif';
    
    // rootSceneにラベルを追加する
    core.rootScene.addChild(infoLabel);


  };
  // ゲームスタート
  core.start();
}

```



エラーコードになります
enchant.js:5481 Uncaught TypeError: Cannot read property 'gain' of undefined
    at Constructor.set [as volume] (enchant.js:5886)
    at Constructor.core.onload (game.js:27)
    at Constructor.dispatchEvent (enchant.js:916)
    at Constructor.<anonymous> (enchant.js:5085)
    at Constructor.dispatchEvent (enchant.js:922)
    at Constructor._succ (enchant.js:1465)
    at Constructor.call (enchant.js:5458)
    at Constructor._succ (enchant.js:5555)
    at Constructor.call (enchant.js:5458)
    at Constructor._callback (enchant.js:1384)

enchant.jsのサウンドを使用する際にXampp環境だとエラーが出てしまう

[http://enchantjs.com/download](http://enchantjs.com/download)
ここにアクセスしても、なぜかgithubにとんで404エラーがでて、enchant.jsがダウンロードできないんですが、
もう、enchant.jsはサービス終了したんですか？
ブラウザでゲームを作るにはシンプルjavascriptでしか作れないのでしょうか。
回答お願いいたします。

enchant.jsが404エラーでダウンロードできない

###現状
現在、ゲームを自作しようとしているのですが、入力処理で困ってしまいました。
ネットで調べたところ、キャラクターにタッチして入力する方法は理解したのですが、
自分が作成しているのは、早押しゲームですので表示された画面ならどこをタッチしても反応するような入力処理をしたいのです。

###コード

作成途中のコードの為（自分が初心者の為）、無駄に長く読みにくいコードですが、よろしくお願いします。

```lang-JavaScript
enchant();

var start;      //スタートシーン
var STFunc;

var Pscene;     //待期シーン
var PFunc;


//ゲームの状態
var START = 0;
var PLAY = 1;

var gameState = 0;

var time = 0;       //全体の時間

//タッチ用変数
var touchFlag = false;

window.onload = function(){


    var game = new Core(320, 320);
    game.preload('img/chara1.png','img/sirokuma.png','img/start.png');
    game.fps = 15;

    game.onload = function(){

        //startシーンの作成
        start = new Scene();
        var startflag = new Sprite(236, 48);
        startflag.image = game.assets['img/start.png'];
        startflag.x = 10;
        startflag.y = 20;
        startflag.frame = 0;
        start.addChild(startflag);

        STFunc = function(){
            game.pushScene(start);
        }

        //Psceneの作成
        Pscene = new Scene();

        var bear = new Sprite(32, 32);
        bear.image = game.assets['img/chara1.png'];
        bear.x = 30;
        bear.y = 80;
        bear.frame = 0;
        Pscene.addChild(bear);

        var enemy = new Sprite(32, 32);
        enemy.image = game.assets['img/sirokuma.png'];
        enemy.x = 200;
        enemy.y = 80;
        enemy.scaleX = -1;
        enemy.frame = 2;
        Pscene.addChild(enemy);

        PFunc = function(){
            game.pushScene(Pscene);
        }



        //タッチイベントの追加！
        document.addEventListener(Event.TOUCH_START, clickfunc);


         //メインループの開始


             switch (gameState){

                 case START:
                    startFunc();
                    break;

                 case PLAY:
                    playFunc();
                    break;
                 
                 default:
                    break;

             }



         function startFunc(){
             STFunc();

             if (touchFlag == true) {
                 gameState = PLAY;
                 touchFlag = false;
                 time = 0;
                 game.popScene(start);
             }
         }

         function playFunc(){
             PFunc();
         }


         function clickfunc(){
             touchFlag = true;
         }

    }
    game.debug();
};

```

###疑問点
現在のコードで実行すると、START画面が表示されたままで画面をクリックしても全く変わりません、エラーを見てみても何も表示されていません。
そのため、
・現在の入力処理であるgame.rootScene.addEventListener()が正しく使用できているか

・画面全体のタッチを認識する入力処理の方法

・その他文法的に間違えているところ

を、ご指摘いただきたいです。

#追記


現在、学生の身ですので、返信に時間がかかることがあります。
現在の環境
下のHTMLファイルをGoogle Chromeで開いています。

```lang-html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="js/lib/enchant.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
</body>
</html>

```

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

enchant.jsのLabelクラスで縁取り文字を作りたいのですが、方法が分かりません。
また、中央寄せ、右寄せにする事際にテキスト自身の幅を取得して右寄せなどを実装したいのですが this.widthとしてもcanvasのスクリーンのサイズが取得されてしまうためテキスト自身の幅を取得する方法が知りたいです。
中央寄せ
canvasの幅 / 2 - テキスト自身の幅 / 2

解答よろしくおねがいします。

##試したこと
プラグインのui.enchant.jsのScoreLabelでは縁取り文字で文字が表示されるため、ソースコードを見てみましたがそれらしい記述はなくわからなかったです。

enchant.jsのLabelクラスで縁取り文字を作りたい

Javascript初心者でenchant.jsを使って簡単なゲームを作っています。
くまが同じ位置で走っていて、障害物が右から流れてきたらクリックで垂直ジャンプでかわします。
操作はそのクリックのみ。
やりたいのは、普通のジャンプと着地するまでにもう1度クリックすると、2段ジャンプになるというものです。
2段目のジャンプは1段目のどの高さでクリックしても一定の高さを飛べるようにしたいです。
例えば2段目のジャンプ力は4。
2の高さからクリックしたら6の高さまで飛べる。
4からだと8。
そして同じ高さに着地させたいです。

テストとして現在のサイズは320*320です。
現在下記コードでジャンプ自体はできますが、ジャンプ中に複数回クリックすると回数が蓄積され、
普通のジャンプをクリック回数分繰り返してしまいます。

着地点に関して、下に45px移動...としているので2段飛ばすとおかしくなるのは分かりますが、
全体の座標としての指定の仕方が分かりません。


よろしくお願いします。

```
var kuma = new Sprite(32, 32); // くまを作ります
        kuma.image = game.assets['./img/chara1.png']; // くまの画像を設定します
        kuma.x = 80; // 画面やや左側に配置
        kuma.y = GROUND_LINE - kuma.height; // くまの下端を地平線の高さと合わせる(218)
```

```
game.rootScene.addEventListener(Event.TOUCH_START, function (e) {
            // くまをジャンプさせる
            
            
    kuma.tl.moveBy(0, -45, 8, enchant.Easing.CUBIC_EASEOUT)// 12フレームかけて現在の位置から上に45px移動
           .moveBy(0, 45, 8, enchant.Easing.CUBIC_EASEIN); // 12フレームかけて現在の位置から下に45px移動
});
```