javascript canvas game - конкретная тема
Здравствуйте. Я решил создать данную тему для решения вопросов по играм. Отдельного раздела по этим вопросам на форуме нет, а жаль((( Я уже пытался найти ответы на вопросы на этом форуме http://javascript.ru/forum/dom-windo...ehkrana-3.html но так и не добился своего. :help:
Так вот первый вопрос: как сделать проверку столкновений объектов. Меня интересует хороший и понятный способ . Я не хочу изобретать велосипед по этому кто знает ответе пожалуйста =) Это решит очень многие проблемы. Я вообще буду здесь выкладывать свои игровые скрипты и задумки. Думаю это будет интересно. :write: |
Цитата:
но я в этом не разбираюсь и поэтому посоветую почитать форумы, где общаются игроделы, почитать книжки и поискать чего-нибудь в поисковых системах |
Я ж все canvas: пререрисовака экрана тут описывал. Да, я про прямоугольник.
|
я там выкладывал код танчиков =)
|
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;}
|
вот тут надо мне надо придумать проверку столкновений объектов.
|
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;}
скроллер экрана. |
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;}
платформер))) |
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;}
отрисовка карты. |
Понимаете, если реалезовать этот обработчик событий можно будет сделать все!
|
| Часовой пояс GMT +3, время: 01:14. |