Пятница, время расслабляющих статей… Я решил написать эту статью благодаря хабровчанину 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();
}
function updateResources() {
document.getElementById("gold").innerHTML = gold;
document.getElementById("pop").innerHTML = pop;
document.getElementById("treasuryGuard").innerHTML = treasuryGuard;
}
<button id="treasury" onclick="Build('Treasury')" class="interface" style="top:250px; left:20px">Build treasury: 20 gold</button>
function Build(Structure) {
if (Structure==="Wall" || Structure ==="Tower") {
if (gold >= costWall && buildLevelD == 0) {
buildLevelD = buildLevelD*1 + 1;
gold = gold - costWall;
redraw = 1;
whatDraw = "Wall";
updateResources();
return true;
}
if (gold >= costTower && buildLevelD == 1) {
buildLevelD = buildLevelD*1 + 1;
gold = gold - costTower;
redraw = 1;
whatDraw = "Tower";
updateResources();
return true;
}
}
if (Structure==="Home") {
if (gold >= Math.pow(costHome,(buildLevelH*1 + 1))) {
gold = gold - Math.pow(costHome,(buildLevelH*1 + 1));
redraw = 1;
whatDraw = "Home";
buildLevelH = buildLevelH*1 + 1;
updateResources();
return true;
}
}
if (Structure==="Treasury") {
if (gold >= Math.pow(costTreasury,(buildLevelTreasury*1 + 1))) {
gold = gold - Math.pow(costTreasury,(buildLevelTreasury*1 + 1));
redraw = 1;
whatDraw = "Treasury";
buildLevelTreasury = buildLevelTreasury*1 + 1;
updateResources();
return true;
}
}
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;
}
function saveGame() {
localStorage.setItem('gold', gold);
localStorage.setItem('pop', pop);
localStorage.setItem('buildLevelD', buildLevelD);
localStorage.setItem('buildLevelH', buildLevelH);
localStorage.setItem('treasuryGuard', treasuryGuard);
localStorage.setItem('buildLevelTreasury', buildLevelTreasury);
}
function loadGame() {
gold = localStorage.getItem('gold');
pop = localStorage.getItem('pop');
buildLevelD = localStorage.getItem('buildLevelD');
buildLevelH = localStorage.getItem('buildLevelH');
treasuryGuard = localStorage.getItem('treasuryGuard');
buildLevelTreasury = localStorage.getItem('buildLevelTreasury');
composite();
updateResources();
}
К сожалению, не доступен сервер mySQL