javascript - 使用面向对象的 JavaScript HTML5 Canvas 旋转图像

Question

我正在尝试制作一个简单的 HTML5 游戏，但遇到了一些问题。我试图让正方形绕其中心旋转并允许子弹朝那个方向发射。

我已经让方 block 移动(上、下、左、右)，让子弹发射(沿 Y 轴向上)，但在旋转方 block (A 和 S 键)时遇到问题。

在之前的尝试中，我让正方形围绕其中心移动，但这也会移动背景和屏幕上绘制的其他对象，这是在我使用保存和恢复方法之前。

我尝试在很多地方实现保存和恢复方法，但效果不佳。一旦方 block 能够射击，我还需要让子弹也朝那个方向射击(空间就是火)。

下面是我到目前为止的代码。感谢您提供的任何帮助。

            function Sprite(ctx, x, y, width, height){
            this._ctx = ctx;
            this.width = width;
            this.height = height;
            this.x = x;
            this.y = y;
        }

        Sprite.prototype = {

            createSprite: function(color){
                this.color = color;
                this._ctx.fillStyle = this.color;
                this._ctx.beginPath();
                this._ctx.rect(this.x, this.y, this.width, this.height);    
                this._ctx.closePath();
                this._ctx.fill();
            }
        }

        function Player(ctx, x, y, width, height){
            this._ctx = ctx;
            this.width = width;
            this.height = height;
            this.srcx = 100;
            this.srcy = 0;
            this.srcwidth = 99;
            this.srcheight = 77;
            this.x = x;
            this.y = y;
            this.movement = 5;
            this.health = 4;
            this.score = 0;
            this.shield = false;
            this.movedeg = 0;

            Sprite.call(this, this._ctx, this.x, this.y, this.width, this.height);
        }

        Player.prototype = Object.create(Sprite.prototype);

        Player.prototype.constructor = Player;

        Player.prototype.create = function(){
            Sprite.prototype.create.call(this);
        }

        Player.prototype.move = function(){
            if((37 in keys && keys[37]) && (this.x -= this.movement > 0)){
                this.x -= this.movement;
                this.srcx = 0;
                if (this.x <= 0){
                    this.x = 0;

                }
            }

            if((39 in keys && keys[39]) && (this.x += this.movement < (750 - this.width))){
                this.x += this.movement;
                this.srcx = 200;
                if (this.x >= (750 - this.width)){
                    this.x = (750 - this.width);
                }
            }

            if((38 in keys && keys[38])){
                this.y -= this.movement;
                if (this.y <= (0)){
                    this.y = (0);
                }
            }
            if((40 in keys && keys[40])){
                this.y += this.movement;
                if (this.y >= (500 - this.height)){
                    this.y = (500 - this.height);
                }
            }

            if((65 in keys && keys[65])){
                this.movedeg = '-0.01';
                //this.rotate(move);
            }
            if((83 in keys && keys[83])){
                //this.rotate(move);
                this.movedeg = '0.01';
            }

        };

        Player.prototype.rotate = function(){
            this._ctx.translate(this.height/2, this.width/2);
            this._ctx.rotate(Math.PI / 180 * this.movedeg);
        }

        Player.prototype.rotateBack = function(){
            this._ctx.rotate(Math.PI / 180 * -this.movedeg);
            this._ctx.translate(-this.height/2, -this.width/2);
        }

        Player.prototype.shoot = function(evt){
            if(game.outbullets < game.bullettotal){
                bullets.push(new Bullet(this._ctx, this.x + ((this.width / 2) - 5), this.y, 15, 54, '#0f93e7'));
                game.outbullets++;
            }
        };

        Player.prototype.render = function() {
            this.move();
            this.createSprite('#000');
        };


        function Bullet(ctx, x, y, width, height){
            this._ctx = ctx;
            this.srcwidth = 15;
            this.srcheight = 54;
            this.srcx = 0;
            this.srcy = 0;
            this.width = width;
            this.height = height;
            this.x = x;
            this.y = y;
            this.toremove = false;
            this.movement = 10;
            Sprite.call(this, ctx, x, y, width, height);
        }

        Bullet.prototype = Object.create(Sprite.prototype);

        Bullet.prototype.constructor = Bullet;

        Bullet.prototype.create = function(){
            Sprite.prototype.create.call(this);
        }

        Bullet.prototype.move = function(){
            if (this.y > -30) {
                this.y -= this.movement;
            } else {
                this.toremove = true;
            }

        };

        Bullet.prototype.remove = function(){

            if(this.toremove == true){
                var _this = bullets.indexOf(this);
                bullets.splice(_this, 1);
                game.outbullets--;
            }

        };

        Bullet.prototype.render = function() {
            this.move();
            this.createSprite('#f00');
            this.remove();
        };

        function Background(ctx, x, y, width, height){
            this._ctx = ctx;
            this.srcwidth = 750;
            this.srcheight = 500;
            this.srcx = 0;
            this.srcy = 500;
            this.width = width;
            this.height = height;
            this.x = x;
            this.y = y;
            this.movement = 0.5;
            Sprite.call(this, ctx, this.x, this.y, this.width, this.height);
        }

        Background.prototype = Object.create(Sprite.prototype);

        Background.prototype.constructor = Background;

        Background.prototype.create = function(){
            Sprite.prototype.create.call(this);
        }

        Background.prototype.parallax = function(){
            if ((this.srcy - this.movement) > 0){ 
                this.srcy -= this.movement; 
            } else {
                this.srcy = 500;
            }
        }

        Background.prototype.render = function(){
            this.createSprite('#0f0');
        }

        function Game(options){

            this.id = options.id;
            this.difficulty = 5;

            this._canvas = document.getElementById(this.id);
            this._ctx = this._canvas.getContext('2d');
            this._width = options.width || 750;
            this._height = options.height || 500;

            this.timeout;

            gametime = 0;

            keys = [];
            bullets = [];

            this.bullettotal = 2;
            this.outbullets = 0;

            background = new Background(this._ctx, 0, 0, 750, 500);
            player = new Player(this._ctx, 250, 250, 99, 77);

            gametimer = setInterval(this.timer.bind(this), 1000);

            window.addEventListener('keydown', this.onKeyDown.bind(this));
            window.addEventListener('keyup', this.onKeyUp.bind(this));

            this.init();

        }

        Game.prototype = {

            clear: function(){
                this._ctx.clearRect(0,0, this._width, this._height);
            },

            timer: function(){
                gametime++;
            },

            loop: function(){

                this.clear();   

                background.render();

                if(bullets.length > (this.outbullets - 1) && (this.outbullets > 0)){
                    for(var i = 0; i < bullets.length; i++){
                        bullets[i].render();
                    }
                }

                //this._ctx.save();
                player.rotate();
                player.render();
                player.rotateBack();
                //this._ctx.restore();

            },

            onKeyDown: function(evt){
                if(evt.keyCode == 32){
                    player.shoot(evt.keyCode);
                } else {
                    keys[evt.keyCode] = true;
                }
                console.log(evt.keyCode);
            },

            onKeyUp: function(evt){
                keys[evt.keyCode] = false;
            },

            init: function(){
                // this._canvas.removeEventListener('click', this.x);
                var _this = this;
                (function animloop(){
                    _this.animation = window.requestAnimationFrame(animloop);
                    _this.loop();
                })()
            }

        }


        var gameOptions = {
            id: 'canvas',
            width: 750,
            height: 500
        }

        game = new Game(gameOptions);

Answer 1

要以围绕其中心的一定 Angular 绘制 Sprite ，请使用此函数。

// ctx is the 2Dcontext to draw to
// img is the image to draw
// x,y is where the image center will be placed
// rotate is the rotation in radians
function drawImageRotated(ctx, img, x, y, rotate){
    ctx.setTransform(1,0,0,1,x,y); // set translation
    ctx.rotate(rotate); // rotate image
    ctx.drawImage(img, -img.width / 2, -img.height / 2); // draw image offset by half its height and width
}

不要使用保存和恢复，如果您没有任何其他转换，请使用

ctx.setTransform(1,0,0,1,0,0); // to reset to default transformation

要获取某个 Angular x,y(矢量)，请使用 cos 和 sin。下面是一个将 delta x,y 设置为某个 Angular 对象的示例，以及如何移动它。

// a obj (bullet??)
var obj = {};
obj.speed = 10; // how fast to move
obj.x = 100;  // current location
obj.y = 100;
var angle = ?; // the angle to move along in radians
obj.dx = Math.cos(angle);  // get delta x
obj.dy = Math.sin(angle);  // and y

对于每一帧移动obj

obj.x += obj.dx * obj.speed;
obj.y += obj.dy * obj.speed;