Задача:1. надо с помощью элемента canvas(холста) и js нарисовать пушку (2 прямоугольника черный и коричневый) 2.черный прямоугольник постоянно будет вращаться 3. из вращающегося прямоугольника каждую секунду будут выстреливать снаряды в разные стороны(этот пункт самый сложный как по мне)
Примечание: первые два пункта я уже сделал, мне нужно чтобы кто-то из вас сделал 3 пункт( я его уже 3 часа немогу сделать
) помогите пожалуйста!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<canvas id="myCanvas" width="700" height="600"style="border:1px solid black;"></canvas>
<script>
</script>
</body>
</html>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var bullet3 = -10;
var bullet2 = -10;
var bullet = -10;
var angle = 1;
var health = 40;
var x = 310;
var y = 110;
var xy = 158;
var massiv = ["angle","0"];
var cvet = ["white","red"]; //цвет полоски жизни
var okraska = ["white","black"]; //цвет обводки полоски жизни
var mybase = { //массив
color:"#48260D", //цвет базы
x:100, //кординаты базы по горизонтали и вертикали
y:100,
height:40, //размеры базы
width:40,
description:"base,"}; //информация
var alienbase = {
color:"#48260D", //цвет базы
x:100, //кординаты базы по горизонтали и вертикали
y:100,
height:40, //размеры базы
width:40,
description:"alien base,"}; //информация
console.log(mybase.color);
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 = mybase.color;
//вет базы
ctx.fillRect(mybase.x, mybase.y, mybase.height,mybase.width);
ctx.fillRect(mybase.x+200,mybase.y, mybase.height,mybase.width);
//базы
ctx.fillRect(mybase.x+200,mybase.y+300,mybase.height,mybase.width);
ctx.save();
//var angle = 1;
ctx.translate(320,420);//координаты где будет вращаться обьект
ctx.rotate(this.angle);
//ctx.scale(0.3,0.3);
ctx.fillStyle = "black"; //Нижний прямоугольник
ctx.fillRect(-10,-10,20,20);
if (bullet == -10) {
ctx.restore();
ctx.save();
ctx.save();
//var angle = 1;
ctx.translate(320,420);//координаты где будет вращаться обьект
ctx.rotate(this.angle);
ctx.fillStyle = "black";
ctx.fillRect(bullet,-2,15,8);
ctx.restore();
ctx.save();
} else{
ctx.restore();
ctx.save();
//var angle = 1;
ctx.translate(320,420);
ctx.rotate(0);
ctx.fillStyle = "black";
ctx.fillRect(bullet,-2,15,8);
if ( bullet>30 ) {
ctx.fillRect(bullet2,-2,15,8);
}
if ( bullet>60 ) {
ctx.fillRect(bullet3,-2,15,8);
}
ctx.restore();
ctx.save();
}
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 < 160){
//если обьект больше координат 260 то:
x++; //остановка
this.x++; //остановка обьекта
ctx.fillStyle = "black"; //цвет обьекта
ctx.fillRect(xy,115,7,4); //обьект
xy-=1; //скорость пули обьекта };
this.xy-=1;}
if(xy < 110){ this.xy = 158;
ctx.strokeStyle = 'black';
ctx.strokeRect(100,85,40,10); //обводка полоски жизни mybase
ctx.strokeRect(300,85,40,10); } //обводка полоски жизни }
ctx.save();
//var angle = 1;
ctx.translate(400,200);//координаты где будет вращаться обьект
ctx.rotate(this.angle);
//ctx.scale(0.3,0.3);
ctx.fillStyle = "black";
ctx.fillRect(-10,-10,20,20);
ctx.restore();
ctx.save();
}
function move() {
x-=1; //скорости всех обьектов
bullet++;
if ( bullet>30 ) {
bullet2++;
}
if ( bullet>60 ) {
bullet3++;
}
this.angle+=Math.PI/180; //angle++;
}
function game() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
move();
draw(x, y);
requestAnimationFrame(game)
}
//callback(game);
var imagesi = new Image();
imagesi.onload = game;
imagesi.src="tank.png";
p.s пушка это нижние 2 прямоугольника