1
저는 완전히 Backbone.js로 올바른 접근 방식을 취하고 있으며 무엇을하려고하는지 알지만 그럼에도 불구하고 설명하겠습니다.Backbone.js - 프로그래밍 방식으로 뷰를로드하는 중
모바일 '게임'을 만들고 있습니다. 게임은 매우 간단합니다. 페이스 북에 접속하여 "로그인"하고 [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>
어떤 도움이나 조언이 아니라 감사합니다.
감사합니다.
안녕 RKW가, 감사 회신을 위해, 당신은 당신의 첫 번째 점에 대해 확실히 맞아요. 두 번째 요점은, 나는 그것을 시도했지만 템플릿 오류에 밑줄을 긋고 있었다. 보기 내에서/play/quest #로 어떻게 리디렉션합니까? 내가 볼 수있는 코드가 있습니까? –
리디렉션은 일반 javascript가됩니다 : window.location.href = '..' – rkw