4. Создание простой игры

С помощью библиотеки createjs можно создавать игры html5. На канале этого разработчика наткнулся на процесс создания игры. Все понятно и просто, только на испанском :).

Структура игры состоит из главного файла index.html, и файлов adobe animate: скрипт javascript и исходник с ресурсами файл fla. Вот сама игра и затем код для ознакомления скрипта файла index.html (ссылка на игру):

 

Используемые переменные:

var canvas, stage;
var sky, background1, background2;
var menu;
var player;
var txt_score;
var over;
var containerPlayer;
var containerObjects;
var isStarted = false;
var oldtime;
var mouseX, mouseY;
var enemies = new Array();
var items = new Array();
var tweenGame = {};
var MAX_VX = -160;
var currentVx = MAX_VX;
var MAX_ENEMY_TIME = 5000;
var currentEnemyTime = MAX_ENEMY_TIME;
var debugCollision = true;
var score = 0;
var poolEnemies = new Array();
var poolAppleRed = new Array();
var poolAppleGreen = new Array();
var poolChiken = new Array();

function init() {
 canvas = document.getElementById("canvas");
 stage = new createjs.Stage(canvas);
 handleComplete();
}

function handleComplete() {
 sky = new lib.Sky();
    sky.cache(0,0,1280,1280);
 stage.addChild(sky);
 
 background1 = new lib.BackgroundParallax1();
    background1.cache(0,0,1280*2,1280);
 background2 = new lib.BackgroundParallax2();
    background2.cache(0,0,1280*2,1280);
 stage.addChild(background2);
 stage.addChild(background1);
 
 menu = new lib.Menu();
 menu.btn_play.on("click", onPlayClick);
 stage.addChild(menu);
 
    containerObjects = new createjs.Container();
    stage.addChild(containerObjects);
    
    containerPlayer = new createjs.Container();
    stage.addChild(containerPlayer);
    
 player = new lib.mc_cuy();
 player.visible = false;
 containerPlayer.addChild(player);
    
    player.isDie = false;
    
    setCollision(player, -30, -30, 60, 60);
 
 stage.update();
 createjs.Touch.enable(stage);
 stage.enableMouseOver(); 
 
 stage.on("stagemousemove", onStageMouseMove);
 
 //enterFrame
 createjs.Ticker.setFPS(lib.properties.fps);
 createjs.Ticker.addEventListener("tick", update);
 
 oldtime = createjs.Ticker.getTime();
    
    txt_score = new createjs.Text("0", "80px GoodDog", "#ff7700");
    txt_score.x = 20;
    txt_score.visible = false;
    stage.addChild(txt_score);
    
    over = new lib.Over();
    over.btn_play.on("click", onResetGame);
    over.visible = false;
    stage.addChild(over);
    
    var k;
    for (k=0; k<6 -1280="" -25="" -30="" -50="" -="" .call="" .wait="" 0="" 1000="" 1280="" 1="" 3="" 50="" 60="" 620="" _container.addchild="" _container.setbounds="" _h="" _w="" _x="" _y="" ath.random="" background1.x="background1.x" background2.x="background2.x" beginfill="" bounds.intersects="" bounds="player.getTransformedBounds();" code="" container="" containerobjects.addchild="" containerobjects.removechild="" createjs.graphics="" createjs.shape="" createjs.tween.get="" createjs.tween.removetweens="" currentenemytime="" currentvx="" dead="" debugcollision="" delta="" drawrect="" else="" enemies.length="" enemies.push="" enemies.splice="" enemies="" enemy.gettransformedbounds="" enemy.gotoandplay="" enemy.stop="" enemy.vx="" enemy.vy="" enemy.x="" enemy.y="" enemy="enemies[k];" evt="" for="" function="" g="" green="" h="" high="" idle="" if="" isstarted="false;" item.cache="" item.gettransformedbounds="" item.toremove="" item.type="=" item.vx="" item.vy="" item.x="" item.y="" item="" items.length="" items.push="" items.splice="" items="" k--="" k="" lib.mc_apple="" lib.mc_apple_green="" lib.mc_chicken="" lib.mc_enemy="" low="" math.floor="" math.random="" menu.visible="false;" mousex="" mousey="" move="" oldtime="createjs.Ticker.getTime();" oncreateenemy="" oncreateitem="" onplayclick="" onresetgame="" onshowoverscreen="" onstagemousemove="" onstopallenemies="" over.visible="true;" player.gotoandplay="" player.isdie="true;" player.visible="true;" player.x="" player.y="" poolapplegreen.push="" poolapplered.push="" poolchiken.push="" poolenemies.push="" random="" randomintinc="" red="" return="" score="" sec="" setcollision="" shape.alpha="0;" shape="" stage.update="" tweengame="" txt_score.text="score" txt_score.visible="true;" type="=" update="" var="" w="" x="" y="">