জাভাস্ক্রিপ্ট এমভিসি অ্যাপ্লিকেশন ডিজাইন (ক্যানভাস)


9

জাভাস্ক্রিপ্টে এমভিসি এর মতো পদ্ধতির ব্যবহার করে ক্যানভাস অ্যাপ্লিকেশনটি কীভাবে গঠন / আর্কিটেক্ট করা যায় তা বুঝতে আমার অসুবিধা হচ্ছে। ইউআই মোটামুটি তরল এবং অ্যানিমেটেড হবে, গেমগুলি মোটামুটি সরল, তবে টিউনিং এবং অ্যানিমেশনটিতে প্রচুর জোর দেওয়া। আমি পাই এমভিসি কীভাবে নীতিগতভাবে কাজ করে তবে বাস্তবে নয়। আমি এখান থেকে বগিটি গুগল করেছি, খুব ভয়ঙ্কর অনেক কিছু পড়েছি এবং আমি যখন শুরু করেছি তখন আমার মতোই বিভ্রান্ত হয়ে পড়েছে।

আবেদনের ক্ষেত্র সম্পর্কে কিছু বিশদ:

  • মাল্টি স্ক্রিন গেম ফ্রেমওয়ার্ক - একাধিক গেমগুলি এই ফ্রেমওয়ার্কের মধ্যে সাধারণ ইউআই "স্ক্রিন" এর মধ্যে বসবে: সেটিংস, তথ্য, অসুবিধা চয়ন করুন, প্রধান মেনু ইত্যাদি etc.
  • একাধিক ইনপুট পদ্ধতি
  • সাধারণ ইউআই উপাদান যেমন কিছু স্ক্রিনে শীর্ষ মেনু বার
  • বিভিন্ন রেন্ডারিং পদ্ধতি ব্যবহারের সম্ভাবনা (ক্যানভাস / ডোম / ওয়েবজিএল)

এই মুহুর্তে আমার কাছে একটি অ্যাপমোডেল, অ্যাপকন্ট্রোলার এবং অ্যাপভিউ রয়েছে। এখান থেকে আমি প্রতিটি "পর্দা" যুক্ত করার এবং এটিকে অ্যাপভিউতে সংযুক্ত করার পরিকল্পনা করছিলাম। তবে শীর্ষ মেনু বারের মতো জিনিসের কী কী সেগুলি অন্য এমভিসি ত্রয়ী হওয়া উচিত? শক্তভাবে সংযুক্ত উপাদানগুলি ছাড়াই আমি কোথায় এবং কীভাবে এটি সংযুক্ত করব?

অন্যের মধ্যে একটি এমভিসি ত্রয়ী হওয়া কি কোনও গ্রহণযোগ্য অনুশীলন? অর্থাৎ আমি কি প্রতিটি "স্ক্রিন" অ্যাপ ভিউতে যুক্ত করতে পারি? "ট্রিয়েড" এমনকি একটি অনুমোদিত এমভিসি শব্দও কি ?!

আমার মন বিকল্পগুলির মধ্যে গলে যাচ্ছে ... আমার মনে হচ্ছে আমি এখানে কিছু মৌলিক অনুপস্থিত। আমি এমভিসি পদ্ধতির ব্যবহার না করেই ইতিমধ্যে একটি সমাধান পেয়ে চলেছি তবে দৃ ,়ভাবে মিলিত স্যুপ - যুক্তি এবং দৃষ্টিভঙ্গি এবং বর্তমানে সংযুক্ত হয়ে শেষ করেছি। ধারণাটি এটিকে খোলার এবং দৃশ্যের আরও সহজে পরিবর্তনের অনুমতি দেওয়ার জন্য ছিল (উদাহরণস্বরূপ, ডিওএম ভিত্তিক দৃশ্যের সাথে একটি ক্যানভাস ভিউ স্বেদ করা)।

বর্তমান ব্যবহৃত গ্রন্থাগারগুলি: প্রয়োজনীয়.js, createJS, আন্ডারস্কোর, জিএসএপি, হ্যান্ড রোলড এমভিসি বাস্তবায়ন

কোনও পয়েন্টার, উদাহরণ ইত্যাদি, বিশেষত জিনিসটির প্রকৃত নকশার সাথে সম্পর্কিত এবং "স্ক্রিনগুলি" যথাযথ এম, ভি বা সিতে বিভক্ত করা প্রশংসিত হবে।

