質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • JavaScript

    15903questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • enchant.js

    21questions

    enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。

[JavaScript]埋め込んだ画像をクリックしてシーン遷移したい。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 105

yoyoyo0205

score 12

 前提・実現したいこと

enchant.jsを用いて、ゲーム作成をしています。
シーン遷移を行う際、テキストをクリックすることで次のページに遷移するようにしていたが、
テキストではなく、画像を埋め込み、その画像をクリックすることでシーン遷移するようにしたいと考えております。

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

JavaScript内において、キャラクター選択シーンで"キャラ1"に関して、"blue_bowl.jpg"を埋め込んで、クリックすることでシーン遷移を試みたが、
[object Object]と出る。

enchant();

window.onload = function()
{
    var game = new Game(320,320);
    game.fps = 16;
    game.preload('img/white.jpg',
         'img/gray.jpg',
         'img/blue_bowl.jpg',
         'img/orange_bowl.jpg',
         'img/yellow_bowl.jpg');

    game.onload = function()
    {
        var bg = new Sprite(320,320);
        bg.image = game.assets['img/gray.jpg'];
        game.rootScene.addChild(bg);

        // メッセージの生成
        game.rootScene.addChild(makeMessage("     全方位シューティング"));

        // 選択肢の生成
    // 始める
        var select1 = makeSelect("    始める",80,310 - 56);
        select1.addEventListener(Event.TOUCH_START,function(e)
        {
            game.pushScene(game.makeScene1());
        });
        game.rootScene.addChild(select1);

    // ランキングを確認する
    var select10 = makeSelect("ランキングを確認する",80,310 - 36 );
        select10.addEventListener(Event.TOUCH_START,function(e)
        {
            game.pushScene(game.makeScene10());
        });
        game.rootScene.addChild(select10);

    // ゲームを終了する
    var select3 = makeSelect(" ゲームを終了する",80,310 - 16);
        select3.addEventListener(Event.TOUCH_START,function(e)
        {
            game.pushScene(game.makeScene11());
        });
        game.rootScene.addChild(select3);
    };


    // キャラクター選択シーンの生成
    game.makeScene1 = function()
    {
        var scene = new Scene();
        var bg = new Sprite(320,320);
        bg.image = game.assets['img/gray.jpg'];
        scene.addChild(bg);
        scene.addChild(makeMessage("  キャラクターを選択してください"));


     // タイトルへ戻る
        var select4 = makeSelect("          タイトルへ戻る",50,320 - 16);
        select4.addEventListener(Event.TOUCH_START,function(e)
        {
            game.pushScene(game.rootScene);
        });
        scene.addChild(select4);

    // 選択肢キャラ1
        var select1 = makeSelect("キャラ1",20,320 - 32 * 2);
     select1.addEventListener(Event.TOUCH_START,function(e)
     {
         game.pushScene(game.makeScene2());
     });
     scene.addChild(select1);

    // 選択肢キャラ2
     var select2 = makeSelect("キャラ2",120,320 - 32 * 2);
        select2.addEventListener(Event.TOUCH_START,function(e)
        {
            game.pushScene(game.makeScene2());
        });
        scene.addChild(select2);

    // 選択肢キャラ3
     var select3 = makeSelect("キャラ3",220,320 - 32 * 2);
        select3.addEventListener(Event.TOUCH_START,function(e)
        {
           game.pushScene(game.makeScene2());
        });
        scene.addChild(select3);

        return scene;
    };


    // ステージ選択シーン
    game.makeScene2 = function()
    {
        var scene = new Scene();
        var bg = new Sprite(320,320);
        bg.image = game.assets['img/gray.jpg'];
        scene.addChild(bg);
       scene.addChild(makeMessage("       ステージ選択"));

    // 選択肢ステージ1
     var select1 = makeSelect("ステージ1",20,320 - 32 * 2);
        select1.addEventListener(Event.TOUCH_START,function(e)
        {
           game.pushScene(game.makeScene3());
        });
        scene.addChild(select1);

    // 選択肢キャラ2
     var select2 = makeSelect("ステージ2",120,320 - 32 * 2);
        select2.addEventListener(Event.TOUCH_START,function(e)
        {
            game.pushScene(game.makeScene3());
        });
        scene.addChild(select2);

    // 選択肢キャラ3
     var select3 = makeSelect("ステージ3",220,320 - 32 * 2);
        select3.addEventListener(Event.TOUCH_START,function(e)
        {
           game.pushScene(game.makeScene3());
        });
        scene.addChild(select3);

    // キャラクターへ戻る
        var select0 = makeSelect("  キャラクター選択へ戻る",50,320 - 32);
        select0.addEventListener(Event.TOUCH_START,function(e)
        {
             game.pushScene(game.makeScene1());
        });
        scene.addChild(select0);

        return scene;
     };
    game.start();
};





