Алгоритм обнаружения препятствия при движении - JavaScript, Ajax

spein · 01.01.2012, 18:17

Собственно проводя свободное время в ожидании нового года написал небольшую игру "Танчики". Столкнулся с проблемой, что надо сделать алгоритм обнаружения и остановки при столкновении с препятствием. В данном случае коричневые блоки(смотрим вложение). Надо чтоб собственно танк не мог проехать насквозь.
P.S. Писал под браузером Chrome v16.

Код HTML:

<html>
<head>
  <title></title>
</head>
<body>
  <canvas id='example'>Обновите браузер</canvas>
  <script>
  var example = document.getElementById("example");
  var ctx = example.getContext('2d');
    var step=0;
  var go;
  var goes=false;
  var player = {
    x:0, y:30,
    cx:1, cy:2
  }
  var directs = new Array();
  directs["left"] = true;
  directs["down"] = true;
  directs["right"] = true;
  directs["top"] = true;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
  ctx.shadowBlur = 0;
  ctx.shadowColor = '#FFF';
  size=30;
  map = [
    [3,3,3],
    [0,0,3],
    [3,0,0]
  ];
  function tank(x,y,way) {
    switch(way) {
      case "top":
        ctx.fillStyle="#993300";
        ctx.fillRect(x,y,size, size);
        ctx.fillStyle="#999900";
        ctx.fillRect(x,y,size /5, size);
        ctx.fillRect(x + size * 2/5 * 2,y,size /5, size);
        ctx.fillRect(x + (size - 6)/2, y - (size - 30)/2, 6,15);
        break;
      case "down":
        ctx.fillStyle="#993300";
        ctx.fillRect(x,y,size, size);
        ctx.fillStyle="#999900";
        ctx.fillRect(x,y,size /5, size);
        ctx.fillRect(x + size * 2/5 * 2,y,size /5, size);
        ctx.fillRect(x + (size - 6)/2, y - (size - 60)/2, 6,15);
        break;
      case "right":
        ctx.fillStyle="#993300";
        ctx.fillRect(x,y,size, size);
        ctx.fillStyle="#999900";
        ctx.fillRect(x,y, size, size /5);
        ctx.fillRect(x,y  + size * 2/5 * 2,size, size /5);
        ctx.fillRect(x - (size - 60)/2, y  + (size - 6)/2, 15,6);
        break;
      case "left":
        ctx.fillStyle="#993300";
        ctx.fillRect(x,y,size, size);
        ctx.fillStyle="#999900";
        ctx.fillRect(x,y, size, size /5);
        ctx.fillRect(x,y  + size * 2/5 * 2,size, size /5);
        ctx.fillRect(x - (size - 30)/2, y  + (size - 6)/2, 15,6);
        break;
    }
  }
  function brick(y,x) {
    ctx.fillStyle="#660000";
    ctx.fillRect(x,y,size,size);
    ctx.fillStyle="#CC6600";
    ctx.fillRect(x+1,y+1,size/3,size/3);
    ctx.fillRect(x+1+size/2,y + 1,size/3,size/3);
    ctx.fillRect(x+1,y+size/2+1,size/3,size/3);
    ctx.fillRect(x+1+size/2,y+size/2+1,size/3,size/3);
  }
  function grass(y,x) {
    ctx.fillStyle="#66CC66";
    ctx.fillRect(x,y,size,size);
    ctx.fillStyle="#66FF00";
    ctx.fillRect(x,y,size/2,size/2);
    ctx.fillRect(x + size/2, y + size/2, size/2, size/2);
  }
  function buildMap() {
    ctx.clearRect(0,0,example.width, example.height);
    for(i=0;i<map.length;i++) {
      for(n=0;n<map[i].length;n++) {
        if(map[n][i]==0) {
          grass(n*size, i*size)
        } else if(map[n][i] == 3) {
          brick(n*size,i*size);
        }
      }
    }
  }
  buildMap();
  window.onload=function() {
  window.onkeydown = function(e) {
    document.getElementById("container").innerHTML = player.cx + " : " + player.cy;
    switch(e.which) {
      case 65: 
        if(goes==false) {
          go = setInterval(function() {
            goes = true;
            buildMap();
            tank(player.x + 1,player.y,"left"); 
            player.x-=1;
            player.cx = Math.round((player.x + 15)/size) + 1;
          }, 30);
        }
      break;
      case 68: 
       if(goes==false) {
          go = setInterval(function() {
            goes = true;
            buildMap();
            tank(player.x + 1,player.y,"right"); 
            player.x+=1;
            player.cx = Math.round((player.x + 15)/size) + 1;
          }, 30);
        }
      break;
      case 87: 
       if(goes==false) {
          go = setInterval(function() {
            goes = true;
            buildMap();
            tank(player.x,player.y + 1,"top"); 
            player.y-=1;
            player.cy = Math.round((player.y + 15)/size) + 1;
          }, 30);
        }
      break;
      case 83: 
       if(goes==false) {
          go = setInterval(function() {
            goes = true;
            buildMap();
            tank(player.x,player.y + 1,"down"); 
            player.y+=1;
            player.cy = Math.round((player.y + 15)/size) + 1;
          }, 30);
        }
      break;
    }
  }
  window.onkeyup = function() {
      clearInterval(go);
      goes = false;
  };
  }
  tank(player.x,player.y, "right");
  </script>
  <div id="container"></div>
