MVC pek çok yerde ele alınmıştır, bu yüzden burada tekrarlamak için fazla bir şey olmamalıdır. Temel olarak nesne grafiğinizin, yardımcılarınızın ve mantığınızın model katmanında yer almasını istiyorsunuz. Görünümler, sayfanın dinamik bölümünü doldurmak için dışarı itilen ekranlardır (ve az miktarda mantık ve yardımcı içerebilir). Ve nesne grafiklerinden, yardımcılardan ve mantığa göre ekranlara hizmet etmek için hafif bir uygulama olan denetleyici.
model
Bu, uygulamanın etinin oturduğu yer olmalıdır. Bir hizmet katmanına, bir mantık katmanına ve bir varlık katmanına sıralanabilir. Örneğiniz için bu ne anlama geliyor?
Varlık katmanı
Bu, oyununuzun modellerinin ve iç davranışlarının tanımlarını içermelidir. Örneğin, mayın tarama gemisi için bir oyununuz olsaydı, yönetim kurulu ve kare tanımlarının dahili durumlarını nasıl değiştirdikleriyle birlikte burası olurdu.
function Location(x,y){
this.x = x;
this.y = y;
}
function MineTile(x,y){
this.flagged = false;
this.hasMine = false;
this.pristine = true;
this.location = new Location(x,y);
}
MineTile.prototype.expose = function(){
if( this.hasMine ) return false;
this.pristine = false;
return this.location;
};
Böylece MineTile this.pristine, bir mayın ( this.hasMine) olan fayanslardan biri olup olmadığı, ancak bir mayının olması gerekip gerekmediğini belirlemeyecek gibi, gösteriliyor veya inceleniyorsa ( ) gibi iç durumunu bilecektir . Bu mantık katmanına kadar olacak. (OOP'ye daha da gitmek için, MineTile genel bir Döşemeden miras alabilir).
Mantık katmanı
Bu, uygulamanın değişen modlar, durum tutma, vb. İle etkileşime gireceği karmaşık yolları barındırmalıdır. Oyun mantığı, örneğin bir oyun sırasında neler olacağını belirlemek veya hangi MineTiles'ın bir mayın sahibi olacağını ayarlamak için ikamet ediyordu. Mantıksal olarak belirlenen parametrelere dayalı somutlaştırılmış seviyeler elde etmek için Entity katmanına çağrılar yapar.
var MineSweeperLogic = {
construct: function(x,y,difficulty){
var mineSet = [];
var bombs = 7;
if( difficulty === "expert" ) bombs = 15;
for( var i = 0; i < x; i++ ){
for( var j = 0; i j < y; j++ ){
var mineTile = new MineTile(i,j);
mineTile.hasMine = bombs-- > 0;
mineSet.push(mineTile);
}
}
return mineSet;
},
mineAt: function(x,y,mineSet){
for( var i = 0; i < mineSet.length; i++ )
if( mineSet[i].x === x && mineSet[i].y === y ) return mineSet[i];
}
};
Hizmet katmanı
Bu, denetleyicinin erişebileceği yer olacaktır. Oyunları oluşturmak için mantık katmanına erişebilecek. Tamamen başlatılmış bir oyunu veya değiştirilmiş bir oyun durumunu almak için hizmet katmanına üst düzey bir çağrı yapılabilir.
function MineSweeper(x,y,difficulty){
this.x = x;
thix.y = y;
this.difficulty = difficulty;
this.mineSet = MineSweeperLogic.construct(x,y,difficulty);
}
MineSweeper.prototype.expose = function(x,y){
return MineSweeperLogic.mineAt(x,y,this.mineSet).expose();
}
kontrolör
Kontrolörler hafif olmalıdır, temel olarak modele müşteri olarak maruz kalan şey budur. Birçok denetleyici olacak, bu yüzden bunları yapılandırmak önemli hale gelecek. UI olaylarına dayalı olarak javascript çağrıları denetleyici işlev çağrıları olacaktır. Bunlar, hizmet katmanında kullanılabilen davranışları göstermeli ve ardından istemci için görünümleri doldurmalı veya bu durumda değiştirmelidir.
function MineSweeperController(ctx){
var this.context = ctx;
}
MineSweeperController.prototype.Start = function(x,y,difficulty){
this.game = new MineSweeper(x,y,difficulty);
this.view = new MineSweeperGameView(this.context,this.game.x,this.game.y,this.game.mineSet);
this.view.Update();
};
MineSweeperController.prototype.Select = function(x,y){
var result = this.game.expose(x,y);
if( result === false ) this.GameOver();
this.view.Select(result);
};
MineSweeperController.prototype.GameOver = function(){
this.view.Summary(this.game.FinalScore());
};
Görünüm
Görünümler kontrolörün davranışlarına göre düzenlenmelidir. Tuval ile uğraştığından, muhtemelen uygulamanızın en yoğun kısmı olacaklardır.
function MineSweeperGameView(ctx,x,y,mineSet){
this.x = x;
this.y = y;
this.mineSet = mineSet;
this.context = ctx;
}
MineSweeperGameView.prototype.Update = function(){
//todo: heavy canvas modification
for(var mine in this.mineSet){}
this.context.fill();
}
Şimdi bu tek oyun için tüm MVC kurulumuna sahipsiniz. Ya da en azından, tüm oyunu yazmak için çıplak bir kemik örneği aşırı olurdu.
Tüm bunlar yapıldıktan sonra, bir yerde uygulama için küresel bir kapsam olması gerekecektir. Bu, bu senaryoda tüm MVC yığını için ağ geçidi olan geçerli denetleyicinizin ömrünü tutacaktır.
var currentGame;
var context = document.getElementById("masterCanvas").getContext('2d');
startMineSweeper.click = function(){
currentGame = new MineSweeperController(context);
currentGame.Start(25,25,"expert");
};
MVC kalıplarını kullanmak çok güçlüdür, ancak her nüansına uyma konusunda çok fazla endişelenmeyin. Sonunda, uygulamanın başarılı olup olmadığını belirleyecek oyun deneyimi :)
Göz önünde bulundurmak için: Mimari Astronotların Sizi Korkutmasına İzin Verme Joel Spolsky