@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();
    }
}
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Duotek Москва
от 150 000 до 190 000 руб.
Digital Sharks Казань
от 60 000 до 65 000 руб.
CS Money Санкт-Петербург
от 120 000 до 150 000 руб.
18 янв. 2019, в 21:37
1500 руб./за проект
18 янв. 2019, в 19:30
150000 руб./за проект
18 янв. 2019, в 18:43
1000 руб./в час