Phaser로 제작 된 "1 + 2 = 3" HTML5 게임이 업데이트 되고 주석문도 달았습니다.

2 년 전 Phaser를 사용하여 1 + 2 = 3 게임의 100 줄 html5 프로토 타입을 게시했습니다.

몇 달 후, 프로토 타입을 선택하고, 일종의 스토리와 132 레벨 (예, 132)을 추가하고 Softgames가 후원 한 Matt Vs Math를 발표했습니다.

프로토 타입은 주석 처리되지 않은 상태로 남아 있었고 일부 독자는 대부분 내가 어려움이 증가하는 무작위 질문을 생성 할 수 있었던 방법을 알기 위해 주로 의견을 추가하라고했습니다.

오늘 필자는 최신 Phaser CE 버전 (2.8.5)으로 업데이트 된 원본 프로토 타입을 다시 작성하고 게임이 끝나면 다시 시작할 수있는 게임을 다시 작성합니다.

표시된 식에 따라 1, 2 또는 3의 버튼을 클릭하거나 터치하십시오. 너 가장 좋은 점수는 뭐니? 모바일 장치가있는 경우 이 링크에서 직접 재생할 수 있습니다.

마지막으로 이것은 소스 코드이며 주석을 달고 업데이트합니다.

// the game itself

var game; 

var gameOptions = {

// 합계의 최대 길이

maxSumLen: 5, 

// 높은 점수를 저장하는 데 사용되는 로컬 저장소 이름

localStorageName: "oneplustwo",

// 질문에 대답 할 수있는 시간 (밀리 초)

timeToAnswer: 3000,

// 난이도를 높이기 위해 필요한 점수

nextLevel: 400

}

// 일단 창이 완전히 로드되면 ...

window.onload = function() {

// CANVAS 렌더링을 사용하여 500x500 픽셀 게임 만들기

game = new Phaser.Game(500, 500, Phaser.CANVAS);

// "PlayGame" 상태를 만들고 시작하십시오.

game.state.add("PlayGame", playGame, true);

}

// "PlayGame"상태

var playGame = function(game){}

