javascript canvas game - конкретная тема

[Seva Pletnev]

Здравствуйте. Я решил создать данную тему для решения вопросов по играм. Отдельного раздела по этим вопросам на форуме нет, а жаль((( Я уже пытался найти ответы на вопросы на этом форуме canvas: пререрисовака экрана но так и не добился своего.

Так вот первый вопрос: как сделать проверку столкновений объектов. Меня интересует хороший и понятный способ . Я не хочу изобретать велосипед по этому кто знает ответе пожалуйста =) Это решит очень многие проблемы. Я вообще буду здесь выкладывать свои игровые скрипты и задумки. Думаю это будет интересно.

[mta88]

Так вот первый вопрос: как сделать проверку столкновений объектов. Меня интересует хороший и понятный способ.

если бы я разбирался в написании игр, то написал бы, что существуют десятки способов с различными алгоритмами и оптимизациями, каждый из которых подходит для своего случая
но я в этом не разбираюсь и поэтому посоветую почитать форумы, где общаются игроделы, почитать книжки и поискать чего-нибудь в поисковых системах

[Seva Pletnev]

Я ж все canvas: пререрисовака экрана тут описывал. Да, я про прямоугольник.

[Seva Pletnev]

я там выкладывал код танчиков =)

[Seva Pletnev]

c= document.getElementById('c');g= c.getContext('2d');

 var gameObject=[];
 map=[
 0,0,0,1,0,0,0,0,
 0,1,1,1,1,1,1,0,
 0,1,1,1,1,1,1,0, 
 0,1,1,0,0,1,1,0, 
 1,1,1,0,1,1,1,1,
 0,1,1,1,1,1,1,0,
 0,1,1,1,1,1,1,0,
 0,0,0,1,0,0,0,0 
 ]; 

 mapClet=50;
 vx=0;vy=0; 

 var plyer=function(xPl,yPl,col){
 vec=0;
 that={
 xPl:xPl,
 yPl:yPl,
 col:col,

 move: function(){
 if(key==37){xPl-=mapClet; vec=0}
 if(key==39){xPl+=mapClet; vec=1}
 if(key==38){yPl-=mapClet; vec=2}
 if(key==40){yPl+=mapClet; vec=3}
 if(key==32){gameObject.push(bulletPlayer(xPl+15,yP l+15,vec,"#000"))}


 },
 draw: function(){
 g.fillStyle=col;
 g.fillRect(xPl,yPl,mapClet,mapClet);
 }

 };
 return that;
 };
 var mob=function(xMb,yMb,col){
 that={
 xMb:xMb,
 yMb:yMb,
 col:col,

 move: function(){},
 draw: function(){
 g.fillStyle=col;
 g.fillRect(xMb,yMb,mapClet,mapClet);
 }

 };
 return that;
 };
 var bulletPlayer=function(xBp,yBp,vec,col){
 that={
 xBp:xBp,
 yBp:yBp,
 col:col,
 vec:vec,

 move: function(){
 if(vec==0){xBp-=mapClet}
 if(vec==1){xBp+=mapClet}
 if(vec==2){yBp-=mapClet}
 if(vec==3){yBp+=mapClet}
 },
 draw: function(){
 g.fillStyle=col;
 g.fillRect(xBp,yBp,20,20);
 }

 };
 return that;
 };
 var bulletMob=function(xBm,yBm,vec,col){
 that={
 xBm:xBm,
 yBm:yBm,
 vec:vec,
 col:col,

 move: function(){},
 draw: function(){}

 };
 };
 var woll=function(x,y,col){
 that={
 x:x,
 y:y,
 col:col,

 move: function(){},
 draw: function(){
 g.fillStyle=col;
 g.fillRect(x,y,mapClet,mapClet);
 }

 };
 }
 setInterval(function(){
 g.clearRect(0,0,700,700);
 for(n=0;n<64;n++){
 x=n&7;y=n>>3;
 if(map[n]==0){vx=x;vy=y} 
 g.fillStyle="#0f0";
 g.fillRect(vx*mapClet,vy*mapClet,mapClet,mapClet);
 }
 gameObjectFresh=[];
 for(i=0;i<gameObject.length;i++){
 gameObject[i].move();
 gameObject[i].draw();
 if(gameObject.flag===false){
 gameObjectFresh.push(gameObject[i]);
 }
 }
 gammeObject=gameObjectFresh;
 },100);

 gameObject.push(plyer(200,200,"#00f"));
 gameObject.push(mob(300,300,"#f00"));

 document.onkeydown = keyDn; document.onkeyup = keyUp; key=0;
 function keyDn(e) {key = e.which; }
 function keyUp(e) {key = 0;}

[Seva Pletnev]

вот тут надо мне надо придумать проверку столкновений объектов.

[Seva Pletnev]

c= document.getElementById('c');g= c.getContext('2d');
    setInterval(ris,125);

    mapClet=50;

    mapCol=["#ff00ff","#ff0000","#00ff00","#0000ff"];

    map=[
    1,1,3,1,3,1,1,1,
    1,1,3,1,3,1,1,1,
    1,1,3,1,3,1,1,1,
    1,1,3,1,3,1,1,1,
    3,1,1,1,1,1,3,1,
    1,3,1,1,1,3,1,1,
    1,1,3,3,3,1,1,1,
    1,1,1,1,1,1,1,1
    ];
    xq=0;yq=0;
    function ris(){
          switch (key){               
           case 37: xq--;break;
           case 38: yq--;break;
           case 39: xq++;break;
           case 40: yq++;break;
        }
    	g.clearRect(0,0,512,512);
        for(n=0;n<64;n++){
        	x=n&7;y=n>>3;rx=Math.random()*25;ry=Math.random()*2;rs=Math.random()*2;
            x=(x+xq)&7;y=(y+yq)&7;
        	g.fillStyle=mapCol[map[n]];
        	g.fillRect(x*mapClet+rx,y*mapClet+ry,mapClet-5-rs,mapClet-5-rs);
        }

    }
document.onkeydown = keyDn; document.onkeyup = keyUp; key=0;
function keyDn(e) {key = e.which; /*alert(key);*/  }
function keyUp(e) {key = 0;}

скроллер экрана.

[Seva Pletnev]

c= document.getElementById('c');g= c.getContext('2d');  //получаем контекст отрисовки 2d

x=0; y=490;                      //координаты платформы
xq=250; yq=100; xw=100; yw=480;  //координаты игрока и моба
gravi=2;                         //гравитация
gamp=20;                         // сила прыжка
speed=0;                         //скорость падения
time=30;                         //время интервала перерисовки
live=100;                        //жизни игрока
Mobi=0;                          //переменная бегающая по массиву Mobprid
Mobprid=[4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3]; //массив содержащий индесы направлений для моба

setInterval(riswin,30);              //функция перерисовки экрана

function riswin(){                   //функция  отрисовки игрока,платформы,моба ифона
	g.clearRect(0,0,500,500);          //очищаем экран
	g.fillStyle="#000000"; 
	g.fillRect(0,0,500,500);           //рисуем фон
	g.fillStyle="#00ff00"; 
	g.fillRect(x,y,500,10);            //рисуем платформу зеленого цвета
	graviPlayer();                     //вызываемфункцию игрока
	scrMob();
	prin();
 }
function graviPlayer(){              //функция управления  игроком
  if(key==39) {xq+=5;}               //сдвиг вправо
  if(key==37) {xq-=5;}               //сдвиг влево
  if(yq==480){if(key==38) {speed-=gamp;}}      // еслиигрок на землеи нажата клавиша вверх, то от скорости отнять силу прыжка
  
  yq+=speed;                         // прибавляем к Y игрока скорость (реализуется падение)
  if(yq!=480) {speed+=gravi; }       // если игрок не на земле то к скорости прибавляем гравитацию каждый шаг (реализуется ускарение свободного падения) 
  if(yq==480){speed=0;}              //если игрок на земле, мы обнуляем скорость
    
  g.fillStyle="#0000ff";
  g.fillRect(xq,yq,10,10);           // рисуем игрока 
  if(xq>500) {xq=0;}
  if(xq<0) {xq=490}
 }
function scrMob() {                  //функция навигации моба

  g.fillStyle="#ff0000";
  g.fillRect(xw,yw,10,10);           //рисуем моба
  i=Mobprid[Mobi];
  Mobi++;
  if(Mobi>=Mobprid.length) {Mobi=0;} //вытаскиваем индексы направлений из массива Mobprid и задаем путь
  switch(i){
    case 1: yw-=5;
    break;
    case 2: yw+=5;
    break;
    case 3: xw-=5;
    break;
    case 4: xw+=5;
    break;
 }          
 }
function prin(){                     //функция отрисовки системного теста
 
 g.strokeStyle = "#F00";
 g.font = 'bold 30px sans-serif';
 
 g.strokeText("speed: "+speed, 10, 30);                       //рисуем скорость
 
 g.strokeText("x: "+xq, 200, 30);                             //отрисовываем координаты игрока
 g.strokeText("y: "+yq, 300, 30);                       
 
 g.strokeText("key: "+key, 400, 30);                          //рисуем нажатую клавишу 
 
 g.strokeText("live: "+live, 10, 70);                         //рисуем жизни
 
 if(live!=0){if(speed>20) {live-=5;}
 if(xq==xw&&yq==yw) {live-=5;}}                               //отнимаем жизни если игрок привышает скорость или сталкивается с мобом
 
 if(live==0) { g.strokeText("=game over=", 170, 250); }       // конец игры если нет жизней
 }

document.onkeydown = keyDn; document.onkeyup = keyUp; key=0;  //сохраняем в key значение клавиши и послеее отпуска обнуляем
function keyDn(e) {key = e.which;}    
function keyUp(e) {key = 0;}

платформер)))

