몇 달 후, 프로토 타입을 선택하고, 일종의 스토리와 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);
}
}
댓글 없음:
댓글 쓰기