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

###前提・実現したいこと
こんにちは。プログラミング完全初心者の学生です。

この度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/ツール等のバージョンなど)
載せたコードの時点では、プレビューには画面が正常に表示されています。

どうかよろしくお願いいたします。

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

回答1件

ベストアンサー

inputはどちらかというとformの入力に使う要素なので、今回の場合はbutton要素を使う方法のほうが適していると思います。

<button> 
<img src="＊＊＊.png"><br>ボタン名 
</button>

こちらのコードは間違っていません。
動かないのは、このボタンを押した時の処理を何も書いていないからです。
JS側でこのボタンを押した時に次の画面を表示する処理を書いてください。

ちなみにページ遷移するというと

<a href="URL"><img src="画像パス"></a>

のほうを想像するんですが、Monacaのハイブリッドアプリという特性上、a要素を使ったページ遷移はめちゃめちゃモッサリします。
いわゆるページ遷移ではなく、JSを使って次の画面を描画する方がおすすめです。

投稿2016/08/22 08:09

NatsumiOki

総合スコア1298

gate-snow

2016/08/24 04:41

そうだったんですね。ありがうございます。JS側の処理も調べてみたのですがうまく出ませんでした......。よかったらそちらの方も教えていただいてもよろしいでしょうか？ ifを使うパターンですかね。

NatsumiOki

2016/08/24 04:57

JS側でやることを大雑把にわけるとこのふたつですね。 ①buttonのクリックイベントをつかまえる ②次の画面を描画する ①は、button要素にonClickをつけてもいいですし、 jQueryなど使って$('button').on('change',function(){ここに処理})とかやってもいいです。 ②は、もしネイティブの実装方法がわかるようでしたらactivityの設定をすればいいのですが、Monacaを使っているということはあまり詳しくないかと思うので（私もよくわかりません）、HTML/CSS/JSで解決することを考えますね。別のHTMLを呼び出したりするなら通常通りa要素でリンクをはってもいいですが、回答にもあるようにモッサリします。そこで、別画面に移動するのではなく、スタート画面を非表示にするという方法はどうでしょうか？ひとつのHTMLの中に、スタート画面のdivかなにかと、ゲーム本体のdivかなにかを両方書いておきます。 divにidをつけておき、ボタンをクリックしたら、スタート画面のidに対して、display:none;などを設定して非表示にします。スタート画面に戻るときは、display:block;を設定することになります。この方法であれば、たとえばゲーム中に最高スコアなどが変わったらスタート画面の情報を書き換えておけば、display:block;にしたときにちゃんと反映されていることになります。（ほかのページに遷移したり、アプリを落としたら元に戻ってしまいますが…）

gate-snow

2016/08/24 10:58

返信ありがとうございます。画像をボタンにして画面中央に配置することとページの遷移に成功しました。丁寧で分かりやすい説明に感謝しております。今回の問題の他に分からないことができまして、もし回答者様が分かりましたらお答えいただけると助かるのですが、私は画面の背景にjavascriptの「document.body.style.backgroundImage='url()'」を使用していますが、ＵＲＬではなく直接ファイル名（×××.pngなど）を入れたいのです。そのままurl()を消して書き換えてみたりしたのですがうまく動かず・・・また、質問にも書いたようにスマホと実機デバッグを行っているのですが、スマホの方のMonaca(アプリです)をしばらく開いておらずアップデートなども経て久しぶりに開いたところ、「プロジェクトのCordovaバージョンが一致しない」との理由で正常に動作しなくて困っています。ネットで調べて、Monacaのダッシュボード側（スマホじゃない方）でバージョンを最新のものにすると直ったということを見てそうしてみたのですが依然として出ています。

NatsumiOki

2016/08/24 14:42

URLのところに、画像の相対パスを入れればいいだけです。 (Webサイトではないので「http://~」みたいな書き方ではなく) 同じ階層の場合：「×××.png」同じ階層のimgディレクトリの場合：「img/×××.png」ひとつ上の階層にあるimgディレクトリの場合：「../img/×××.png」 Cordovaのバージョンの問題はときどきありますが、時間をおいて試したらうまくいったとか、たとえばプロジェクトをまるまる複製したらそっちは大丈夫だった、とか、そういう事例があるみたいです。

gate-snow

2016/08/26 01:29

あ、urlまで消さなくてよかったんですね！できました。そうなんですか、ダッシュボード上では平気なので、そのままアプリになってくれればいいなと思います(;^_^ 本当にありがとうございました。助かりました！

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