Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2017, 21:32
Интересующийся
Отправить личное сообщение для malinovsky Посмотреть профиль Найти все сообщения от malinovsky
 
Регистрация: 07.09.2017
Сообщений: 14

Прошу совета по коду игры
Здравствуйте, вот сделал простенькую стрелялку и теперь прошу ваших советов по коду, а именно, как правильно задавать скорость движения объектов.
Ссылка на скрипт: https://github.com/himbotop/first_ga...ster/script.js

Сама игра: https://himbotop.github.io/first_game_js/
Ответить с цитированием
  #2 (permalink)  
Старый 07.09.2017, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

malinovsky,
убрал стиль из canvas, математику(позиционирован е элементов) проверьте снова , на экране 10 кораблей с разной скоростью, смотреть shipsGeneration

<!DOCTYPE html>
<html>
<head>
  <title>1Game</title>
  <meta charset="utf-8">
</head>
<body>
<h2>Управление игрой:</h2>
<p>Перемещение влево/вправо стрелки влево/вправо на клавиатуре, клавиша "пробел" - выстрел.</p>
<canvas id="canvas" width=600 height=400></canvas>
<script>
  var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var keys = {
  'Left' : 37,
  'Right' : 39,
  'Space' : 32
};

var keyDown = {};

var setKey = function (keyCode) {
  keyDown[keyCode] = true;
};

var clearKey = function (keyCode) {
  keyDown[keyCode] = false;
};

var isKeyDown = function (keyName) {
  return keyDown[keys[keyName]] == true;
};


window.onkeydown = function (e) {
  setKey(e.keyCode);
};

window.onkeyup = function (e) {
  clearKey(e.keyCode);
};


var drawRect = function (x, y, sizeX, sizeY, color) {
  ctx.beginPath();
  ctx.rect(x, y, sizeX, sizeY);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.closePath();
};

var drawPlayer = function (x) {
  ctx.beginPath();
  ctx.rect(x, 395, 50, 5);
  ctx.rect(x+10, 390, 30, 5);
  ctx.rect(x+23, 385, 5, 5);
  ctx.fillStyle = "rgb(173, 105, 82)";
  ctx.fill();
  ctx.closePath();
};

var Destruction = function () {
  for(var i = 0; i < shots.length; i++) {
    for(var j = 0; j < ships.length; j++) {
      if(~~shots[i].y == ~~ships[j].y+5 && shots[i].x+5 >= ships[j].x && shots[i].x <= ships[j].x+10) {
        ships.splice(j, 1);
        shots.splice(i, 1);
        break;
      }
    }
  }
};
;
var shipsGeneration = function (time) {
  if( countShips > 30 && ships.length < 10) {
    ships.push({
      t : (3 + Math.random()*13|0)*1000,//время падения от 3сек до 15сек
      ts : time,//время старта
      x : Math.random() * 590|0,
      y : 0
    });
    countShips = 0;
  }
  countShips++;

  for(var i = 0; i < ships.length; i++) {
    var s = ships[i], p = (time-s.ts)/s.t;
    if(p < 1)s.y = p*400|0;
    else {s.y= 0; s.ts = time ; s.t= (3 + Math.random()*13|0)*1000;
    s.x = Math.random() * 590|0;
    };

    drawRect(s.x, s.y, 10, 10, "rgb(22, 105, 67)");

  }
};

var shotsGeneration = function (time) {
  if(isKeyDown('Space')) {
    var length = shots.length;
    if(length > 0) {
      if( (shots[length-1].y + 7) < 130) {
        shots.push({
          x : xPlayer+23,
          y : 130
        });
      }
    } else {
      shots.push({
        x : xPlayer+23,
        y : 130
      });
    }

  }

  for(var i = 0; i < shots.length; i++) {

    drawRect(shots[i].x, shots[i].y, 5, 5, "rgb(195, 55, 67)");
    shots[i].y -= 2;
  }
};

