Плохо работают в createjs разблокировка следующих уровней и добавление звезд. Как исп
Вложений: 2
Здравствуйте, делаю меню игры где пользователю предлагается выбрать уровень. После завершения одной миссий автоматически откроется следующая а к предыдущей добавятся звезды. Максимальное количество звезд на каждый уровень три. Вообщем я пытаюсь повторить этот урок https://www.emanueleferonato.com/201...d-by-phaser-3/, только отличие заключается в том что в уроке приводится пример кода Phaser, я использую для работы createjs.
Все что присутствуют в уроке я также собираюсь повторить, а именно несколько десятков уровней и несколько листов для смены группы уровней. Теперь к самой проблеме когда я пытаюсь открыть любой уровень то иногда происходят следующие. Заметны косяки например открываются сразу несколько уровней. Вот пример картинки как это происходит. Вложение 4711 Как исправить, чтобы открывался сначала верхний ряд полностью, потом средний, потом нижний дальше переходило на следующий лист и так пока не закончатся все уровни. Игры пока нет, поэтому я создала кнопки чтобы можно получить звезду выбрав при желании “ Get 1 star ”, “ Get 2 star ” и “ Get 3 star ”. Надеюсь мне удалось объяснить в чем заключается моя проблема, на всякий случай прикладываю исходники “Архив для скачивания” Вложение 4712 и сам код. P.S. Файл с картинкой уровней я поместила в json, разумеется это не единственный файл по мере дальнейшего написания игры список json будет пополняться. |
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>
|
Где мне теперь задать вопрос, если здесь никто не знает?
|
| Часовой пояс GMT +3, время: 09:38. |