[Seva Pletnev]

c= document.getElementById('c');g= c.getContext('2d');  //вызываем canvas и задаем его параметры

xq=0; yq=0;   // координаты игрока
xw=16; yw=16; // координвты моба

mapDot=16;    //размер клетки

// 0 уголь  1 мостовая 2 земля 3 песок 4 лес 5 трава 6 вода 7 камень
mapCol = ['#333','#936','#963','#990','#693','#396','#369','#999'];       //массив цветов           
map =[5,5,5,5,5,5,5,5,1,4,4,4,4,5,5,5,5,5,3,6,6,6,6,6,6,6,6,6,6,6,6,6,
      5,5,5,5,5,5,0,5,1,4,5,5,5,5,4,5,5,5,5,3,6,6,6,6,6,6,6,6,6,6,6,6,
      0,0,5,5,5,5,0,5,1,4,5,5,5,0,0,0,4,4,4,4,4,6,6,6,6,6,6,6,6,6,6,6,
      5,0,0,5,5,5,5,5,1,4,5,5,5,0,0,0,0,5,5,5,4,4,6,6,6,6,6,6,6,6,6,6,
      5,5,5,5,5,5,5,5,1,4,5,5,5,5,0,0,0,5,5,5,5,4,4,3,6,6,6,6,6,6,6,6,
      5,5,0,0,0,5,5,5,1,4,4,4,4,4,5,5,5,5,5,5,5,5,4,4,3,3,6,6,6,6,6,6,
      5,5,5,0,0,5,5,5,1,4,5,7,7,7,7,5,5,5,5,5,5,5,5,4,4,5,3,6,6,6,6,6,
      5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,7,5,5,5,5,0,0,5,4,4,5,3,3,3,3,3,
      1,1,1,1,1,1,1,1,1,5,5,7,7,7,7,7,1,7,5,5,5,5,0,5,5,4,4,4,4,4,4,4,
      5,5,5,5,5,5,5,5,5,5,5,5,3,3,3,3,7,1,7,5,5,5,5,5,5,5,5,5,4,4,5,5,
      4,4,4,4,4,4,4,4,4,4,5,3,3,3,6,6,3,3,1,7,5,5,5,5,5,5,5,5,5,4,5,5,
      4,4,4,4,4,4,4,4,5,4,4,3,6,6,6,6,6,3,3,1,5,5,5,5,5,5,5,5,5,5,4,5,
      6,5,5,5,5,5,5,5,5,5,4,3,6,6,6,6,6,6,3,5,1,1,1,1,1,1,1,1,1,1,1,1,
      4,6,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,3,3,5,1,5,0,5,5,5,5,5,5,5,5,5,
      4,5,6,6,6,5,5,5,5,5,5,4,5,3,6,6,3,3,5,5,1,5,0,5,5,5,7,5,5,5,5,5,
      4,4,4,4,4,4,4,4,4,4,4,5,5,5,3,3,3,5,5,5,1,5,5,5,5,7,7,7,5,5,5,5,
      5,4,5,4,4,4,5,4,4,5,4,4,5,5,4,4,4,4,4,5,1,5,5,5,7,0,0,7,7,5,5,5,
      5,4,5,4,4,4,4,4,5,4,5,5,4,4,5,4,5,4,4,5,1,5,5,5,7,7,7,7,7,5,5,5,
      5,4,4,5,4,5,4,5,4,4,4,4,4,5,4,5,4,4,5,5,1,5,5,5,7,0,7,7,5,5,5,5,
      5,5,5,4,4,5,4,5,4,4,4,4,4,4,5,4,4,5,4,4,1,5,5,5,7,0,0,7,5,5,5,5,
      4,4,4,4,4,4,4,5,4,5,4,4,5,4,5,5,5,5,4,5,1,5,5,5,7,7,7,7,5,0,0,5,
      5,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,1,5,0,5,7,7,7,7,0,0,0,0,
      4,4,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,5,1,5,5,5,7,7,0,7,5,0,0,5,
      5,5,4,4,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,4,1,5,5,5,5,7,7,7,5,0,0,5,
      5,4,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,4,1,5,5,5,5,5,7,5,5,0,5,5,
      4,5,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,4,1,5,5,5,5,5,5,5,5,5,5,5,
      5,4,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,5,1,5,5,0,5,5,5,0,0,5,5,5,
      4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,1,5,5,0,5,5,5,0,0,5,5,5,
      5,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,1,5,5,0,5,5,5,5,0,0,5,5,
      4,4,4,5,4,4,4,4,4,5,5,5,4,4,5,5,5,4,4,4,1,5,5,5,5,5,5,5,5,5,5,5,
      4,4,4,4,4,5,4,4,4,4,5,5,4,5,4,5,5,4,4,4,1,5,5,5,5,5,5,5,5,5,5,5,
      5,5,3,5,4,5,5,4,5,4,4,4,4,5,4,4,5,5,4,4,1,5,5,5,5,5,5,5,5,5,5,5];  //массив содержащий индексы клеток
