Rise of Lost Empires - новая RPG от Gameloft Cylinder - новое слово в жанре Puzzle?
Июн 07

Уроки iPhone SDK: (Часть 2) Dashcode Invader: создаем игру с помощью Dashcode

iPhone SDK - Уроки | Автор Artem Add comments

В этом уроке мы продолжим (первая часть) работу над простейшей игрой типа “космические пришельцы”. Нам предстоит внести в неё значительные изменения, о смысле которых чуть ниже.

Первым делом нужно реструктуризировать CSS код так, чтобы основная часть относящихся к игре объектов размещалась внутри элемента “div“. Так будет проще добавлять игровые элменты — внося их в контейнер “div” посредством “addChild“.

Отредактируйте “index.html” так, как показано ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>GameShip</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.6">
    <meta name="apple-mobile-web-app-capable" content="YES">
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
<link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="Parts/utilities.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/setup.js" charset="utf-8"></script>
    <script type="text/javascript" src="main.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Text.js" charset="utf-8"></script>
</head>
<body onload="load();">
  <div id="content">
    <div id="background" class="background"
     ontouchmove="onTouchMoveHandler(event)" ontouchstart="onTouchStartHandler(event)"
     onmousemove="onMouseMoveHandler(event)">
      <div id="playerShip" class="playerShip"
        ontouchmove="onTouchMoveHandler(event)" ontouchstart="onTouchStartHandler(event)"
        onmousemove="onMouseMoveHandler(event)">
      </div>
    </div>
  </div>
</body>
</html>

Основным контейнером иерархии является “content“ div. Внутри него размещается “conyent” div”, background” div содержит изображение фона (таблица стилей будет представлена ниже), а также “playerShip” div.
Позже мы добавим к игре новые объекты (пули и врагов к “background” div).

Файл “main.css” редактируется следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body {
margin: 0px;
min-height: 356px;
font-family: Helvetica;
}

.background {
position: absolute;
width: 320px;
height: 358px;
left: 0px;
top: 0px;
background-image: url(Images/texture.png);
}

.playerShip {
width: 64px;
height: 64px;
position: absolute;
left: 131px;
background-image: url(Images/player.png);
top: 282px;
}

#content {
position: relative;
-webkit-margin-top-collapse: separate;
-webkit-margin-bottom-collapse: separate;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
width: auto;
min-height: 356px;
height: auto;
}

Изображения, ранее внедренные в html, мы назначили фоном для таблиц стилей контейнера div.

Внесем изменения и в файл “main.js“, добавив новую функцию “onMouseMoveHandler()“. Она связана с событиями “onmousemove“, имеющими место в контейнерах div для фона и “playerShip“. Цели, которые мы этим преследуем, — отладка и портативность. Одно из преимуществ разработки приложений  iPhone через Dashcode заключается в том, что такое приложение поддерживается компьютерным веб-браузером, и устройством iPhone (с мобильным браузером Safari). В прошлом уроке мы предусмотрели поддержку исключительно специфического для iPhone события “ontouchmove“. Добавив нечто равноценное (в данном случае “onmousemove“), получаем аналогичный результат в стандартном веб-браузере. Обратите внимание: при внедрении игнорируется аспект перетаскивания “drag“, поэтому в веб-браузере нет необходимости щелкать на экране (касание) для перемещения корабля, но при желании можно устанавливать флаги для случаев, когда пользователь нажимает и отпускает кнопку мыши.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function load()
{
dashcode.setupParts();
}

function onTouchStartHandler(event)
{
event.preventDefault();
}

function onTouchMoveHandler(event)
{
var ship=document.getElementById('playerShip');
ship.style.left=
(event.changedTouches[0].pageX-ship.style.width)+"px";
event.preventDefault();
}

function onMouseMoveHandler(event)
{
var ship=document.getElementById('playerShip');
ship.style.left=
(event.pageX-ship.style.width)+"px";
}

Новая функция “onMouseMoveHander” во многом напоминает “onTouchMoveHandler“. При аналогичных действиях разница в том, что позиция курсора мыши здесь определяется посредством “event.pageX“.

Результат в веб-браузере смотрим ниже:

Продолжение следует.

Исходный код скачать можно [здесь]

Текст оригинальной статьи на английском языке [здесь]

Уважаемые читатели, данный материал был переведен и подготовлен к публикации проектом LookApp.ru, при публикации на другом сайте ссылка на LookApp.ru обязательна.

1 звезда2 звезд3 звезд4 звезд5 звезд (Оцените приложение)
Загрузка ... Загрузка ...


One Response to “Уроки iPhone SDK: (Часть 2) Dashcode Invader: создаем игру с помощью Dashcode”

  1. 1. KaDIF Says:
    Июнь 8th, 2009 at 07:09

    Доброго вам времени суток…
    Я извиняюсь за то что не по теме, но у меня такой вопрос
    Можно ли в Obj-C работать с dll…и как это сделать? заранее спасибо

Оставьте комментарий