- •Содержание
- •Создание html5игр Введение
- •1.1 Преимущества html5
- •1.2 Работа с медиа элементами
- •1.3 Работа с графическими элементами
- •1.4 Ход работы
- •Варианты заданий
- •Вопросы для самоконтроля
- •Источники
- •Создание уровней игры с помощью udk Введение
- •2.1 Построение геометрии
- •2.2 Наложение текстур
- •2.3 Модель освещения
- •2.4 Статические объекты в udk
- •Варианты заданий
- •Вопросы для самоконтроля
- •3. Создание скриптов на основе udk
- •3.1 Общий обзор Kismet
- •3.2 Написание простейшего мувера
- •3.3 Создание логики ии
- •Варианты заданий
- •4.2 Настройка камеры в xna
- •4.3 Загрузка модели в игру
- •Варианты заданий
- •Вопросы для самоконтроля
- •Источники
1.4 Ход работы
В качестве задания создадим простейшую игру змейка, для этого мы должны сделать следующие шаги:
- создать форму, для отображения игры;
- создать переменные для определения состояния змейки и основных констант;
- создать функции для отображения змейка
- создать функции для основной логики игры;
- создать основной игровой цикл;
- обеспечить взаимодействие с пользователем;
- добавить мелиа контент;
- проинициализировать игру.
Для начала создадим форму, на которой будет отображаться игра:
<!doctype html>
<head>
<title>Snake</title>
</head>
<body onload="init()">
<input type="button" value="Play/Pause" onclick="play()"><br />
<canvas id="canvas" style="border: solid 1px red;" width="600" height="600">
</canvas>
</body>
Создадим основные внешние переменные, используемые для написания скрипта:
var snakeColor = "rgb(0, 0, 0)"; //Цвет змейки
var foodColor = "rgb(0, 255, 0)"; //Цвет еды змейки
var ctx; //Объект context
var gridSize = 20; //Размер клетки
var snake; //Очередь элементов змейки
var food = []; //Координаты еды змейки
var direction; //Направление змейки
var changex = [-1, 0, 1, 0]; //Изменение координаты x в зависимости от направления
var changey = [0, -1, 0, 1]; //Изменение координаты y в зависимости от направления
var paused; //Состояние игры
var speed = 100; //Скорость перемещения змейки
var clock; //Объект таймера
Создание функций отрисовки элементов
function drawSnake()
{
ctx.fillStyle = snakeColor;
ctx.fillRect(snake[snake.length - 1][0] * gridSize, snake[snake.length - 1][1] * gridSize, gridSize, gridSize);
}
function drawFood()
{
ctx.fillStyle = foodColor;
ctx.fillRect(food[0] * gridSize, food[1] * gridSize, gridSize, gridSize);
}
function delPart(x, y)
{
ctx.fillStyle = bckColor;
ctx.clearRect(x * gridSize, y * gridSize, gridSize, gridSize);
}
Функция принадлежности точки телу змейки
function dotBelongSnake(x, y)
{
res = false;
for(i = 0; i < snake.length && !res; ++i)
{
res = x == snake[i][0] && y == snake[i][1];
}
return res;
}
Добавление элементов, на поле
function setX(x)
{
return x >= 0 ? x % (ctx.canvas.width / gridSize) : x + (ctx.canvas.width / gridSize);
}
function setY(y)
{
return y >= 0 ? y % (ctx.canvas.height / gridSize) : y + (ctx.canvas.height / gridSize);
}
function addFood()
{
do
{
food[0] = Math.floor(Math.random() * (ctx.canvas.height / gridSize));
food[1] = Math.floor(Math.random() * (ctx.canvas.height / gridSize));
}while(dotBelongSnake(food[0], food[1]));
drawFood();
}
Проверка змейки на столкновение
function crash()
{
res = false;
for(i = 0; i < snake.length - 1 && !res; ++i)
{
res = snake[i][0] == snake[snake.length - 1][0] && snake[i][1] == snake[snake.length - 1][1];
}
return res;
}
Управление состоянием игры
function play()
{
if(paused)
{
clock = setInterval(movement, speed);
}
else
{
clearInterval(clock);
}
paused = !paused;
}
Основнойигровойцикл
function movement()
{
snake.push([setX(snake[snake.length - 1][0] + changex[direction]), setY(snake[snake.length - 1][1] + changey[direction])])
if(!dotBelongSnake(food[0], food[1]))
{
delPart(snake[0][0], snake[0][1]);
snake.shift();
}
else
{
addFood();
}
if(crash())
{
play();
alert("Game Over;");
clear();
init();
}
drawSnake();
}
Управлениеигрой
function changeDirection(event)
{
if(!paused)
{
code = 0
if(event == null)
{
code = window.event.keyCode;
}
else
{
code = event.keyCode;
}
switch(code)
{
case 37:
if(direction != 2)
{
direction = 0;
}
break;
case 38:
if(direction != 3)
{
direction = 1;
}
break;
case 39:
if(direction != 0)
{
direction = 2;
}
break;
case 40:
if(direction != 1)
{
direction = 3;
}
break;
}
}
}
Инициализацияигры
function init()
{
canvas = document.getElementById('canvas');
if (canvas.getContext)
{
snake = [[0, 0]];
direction = 2;
paused = true;
ctx = canvas.getContext('2d');
document.onkeydown = function (event)
{
changeDirection(event);
};
addFood();
return true;
}
else
{
alert(“Canvas isn’t supported!");
return false;
}
}