// 1 вверх 2 вниз 3 влево 4 вправо
Mobprid=[1,1,1,1,4,4,4,1,1,1,1,4,4,4,4,2,2,2,2,3,3,3,3,4,2,2,2,2,1,1,1,1,4,4,4,4,2,2,2,2,3,3,3,3,3,3,3,3]; //массив содержащий путь моба
Mobi=0;


w= c.width; h= c.height;     
setInterval('run()', 100);   // таймер перерисовки экрана

function run() {            
  g.clearRect(0,0,w,h);      

  for (n=0; n<1024; n++){  //цыкл переберающий массив
    y=n>>5;x=n&31;
    z=map[n];
    g.fillStyle=mapCol[z]; //рисуем клетку цвета соответствующему индексу из массива map
    g.fillRect(x*mapDot,y*mapDot,mapDot,mapDot);  
  } 
  scrPlayer();   //вызываем игрока
  scrMob();      //вызываем моба
}



function scrPlayer(){
  switch (key){               //проверка нажатия клавишь
    case 37: xq--;
        break;
    case 38: yq--;
         break;
    case 39: xq++;
        break;
    case 40: yq++;
        break;
    case 32: yq=0; xq=0;
        break;
  }
  g.fillStyle="#0000ff";
  g.fillRect(xq*mapDot,yq*mapDot,mapDot,mapDot);  //рисуем игрока (синий)
  if(xq==xw&&yq==yw) {alert(":p game over")}       //проаеряем столкновение с мобом
 }



function scrMob() {

  g.fillStyle="#ff0000";
  g.fillRect(xw*mapDot,yw*mapDot,mapDot,mapDot);  //рисуем моба
  i=Mobprid[Mobi];
  Mobi++;
  if(Mobi>=Mobprid.length) {Mobi=0;}    //вытаскиваем индексы направлений из массива Mobprid и задаем путь
  switch(i){
    case 1: yw--;
    break;
    case 2: yw++;
    break;
    case 3: xw--;
    break;
    case 4: xw++;
    break;
 }          
 }


document.onkeydown = keyDn; document.onkeyup = keyUp; key=0;
function keyDn(e) {key = e.which; /*alert(key);*/  }
function keyUp(e) {key = 0;}

отрисовка карты.

[Seva Pletnev]

Понимаете, если реалезовать этот обработчик событий можно будет сделать все!