ゲームのパーツを画像に変えたい。

前提・実現したいこと

ブロック崩しのゲームを作っています。
ボールを弾くバー（paddle）を画像に変えたいのですが、どこに指定したらいいのかわかりません。

javascript
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    
11    <script>
12
13        const canvas = document.createElement('canvas');
14        const ctx = canvas.getContext('2d');
15
16        canvas.width = 400;
17        canvas.height = 500;
18
19        canvas.setAttribute('style', 'display:block; margin:auto; background-image: url(move.gif); background-size: 400px 500px');
20
21        document.body.appendChild(canvas);
22
23        var img = new Image();
24        img.src = "img01.png";
25
26        const ball = {
27            x: null,
28            y: null,
29            width: 5,
30            height: 5,
31            speed: 4,
32            dx: null,
33            dy: null,
34
35            update: function() {
36                ctx.fillRect(this.x,this.y,this.width,this.height);
37                ctx.fill();
38                ctx.fillStyle = "#9982DD";
39
40                if(this.x < 0 || this.x > canvas.width) this.dx *= -1;
41                if(this.y < 0 || this.y > canvas.height) this.dy *= -1;
42
43
44                this.x += this.dx;
45                this.y += this.dy;
46            }
47        }
48
49        var image = new Image();
50        image.src = 'img01.png';
51
52        const paddle = {
53            X: null,
54            y: null,
55            width: 100,
56            height: 15,
57            speed: 0,
58            
59            update: function(){
60                ctx.fillRect(this.x, this.y, this.width, this.height);
61                ctx.fill();
62                ctx.fillStyle = "#0095DD";
63                this.x += this.speed;
64            }
65        }
66
67
68        const block = {
69            width: null,
70            height: 20,
71            data: [],
72
73
74            update: function(){
75                this.data.forEach(brick => {
76                    ctx.strokeRect(brick.x, brick.y, brick.width, brick.height);
77                    ctx.stroke();
78                })
79            }
80        }
81        const level = [
82            [0, 0, 0, 0, 0, 0],
83            [0, 0, 0, 0, 0, 0],
84            [1, 1, 1, 1, 1, 1],
85            [1, 1, 1, 1, 1, 1],
86            [1, 1, 1, 1, 1, 1],
87            [1, 1, 1, 1, 1, 1],
88        ]
89
90        const init = () => {
91            paddle.x = canvas.width / 2 - paddle.width / 2;
92            paddle.y = canvas.height - paddle.height;
93
94            ball.x = canvas.width / 2;
95            ball.y = canvas.height / 2 + 50;
96            ball.dx = ball.speed;
97            ball.dy = ball.speed;
98
99            block.width = canvas.width / level[0].length;
100
101            for(let i=0; i<level.length; i++) {
102                for(let j=0; j<level[i].length; j++) {
103                    if(level[i][j]){
104                        block.data.push({
105                            x: block.width * j,
106                            y: block.height * i,
107                            width: block.width,
108                            height: block.height
109                        })
110                    }
111                }
112            }
113        }
114        const collide = (obj1, obj2) => {
115            return  obj1.x < obj2.x + obj2.width &&
116                    obj2.x < obj1.x + obj1.width &&
117                    obj1.y < obj2.y + obj2.height &&
118                    obj2.y < obj1.y + obj1.height;
119                    
120        }
121        const loop = () => {
122
123            ctx.clearRect(0,0,canvas.width,canvas.height);
124
125            paddle.update();
126            ball.update();
127            block.update();
128
129            if(collide(ball, paddle)){
130                ball.dy *= -1;
131                ball.y = paddle.y - ball.height;
132            }
133
134            block.data.forEach((brick, index) => {
135                if(collide(ball, brick)) {
136                    ball.dy *= -1;
137                    block.data.splice(index, 1);
138                }
139            })
140
141
142            window.requestAnimationFrame(loop);
143        }
144
145        init();
146        loop();
147
148        document.addEventListener('keydown', e =>{
149            if(e.key == 'ArrowLeft') paddle.speed = -6;
150            if(e.key == 'ArrowRight') paddle.speed = 6;
151        });
152        document.addEventListener('keyup', () => paddle.speed = 0);
153
154
155    </script>
156</body>
157</html>

javascript

試したこと

ここなどを image.onload = function() {
で囲ってみたりしました。

javascript
1const paddle = {
2            X: null,
3            y: null,
4            width: 100,
5            height: 15,
6            speed: 0,
7            
8            update: function(){
9                ctx.fillRect(this.x, this.y, this.width, this.height);
10                ctx.fill();
11                ctx.fillStyle = "#0095DD";
12                this.x += this.speed;
13            }
14        }

javascript
1paddle.x = canvas.width / 2 - paddle.width / 2;
2paddle.y = canvas.height - paddle.height;
3コード

mattari_panda

2021/02/17 14:25

canvas内で画像を使う場合はdrawImageをどこかで使う必要があるのですが、それは試してみましたでしょうか？もし試された場合はそのコードも提示してみてください。

minma

2021/02/18 03:56

このように試してみましたが、表示されませんでした。 ''' const paddle = { X: null, y: null, width: 100, height: 15, speed: 0, update: function(){ window.onload = ()=>{ const chara = new Image(); chara.src = "img/kaeru_paddle.png"; chara.onload = () => { ctx.drawImage(chara, 0, 0); this.x += this.speed; }} } }; '''

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

回答1件

ベストアンサー

Canvasでの画像の表示方法

Canvasで画像を表示するには、いくつか決まりがあります。

1）先に読み込んでおいて、画像の読み込み後に表示する
init();の前に画像の読み込みを終わらせておく必要があります。
提示しているコードのpaddle.update()の中ではありません。
ざっくり書くとこんな感じです。

JS
1const img1 = new Image();
2img1.src = 'https://assets.codepen.io/171357/tex1.jpg';
3//~中略~
4//img1の読み込みを待つ
5img1.addEventListener('load', ()=>{
6    init();
7    loop();    
8});

2）連続した処理の中では、読み込みの処理は必要ない
paddle.update()は毎フレーム（60fpsなら約１秒間に６０回）呼ばれる処理です。（なのでpaddleの位置が変わる）
画像の読み込みは１回で良いので（１）で読み込んでしまえば、あとはpaddle.update()の中では描画の更新（位置の変更）のみで良いです。

JS
1update: function(){
2        this.x += this.speed;
3        //読み込んでおいた画像を表示
4        ctx.drawImage(img1, 0, 0, img1.width, img1.height, this.x, this.y, this.width, this.height);
5        //ctx.drawImage( //各引数のざっくり解説
6            //画像 img1,
7            //画像の始点x 0, 
8            //画像の始点y 0,
9            //画像の幅 img1.width,
10            //画像の高さ img1.height,
11            //表示する画像の位置x this.x,
12            //表示する画像の位置y this.y,
13            //表示する画像の幅 this.width,
14            //表示する画像の高さ this.height,
15        //);
16}