Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Объект в canvas (https://javascript.ru/forum/misc/71221-obekt-v-canvas.html)

Uladzimircharniauski 02.11.2017 21:45

Объект в canvas
 
<canvas id="example">Абнавiце браузэр</canvas>
<script>
   var example = document.getElementById("example");
	

var ctx =example.getContext('2d');

example.width = 1500;

example.height = 500;
var x = example.width/2-45;
var b = example.height;
var c = 15;
var d = 20;
var e = 20;
var i = 50;
var y = 250;
var i;
var bf = 0;
var ii = 0 ;


function draw_bullet(){ 
ctx.clearRect(0,0,example.width,example.height);
ctx.strokeRect(x-30,y+40,i,e-5);
ctx.fillRect(x-30,y+40,i,e-5);
}

function draw_bullet_2(){
ctx.clearRect(0,0,example.width,example.height);
ctx.strokeRect(x-30,y+40,e-5,i);
ctx.fillRect(x-30,y+40,e-5,i);
}

draw_bullet();

function bullet1(){

x = example.width/2-45;

y-=4;

draw_bullet_2();

};
function bullet4(){
x = example.width/2-45;
y+=4;

draw_bullet_2();

};
function bullet2(){
y=250;
x-=4;

draw_bullet();

}
function bullet3(){
y=250;
x+=4;

draw_bullet();

}

   addEventListener("keydown", function(event) {
   
   function draw_b()
   {
    if (event.keyCode == 38){
	
	
	bullet1();
window.requestAnimationFrame(draw_b);
if(y+40<0){
y=250;
ctx.clearRect(0,0,example.width,example.height);

} 
	}
	
	
if(event.keyCode == 40){
	
	bullet4();
	window.requestAnimationFrame(draw_b);
	if(y>400){
	y=250;
	ctx.clearRect(0,0,example.width,example.height);
	
	}
	   }
	   if(event.keyCode == 37){
	
	bullet2();
	window.requestAnimationFrame(draw_b);
	if(x-30<0){
	x=example.width/2;
	ctx.clearRect(0,0,example.width,example.height);
	
	}
	   }
	   	   if(event.keyCode == 39){
	
	bullet3();
	window.requestAnimationFrame(draw_b);
	if(x>1400){
	x=example.width/2;
	ctx.clearRect(0,0,example.width,example.height);
	
	}
	   }
	      };
	
	draw_b();
	
	
	});
	
	
	</script>

SOS
Не могу сделать так , что-бы прямоугольник возвращался на исходную позицию и там оставался ( а именно:
ctx.clearRect(0,0,example.width,example.height);
ctx.strokeRect(x-30,y+40,i,e-5);
ctx.fillRect(x-30,y+40,i,e-5);
или
ctx.clearRect(0,0,example.width,example.height);
ctx.strokeRect(x-30,y+40,e-5,i);
ctx.fillRect(x-30,y+40,e-5,i);)
Еще при нажатии кнопок он может летать только в изначально выбранной плоскости (по х или по у). Если с х переключится на у или с у переключится на х , то
фигура просто станет на месте и при нажатии кнопок не будет летать НИ В ОДНОЙ ПЛОСКОСТИ!!!
Пожалуйста , скажите , что делать?
Спасибо.:)


Часовой пояс GMT +3, время: 16:38.