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

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

ただいまの
回答率

90.35%

  • JavaScript

    22079questions

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

  • jQuery

    8752questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jqueryでのcanvasエラー

解決済

回答 1

投稿

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

hiroshi3324

score 12

現在こちらのサイトを参考にしながらシューティングゲームを作成しているところでjavascriptで書かれていたので自分なりにjqueryに直しながら勉強しているものなんですが、初歩の段階でエラーが出て詰まっているので質問させてもらいました。
これがコードになります

<ballWall.js>

"use strict"
var canvas;

var imgPlayer;

var imgEnemy;

$(window).load(function()
{

    //キャンバス   
    $('<canvas>')
    .attr('id', 'screen')
    .css({
       'width': '1920',
       'height': '1080' 
    })
    .appendTo('body');

    //敵機
    $('<img>')
    .attr('src', './images/teki.png',
          'id', 'player')
    .css({
        'position': 'absolute',
        'left': '990px',
        'top': '540px',
        'width': '100px',
        'height': '100px',
        'cursor': 'move'
    })
    .appendTo('body');

    //自機
    $('<img>')
    .attr('src', './images/go.PNG',
          'id', 'enemy')
    .appendTo('body');


    canvas = $('#screen').get[0];

    var ctx = canvas.getContext('2d');

    imgPlayer = $('#player').get[0];
    imgEnemy = $('#enemy').get[0];
    ctx.drawImage(imgPlayer, 20, 50);
    ctx.drawImage(imgEnemy, 30, 60);
    ctx.drawImage(imgEnemy, 60, 20);
    ctx.drawImage(imgEnemy, 60, 30);
    ctx.drawImage(imgEnemy, 60, 40);
    ctx.drawImage(imgEnemy, 60, 50);
    ctx.drawImage(imgEnemy, 60, 90);
    ctx.drawImage(imgEnemy, 90, 20);
    ctx.drawImage(imgEnemy, 90, 30);
    ctx.drawImage(imgEnemy, 90, 40);
    ctx.drawImage(imgEnemy, 90, 50);
    ctx.drawImage(imgEnemy, 90, 90);
    ctx.drawImage(imgEnemy, 120, 20);
    ctx.drawImage(imgEnemy, 120, 30);
    ctx.drawImage(imgEnemy, 120, 40);
    ctx.drawImage(imgEnemy, 120, 50);
    ctx.drawImage(imgEnemy, 120, 90);

});


デベロッパーツールで見るとエラーが出ており内容は(Uncaught TypeError: Cannot read property 'getContext' of undefined)ということだったので調べて見ると未定義となっているので宣言の仕方が違うのかなって思うのですが、どうしたらいいかわからないのでご教授おねがいします。
あともっとこうした方がいいとかありましたらアドバイスもらえると参考になります。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

Canvasグラフィックを扱う以前にjQueryの使い方に多くの問題があります.

  • $(window).load(function() → $(function()
  • $('<img>').attr('src', 'a.jpg', 'id', 'player') 
    → $('<img>').attr({'src': 'a.jpg', 'id': 'player'}) 
  • $('#screen').get[0] → canvas = $('#screen')[0];

とすることで, とりあえずエラーはなくなるでしょう.

"use strict"
var canvas;

var imgPlayer;

var imgEnemy;

$(function()
{

    //キャンバス   
    $('<canvas>')
    .attr('id', 'screen')
    .css({
       'width': '1920',
       'height': '1080' 
    })
    .appendTo('body');

    //敵機
    $('<img>')
    .attr({'src': 'a.jpg', 
          'id': 'player'})
    .css({
        'position': 'absolute',
        'left': '990px',
        'top': '540px',
        'width': '100px',
        'height': '100px',
        'cursor': 'move'
    })
    .appendTo('body');

    //自機
    $('<img>')
    .attr({'src': 'b.jpg',
          'id': 'enemy'})
    .appendTo('body');


    canvas = $('#screen')[0];

    var ctx = canvas.getContext('2d');

    imgPlayer = $('#player')[0];
    imgEnemy = $('#enemy')[0];
    ctx.drawImage(imgPlayer, 20, 50);
    ctx.drawImage(imgEnemy, 30, 60);
    ctx.drawImage(imgEnemy, 60, 20);
    ctx.drawImage(imgEnemy, 60, 30);
    ctx.drawImage(imgEnemy, 60, 40);
    ctx.drawImage(imgEnemy, 60, 50);
    ctx.drawImage(imgEnemy, 60, 90);
    ctx.drawImage(imgEnemy, 90, 20);
    ctx.drawImage(imgEnemy, 90, 30);
    ctx.drawImage(imgEnemy, 90, 40);
    ctx.drawImage(imgEnemy, 90, 50);
    ctx.drawImage(imgEnemy, 90, 90);
    ctx.drawImage(imgEnemy, 120, 20);
    ctx.drawImage(imgEnemy, 120, 30);
    ctx.drawImage(imgEnemy, 120, 40);
    ctx.drawImage(imgEnemy, 120, 50);
    ctx.drawImage(imgEnemy, 120, 90);

});

あともっとこうした方がいいとかありましたらアドバイスもらえると参考になります。

JavaScriptの初学者とお見受けしました. であるならば, 学ぶ対象をCanvasAPIかjQueryかのどちらかに絞り, 絶対に同時並行に行わないことです. CanvasAPIはDOMに深く根ざしているため, DOMをラップするjQueryとは根本的に相性が悪く, 慣れないうちから混在させると今回のように問題点の洗い出しに酷く手間取ります.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/05 23:33

    アンサーありがとうございます。初学者の独学でぼちぼちやっているのでまだ理解できてなかったりしていてとても参考になりました。canvasAPIとjqueryのどちらかということなんですか参考にしたサイトがcanvasを使ってシューティングゲームを作っていたのでそれを真似して作っている段階です。jqueryを勉強したいと思っているのでcanvasを使わないバージョンのシューティングゲームを作成する場合どのようにすればよろしいのでしょうか?

    キャンセル

  • 2018/04/06 04:18

    jQueryを使ったシューティングゲーム自体あまり聞いたことがありませんので、不可能ではないでしょうが茨の道となるでしょう. 逆に論理ゲームやボードゲーム等の動きの少ないものであれば様々な実装例が見つかると思います. それでもjQuery学習の題材としては厳しいと思います.

    キャンセル

  • 2018/04/06 13:22

    なるほどですね!jquery自体がシューティングゲームに適していないということですね。動くゲームに適してないとするとjqueryというのはどういうところで使われているのでしょうか?jqueryの学習するにあたってはwebとかのサイトの方が適しているということですかね?かさねがさねの質問ですみません。

    キャンセル

  • 2018/04/06 13:28

    JavaScriptもしくはjQueryの入門書を購入しそれを読破して下さい.
    WEBサイトに掲載されている記事の質は様々で, 最初からWEBに頼るのは甚だ危険です.

    キャンセル

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

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

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

  • JavaScript

    22079questions

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

  • jQuery

    8752questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。