如何移动整个队列并进行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

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

Answer 2

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