P.S. Не поместился в первом посту код "Максимальный размер поста 10 000 символов". Сам код вот:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Level</title>
.....
Подключаемые js в архиве можно посмотреть
.....
<style>
....
</style>
<script>
var assets = [];
var betty;
var stage;
var spriteSheet;
function init()
{
var manifest = [
{src: "sheet.json", id: "sheet1", type: "spritesheet"}
];
var loader = new createjs.LoadQueue(true, "./");
loader.on("fileload", handleFileLoad);
loader.on("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(event)
{
assets.push(event);
}
function handleComplete()
{
for (var i = 0; i < assets.length; i++)
{
var event = assets[i];
var result = event.result;
switch (event.item.id)
{
case 'sheet1':
spriteSheet = result;
break;
}
}
initScene();
}
var GameStates = {
RUN_SCENE:0,
MAIN_MENU:10,
LEVEL_SELECT_MENU:20,
GAME:30,
LEVEL_COMPLETE:40,
LEVEL_LOSE:50,
}
var GameStateEvents = {
MAIN_MENU:'main menu event',
LEVEL_SELECT:'level select event',
LEVEL_COMPLETE:'level complete event',
MAIN_MENU_SELECT:'game menu select event',
GAME:'game event'
}
var currentGameStateFunction;
var stars = [];
stars[0] = 0;
function changeState(state)
{
switch (state) {
case GameStates.MAIN_MENU:
currentGameStateFunction = 1;
break;
case GameStates.LEVEL_SELECT:
currentGameStateFunction = gameStateLevelSelect;
break;
case GameStates.GAME:
currentGameStateFunction = Game1;
break;
case GameStates.LEVEL_COMPLETE:
currentGameStateFunction = 4;
break;
case GameStates.RUN_SCENE:
currentGameStateFunction = 5;
break;
}
}
function initScene()
{
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
changeState(GameStates.LEVEL_SELECT);
for(var l = 1; l < 3 * 4 * 5; l++){
stars[l] = -1;
}
stars[0] = 1;
}
function gameStateLevelSelect()
{
stage = new createjs.Stage(document.getElementById("testCanvas"));
// levelthumb = new createjs.Sprite(spriteSheet, "level4");
// levelthumb.x = 200;
// levelthumb.y = 400;
// stage.addChild(levelthumb);
var p = new createjs.Container();
var i, btn, btnBounds, frame, levelNumber;
var text1;
var level = 0;
var col = 0;
var hGap = 34;
var vGap = 30;
var xPos = 50;
var yPos = 60;
var gameLevel = 2;
//var stars = 3;
// stars[0] = 1;
var level;
//console.log(stars);
var rowLength = 60 * 3 + 20 * (3 - 1);
var leftMargin = (320 - rowLength) / 2 + 60 / 2;
var colHeight = 60 * 4 + 20 * (4 - 1);
var topMargin = (480 - colHeight) / 2 + 60 / 2;
for(var k = 0; k < 5; k++)
{
for(var i = 0; i < 3; i++){
for(var j = 0; j < 3; j++){
level = i + 1;
//console.log(stars[i]);
levelNumber = k * (3 * 3) + j * 3 + i;
//k * (3 * 3) + j * 3 + i;
frame = stars[levelNumber] != -1 ? 'level' + stars[levelNumber] : 'lock';
// console.log(levelNumber);
//frame
btn = new createjs.Sprite(spriteSheet, frame);
btnBounds = btn.getBounds();
btn.levelNumber = levelNumber;
btn.x = k * 320 + leftMargin + i * (60 + 20);
btn.y = topMargin + j * (60 + 20);
btn.mouseEnabled = stars[i] != -1;
btn.on('click', onLevelButtonClick);
p.addChild(btn);
}
}
}
stage.addChild(p);
}
function Game1()
{
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
xPos = 100;
yPos = 100;
let hw1 = new createjs.Text("Get 1 star", "48px Arial", "#ff8800");
hw1.textAlign = 'center';
hw1.textBaseline = 'top';
width = hw1.getMeasuredWidth() + 30;
height = hw1.getMeasuredHeight() + 20;
hw1.x = xPos+width / 2;
//width / 2;
hw1.y = yPos+10;
//10;
background = new createjs.Shape();
background.x = xPos;
background.y = yPos;
background.graphics.beginStroke("#000").beginFill("#ccc").drawRect(0,0,width,height);
stage.addChild(background,hw1);
background.on('click', onGet1Star);
xPos = 100;
yPos = 200;
let hw2 = new createjs.Text("Get 2 star", "48px Arial", "#ffff00");
hw2.textAlign = 'center';
hw2.textBaseline = 'top';
width = hw2.getMeasuredWidth() + 30;
height = hw2.getMeasuredHeight() + 20;
hw2.x = xPos+width / 2;
//width / 2;
hw2.y = yPos+10;
//10;
background2 = new createjs.Shape();
background2.x = xPos;
background2.y = yPos;
background2.graphics.beginStroke("#000").beginFill("#ccc").drawRect(0,0,width,height);
stage.addChild(background2,hw2);
background2.on('click', onGet2Star);
xPos = 100;
yPos = 300;
let hw3 = new createjs.Text("Get 3 star", "48px Arial", "#00ff00");
hw3.textAlign = 'center';
hw3.textBaseline = 'top';
width = hw3.getMeasuredWidth() + 30;
height = hw3.getMeasuredHeight() + 20;
hw3.x = xPos+width / 2;
//width / 2;
hw3.y = yPos+10;
//10;
background3 = new createjs.Shape();
background3.x = xPos;
background3.y = yPos;
background3.graphics.beginStroke("#000").beginFill("#ccc").drawRect(0,0,width,height);
stage.addChild(background3,hw3);
background3.on('click', onGet3Star);
// let hw2 = new createjs.Text("Get 2 star", "48px Arial", "#ffff00");
// hw2.on('click', onGet2Star);
// stage.addChild(hw2);
// hw2.x = 100;
// hw2.y = 150;
// let hw3 = new createjs.Text("Get 3 star", "48px Arial", "#00ff00");
// hw3.on('click', onGet3Star);
//stage.addChild(hw3);
// hw3.x = 100;
//hw3.y = 300;
}
function onGet1Star(e)
{
console.log("Get 1 star");
stars[level] = Math.max(stars[level], 2);
//stars[level] = 2;
if(stars[level + 1] != undefined && stars[level+1]==-1)
{
console.log("test");
stars[level+1] = 1;
}
changeState(GameStates.LEVEL_SELECT);
}
function onGet2Star(e)
{
console.log("Get 2 star");
stars[level] = Math.max(stars[level], 3);
//stars[level] = 3;
if(stars[level + 1] != undefined && stars[level+1]==-1)
{
stars[level+1] = 1;
}
// console.log(level);
changeState(GameStates.LEVEL_SELECT);
}
function onGet3Star(e)
{
console.log("Get 3 star");
stars[level] = 4;
//Math.max(stars[level], 1);
// stars[level] = 4;
if(stars[level + 1] != undefined && stars[level+1]==-1)
{
stars[level+1] = 1;
}
changeState(GameStates.LEVEL_SELECT);
}
function onLevelButtonClick(e)
{
level = e.currentTarget.levelNumber;
console.log(level);
changeState(GameStates.GAME);
}
function tick(e)
{
currentGameStateFunction(e);
stage.update();
}
</script>
</head>
<body onload="init();">
<div>
<canvas id="testCanvas" width="960" height="540"></canvas>
</div>
</body>
</html>