// メッセージの生成
function makeMessage(text)
{
    var label = new Label(text);
    label.font = "16px monospace";
    label.color = "rgb(255,255,255)";
    label.backgroundColor = "rgba(0,0,0,0.255)";
    label.y = 0; // 元は、320 - 32 * 4
    label.width = 320;
    label.height = 320; // 元は、32 * 4
    return label;
}

// 選択肢の生成
function makeSelect(text,x,y)
{
    var label = new Label(text)
    label.font = "16px monospace";
    label.color = "rgb(255,200,0)";
    label.x = x;
    label.y = y;
    label.width = 320;
    return label;
}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>全方位シューティング</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="./js/lib/enchant.js"></script>
    <script src="./js/main.js"></script>
    <style>
      /* ウィンドウとゲーム画面のすき間をなくす */
      body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body style="background: #000;">

  <!-- ここにゲームが表示されます。 -->
  </body>
</html>

 補足

何度調べてもJavaScriptにおいて、画像を埋め込むメソッドがわかりません。
ご教授していただけると大変助かります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    enchant.jsにてスプライトを合成するには

    あるキャラクターが32x32のサイズだったとして、それを Sprite で使用するとします。 そのキャラクターを2つ横に並べて64x32をひとつのスプライトにすることは可能でしょ

  • 解決済

    jQueryをもっとスマートにかけないでしょうか。

    特定のラジオボタンにチェックをしたら他の項目を表示/非表示にするjQueryを書きました。 一応動くのですが、見ての通り頭悪い書き方になってしまいました。 さらに出来れば、

  • 解決済

    enchat.js 2段ジャンプ

    Javascript初心者でenchant.jsを使って簡単なゲームを作っています。 くまが同じ位置で走っていて、障害物が右から流れてきたらクリックで垂直ジャンプでかわします。

  • 解決済

    javascriptでキーイベントを発生させる

    javascriptでボタン押下時にキーイベントを発生させたいのですが、可能でしようか また、可能であればキーの同時押しの発生はできますでしょうか?

  • 解決済

    変数の使用方法について

    現状 自作ゲームを制作しようとしている、プログラミング初心者です。 現在JavaScriptを用いてゲームを作成しているのですが、意図しない動作をしたので 質問したいと思います。

  • 解決済

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

    現状 現在、ゲームを自作しようとしているのですが、入力処理で困ってしまいました。 ネットで調べたところ、キャラクターにタッチして入力する方法は理解したのですが、 自分が作成している

  • 解決済

    jQuery 一つの値を選択 チェックすると 同じ値を入れる

    やりたいこと 複数行のセレクトボックスがあるとします。 最初のセレクトボックスを選択後、チェックボックスにチェックを入れると、最初に選択した値と同じようにセレクトボックスを変化させ

  • 解決済

    Jqueryでフォームの値をリアルタイムで取得

    やりたい事は、数値を入力するフォームに数値を入れるとリアルタイムでその値を取得し入力した回数、繰り返し処理を行いたいです。 調べると、http://www.kaasan.info/

同じタグがついた質問を見る

  • JavaScript

    15903questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • enchant.js

    21questions

    enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。