Пятница, время расслабляющих статей… Я решил написать эту статью благодаря хабровчанину TheShock и благодаря человеку, написавшему в своё время LOOT-RPG.
Как собственно я делал игру, можно прочитать под катом.
Открыв курс по JS на codeacademy, я дошел до простых структур данных и мне наскучило. А что если не выполнить скучные задания, а сделать свою собственную игру с блекджеком и девицами, примерно как в первом примере? Сказано — сделано…
Надо было определиться с жанром. Больше всего на свете я люблю стратегии, чуть меньше — RPG. Значит выбираем стратегии. Что у нас будет? Будет город и его менеджмент. Что-то в духе Townsmen/Travian.
Для начала нам нужен город. Рисуем что-нибудь в духе пустого пейзажа города Heroes или пустого пейзажа неотсроенного города Travian.
Объявляем переменные и инициируем их:
var gold = 20;
var pop = 2;
var buildLevelD = 0;
var buildLevelH = 0;
var buildLevelTreasury = 0;
var treasuryGuard = 0;
updateResources();
Вуаля, в нашем городе начальное население, какая-никакая казна, а также нулевой уровень трех доступных построек и ноль городовых. Поскольку наша игра будет не пошаговой, а в режиме реального времени, то зададим таймер, по которому у нас будет прирост ресурсов:
setInterval(resourcesTimer, 30000);
function resourcesTimer() {
gold = gold*1+pop*1;
if (pop < 2*Math.pow((buildLevelH*1+3),2)) {
pop = pop*1+1;
}
if (treasuryGuard > 0) {
if (gold - treasuryGuard * treasuryGuardPricePayroll >= 0) {
gold = gold - treasuryGuard * treasuryGuardPricePayroll;
} else {
treasuryGuard = 0;
}
}
updateResources();
}
Внимательные читатели обратят внимание на updateResources() и вот его код:
}
Отрисовка сделана на Canvas. Это, пожалуй, одна из немногих вещей, которая не пахнет нафталином во всем этом коде. Однако код может многим показаться странным, хоть и неоднократно приведен в разных местах в качестве примера:
function composite() {
imagesLoaded = imagesLoaded*1 + 1;
if (imagesLoaded > 1) {
// composite now
//ctx.globalAlpha = 1.00;
ctx.drawImage(img1, 0, 0); //draw background
ctx.drawImage(img2, 0, 0); //draw sawmill
ctx.drawImage(img3, 10, 40); //draw gold icon
ctx.drawImage(img4, 10, 80); //draw pop icon
ctx.drawImage(img8, 0, 0); //draw wishing well
if (buildLevelD > 0) {
// draw back piece of wall
ctx.drawImage(img6_1, 0, 0);
}
if (buildLevelH > 0 && buildLevelH < 10) {
// draw houses
ctx.drawImage(img5, 0, 0);
}
if (buildLevelH > 10) {
// draw more houses
ctx.drawImage(img5_1, 0, 0);
}
if (buildLevelD > 1) {
// draw castle
ctx.drawImage(img7, 0, 0);
}
if (buildLevelD > 0) {
// draw front piece of wall
ctx.drawImage(img6_2, 0, 0);
}
if (buildLevelTreasury > 0) {
// draw treasury
ctx.drawImage(img9, 0, 0);
}
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
Сохранения храним в локальном хранилище. Честно, это удобнее, чем работать с куками, но и менее универсально. Хотя с момента, когда я переписал большую часть графика на Canvas, это стало не принципиальным: старые браузеры одинаково не поддерживают и Canvas и localStorage.
Этой статьей я хотел показать, что если вашей давней мечтой является создание пусть простенькой, но своей игры (и не «3 в ряд»), то всё в ваших руках. Я выбрал JavaScript для этой задачи, потому что браузер есть почти везде, а значит почти везде я смогу играть в свою игру, и мне для этого не потребуется подключение к интернету. Браузер стал универсальной средой исполнения, а не просто программой для отображения контента. Благодаря небольшим переделкам, игру можно стилизовать под те или иные требования, добавить тот или иной функционал, расширить как угодно. Главное — это ваша фантазия, а значит всё в ваших руках. Когда я создавал свой проект, я старался как можно дольше не использовать зависимости, и на текущий момент моя игра пока не использует никаких внешних зависимостей.
P.S.: размещая проект на гитхабе и устанавливая метки (labels), я натолкнулся на проект, где автор кроме того как программирует, еще и обладает художественным вкусом, однако общая идея похожа.
