@RasulCrose

Как сделать границы для канваса, при выходе обьекта его опять возврашала на 2 пикселя назад?

var tank;
function init() {
    audio = new Audio("audio/audio.mp3");
    audio.play();
    myGame = new Game();
    tank2 = new Tank (150, 100, 20, 20, "red");
    tank = new Tank(100, 100, 20, 20, "red");
    myGame.start();
}

function Game() {
    self = this;
    this.canvas = document.getElementById('MyCanvas');
    this.context = this.canvas.getContext('2d');
    canw = this.canvas.width;
    canh = this.canvas.height;
    key = false;
    self.start = function () {
        console.log("Function in start tank");
        alert("Started function is on");
        setInterval(self.update, 10);
        window.addEventListener('keydown', function (e) {
            self.key = e.keyCode;
        });
        window.addEventListener('keyup', function (e) {
            self.key = false;
        });
    }

    self.update = function () {
       // console.log("in update function");
        self.clear();
        tank.stepX = 0;
        tank.stepY = 0;
        tank2.stepX = 0;
        tank2.stepY = 0;
        if (self.key == 37) {
            tank.stepX--;
            tank.angle = -90;
        }
        if (self.key == 38) {
            tank.stepY--;
            tank.angle = 0;
        }
        if (self.key == 39) {
            tank.stepX++;
            tank.angle = 90;
        }
        if (self.key == 40) {
            tank.stepY++;
            tank.angle = 180;
        }
      //tank 2
        if (self.key == 65) {
            tank2.stepX--;
            tank2.angle = -90;
        }
        if (self.key == 87) {
            tank2.stepY--;
            tank2.angle = 0;
        }
        if (self.key == 68) {
            tank2.stepX++;
            tank2.angle = 90;
        }
        if (self.key == 83) {
            tank2.stepY++;
            tank2.angle = 180;
        }
        tank.draw();
        tank.pos();
        tank2.draw();
        tank2.pos();


    }

    self.clear = function () {
        self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
    }

}

function Tank(x, y, xm, ym, width, height, color) {
    this.width = width;
    this.height = height;
    this.stepX = 0;
    this.stepY = 0;
    this.angle = 0;
    this.x = x;
    this.y = y;
    //img create
   this.img = new Image;
   this.img.src = ("img/tanchik.png");
   this.img.width = 30;
   this.img.height = 30;
   this.ima = new Image;
   this.ima.src = ("img/tank.png");

  }
   //new position tank
   this.pos = function () {
        this.x += this.stepX;
        this.y += this.stepY;
   
    }

    this.draw = function () {
        this.rotateTank(this.img,this.x, this.y, this.angle,this.img.width, this.img.height);
    }

    this.rotateTank = function (image, x, y, angle, width, height) {
        TO_RADIANS = Math.PI / 180;
        myGame.context.save();
        myGame.context.translate(x, y);
        myGame.context.rotate(angle * TO_RADIANS);
        //myGame.context.drawImage(,-(width / 2), -(height / 2), width, height);
        myGame.context.drawImage(image, -(width / 2), -(height / 2), width, height);
        myGame.context.restore();
    }
}
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы