Add: JustOnTimer app
This commit is contained in:
@@ -36,12 +36,15 @@ var Loading = {
|
||||
game.load.image('meat1', '../../../resources/image/object/grilled_meat/meat1.png');
|
||||
game.load.image('meat2', '../../../resources/image/object/grilled_meat/meat2.png');
|
||||
game.load.image('meat3', '../../../resources/image/object/grilled_meat/meat3.png');
|
||||
game.load.image('meatBonus', '../../../resources/image/object/grilled_meat/meat_bonus.png');
|
||||
game.load.image('meatWellDone1', '../../../resources/image/object/grilled_meat/meat1_welldone.png');
|
||||
game.load.image('meatWellDone2', '../../../resources/image/object/grilled_meat/meat2_welldone.png');
|
||||
game.load.image('meatWellDone3', '../../../resources/image/object/grilled_meat/meat3_welldone.png');
|
||||
game.load.image('meatBonusWellDone', '../../../resources/image/object/grilled_meat/meat_bonus_welldone.png');
|
||||
game.load.image('meatBurn1', '../../../resources/image/object/grilled_meat/meat1_burn.png');
|
||||
game.load.image('meatBurn2', '../../../resources/image/object/grilled_meat/meat2_burn.png');
|
||||
game.load.image('meatBurn3', '../../../resources/image/object/grilled_meat/meat3_burn.png');
|
||||
game.load.image('meatBonusBurn', '../../../resources/image/object/grilled_meat/meat_bonus_burn.png');
|
||||
|
||||
game.load.image('smoke', '../../../resources/image/ui/smoke.png');
|
||||
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
JustOnTime.prototype = Object.create(Phaser.State.prototype);
|
||||
JustOnTime.constructor = JustOnTime;
|
||||
|
||||
function JustOnTime() {
|
||||
}
|
||||
|
||||
JustOnTime.prototype.preload = function() {
|
||||
game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
|
||||
|
||||
game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');
|
||||
}
|
||||
|
||||
JustOnTime.prototype.create = function() {
|
||||
this.dbConnectManager = new DBConnectManager();
|
||||
sessionStorageManager.setRecord(0);
|
||||
|
||||
this.game.stage.backgroundColor = "#000000"; // '#4d4d4d';
|
||||
|
||||
sessionStorageManager.setIsNewAppHighestRecord(false);
|
||||
|
||||
var experienceAppTimer = new ExperienceAppTimer();
|
||||
experienceAppTimer.setTimeOverListener(
|
||||
(function() { this.timeOver(); }).bind(this)
|
||||
);
|
||||
|
||||
// keyboard shortcut
|
||||
this.keyboardShortcut = new KeyboardShortcut();
|
||||
this.keyboardShortcut.addCallback(
|
||||
Phaser.KeyCode.ESC, // keyCode
|
||||
null, // keyDownHandler
|
||||
(function() { this.back(); }).bind(this), // keyUpHandler
|
||||
"card matching" // callerClassName
|
||||
);
|
||||
|
||||
// top ui
|
||||
var screenTopUI = new ScreenTopUI();
|
||||
screenTopUI.makeBackButton( (function() { this.back(); }).bind(this) );
|
||||
screenTopUI.makeFullScreenButton();
|
||||
|
||||
this.scoreManager = new ScoreManager();
|
||||
this.scoreBoard = new ScoreBoard();
|
||||
this.scoreManager.addOnChangeScoreListener(
|
||||
(function(score) {
|
||||
sessionStorageManager.setRecord(score);
|
||||
this.scoreBoard.printScore(NumberUtil.numberWithCommas(score));
|
||||
}).bind(this)
|
||||
);
|
||||
this.scoreManager.addOnChangeHighScoreListener(
|
||||
(function(highScore) {
|
||||
// console.log(highScore);
|
||||
// sessionStorageManager.setAppHighestRecord(highScore);
|
||||
sessionStorageManager.setIsNewBestRecrd(true);
|
||||
// this.screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
|
||||
}).bind(this)
|
||||
);
|
||||
|
||||
this.stageTimer = new StageTimer(
|
||||
JustOnTime.GAME_TIME_SEC,
|
||||
(function() {
|
||||
this.setClickEnable(false);
|
||||
|
||||
this.timeOver();
|
||||
}).bind(this)
|
||||
);
|
||||
|
||||
this.initVariables();
|
||||
|
||||
|
||||
// game stage
|
||||
game.stage.backgroundColor = '#4d4d4d';
|
||||
graphics = game.add.graphics(0, 0);
|
||||
|
||||
|
||||
// bottom ui
|
||||
var screenBottomUI = new ScreenBottomUI();
|
||||
screenBottomUI.printLeftTextWithAppHighestRecord(sessionStorageManager.getAppHighestRecord());
|
||||
screenBottomUI.printCenterText(sessionStorageManager.getPlayingAppKoreanName());
|
||||
screenBottomUI.printRightText(sessionStorageManager.getPlayerName());
|
||||
|
||||
|
||||
// // this.countDown();
|
||||
}
|
||||
|
||||
JustOnTime.prototype.initVariables = function() {
|
||||
}
|
||||
|
||||
JustOnTime.prototype.fontLoaded = function() {
|
||||
|
||||
this.leftTimerStage = new TimerStage(
|
||||
JustOnTime.TIMER_STAGE_POS_X, JustOnTime.TIMER_STAGE_POS_Y
|
||||
);
|
||||
this.rightTimerStage = new TimerStage(
|
||||
GAME_SCREEN_SIZE.x - JustOnTime.TIMER_STAGE_POS_X, JustOnTime.TIMER_STAGE_POS_Y
|
||||
);
|
||||
|
||||
// this.startGame();
|
||||
}
|
||||
|
||||
JustOnTime.prototype.back = function() {
|
||||
sessionStorageManager.resetPlayingAppData();
|
||||
location.href = '../../web/client/main_menu.html';
|
||||
}
|
||||
|
||||
/*
|
||||
JustOnTime.prototype.countDown = function() {
|
||||
var style = { font: "bold 200px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
|
||||
this.countDownText = game.add.text(0, 0, "", style);
|
||||
this.countDownText.setTextBounds(0, 0, game.world.width, game.world.height);
|
||||
this.countDownText.stroke = "#333";
|
||||
this.countDownText.strokeThickness = 50;
|
||||
|
||||
this.countDownNumber = 3;
|
||||
if(isDebugMode())
|
||||
this.countDownNumber = 1;
|
||||
this.tweenCountDown();
|
||||
}
|
||||
|
||||
JustOnTime.prototype.tweenCountDown = function() {
|
||||
if(this.countDownNumber === 0) {
|
||||
this.startGame();
|
||||
return;
|
||||
}
|
||||
|
||||
this.countDownText.text = this.countDownNumber.toString();
|
||||
this.countDownText.alpha = 1;
|
||||
|
||||
var countDownTween = game.add.tween(this.countDownText);
|
||||
countDownTween.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
|
||||
countDownTween.onComplete.add(this.tweenCountDown, this);
|
||||
|
||||
this.countDownNumber--;
|
||||
}
|
||||
*/
|
||||
|
||||
JustOnTime.prototype.startGame = function() {
|
||||
this.stageTimer.start();
|
||||
}
|
||||
|
||||
|
||||
|
||||
JustOnTime.prototype.timeOver = function() {
|
||||
var timeOverText = new TimeOverText();
|
||||
if(!isExperienceMaestroAccount())
|
||||
this.updateResultRecord();
|
||||
|
||||
// game.time.events.remove(this.timeEvent);
|
||||
|
||||
for(var i = 0; i < this.gameTimeEvents.length; i++) {
|
||||
game.time.events.remove(this.gameTimeEvents[i]);
|
||||
}
|
||||
this.gameTimeEvents = [];
|
||||
|
||||
game.time.events.add(Phaser.Timer.SECOND * 2, this.goResult, this);
|
||||
}
|
||||
|
||||
JustOnTime.prototype.updateResultRecord = function() {
|
||||
if(sessionStorageManager.getMaestroAccountType() < 100) { // experience account
|
||||
this.dbConnectManager.updateResultRecord(
|
||||
sessionStorageManager.getMaestroID(),
|
||||
sessionStorageManager.getPlayerID(),
|
||||
sessionStorageManager.getPlayingAppID(),
|
||||
sessionStorageManager.getRecord()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
JustOnTime.prototype.goResult = function() {
|
||||
location.href = '../../web/client/result.html';
|
||||
}
|
||||
|
||||
|
||||
|
||||
JustOnTime.GAME_TIME_SEC = 60;
|
||||
JustOnTime.TIMER_STAGE_POS_X = 300;
|
||||
JustOnTime.TIMER_STAGE_POS_Y = 200;
|
||||
@@ -0,0 +1,66 @@
|
||||
var Loading = {
|
||||
|
||||
preload: function() {
|
||||
// game.load.image('loadingbar', './image/phaser.png');
|
||||
},
|
||||
|
||||
create: function() {
|
||||
// var userID = sessionStorage.getItem("UserID");
|
||||
// console.log("userID : " + userID);
|
||||
|
||||
// game.stage.backgroundColor = '#4d4d4d';
|
||||
|
||||
// // Progress report
|
||||
// this.textProgress = game.add.text(game.world.centerX, 100, '로딩중 . . .', textStyleBasic);
|
||||
// this.textProgress.anchor.setTo(0.5, 0.4);
|
||||
// this.textProgress.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
|
||||
|
||||
// // Preload bar
|
||||
// this.preloadBar = this.add.sprite(game.world.centerX, game.world.centerY, 'loadingbar');
|
||||
// this.preloadBar.anchor.setTo(0.5);
|
||||
// this.preloadBar.alpha = 0;
|
||||
|
||||
game.load.onFileComplete.add(this.fileComplete, this);
|
||||
game.load.onLoadComplete.add(this.loadComplete, this);
|
||||
|
||||
this.startLoading();
|
||||
},
|
||||
|
||||
startLoading: function() {
|
||||
game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
|
||||
|
||||
game.load.start();
|
||||
},
|
||||
|
||||
fileComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
|
||||
// this.preloadBar.alpha = progress / 100;
|
||||
|
||||
// console.log('progress : ' + progress);
|
||||
|
||||
// text.setText("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles);
|
||||
|
||||
// var newImage = game.add.image(x, y, cacheKey);
|
||||
// newImage.scale.set(0.3);
|
||||
|
||||
// x += newImage.width + 20;
|
||||
// if (x > 700)
|
||||
// {
|
||||
// x = 32;
|
||||
// y += 332;
|
||||
// }
|
||||
},
|
||||
|
||||
loadComplete: function(progress, cacheKey, success, totalLoaded, totalFiles) {
|
||||
// this.preloadBar.alpha = 1;
|
||||
|
||||
if(isDebugMode()) {
|
||||
this.state.start('Game');
|
||||
return;
|
||||
}
|
||||
|
||||
this.state.start('Game');
|
||||
// this.startMenu();
|
||||
// this.startTypingTestStage();
|
||||
// this.startTypingTestResult();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/////////////////////////////
|
||||
// Main game
|
||||
|
||||
var CONTENT_ID = "Just on time";
|
||||
|
||||
var game = new Phaser.Game(
|
||||
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y,
|
||||
Phaser.CANVAS, CONTENT_ID,
|
||||
this, false, false
|
||||
);
|
||||
|
||||
WebFontConfig = {
|
||||
// 'active' means all requested fonts have finished loading
|
||||
// We set a 1 second delay before calling 'createText'.
|
||||
// For some reason if we don't the browser cannot render the text the first time it's created.
|
||||
active: function() { game.time.events.add(Phaser.Timer.SECOND * 0.1, fontLoaded, this); },
|
||||
|
||||
// The Google Fonts we want to load (specify as many as you like in the array)
|
||||
google: {
|
||||
families: [
|
||||
'Orbitron:800',
|
||||
'Nanum Gothic:400, 700, 800',
|
||||
'Nanum Gothic Coding:400, 700',
|
||||
// 'Nanum Brush Script',
|
||||
// 'Nanum Pen Script'
|
||||
]
|
||||
// families: ['Nanum Brush Script']
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var justOnTime = new JustOnTime();
|
||||
|
||||
game.state.add('JustOnTime', justOnTime);
|
||||
game.state.start('JustOnTime');
|
||||
|
||||
function fontLoaded() {
|
||||
justOnTime.fontLoaded();
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
TimeScoreRecord.prototype = Object.create(Phaser.State.prototype);
|
||||
TimeScoreRecord.constructor = TimeScoreRecord;
|
||||
|
||||
function TimeScoreRecord(x, y) {
|
||||
this.timeText = new TimerText(x + TimeScoreRecord.TIMER_OFFSET_X, y, 30);
|
||||
this.scoreText = this.makeScoreText(x + TimeScoreRecord.SCORE_OFFSET_X, y);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
TimeScoreRecord.prototype.makeScoreText = function(x, y) {
|
||||
var scoreText = game.add.text(x, y, "");
|
||||
scoreText.anchor.set(0, 0.5);
|
||||
// scoreText.font = "Orbitron";
|
||||
scoreText.fontSize = 30;
|
||||
scoreText.fontWeight = "bold"; // "normal";
|
||||
scoreText.style.fill = "white";
|
||||
scoreText.stroke = "#000000";
|
||||
scoreText.strokeThickness = 6;
|
||||
scoreText.text = "3";
|
||||
|
||||
return scoreText;
|
||||
}
|
||||
|
||||
TimeScoreRecord.prototype.setContent = function(time, score) {
|
||||
this.timeText.setText(time);
|
||||
this.scoreText.text = score;
|
||||
}
|
||||
|
||||
TimeScoreRecord.prototype.setTextColorString = function(colorString) {
|
||||
this.timeText.setTextColorString(colorString);
|
||||
this.scoreText.style.fill = colorString;
|
||||
}
|
||||
|
||||
TimeScoreRecord.TIMER_OFFSET_X = -50;
|
||||
TimeScoreRecord.SCORE_OFFSET_X = 90;
|
||||
@@ -0,0 +1,48 @@
|
||||
TimerStage.prototype = Object.create(Phaser.State.prototype);
|
||||
TimerStage.constructor = TimerStage;
|
||||
|
||||
function TimerStage(x, y) {
|
||||
this.posX = x;
|
||||
this.posY = y;
|
||||
|
||||
this.mainTimerText = new TimerText(x, y, 60);
|
||||
this.timerButton = this.makeTimeStopButton(x, y + TimerStage.BUTTON_OFFSET_Y);
|
||||
this.timeScoreRecordArray = new Array();
|
||||
|
||||
this.makeTimeScoreRecordArray();
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
TimerStage.prototype.makeTimeStopButton = function(x, y) {
|
||||
var setting = new RoundRectButtonSetting(x, y, 200, 100);
|
||||
setting.fontStyle.fontWeight = "bold";
|
||||
|
||||
var timerButton = new RoundRectButton(
|
||||
setting,
|
||||
RoundRectButton.NONE_ICON, "시작",
|
||||
(function() { this.buttonClicked(); }).bind(this)
|
||||
);
|
||||
return timerButton;
|
||||
}
|
||||
|
||||
TimerStage.prototype.buttonClicked = function() {
|
||||
this.mainTimerText.setText("02.00");
|
||||
}
|
||||
|
||||
TimerStage.prototype.makeTimeScoreRecordArray = function() {
|
||||
for(var i = 0; i < TimerStage.RECORD_COUNT; i++) {
|
||||
var timeScoreRecord = new TimeScoreRecord(
|
||||
this.posX,
|
||||
this.posY + TimerStage.RECORD_OFFSET_Y + TimerStage.RECORD_GAP_Y * i
|
||||
);
|
||||
this.timeScoreRecordArray.push(timeScoreRecord);
|
||||
}
|
||||
}
|
||||
|
||||
TimerStage.BUTTON_OFFSET_Y = 100;
|
||||
|
||||
TimerStage.RECORD_OFFSET_Y = 200;
|
||||
TimerStage.RECORD_GAP_Y = 50;
|
||||
TimerStage.RECORD_COUNT = 5;
|
||||
@@ -0,0 +1,32 @@
|
||||
TimerText.prototype = Object.create(Phaser.State.prototype);
|
||||
TimerText.constructor = TimerText;
|
||||
|
||||
function TimerText(x, y, fontSize) {
|
||||
this.digitText = this.makeTimerText(x, y, fontSize);
|
||||
console.log(this.digitText);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
TimerText.prototype.makeTimerText = function(x, y, fontSize) {
|
||||
var digitText = game.add.text(x, y, "");
|
||||
digitText.anchor.set(0.5, 0.5);
|
||||
digitText.font = "Orbitron";
|
||||
digitText.fontSize = fontSize;
|
||||
digitText.fontWeight = "bold"; // "normal";
|
||||
digitText.style.fill = "white";
|
||||
digitText.stroke = "#000000";
|
||||
digitText.strokeThickness = 6;
|
||||
digitText.text = "03.00";
|
||||
|
||||
return digitText;
|
||||
}
|
||||
|
||||
TimerText.prototype.setText = function(contents) {
|
||||
this.digitText.text = contents;
|
||||
}
|
||||
|
||||
TimerText.prototype.setTextColorString = function(colorString) {
|
||||
this.digitText.style.fill = colorString;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85912788-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-85912788-2');
|
||||
</script>
|
||||
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-N8PB4F3');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
|
||||
<title>시간을 맞춰라 | 초코마에</title>
|
||||
<meta name="description" CONTENT="시간을 맞춰라 - 마우스 클릭 연습 앱 | 초코마에 ‧ Just on time - Mouse click practice app | ChocoMae">
|
||||
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<link href="../../../resources/font/open-iconic-master/font/css/open-iconic-bootstrap.css" rel="stylesheet">
|
||||
<link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
|
||||
<script src="../../../resources/js/phaser.min.js"></script>
|
||||
|
||||
<!-- global source files -->
|
||||
<script src="../../game/lib/session_storage_manager.js"></script>
|
||||
<script src="../../game/lib/score_manager.js"></script>
|
||||
<script src="../../game/lib/heart_manager.js"></script>
|
||||
<script src="../../game/lib/global/global_variables.js"></script>
|
||||
|
||||
<!-- library source files -->
|
||||
<script src="../../game/lib/util/number_util.js"></script>
|
||||
<script src="../../game/lib/util/record_util.js"></script>
|
||||
|
||||
<script src="../../game/lib/text/combo_text.js"></script>
|
||||
<script src="../../game/lib/text/input_type_text.js"></script>
|
||||
<script src="../../game/lib/text/time_over_text.js"></script>
|
||||
<script src="../../game/lib/text/score_board.js"></script>
|
||||
<script src="../../game/lib/text/score_text.js"></script>
|
||||
<script src="../../game/lib/text/screen_top_ui.js"></script>
|
||||
<script src="../../game/lib/text/screen_bottom_ui.js"></script>
|
||||
|
||||
<script src="../../game/lib/keyboard_shortcut.js"></script>
|
||||
<script src="../../game/lib/history_record_manager.js"></script>
|
||||
<script src="../../game/lib/heart_gauge.js"></script>
|
||||
<script src="../../game/lib/button/round_rect_button.js"></script>
|
||||
<script src="../../game/lib/button/back_button.js"></script>
|
||||
<script src="../../game/lib/button/fullscreen_button.js"></script>
|
||||
<script src="../../game/lib/db_connect_manager.js"></script>
|
||||
<script src="../../game/lib/experience_app_timer.js"></script>
|
||||
<script src="../../game/lib/stage_timer.js"></script>
|
||||
|
||||
<!-- Card matching : source files -->
|
||||
<script src="../../game/mouse/just_on_time/timer_text.js"></script>
|
||||
<script src="../../game/mouse/just_on_time/time_score_record.js"></script>
|
||||
<script src="../../game/mouse/just_on_time/timer_stage.js"></script>
|
||||
|
||||
<script src="../../game/mouse/just_on_time/just_on_time.js"></script>
|
||||
<script src="../../game/mouse/just_on_time/main.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
body{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
canvas{
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#client_refresh').load("./../module/client_refresh.html");
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="Just on time" style="text-align:center;"></div>
|
||||
<div id="client_refresh"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user