var Player = function () {
  if(isKeyDown('Left')) {
    xPlayer-=4;
  }
  if(isKeyDown('Right')) {
    xPlayer+=4;
  }
  drawPlayer(xPlayer);
};

var ships = [];
var shots = [];
var countShips = 0;
var xPlayer = 120;

var main = function (time) {

  ctx.clearRect(0, 0, 600, 400);
  drawRect(0, 0, 600, 400, "rgb(36, 177, 219)");
  Destruction();

  shipsGeneration(time);

  shotsGeneration();

  Player();

  requestAnimationFrame(main);
};

main();

</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2017, 20:01
Интересующийся
Отправить личное сообщение для malinovsky Посмотреть профиль Найти все сообщения от malinovsky
 
Регистрация: 07.09.2017
Сообщений: 14

Спасибо Рони, теперь понял куда копать, только вот не совсем понял условие (p < 1), почему 1. Я еще немного изменил код.
<!DOCTYPE html>
<html>
<head>
  <title>1Game</title>
  <meta charset="utf-8">
</head>
<body>
<h2>Управление игрой:</h2>
<p>Перемещение влево/вправо стрелки влево/вправо на клавиатуре, клавиша "пробел" - выстрел.</p>
<canvas id="canvas" width=600 height=400></canvas>
<script>
  var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 600;
canvas.height = 400;



var keys = {
  'Left' : 37,
  'Right' : 39,
  'Space' : 32
};

var keyDown = {};

var setKey = function (keyCode) {
  keyDown[keyCode] = true;
};

var clearKey = function (keyCode) {
  keyDown[keyCode] = false;
};

var isKeyDown = function (keyName) {
  return keyDown[keys[keyName]] == true;
};


window.onkeydown = function (e) {
  setKey(e.keyCode);
};

window.onkeyup = function (e) {
  clearKey(e.keyCode);
};


var drawRect = function (x, y, sizeX, sizeY, color) {
  ctx.beginPath();
  ctx.rect(x, y, sizeX, sizeY);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.closePath();
};

var drawPlayer = function (x) {
  ctx.beginPath();
  ctx.rect(x, 395, 50, 5);
  ctx.rect(x+10, 390, 30, 5);
  ctx.rect(x+23, 385, 5, 5);
  ctx.fillStyle = "rgb(173, 105, 82)";
  ctx.fill();
  ctx.closePath();
};

var Destruction = function () {
  for(var i = 0; i < shots.length; i++) {
    for(var j = 0; j < ships.length; j++) {
      if(~~shots[i].y == ~~ships[j].y+5 && shots[i].x+5 >= ships[j].x && shots[i].x <= ships[j].x+10) {
        ships.splice(j, 1);
        shots.splice(i, 1);
        break;
      }
    }
  }
};
;
var shipsGeneration = function (time) {
  if( countShips > densityShips && ships.length < numberShips) {
    ships.push({
      t : speedShips*1000,//время падения от 3сек до 15сек
      ts : time,//время старта
      x : Math.random() * 590|0,
      y : 0
    });
    countShips = 0;
  }
  countShips++;

  for(var i = 0; i < ships.length; i++) {
    var s = ships[i], p = (time-s.ts)/s.t;
    if(p < 1)s.y = p*400|0;
    else {s.y= 0; s.ts = time ; s.t= speedShips*1000;
    s.x = Math.random() * 590|0;
    };

    drawRect(s.x, s.y, 10, 10, "rgb(22, 105, 67)");

  }
};

var shotsGeneration = function (frameTime) {
  if(isKeyDown('Space')) {
    var length = shots.length;
    if(length > 0) {
      if( (shots[length-1].y + 7) < 380) {
        shots.push({
          x : xPlayer+23,
          y : 380
        });
      }
    } else {
      shots.push({
        x : xPlayer+23,
        y : 380
      });
    }

  }

  for(var i = 0; i < shots.length; i++) {

    drawRect(shots[i].x, shots[i].y, 5, 5, "rgb(195, 55, 67)");
    shots[i].y -= (frameTime / 1000) * speedShots;
  }
};