... বা এমভিসি বাদে আরও উপযুক্ত পদ্ধতি

[এনবি, আপনি যদি এই প্রশ্নটি আগে দেখে থাকেন তবে আমি এটি অন্য 2 টি ভুল স্ট্যাকেক্সচেঞ্জ সম্প্রদায়ের কাছে জিজ্ঞাসা করেছি ... আমার মস্তিষ্ক কাজ বন্ধ করে দিয়েছে]


1
দেখে মনে হচ্ছে আপনি শেষ পর্যন্ত সঠিক সাইটটি পেয়েছেন। গেমদেব আপনার প্রশ্ন চান না?
রবার্ট হার্ভে

@ রবার্টহারভে ভেবেছিলেন এটি সম্ভবত এখানে আরও প্রাসঙ্গিক ... কমপক্ষে আমিও আশা করি!
উইগল্লওয়ার্ম

উত্তর:


3

এমভিসি এত জায়গায় আবৃত হয়েছে তাই এখানে পুনরায় পুনরুক্তি করার মতো বেশি কিছু হওয়া উচিত নয়। মূলত আপনি চান যে আপনার অবজেক্টের গ্রাফ, সহায়ক এবং যুক্তি মডেল স্তরটিতে অন্তর্ভুক্ত থাকে। দর্শনগুলি হ'ল পর্দা যা পৃষ্ঠার গতিশীল অংশটি পূরণ করতে পারে না (এবং এতে হালকা পরিমাণে যুক্তি এবং সহায়ক থাকতে পারে)। এবং নিয়ামক, যা বস্তুর গ্রাফ, সহায়ক এবং লজিক থেকে কী পাওয়া যায় তার উপর ভিত্তি করে পর্দাগুলিকে পরিবেশন করতে একটি হালকা ওজনের বাস্তবায়ন হতে পারে।

মডেল

এটি যেখানে আবেদনের মাংস বসবে সেখানেই এটি হওয়া উচিত। এটি কোনও পরিষেবা স্তর, যুক্তিযুক্ত স্তর এবং একটি সত্তা স্তরতে ভাগ করা যায়। এটি আপনার উদাহরণের অর্থ কী?

সত্তা স্তর

এটিতে আপনার গেমের মডেলগুলি এবং অভ্যন্তরীণ আচরণগুলির সংজ্ঞা রাখা উচিত। উদাহরণস্বরূপ, যদি আপনার মাইনসুইপারের জন্য খেলা থাকে তবে বোর্ড এবং বর্গ সংজ্ঞাগুলি কীভাবে তাদের অভ্যন্তরীণ অবস্থার পরিবর্তন করে তা এইখানে ছিল।

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;
};

সুতরাং মাইনটাইল তার অভ্যন্তরীণ অবস্থা জানতে পারবে, যেমন এটি প্রদর্শিত হচ্ছে বা পরীক্ষা করা হয়েছে ( this.pristine), যদি এটি একটি টাইল ছিল যা খনি ছিল ( this.hasMine) তবে এটি নির্ধারণ করবে না যে এটি খনি হওয়ার কথা ছিল কিনা। এটি লজিক স্তর পর্যন্ত হবে। (আরও ওওপি-তে যেতে মাইনটাইল জেনেরিক টাইলের উত্তরাধিকারী হতে পারে)।

লজিক স্তর

এতে অ্যাপ্লিকেশনটির জটিল পদ্ধতিগুলি পরিবর্তিত পদ্ধতিগুলি, রাষ্ট্র বজায় রাখা ইত্যাদির সাথে ইন্টারঅ্যাক্ট করবে game এটি হ'ল যেখানে গেমের যুক্তিটি কোনও গেমের সময় কী ঘটেছিল তা নির্ধারণের জন্য উদাহরণস্বরূপ বা মাইনটাইলে কোন খনি থাকবে তা স্থাপনের জন্য স্থির ছিল। এটি যুক্তিযুক্তভাবে নির্ধারিত পরামিতিগুলির উপর ভিত্তি করে ইনস্ট্যান্টিয়েটেড স্তরগুলি পাওয়ার জন্য সত্তা স্তরে কল করবে।

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];
 }
};

পরিষেবা স্তর

