Как здесь надо изменить код так чтобы повернулся только один из четырех прямоугольников?. p.s: в хтмл добавьте элемент <canvas>.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var health = 40;
var x = 100;
var y = 110;
var xy = 280;
var cvet = ["white","red"];
var okraska = ["white","black"];
var base = {
color:"#48260D",
x:100,
y:100,
height:40,
width:40,
description:"base,"
};
console.log(base.color);
function rotate(){
ctx.rotate(20 * Math.PI / 180);
//ctx.translate(base.x,base.y);
//ctx.fillRect(base.x+200,base.y+300,base.height,base.width);
ctx.fillStyle = "black";
//ctx.fillRect(base.x+210,base.y+310,base.height-20,base.width-20);
}
function draw(x, y) {
ctx.fillStyle = "black";
ctx.fillRect(x,y,20,20);
console.log(x);
//ctx.drawImage(imagesi,x,y,40,40);
ctx.fillStyle = base.color;
ctx.fillRect(base.x, base.y, base.height,base.width);
ctx.fillRect(base.x+200,base.y, base.height,base.width);
ctx.fillRect(base.x+200,base.y+300,base.height,base.width);
ctx.fillStyle = "black";
ctx.fillRect(base.x+210,base.y+310,base.height-20,base.width-20);
if( health > 0){ctx.fillStyle = cvet[1];ctx.strokeStyle = okraska[1];} else{ ctx.fillStyle = cvet[0];ctx.strokeStyle = okraska[0];}
ctx.fillRect(100,85,40,10);
ctx.fillRect(300,85,health,10);
if(x > 260){
x--;
this.x--;
ctx.fillStyle = "black";
ctx.fillRect(xy,115,7,4);
xy+=1;
if(xy > 300){ xy = 262; this.xy = 262; this.health-=5; }
ctx.strokeRect(100,85,40,10);
ctx.strokeRect(300,85,40,10);
}
}
function move() {
x+=1;
}
function game() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
move();
draw(x, y);
requestAnimationFrame(game)
}
var imagesi = new Image();
imagesi.onload = game;
imagesi.src="tank.png";
rotate();