playGame.prototype = {

// 사전로드 상태

    preload: function(){

        // 모든 콘텐츠를 표시하면서 가능한 한 가장 큰 창 영역을 게임 커버 만들기

        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

        game.scale.pageAlignHorizontally = true;

        game.scale.pageAlignVertically = true;

// 초점을 잃을 때 게임을 일시 중지하지 않기.

game.stage.disableVisibilityChange = true; 

        // 배경색 변경

        game.stage.backgroundColor = 0x444444;

// preloading images

game.load.image("timebar", "timebar.png"); 

// preloading a spritesheet where each sprite is 400x50 pixels

game.load.spritesheet("buttons", "buttons.png", 400, 50);

 

    },

// when the state has been created...

    create: function(){

// it's not game over yet...

this.isGameOver = false; 

// current score is set to zero

this.score = 0;

// we'll also keep track of correct answers

this.correctAnswers = 0;  // topScore는 로컬 저장소에 이전에 저장된 값을 가져오고 그렇지 않으면 0을 가져옵니다.

this.topScore = localStorage.getItem(gameOptions.localStorageName) == null ? 0 : localStorage.getItem(gameOptions.localStorageName);

// sumsArray는 가능한 모든 질문이있는 배열입니다.

this.sumsArray = []   // 매번 무작위로 질문을 던지기보다는 모든 가능한 질문을 배열에 저장하는 것이 // 더 쉬워졌으며 매번 무작위로 질문을 뽑았습니다. 가능한 모든 질문을 생성하는 // 알고리즘이 필요합니다.

// 루프로 가능한 모든 질문을 만들기 시작하십시오.  // 1 (1 + 1과 같은 연산자 만)에서 maxSumLen // (이 경우 5, 1 + 1 + 1 + 1-1-1과 같이)까지 다양합니다.

for(var i = 1; i < gameOptions.maxSumLen; i++){

// sumsArray [i]를 3 개의 빈 배열로 정의

this.sumsArray[i]=[[], [], []];

// 각 합계의 가능한 결과 인 1에서 3으로 반복

for(var j = 1; j <= 3; j++){ 

// buildTrees는 스크립트의 핵심이며, 설명되어 있습니다.

this.buildThrees(j, 1, i, j);

}

}

// 가능한 모든 조합을 볼 수 있습니다.

console.log(this.sumsArray);

// questionText는 질문을 표시 할 텍스트 객체입니다.

this.questionText = game.add.text(250 , 160, "-", {

font: "bold 72px Arial"

});

// 설정 질문 등록 포인트

this.questionText.anchor.set(0.5);

// scoreText는 현재 점수를 유지합니다.

this.scoreText = game.add.text(10, 10, "-", {

font: "bold 24px Arial"

});

// 루프를 사용하여 세 가지 응답 버튼을 만듭니다.

for(i = 0;i < 3; i++){

// 응답 버튼의 생성, 프레임 "i"로 설정.

// 한 번 트리거 된 checkAnswer 콜백 함수를 호출합니다.

var numberButton = game.add.button(50, 250 + i * 75, "buttons", this.checkAnswer, this).frame = i;

}

// 타임 바 추가

var numberTimer =  game.add.sprite(50, 250, "timebar");

// 세 개의 대답 버튼을 덮는 그래픽 마스크 생성

this.buttonMask = game.add.graphics(50, 250);

this.buttonMask.beginFill(0xffffff);

this.buttonMask.drawRect(0, 0, 400, 200);

this.buttonMask.endFill();

numberTimer.mask = this.buttonMask;

// 다음 질문

this.nextNumber();

}, 

// buildThrees 메서드를 사용하면 가능한 모든 합계를 찾습니다.

// arguments:

// initialNumber: 첫 번째 숫자. 각 질문은 항상 양수로 시작합니다.

// currentIndex: 이미 합계에 배치 된 피연산자의 양입니다.

// limit: 질문에 허용 된 최대 피연산자 수

// currentString: 지금까지 생성 된 문자열

buildThrees: function(initialNummber, currentIndex, limit, currentString){

// 0을 제외하고 -3에서 3까지 가능한 피연산자

var numbersArray = [-3, -2, -1, 1, 2, 3];

// 0에서 numbersArray의 길이로 루핑하기

for(var i = 0; i < numbersArray.length; i++){

// "sum"은 첫 번째 숫자와 현재 numberArray 항목 사이의 합계입니다.

var sum = initialNummber + numbersArray[i];

// 출력 문자열은 현재 문자열을 현재 numbersArray 항목과 연결하여 // 생성됩니다. 항목이 0보다 큰 경우 "+"를 추가하고 그렇지 않으면 // 이미 "-"가 있습니다.

var outputString = currentString + (numbersArray[i] < 0 ? "" : "+") + numbersArray[i];

// 합계가 1에서 3 사이이고 우리가 원하는 피연산자 수에 도달하면 ...

if(sum > 0 && sum < 4 && currentIndex == limit){

// 그런 다음 출력 문자열을 sumsArray로 푸시합니다. // [피연산자 수][결과]

this.sumsArray[limit][sum - 1].push(outputString);

}

// 피연산자의 양이 우리가 원하는 양보다 여전히 적다면 ...

if(currentIndex < limit){

// 재귀 적으로 buildThrees를 호출하여 인수로 전달 :

// 현재 합계

// 새로운 양의 피연산자

// 우리가 원하는 피연산자의 양

// 현재 출력 문자열

this.buildThrees(sum, currentIndex + 1, limit, outputString);

}

}

},

// 이 방법은 다음 질문을한다.

nextNumber: function(){

// 점수 텍스트 업데이트

this.scoreText.text = "Score: " + this.score.toString() + "\nBest Score: " + this.topScore.toString();

// 우리가 이미 하나 이상의 질문에 대답했다면 ...

if(this.correctAnswers > 1){

// 정지 시간 트윈

this.timeTween.stop();

// 마스크 수평 위치 재설정

this.buttonMask.x = 50;

}

// 우리가 이미 적어도 한 가지 질문에 대답했다면 ...

if(this.correctAnswers > 0){

// 트위스트가 마스크를 밀어 내고 뒤에 무엇이 있는지 밝히기.

this.timeTween = game.add.tween(this.buttonMask).to({

x: -350

}, gameOptions.timeToAnswer, Phaser.Easing.Linear.None, true);

// 트윈이 끝날 때 트리거되는 콜백

this.timeTween.onComplete.add(function(){

// "gameOver"메서드 호출. "?" 표시 할 문자열입니다.

this.gameOver("?");

}, this);

}

// 0과 2 사이의 무작위 결과 그리기 (1에서 3까지)

this.randomSum = game.rnd.between(0, 2);

// 현재 점수에 따라 질문 길이 선택

var questionLength = Math.min(Math.floor(this.score / gameOptions.nextLevel) + 1, 4) 

// 질문 텍스트 업데이트 중

this.questionText.text = this.sumsArray[questionLength][this.randomSum][game.rnd.between( 0, this.sumsArray[questionLength][this.randomSum].length - 1)];

},

// 대답을 확인하는 메소드, 인수는 눌려진 버튼입니다.

checkAnswer: function(button)

// 아직 게임이 끝나지 않은 경우에만 답변을 확인합니다.

if(!this.isGameOver){

// 버튼 프레임은 randomSum과 같습니다. 대답은 정확합니다.

if(button.frame == this.randomSum) 

// 응답에 소요 된 시간에 따라 점수가 증가합니다.

     this.score += Math.floor((this.buttonMask.x + 350) / 4);

// 하나 더 정답

this.correctAnswers++;

// 다음 질문으로 이동

this.nextNumber();

     }

// 잘못된 답변

     else{

// 첫 번째 질문이 아니라면 ...

     if(this.correctAnswers > 1) {

// 트윈을 중지 시키십시오.

this.timeTween.stop();

     }

// "gameOver"메서드 호출. // "button.frame + 1"은 표시 할 문자열입니다.

     this.gameOver(button.frame + 1);

}

}

},

// 게임을 끝내는 방법. 인수는 쓸 문자열입니다.

gameOver: function(gameOverString){

// changing background color

game.stage.backgroundColor = "#ff0000";

// displaying game over text

this.questionText.text = this.questionText.text + " = " + gameOverString;

// now it's game over

this.isGameOver = true;

// updating top score in local storage

localStorage.setItem(gameOptions.localStorageName, Math.max(this.score, this.topScore));

// restart the game after two seconds

game.time.events.add(Phaser.Timer.SECOND * 2, function(){

game.state.start("PlayGame");

}, this);

}

}