jqueryでのcanvasエラー

Question

現在こちらのサイトを参考にしながらシューティングゲームを作成しているところで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）ということだったので調べて見ると未定義となっているので宣言の仕方が違うのかなって思うのですが、どうしたらいいかわからないのでご教授おねがいします。
あともっとこうした方がいいとかありましたらアドバイスもらえると参考になります。

Answer 1

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とは根本的に相性が悪く, 慣れないうちから混在させると今回のように問題点の洗い出しに酷く手間取ります.

Comments

[hiroshi3324]

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

[defghi1977]

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

[hiroshi3324]

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

[defghi1977]

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