Javascript.RU

Результаты опроса: Сложно сделать 3 пункт?
Да,очень сложно 1 33.33%
Нет,легко 2 66.67%
Голосовавшие: 3. Этот опрос закрыт

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2018, 21:44
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Создать пушку на canvas и js
Задача: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 прямоугольника

Последний раз редактировалось Всемогущий, 01.04.2019 в 16:08.
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2018, 23:11
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

Сообщение от Всемогущий
из вращающегося прямоугольника каждую секунду будут выстреливать снаряды в разные стороны
а лететь они как будут? по прямой или по баллистической траектории (эллипсу)?
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2018, 01:46
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

И код который уже есть тоже добавляйте, не стесняйтесь
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2018, 11:46
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

j0hnik, готово,
Alexandroppolus, они могут лететь по любой траектории (вам решать)
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2018, 11:49
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Всемогущий,
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 02.11.2018, 10:07
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

ребят кто нибудь поможет мне с пушкой ?
Ответить с цитированием
  #7 (permalink)  
Старый 02.11.2018, 12:04
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Alexandroppolus
а лететь они как будут? по прямой или по баллистической траектории (эллипсу)?
Насколько я понял, это вид сверху - так что по прямой
Ответить с цитированием
  #8 (permalink)  
Старый 02.11.2018, 17:33
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Сообщение от Dilettante_Pro Посмотреть сообщение
Насколько я понял, это вид сверху - так что по прямой
да,
Ответить с цитированием
  #9 (permalink)  
Старый 04.11.2018, 21:23
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Кто сделал пушку ?
Ответить с цитированием
  #10 (permalink)  
Старый 31.03.2019, 14:19
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Прошло много дней... кто сделал пушку ?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пример тестовых заданий на js junior elshaarawy Учебные материалы 3 26.03.2015 15:17
Проблема с видеоплеером на js web-master2014 Общие вопросы Javascript 0 26.02.2014 13:24
Cоздание анимации на JS и Canvas Severtain Общие вопросы Javascript 5 14.05.2011 20:40
Не получается передать переменную из JS в PHP Lion_astana AJAX и COMET 2 23.11.2010 17:23