var Player = function (frameTime) {
  if(isKeyDown('Left')) {
    xPlayer -= (frameTime / 1000) * speedPlayer;
  }
  if(isKeyDown('Right')) {
    xPlayer += (frameTime / 1000) * speedPlayer;
  }
  drawPlayer(xPlayer);
};

var ships = [];
var shots = [];
var densityShips = 0;
var xPlayer = 120;
var lastTime = 0;
var countShips = 0;

var speedPlayer = 200; // скорость передвижения игрока
var densityShips = 30; // плотность кораблей
var numberShips = 20; // количество кораблей
var speedShips = 15;
var speedShots = 150; // скорость пуль

var main = function (time) {
	//console.log(time);
  ctx.clearRect(0, 0, 600, 400);
  drawRect(0, 0, 600, 400, "rgb(36, 177, 219)");

  var startTime = time;
  var frameTime = time - lastTime;

  Destruction();

  shipsGeneration(time);

  shotsGeneration(frameTime);

  Player(frameTime);

  lastTime = startTime;

  requestAnimationFrame(main);
};

main();


</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2017, 22:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

malinovsky,
время падения 20 сек --- прошло 10сек 10/20 = .5 или 50% пути должно быть пройдено, весь путь 400px, 400 * .5 = 200px
прошло 20 сек -- 20/20 = 1 или 100% , 400 * 1 = 400px.
всё что больше 1 выходит за 400px , поэтому обнуляем данные.
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2017, 23:23
Интересующийся
Отправить личное сообщение для malinovsky Посмотреть профиль Найти все сообщения от malinovsky
 
Регистрация: 07.09.2017
Сообщений: 14

Теперь дошло, даже на бумажке посчитал (15605.45 - 605.45) / 15000 = 1, плохо у меня с математикой. А как мое изменение по установке скорости для игрока и пуль?
Дальше буду работать над столкновениями.
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2017, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

malinovsky,
https://learn.javascript.ru/js-animation
Ответить с цитированием
  #7 (permalink)  
Старый 09.09.2017, 07:13
Интересующийся
Отправить личное сообщение для malinovsky Посмотреть профиль Найти все сообщения от malinovsky
 
Регистрация: 07.09.2017
Сообщений: 14

Спасибо Рони, буду разбираться. А пока просто исправил условие столкновения и добавил удаление пуль улетевших за пределы канваса.
https://github.com/himbotop/first_ga...ster/script.js

Играть: https://himbotop.github.io/first_game_js/
Ответить с цитированием
  #8 (permalink)  
Старый 11.09.2017, 20:49
Интересующийся
Отправить личное сообщение для malinovsky Посмотреть профиль Найти все сообщения от malinovsky
 
Регистрация: 07.09.2017
Сообщений: 14

Rise,
ок, спасибо понял.

Последний раз редактировалось malinovsky, 11.09.2017 в 22:48.
Ответить с цитированием
  #9 (permalink)  
Старый 12.09.2017, 11:15
Интересующийся
Отправить личное сообщение для malinovsky Посмотреть профиль Найти все сообщения от malinovsky
 
Регистрация: 07.09.2017
Сообщений: 14

Rise,
Цитата:
надо на классах делать
как здесь: https://www.youtube.com/watch?v=ju09womACpQ ?
Ответить с цитированием
  #10 (permalink)  
Старый 13.09.2017, 20:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Rise,
спасибо за науку!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Игры на JavaScript Вовантуз Ваши сайты и скрипты 8 06.03.2018 20:39
Прошу совета по использованию ajax ogurchik AJAX и COMET 8 14.07.2015 11:14
Python-Ajax. Прошу совета pvgdrk AJAX и COMET 11 07.11.2012 17:45
Cоздаю сайт прошу совета Геворг Ваши сайты и скрипты 5 25.01.2011 14:51
Подстроить высоту страницы под юзера, прошу совета у гуру batonsu Events/DOM/Window 11 10.11.2010 19:39