এটি হবে যেখানে নিয়ামকের অ্যাক্সেস রয়েছে। গেমসটি তৈরির জন্য এটি লজিক স্তরে অ্যাক্সেস পাবে। একটি সম্পূর্ণ তাত্ক্ষণিক গেম বা পরিবর্তিত গেমের অবস্থা পুনরুদ্ধার করার জন্য পরিষেবা স্তরে উচ্চ স্তরের কল করা যেতে পারে।

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();
}

নিয়ামক

নিয়ন্ত্রকদের হালকা ওজন হওয়া উচিত, মূলত এটি হ'ল মডেলের ক্লায়েন্ট হিসাবে প্রকাশিত। অনেকগুলি নিয়ামক থাকবে, সুতরাং তাদের গঠন গুরুত্বপূর্ণ হয়ে উঠবে। কন্ট্রোলার ফাংশন কলগুলি হ'ল ইউআই ইভেন্টগুলির উপর ভিত্তি করে জাভাস্ক্রিপ্ট কলগুলি হিট করবে। এগুলি পরিষেবা স্তরে উপলব্ধ আচরণগুলি প্রকাশ করে এবং তারপরে পপুলেট করা বা এই ক্ষেত্রে ক্লায়েন্টের জন্য মতামত পরিবর্তন করতে হবে।

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());
};

দৃশ্য

নিয়ামকের আচরণের সাথে মতামতগুলি সংগঠিত করা উচিত। তারা সম্ভবত আপনার আবেদনের সবচেয়ে নিবিড় অংশ হবে কারণ এটি ক্যানভ্যাসিংয়ের সাথে সম্পর্কিত।

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();
}

সুতরাং এখন এই একটি গেমের জন্য আপনার পুরো এমভিসি সেটআপ রয়েছে। বা কমপক্ষে, একটি খালি হাড়ের উদাহরণ, পুরো গেমটি লেখার জন্য অতিরিক্ত ছিল।

এটি সব শেষ হয়ে গেলে, কোথাও কোথাও আবেদনের জন্য বিশ্বব্যাপী সুযোগ থাকা দরকার। এটি আপনার বর্তমান নিয়ামকের জীবনকাল ধরে রাখবে, যা এই দৃশ্যের সমস্ত এমভিসি স্ট্যাকের প্রবেশদ্বার।

var currentGame;
var context = document.getElementById("masterCanvas").getContext('2d');
startMineSweeper.click = function(){
 currentGame = new MineSweeperController(context);
 currentGame.Start(25,25,"expert");
};

এমভিসি নিদর্শনগুলি ব্যবহার করা খুব শক্তিশালী, তবে সেগুলির প্রতিটি প্রতিবিম্ব অনুসরণ করা সম্পর্কে খুব বেশি চিন্তা করবেন না। শেষ পর্যন্ত, এটি গেমের অভিজ্ঞতা যা অ্যাপ্লিকেশনটি সফল কিনা তা নির্ধারণ করবে :)

বিবেচনার জন্য: আর্কিটেকচার নভোচারী আপনাকে জোয়েল স্পলস্কির দ্বারা ভয় দেখাতে দেবেন না


ধন্যবাদ @ ট্রাভিজেজে - গেমের সাথে সম্পর্কিত হিসাবে আমি এমভিসিটির এটির দুর্দান্ত ব্যাখ্যা হিসাবে উত্সাহিত করেছি। এখনও নির্দিষ্ট কিছু বিষয় সম্পর্কে অস্পষ্ট, আমি মনে করি, যেমন আপনি বলেছেন, আমি নিদর্শনগুলির সূক্ষ্মতায় জড়িয়ে পড়ছি এবং এটি আমাকে এগিয়ে যেতে বাধা দিচ্ছে। একটি জিনিস আমি দেখেছি কন্ট্রোলারে এই.ভিউ.সুলিভ () নির্বাচন করুন - এই ধরণের টাইট কাপলিংয়ের প্রয়োজনীয়তা আছে নাকি আরও ডিকোপল করার কোনও উপায় আছে?
উইগল্লওয়ার্ম

@ উইগল্লাই ওয়ার্ম - সর্বদা আরও বেশি ডুপ্পলিং হতে পারে! : ডি তবে সত্যই, নিয়ামকটি এমন এক হওয়া উচিত যা মডেলটির সাথে যোগাযোগ করে এবং তারপরে ভিউ আপডেট করে যাতে সম্ভবত এমভিসিতে বেশিরভাগ সংযোগ ঘটে।
ট্র্যাভিস জে

