Массив картинок на JS?

Question

[Хорь Обыкновенный]

Делаю игру на javascript. Необходимо создать массивом вертолеты в верхней части канваса. Создаю массив, который называю "enemy". Ввожу х, у, offset, margin. Получается, что отрисовывается только одна картинка. Подскажите, как сделать так, чтобы вверху плавали 10 врагов, заданных картинками. Если есть какой-либо другой способ, укажите на него пожалуйста. Заранее спасибо.

Comments

[Хорь Обыкновенный]

var gameField = document.getElementById("gameField");
var graphics = gameField.getContext("2d");

var m = 1;
var s = 30;
var tm;
var c = 3;
var b = 0;
var img = new Image();
var shipH = 80;
var shipW = 180;
var shipX = (gameField.width - shipW)/2;
var shipY = gameField.height - shipH;
var shipDx = shipW / 20;
var shipDirection = 0;
var rowsCount = 1;
var columsCount = 5;
var enemyMargin = 30;
var offsetX = 100;
var offsetY = 50;
var img2 = new Image();

var enemyW =30;
var enemyH=30;
var enemy=[];

function timer() {
graphics.clearRect(0, 0, 60, 60);
graphics.fillStyle = "#f6ff00";
graphics.font = "20px Century Gothic";

if (c === 1) {
s = 59;
m = m - 1;
if (s >= 10) {
graphics.fillText(m + ":" + s, 20, 20);
}
if (s < 10) {
graphics.fillText(m + ":" + "0" + s, 20, 20);
}
b = 2;
}

if (c === 3) {
if ((s > 0) && (m >= 0)) {
s = s - 1;
if (s >= 10) {
graphics.fillText(m + ":" + s, 20, 20);
}
if (s < 10) {
graphics.fillText(m + ":" + "0" + s, 20, 20);
}
}

if ((s === 0) && (m > 0)) {
c = 1;
if (s >= 10) {
graphics.fillText(m + ":" + s, 20, 20);
}
if (s < 10) {
graphics.fillText(m + ":" + "0" + s, 20, 20);
}
}

if ((s === 0) && (m === 0)) {
clearTimeout(tm);
clearTimeout(tm2);
}
}
if (b === 2) {
c = 3;
}
}

tm = setInterval(timer, 1000);

function drawImg() {
graphics.save();
graphics.rect(shipX, shipY, shipW, shipH);
graphics.clip();
graphics.drawImage(img, shipX, shipY, shipW, shipH);
graphics.restore();
img.src = 'ship.jpg';
}

function keyDownHandler(key) {
if (key.keyCode===37) {shipDirection = -1;}
if (key.keyCode===39) {shipDirection = 1;}
}

function keyUpHandler(key) {
if (key.keyCode===37) {shipDirection = 0;}
if (key.keyCode===39) {shipDirection = 0;}
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function moveShip() {
if (shipDirection === -1) {
shipX -= shipDx;
if(shipX <= 0) {
shipX = 0;
}
}
if (shipDirection === 1) {
shipX += shipDx;
if (shipX >= gameField.width - shipW) {
shipX = gameField.width - shipW;
}
}
}

function createEnemy() {
var k=0;
for (var i=0; i < rowsCount; i++)
{
for(var j=0;j < columsCount; j++)
{
enemy[k]=
{
x:j*(enemyW + enemyMargin)+offsetX,
y:i*(enemy + enemyMargin)+offsetY
};
k++;
}
}
}

function drawEnemy() {
for (var i = 0; i < enemy.length; i++) {
graphics.save();
graphics.rect(enemy[i].x, enemy[i].y, enemyW, enemyH);
graphics.clip();
graphics.drawImage(img2, enemy[i].x, enemy[i].y, enemyW, enemyH);
graphics.restore();
img2.src = 'enemy.jpg';
}
}

createEnemy();

function updateGameField() {
graphics.clearRect(100,0,gameField.width-100, gameField.height);
graphics.clearRect(0, 100, 100, gameField.height-100);
moveShip();
drawImg();
drawEnemy();
}
tm2 = setInterval (updateGameField, 10);

Answer 1

[twobomb]

Выложите код например на JSFiddle. Я попробовал его запустить, но ничего не произошло и начал жутко виснуть браузер. Поэтому решил написать простенький пример, но меня затянуло и просидел несколько часов за разработкой. Вот что получилось и код. Можете посмотреть как рисуется из массива объекты но для начала хочу сказать.
Во первых в любой игре должна быть основная функция у меня это gameLoop у вас это похоже updateGameField. В ней вызываются основные методы рисования и обработки физики. Иногда кстате разделяют делают 1 метод для рисования например на 60fps, а второй для обработки физики на 200fps если нужно точные просчеты( быстрые полеты пуль и т.п.).
Во вторых, вот такого tm2 = setInterval (updateGameField, 10) быть не должно, я вообще считаю лучше бы эту функцию в javascript не добавляли многие не понимают ее обратную сторону. Вы вообще выставили 10мс а это 100 фпс! Если ваша машина в какой-то момент не успеет обработать хотя 1 раз, то вызовется функция еще раз и одновременно будет выполнять 2, 3, 10 функций до тех пор пока у вас все не зависнет, javascript не будет ждать он просто будет вызывать ее по кд поэтому для игровой функции нужно использовать в крайнем случае setTimeout(updateGameField,1000/60/*60фпс*/); в конце функции. Но давно уже появилась отличная оптимизированная функция requestAnimationFrame(gameLoop); которая будет стараться поддерживать 60 fps вашей игры. Рекомендую использовать только ее.
В третьих рекомедую почитать статьи о созадании игр, проблемы разработки, Delta-time и независимость частоты кадров, коллизии и т.п.
Все это необходимо почти в каждой игре, поэтому это нужно понимать чтобы смочь написать хоть что-то.

Comments

[Хорь Обыкновенный]

Cпасибо большое что настолько мне помогли, но лично у меня Ваш пример завис на 62.5% загрузки

[twobomb]

Хорь Обыкновенный, Странно у меня во всех браузерах грузится нормально. Ну вот без загрузки текстур, будут на ходу грузиться пример и код.
P.S. Возможно одна из текстур находится на хостинге который блокируется вашим провайдером или почему то к ней нет доступа, я первое попавшееся в нете брал.
Посмотрите в консоли нет ли ошибок типа

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

[Хорь Обыкновенный]

twobomb, в новом примере вообще отрисовывается только задний фон

[twobomb]

Хорь Обыкновенный, Ошибки есть в консоли?