如何移动整个队列并进行canvas描绘。

Question

想要完成下面的效果图，目前进度，move：方法达不到想要的自动以速度位移2的速度移动,

var enemy = new Enemy(30,50,50,2);
enemy.draw();
enemy.moove();
function Enemy(x,y,size,speed){
          this.x = x,
          this.y = y,
          this.size = size,
          this.speed = speed //反弹系数
        }

        /**
         * 原型方法
         * @type {draw描绘出10个怪兽，clear清除画布，move移动怪兽队列}
         */
        Enemy.prototype = {
            draw:function(){
                 for(let i=0;i<10;i++){
                   enemys[i] = new Image();
                   enemys[i].src ='./img/enemy.png';
                   enemys[i].onload = function(){
                      enemy.x += 50;
                      context.drawImage(enemys[i], enemy.x, enemy.y, enemy.size, enemy.size);
                    };
                 }
              },
              clears:function(){
                context.clearRect(30, 0, canvas.width, canvas.height);
              },
              // move:function(){
              //     var length = enemys.length; 
              //     if(enemy.x+enemy.speed > canvas.width 
              //     || enemy.x + enemy.speed < 0 
              //     || enemy.y + enemy.speed > canvas.height
              //     || enemy.y + enemy.speed < 0
              //     ){speed  *=-1}
              //     enemy.x +=enemy.speed;
              //     enemy.clears();

              //     enemy.draw();
              //     // context.drawImage(planeImage, plane.x, plane.y, plane.width, plane.height);          
              //     requestAnimationFrame(enemy.move);
              // },
             move:function(){
              enemy.x +=enemy.speed;
              enemy.clears();
              enemys.splice(0,enemys.length);
              enemy.draw();
              // requestAnimationFrame(enemy.move());
             }
        }

Answer 1

我觉得你的结构很不好，导致了你后续代码已经写不下去了
尝试着换一种思路，一个游戏有一个启动入口，我们叫Game
在Game里会用定时函数，也就是requestAnimation不断执行要刷的函数
在要刷的函数里最重要的执行两个方法
一个update 用来更新你你的所有场景内对象的位置信息 update里会调用所有对象的update来更新位置
一个render 用来绘制你的所有场景内对象 render会调用所有对象的draw方法去绘制图像
这时你会发现你需要一个全局数据来管理这些信息
同时把Enemy抽象出来，想多要一个Enemy就new一个
https://segmentfault.com/a/11... 可以看一下这篇对微信小游戏打飞机demo的分析 希望可以帮到你

Answer 2

在move方法里设置定时器.定时器执行draw方法.
另外在draw方法里一直创建对象不好.
可以先创建个init方法.创建完对象,存在数组中,在draw方法在修改对象属性就可以了

Answer 3

推荐使用https://www.github.com/PengJi...
这是一个canvas 2d 渲染库，体量小，功能强大，支持画图，图形绑定时间，拖拽，放大缩小等。

Answer 4

requestanimationframe 里调用位置平移 平移量为 (2 Math.sin(offsetAngle)/60, 2 Math.cos(offsetAngle)/60)