2

আপনি ইতিমধ্যে যা ভুল করেছেন তা এখানে রয়েছে - আপনি বিভ্রান্তির অবস্থায় এবং আপনার বেল্টের নিচে কোনও এমভিসি ছাড়াই একটি এমভিসি হ্যান্ডল করেছেন।

পিওরএমভিসির দিকে একবার দেখুন, এটি ভাষা অজ্ঞানী এবং আসলে এমভিসি করে আপনার পা ভিজানোর জন্য একটি ভাল প্ল্যাটফর্ম হতে পারে।

এটির কোডটি ছোট এবং বোধগম্য এবং এটি আপনার অগ্রগতির সাথে সাথে এটি আপনার প্রয়োজনগুলিতে টুইট করার অনুমতি দেবে।

এটি দিয়ে একটি ছোট্ট সাধারণ খেলা লেখা শুরু করুন, মাইনসুইপার ভাল হবে। ট্র্যাভিস জে যা বলেছেন তা প্রচুর, বিশেষত মডেল সম্পর্কে। আমি কেবল যোগ করব যে আপনার মনে রাখতে হবে যে কন্ট্রোলাররা (কমপক্ষে পিওরএমভিসি তে) রাষ্ট্রহীন, তারা অস্তিত্বে আসে, তাদের ব্রিফ কাজ করে এবং চলে যায়। তারাই জ্ঞানীরা। তারা ফাংশন মত। "গ্রিডটি পূরণ করুন, মডেলটি বদলে গেছেন", "মডেলটি আপডেট করুন, একটি বোতাম চাপানো হয়েছিল"

দর্শনগুলি (পিওরএমভিসিতে মধ্যস্থতাকারী) হ'ল ডুম্বেস্ট এবং মডেলটি কেবল সামান্য স্মার্ট। উভয়ই প্রয়োগকে বিমূর্ত করে, সুতরাং আপনি (কন্ট্রোলাররা) সরাসরি ইউআই বা ডিবি-তে স্পর্শ করেন না।

আপনার ইউআই এর প্রতিটি উপাদান (উদাহরণস্বরূপ উইনফর্মস অ্যাপ্লিকেশনটির মতো) এর একটি ভিউ থাকে (মধ্যস্থতা - আপনি দেখতে পান কেন এটি এখন আরও ভাল শব্দ?), তবে "কন্ট্রোল কালার" বা "ফোকাসের মতো মেটা-উদ্বেগের জন্য মধ্যস্থতাগুলিও তৈরি করা যেতে পারে পরিচালক "যা ইউআই উপাদানগুলি জুড়ে কাজ করে। এখানে স্তর চিন্তা করুন।

ইউআই এবং ডিবি ইভেন্টগুলি স্বয়ংক্রিয়ভাবে কন্ট্রোলারদের (যদি আপনি একটি স্মার্ট নামকরণের স্কিম ব্যবহার করেন) আহ্বান করতে পারে, এবং নির্দিষ্ট কন্ট্রোলারগুলি পর্যায়ক্রমে বেরিয়ে আসতে পারে - একটি মধ্যস্থতাকারী একটি মডেল ডেটা পরিবর্তন ইভেন্টের জন্য সরাসরি শোনার জন্য এবং তার ডেটা প্যাকেজ সরবরাহ করতে পারে।

যদিও এটি এক ধরণের প্রতারণা এবং মডেলটির বাইরে কী আছে সে সম্পর্কে কিছুটা জানতে এবং মধ্যস্থতাকারীর একটি ডেটা প্যাকেজটি কী করা উচিত তা বোঝার প্রয়োজন, তবে এটি আপনাকে অনেক ক্ষেত্রে জাগতিক নিয়ন্ত্রণকারীদের সাথে জড়িয়ে যাওয়ার থেকে রক্ষা করবে।

মডেল: বোবা তবে পুনরায় পুনরায়; কন্ট্রোলার: স্মার্ট তবে কম পুনরায় ব্যবহারযোগ্য (তারা অ্যাপ্লিকেশন); মধ্যস্থতাকারী: বোবা তবে পুনরায় ব্যবহারযোগ্য। এই ক্ষেত্রে পুনরায় ব্যবহারযোগ্যতার অর্থ অন্য অ্যাপ্লিকেশনে পোর্টেবল।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.