, поэтому я не совсем уверен, что я использую Backbone.js и что я пытаюсь сделать, но тем не менее, позвольте мне все же объяснить.
Я создаю мобильный телефон "игра".Игра довольно проста: вы подключаетесь к Facebook и «входите», выбираете уровень [Easy | Medium | Hard] и запускаете игру.
Игра состоит из 6 квестов, чтобы найти определенную область с помощью геолокации(Вы должны быть в пределах 15 метров от места, чтобы закончить квест).
Вы также получаете несколько спасательных кругов, чтобы помочь вам найти местоположение, в стиле «Кто хочет стать миллионером».
Я отвлекся.Я использую Backbone.js, но это мой первый удар в Javascript MVC, и я немного не уверен, как я должен его использовать.
Когда игрок сообщает приложению, что, по его мнению, находится на месте, я хотел бы иметь возможность, после проверки местоположения, переместить игрока к следующему квесту (при условии, что он не находится на 6-м ипоследний квест) и просто обновите их счет.
Каждый квест имеет один и тот же вид, и я хотел бы в конечном итоге заполнить модели квестов через Ajax.
Моя самая большая проблема - выяснить, как получить отОт квеста 1 до квеста 2. Изящно.
Я использую jQuery & jQueryMobile с подчеркиванием и опорой.
Вот мой код:
$(document).bind("mobileinit", function() {
$.mobile.hashListeningEnabled = false;
$.mobile.ajaxEnabled = false;
var PROGRESS = 1;
var Quest = Backbone.Model.extend({
defaults: {
id: 0,
message: '',
points: 0,
latitude: '0',
longitude: '0',
clues: {}
},
initialize: function(){
},
addPoints: function(points) {
this.set({points: this.get('points') + points});
},
takePoints: function(points) {
this.set({points: this.get('points') - points});
}
});
var QuestsCollection = Backbone.Collection.extend({
model: Quest,
comparator: function(quest) {
return quest.get('id');
},
getFinalScore: function() {
var points = this.pluck('points');
var total = 0;
$.each(points, function(k, v) {
total += v;
});
return total;
}
});
var QuestView = Backbone.View.extend({
el: '#play',
tagName: 'div',
className: 'quest',
template: _.template($('#play-tpl').html()),
model: Quest,
quest: {},
questNumber: 1,
location: {latitude: 0, longitude: 0},
events: {
'click .amIWarm' : 'checkGeoWarmth',
'click .imThere' : 'complete',
'click .skipQuest' : 'skip'
},
initialize: function() {
this.questNumber = this.options.questNumber;
this.quest = this.options.quest;
},
checkGeoWarmth: function(event) {
console.log(event);
console.log('checkGeoWarmth');
},
complete: function(event) {
console.log('Check that the user is located within 30 metres of the target!');
console.log('If the user is actually at the location, move them on to the next quest and save their points.');
this.questNumber += 1;
PROGRESS += 1;
console.log(PROGRESS);
if (PROGRESS >= 6) {
console.log('Game Over!');
}
},
skip: function(event) {
console.log('Set points to 0');
console.log('Move on to the next quest.');
this.questNumber += 1;
if (this.questNumber >= 6) {
console.log('Game Over!');
}
},
render: function() {
$('.page').hide();
$(this.el).show();
console.log(this.quest);
$(this.el).html(this.template({quest: this.quest}));
}
});
var Game = Backbone.Router.extend({
routes: {
"": "welcome",
"/play/:quest": "play"
},
welcome: function() {
var SplashPage = new SplashView;
SplashPage.render();
},
selectLevel: function() {
console.log('Select Level');
},
play: function(quest) {
var thisQuest = Quests.get(quest);
var QuestPage = new QuestView({quest: thisQuest});
//console.log(QuestPage);
QuestPage.render();
},
gameOver: function() {
var score = Quests.getFinalScore();
// Score
console.log('Your Score is ' + score);
// Save Score
console.log('Send Ajax Request to [/score/save] with [{player_id: 1, facebook_id: 1234567890, score: 440}]')
// Share On Facebook
console.log('Share your score on Facebook?');
// Tweet?
console.log('Share your score on Twitter?');
},
leaderboard: function() {
// Model: Score
// Collection: Scores
// View: Score
}
});
var game = new Game;
Backbone.history.start();
});
Мой HTML-кодследующим образом:
<!DOCTYPE html>
<html>
<head>
<title>GeoQuest</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1; user-scalable=1;" />
<link type="text/css" rel="stylesheet" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/geoquest.css" />
</head>
<body>
<div id="splash" class="page" data-role="page">
<script type="text/html" id="splash-tpl">
<a href="#/play/1">Play</a>
<button class="connect">Connect</button>
<button class="disconnect">Disconnect</button>
</script>
</div>
<div id="select-level" class="page" data-role="page">
</div>
<div id="play" class="page" data-role="page">
<script type="text/html" id="play-tpl">
<h1>Quest <%= quest.id %></h1>
<div class="quest-message">
<%= quest.message %>
</div>
<button class="skipQuest" data-role="button">Skip Quest</button>
<button href="/play/2" class="imThere" data-role="button">I'm There</button>
<button class="amIWarm" data-role="button">Am I Warm</button>
</script>
</div>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '140750459345068', status: true, cookie: true, xfbml: true});
window.FB = FB;
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript" src="js/underscore.js"> </script>
<script type="text/javascript" src="js/backbone.js"> </script>
<script type="text/javascript" src="js/json2.js"> </script>
<script type="text/javascript" src="js/geoquest.js"> </script>
<script type="text/javascript" src="js/jquery.mobile.js"> </script>
</body>
</html>
Любая помощь или совет приветствуется.
Спасибо!