</body>
</html>

nerv · 01.01.2012, 23:17

Я тоже недавно сделал свою первую, достаточно простую, браузерную игру. Называется Найди пару. По вашему вопросу, примерно так:

Код:

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { margin: 0px; }
            div { height:50px; position:absolute; top:10px; width:50px; }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var d = { l:10 + 50, t:10 + 50 };
                var x = document.getElementsByTagName("div")[1];
                var l = 400, t = 10;
                (function() {
                    if(d.l < l - 2) {
                        x.style.left = (l -= 2) + "px";
                    }
                    else {
                        if(d.t > t - 2) {
                            x.style.top = (t += 2) + "px";
                        }
                        else {
                            x.style.left = (l -= 2) + "px";
                        }
                    }
                    if(l > 10) setTimeout(arguments.callee, 50);
                })();
            }
        </script>
    </head>
    <body>
        <div style="background-color:green; left:10px;"></div>
        <div style="background-color:silver; left:400px;"></div>
    </body>
</html>

spein · 02.01.2012, 14:02

Это немного не то. Как вы заметили, у меня что-то подобное BitMap.

Код:

 map = [
    [3,3,3],
    [0,0,3],
    [3,0,0]
  ];

И мне нужен алгоритм, который будет работать на динамических картах.

nerv · 02.01.2012, 17:34

Цитата:

Это немного не то.

Может я чего-то не понимаю, но если вы создаете объекты, что Вам мешает отслеживать их свойства, в т.ч. left(x) и top(y)?

spein · 02.01.2012, 22:31

То, что это canvas, а не DOM объекты.

Naive · 03.01.2012, 01:20

Цитата:

Сообщение от spein

То, что это canvas, а не DOM объекты.

Каким-то же образом вы отслеживаете местоположение танка. Как минимум для перемещения.
Вот и следите при перемещении танка за объектами окружения (лед, кирпичи, вода, другие танки)

spein · 03.01.2012, 11:11

Подскажите алгоритм для данного события.

02.01.2012, 14:02	#3
spein Программист Форумчанин Регистрация: 27.02.2009 Сообщений: 505	Это немного не то. Как вы заметили, у меня что-то подобное BitMap. Код: `map = [ [3,3,3], [0,0,3], [3,0,0] ];` И мне нужен алгоритм, который будет работать на динамических картах. there are no limits when you're software engineer

02.01.2012, 22:31	#5
spein Программист Форумчанин Регистрация: 27.02.2009 Сообщений: 505	То, что это canvas, а не DOM объекты. there are no limits when you're software engineer

03.01.2012, 11:11	#7
spein Программист Форумчанин Регистрация: 27.02.2009 Сообщений: 505	Подскажите алгоритм для данного события. there are no limits when you're software engineer

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Графика, отрисовка примитива при движении мышью.	KLOUH	Помощь студентам	1	21.04.2011 13:21
QBasic графика в движении	Dronlion	Помощь студентам	0	05.04.2011 10:29
Защита бота от обнаружения покер-румом	grizzion	Фриланс	0	09.01.2011 04:56
При движении картинки происходит мерцание...	Teen4jump	Gamedev - cоздание игр: Unity, OpenGL, DirectX	14	11.07.2007 01:43
Мигание при движении	Speeker	Общие вопросы Delphi	1	14.02.2007 01:22