ফেজার 3 এবং টাইপস্ক্রিপ্ট ব্যবহার করে কীভাবে ব্রাউজারে একটি সহজ গেম তৈরি করা যায়

ফিল বোথা আনস্প্ল্যাশ-এ ছবি

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

পরিবেশ প্রস্তুত করুন

আইডিই

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

নোড

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

এই লেখা হিসাবে, আমি নোড 10.13.0 এবং এনএমপি 6.4.1 ব্যবহার করছি। অনুগ্রহ করে নোট করুন যে সীমাবদ্ধ বিশ্বের সংস্করণগুলি অত্যন্ত দ্রুত আপডেট হয়, তাই আপনি কেবল সর্বশেষতম স্থিতিশীল সংস্করণগুলি ব্যবহার করছেন। আমি নোড এবং এনপিএম ম্যানুয়ালি ইনস্টল করার পরিবর্তে এনভিএম ব্যবহারের দৃ strongly় পরামর্শ দিচ্ছি। এটি আপনাকে অনেক সময় এবং স্নায়ু সাশ্রয় করে।

প্রকল্প স্থাপন করুন

প্রকল্প কাঠামো

আমরা প্রকল্পটি তৈরি করতে এনপিএম ব্যবহার করতে যাচ্ছি। প্রকল্পটি শুরু করতে, একটি খালি ফোল্ডারে স্যুইচ করুন এবং এনএমপি ইন চালান। এনপিএম আপনাকে আপনার প্রকল্পের বৈশিষ্ট্য সম্পর্কে বেশ কয়েকটি প্রশ্ন জিজ্ঞাসা করে এবং তারপরে একটি প্যাকেজ.জসন ফাইল তৈরি করে। এটি দেখতে এরকম কিছু দেখাবে:

{"নাম": "স্টারফল", সংস্করণ: 0.1.0, "বিবরণ": "স্টারফল গেম (ফেজার 3 + টাইপসক্রিপ্ট)", "প্রধান": "সূচি", "স্ক্রিপ্ট": test "পরীক্ষা": "প্রতিধ্বনি" ত্রুটি: কোনও পরীক্ষা নির্দিষ্ট নেই "&& প্রস্থান 1"}, "লেখক": "মারিয়া ডেভিডোভা", "লাইসেন্স": "এমআইটি"}

প্যাকেজগুলি

নিম্নলিখিত কমান্ড সহ প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:

এনপিএম ইনস্টল করুন -ডি টাইপসক্রিপ্ট ওয়েবপ্যাক ওয়েবপ্যাক-ক্লিপ টিএস-লোডার ফেজার লাইভ-সার্ভার

-D বিকল্পটি (ওরফে - সেভ-দেব) এনপিএমকে প্যাকেজ.জসনের নির্ভরতার তালিকায় স্বয়ংক্রিয়ভাবে এই প্যাকেজগুলি যুক্ত করে:

"ডিভডিপেন্ডেন্স": {"লাইভ-সার্ভার": "^ 1.2.1", "ফেজার": "^ 3.15.1", "টিএস-লোডার": "^ 5.3.0", "টাইপসক্রিপ্ট": "^ 3.1। 6 "," ওয়েবপ্যাক ":" ^ 4.26.0 "," ওয়েবপ্যাক-ক্লিপ ":" ^ 3.1.2 "}

ওয়েবপ্যাক

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

আপনার প্রকল্প.জসনের কাছে ওয়েবপ্যাক.কনফিগ.জেগুলি যুক্ত করুন:

কনস্ট পাথ = প্রয়োজনীয় ('পাথ');
মডিউল.এক্সপোর্টস = {প্রবেশ: './src/app.ts', মডিউল: ules বিধি: [{পরীক্ষা: /\.tsx?$/, ব্যবহার: 'টিএস-লোডার', বাদ: / নোড_মডিউল /}]} , নির্ধারণ: {এক্সটেনশানস: ['.ts', '.tsx', '.js']}, আউটপুট: {ফাইলের নাম: 'app.js', পথ: পথ.প্রেস (__ dirname, 'dist')}, মোড: 'উন্নয়ন'};

এখানে আমরা দেখতে পেলাম যে ওয়েবপ্যাকটি src / app.ts (যা আমরা খুব শীঘ্রই সংযোজন করব) থেকে উত্সগুলি গ্রহণ করতে এবং dist / app.js ফাইলে সমস্ত কিছু সংগ্রহ করতে হবে।

প্রকারলিপি

আমাদের কাছে টাইপস্ক্রিপ্ট সংকলক (tsconfig.json) এর জন্য একটি ছোট কনফিগারেশন ফাইলও প্রয়োজন, যার মধ্যে আমরা ব্যাখ্যা করি যে কোন জেএস সংস্করণটি উত্সগুলি সংকলন করা উচিত এবং এই উত্সগুলি কোথায় পাওয়া যাবে:

comp "সংকলক অপশন": {"লক্ষ্য": "এস 5"}, "অন্তর্ভুক্ত": ["এসসিআর / *"]}

টাইপস্ক্রিপ্ট সংজ্ঞা

টাইপস্ক্রিপ্ট একটি স্ট্যাটিকালি টাইপ করা ভাষা। সুতরাং, সংকলনের জন্য টাইপ সংজ্ঞা প্রয়োজন। এই লেখার সময়, Phaser 3 সংজ্ঞাগুলি এনপিএম প্যাকেজ হিসাবে এখনও উপলব্ধ ছিল না। অতএব, আপনার এটি অফিসিয়াল সংগ্রহস্থল থেকে ডাউনলোড করতে হবে এবং ফাইলটি আপনার প্রকল্পের src উপ-ডিরেক্টরিতে রাখতে হবে।

স্ক্রিপ্ট

আমরা প্রকল্পটি প্রায় শেষ করেছি। এই মুহুর্তে আপনার প্যাকেজ.জসন, ওয়েবপ্যাক.কনফিগ.জেএস এবং tsconfig.json তৈরি করা উচিত এবং src / phaser.d.ts যুক্ত করা উচিত। কোড লেখা শুরু করার আগে আমাদের শেষ কাজটি করা দরকার তা হল এনপিএমের প্রকল্পটির সাথে ঠিক কী কী আছে explain আমরা প্যাকেজ.জসন ফাইলের স্ক্রিপ্ট বিভাগটি আপডেট করেছি:

"স্ক্রিপ্টস": build "বিল্ড": "ওয়েবপ্যাক", "শুরু": "ওয়েবপ্যাক - ওয়াচ এবং লাইভ-সার্ভার --port = 8085"

আপনি যখন এনপিএম বিল্ড চালান, তখন অ্যাপ.জেএস ফাইলটি ওয়েবপ্যাক কনফিগারেশন অনুযায়ী তৈরি করা হয়। এবং আপনি যখন এনটিএম স্টার্টটি চালান তখন আপনাকে বিল্ড প্রক্রিয়াটি নিয়ে চিন্তা করতে হবে না: আপনি কোনও উত্স সংরক্ষণ করার সাথে সাথে ওয়েবপ্যাক অ্যাপটি পুনরায় তৈরি করে এবং লাইভ সার্ভারটি এটি আপনার ডিফল্ট ব্রাউজারে পুনরায় লোড করে দেয়। অ্যাপটি http://127.0.0.1:8085/ এ হোস্ট করা হয়েছে।

শুরু হচ্ছে

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

আমি ফেজার 3 এর পিছনে মূল ধারণাগুলি সংক্ষেপে ব্যাখ্যা করি। গেমটি ফেজার.গেম ক্লাসের (বা এর বংশধরদের) উদাহরণ। প্রতিটি গেমের মধ্যে ফ্যাসার এক বা একাধিক উদাহরণ রয়েছে ce দৃশ্য বংশধর। স্ট্যাটিক বা গতিশীল প্রতিটি দৃশ্যে বেশ কয়েকটি অবজেক্ট থাকে এবং এটি গেমটির লজিক্যাল অংশকে উপস্থাপন করে example উদাহরণস্বরূপ, আমাদের সাধারণ গেমটিতে তিনটি দৃশ্য থাকবে: স্প্ল্যাশ স্ক্রিন, গেমটি নিজেই এবং স্কোর স্ক্রিন।

কোডিং শুরু করা যাক।

প্রথমে গেমটির জন্য একটি মিনিমালিস্ট এইচটিএমএল ধারক তৈরি করুন। একটি ইনডেক্স html ফাইল তৈরি করুন যাতে নিম্নলিখিত কোডটি থাকে:

স্টারফল </ শিরোনাম> <স্ক্রিপ্ট src = "দূর / অ্যাপ্লিকেশন"> </ স্ক্রিপ্ট </ মাথা> <body> <div id = "খেলা"> </ div> </ body> </ html></pre><p>এখানে কেবল দুটি প্রধান অংশ রয়েছে: প্রথমটি হ'ল স্ক্রিপ্ট এন্ট্রি যা বলে যে আমরা আমাদের তৈরি ফাইলটি এখানে ব্যবহার করব এবং দ্বিতীয়টি একটি ডিভ এন্ট্রি যা গেমের ধারককে প্রতিনিধিত্ব করে।</p><p>এখন নিম্নলিখিত কোড সহ একটি ফাইল src / app.ts তৈরি করুন:</p><pre>"phaser" আমদানি করুন;</pre><pre>কনস্ট কনফিগার: গেমকনফিগ = {শিরোনাম: "স্টারফল", প্রস্থ: 800, উচ্চতা: 600, পিতা বা মাতা: "গেম" ব্যাকগ্রাউন্ড কালার: "# 18216D"};</pre><pre>স্টারফলগেম এক্সপোর্ট ক্লাস Phaser.Game {নির্মাণকারী (কনফিগারেশন: গেমকনফিগ) {সুপার (কনফিগার) প্রসারিত করে; }}</pre><pre>উইন্ডো.অনলোড = () => game ভার গেম = নতুন স্টারফলগেম (কনফিগার); };</pre><p>এই কোডটি স্ব-ব্যাখ্যামূলক। গেমকনফিগের অনেকগুলি বিভিন্ন বৈশিষ্ট্য রয়েছে যা আপনি এখানে পরীক্ষা করে দেখতে পারেন।</p><p>এবং এখন আপনি শেষ পর্যন্ত এনপিএম শুরু চালাতে পারেন। যদি এই এবং পূর্ববর্তী পদক্ষেপগুলিতে সবকিছু সঠিকভাবে করা হয়ে থাকে তবে আপনার ব্রাউজারে আপনার কিছু সাধারণ হওয়া উচিত:</p><img alt="হ্যাঁ এটি একটি নীল পর্দা।" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569967675050.png" /><h3>তারা ফেলে দিন</h3><p>আমরা একটি প্রাথমিক অ্যাপ্লিকেশন তৈরি করেছি। এখন এমন দৃশ্য যুক্ত করার সময় হয়েছে যেখানে কিছু ঘটে যায়। আমাদের খেলাটি সহজ হবে: তারাররা মাটিতে পড়বে এবং লক্ষ্যটি হবে যতটা সম্ভব ধরা পড়বে।</p><p>এই লক্ষ্যটি অর্জন করতে, একটি নতুন ফাইল গেমসনেট.টিস তৈরি করুন এবং এতে নিম্নলিখিত কোডটি যুক্ত করুন:</p><pre>"phaser" আমদানি করুন;</pre><pre>গেমসাইন রফতানির ক্লাস Phaser.Scene extend</pre><pre>কনস্ট্রাক্টর () {সুপার ({কী: "গেমসিন"}); }</pre><pre>init (প্যারাম): শূন্য {// তৈরি করুন}</pre><pre>বায়াস (): শূন্য {// তৈরি করুন} তৈরি (): শূন্য oid // তৈরি করুন}</pre><pre>আপডেট (সময়): অবৈধ {// মেক}};</pre><p>কনস্ট্রাক্টরটিতে এখানে একটি বোতাম রয়েছে যার অধীনে অন্যান্য দৃশ্যাবলী এই দৃশ্যটি কল করতে পারে।</p><p>আপনি এখানে চারটি পদ্ধতির নমুনা দেখতে পারেন। তারপরে আমি পার্থক্যটি সংক্ষেপে ব্যাখ্যা করব:</p><ul><li>দৃশ্য শুরু হওয়ার সাথে সাথে init ([প্যারামস]) বলা হয়; এই ফাংশনটি দৃশ্যে স্টার্ট (কী, [প্যারাম]) কল করে অন্যান্য দৃশ্যাবলী বা গেমগুলি থেকে পাস করা প্যারামিটারগুলি গ্রহণ করতে পারে।</li><li>প্রিলোড () কে দৃশ্য বস্তু তৈরি হওয়ার আগে বলা হয় এবং এতে লোড উপাদান রয়েছে। এই সম্পদগুলি ক্যাশে করা হয়েছে যাতে দৃশ্যটি পুনরায় শুরু করার সময় এগুলি পুনরায় লোড করা হয় না</li><li>সম্পদগুলি লোড করা হয় এবং সাধারণত প্রধান গেমের অবজেক্ট (ব্যাকগ্রাউন্ড, প্লেয়ার, বাধা, শত্রু ইত্যাদি) তৈরি করে যখন তৈরি () বলা হয়।</li><li>আপডেট ([সময়]) হ'ল প্রতিটি টিকের নাম এবং এতে দৃশ্যের গতিশীল অংশ রয়েছে - যা কিছু চলমান, ঝলকানো ইত্যাদি contains</li></ul><p>যাতে আমরা এটি পরে ভুলে যাব না, আসুন দ্রুত গেম.টিজে নিম্নলিখিত লাইনগুলি যুক্ত করুন:</p><pre>"phaser" আমদানি করুন; "./GameScene" থেকে {গেমসিন; আমদানি করুন;</pre><pre>কনফিগার কনফিগার: গেমকনফিগ = {শিরোনাম: "স্টারফল", প্রস্থ: 800, উচ্চতা: 600, পিতা বা মাতা: "গেম", দৃশ্য: [গেমসিন], পদার্থবিদ্যা: {মান: "আরকেড", তোরণ, উত্তরণ: {ডিবাগ: মিথ্যা} }, ব্যাকগ্রাউন্ড কালার: "# 000033"}; ...</pre><p>আমাদের গেমটি এখন গেমের দৃশ্য জানে। যদি গেম কনফিগারেশনে দৃশ্যের একটি তালিকা থাকে, গেমটি শুরু হওয়ার পরে প্রথমটি শুরু হবে এবং অন্য সমস্ত তৈরি করা হবে তবে স্পষ্টভাবে না বলা পর্যন্ত শুরু করা হবে না।</p><p>আমরা এখানে আরকেড পদার্থবিজ্ঞান যুক্ত করেছি। এটি আমাদের নক্ষত্রের পতন প্রয়োজন।</p><p>এখন আমরা আমাদের গেমিং দৃশ্যের হাড়ের মাংস রাখতে পারি।</p><p>প্রথমে আসুন আমরা প্রয়োজনীয় কিছু সম্পত্তি এবং অবজেক্টগুলি ঘোষণা করি:</p><pre>গেমসাইন রফতানির ক্লাস Phaser.Scene {ডেল্টা: সংখ্যা প্রসারিত করে; লাস্ট স্টারটাইম: সংখ্যা; স্টারসক্ট: সংখ্যা; স্টারফল: সংখ্যা; বালি: Phaser.Physics.Arcade.StaticGroup; তথ্য: Phaser.GameObjects.Text; ...</pre><p>তারপরে আমরা সংখ্যার সূচনা করি:</p><pre>init (/ * প্যারাম: যে কোনও * /): শূন্য {this.delta = 1000; this.lastStarTime = 0; this.starsCaught = 0; this.starsFallen = 0; }</pre><p>এখন কয়েকটি ছবি লোড করা যাক:</p><pre>বায়াস (): অকার্যকর {this.load.setBaseURL ("https://raw.githubusercontent.com/mariyadavydova/" + "স্টারফল-ফেজার3-টাইপ স্ক্রিপ্ট / মাস্টার /"); this.load.image ("তারা", "সম্পদ / তারকা.পিএনজি"); this.load.image ("বালু", "সম্পদ / Sand.jpg"); }</pre><p>এর পরে আমরা আমাদের স্ট্যাটিক উপাদানগুলি প্রস্তুত করতে পারি। আমরা তার উপর ভিত্তি করে এমন গ্রাউন্ড তৈরি করব এবং পাঠ্যটি যা আমাদের বর্তমান স্কোর সম্পর্কে অবহিত করবে:</p><pre>তৈরি করুন (): শূন্য {this.sand = this.physics.add.staticGroup ({কী: 'স্যান্ড', ফ্রেমমেঞ্জ: 20}); ফেজার.অ্যাকশনস.প্লেসঅনলাইন (this.sand.getChildren (), নতুন Phaser.Geom.Line (20, 580, 820, 580)); this.sand.refresh ();</pre><pre>this.info = this.add.text (10, 10, '',; ফন্ট: '24px আরিয়াল বোল্ড', পূরণ করুন: '#FBFBAC';); }</pre><p>ফেজার 3-এর একটি গ্রুপের সাথে, আপনি একসাথে নিয়ন্ত্রণ করতে চান এমন একটি সিরিজ তৈরি করতে পারেন। স্থির এবং গতিশীল: দুটি ধরণের অবজেক্ট রয়েছে। আপনি যেমন অনুমান করতে পারেন, স্থির বস্তুগুলি সরানো হয় না (মেঝে, দেয়াল, বিভিন্ন বাধা) যখন গতিশীল অবজেক্টগুলি কাজ করে (মারিও, জাহাজ, মিসাইল)।</p><p>আমরা প্লটের একটি স্ট্যাটিক গ্রুপ গঠন করি। এই অংশগুলি লাইন বরাবর স্থাপন করা হয়। দয়া করে নোট করুন যে লাইনটি 20 টি সমান বিভাগে বিভক্ত হয়েছে (19 টি যেমন আপনি প্রত্যাশা করেছিলেন) এবং প্রতিটি বিভাগের মেঝে টাইলগুলি বাম প্রান্তে টাইল কেন্দ্রের সাথে স্থাপন করা হয় (আমি আশা করি এটি এই সংখ্যাগুলি ব্যাখ্যা করে) numbers গ্রুপ সীমানা ক্ষেত্রটি রিফ্রেশ করার জন্য আমাদেরও রিফ্রেশ () কল করতে হবে (অন্যথায় সংঘর্ষগুলি দৃশ্যের উপরের বাম কোণে থাকা ডিফল্ট অবস্থানের সাথে তুলনা করা হবে)।</p><p>এখন আপনি যখন ব্রাউজারটিতে আপনার অ্যাপ্লিকেশনটি পরীক্ষা করেন তখন আপনার দেখতে হবে:</p><img alt="নীল পর্দার বিকাশ" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569967676394.png" /><p>অবশেষে আমরা এই দৃশ্যের সবচেয়ে গতিশীল অংশে পৌঁছেছি - আপডেট () ফাংশন যেখানে নক্ষত্রগুলি পড়ছে। এই ফাংশনটি প্রতি 60 এমএস একবারে বলা হয়। আমরা প্রতি সেকেন্ডে একটি নতুন তারকা নির্গত করতে চাই। আমরা এর জন্য একটি গতিশীল গোষ্ঠী ব্যবহার করি না কারণ প্রতিটি তারার জীবনচক্র সংক্ষিপ্ত: এটি ব্যবহারকারী ক্লিক করে বা মাটিতে আঘাত করে ধ্বংস হয়। সুতরাং আমরা emitStar () ফাংশনে একটি নতুন তারকা তৈরি করি এবং দুটি ইভেন্টের প্রসেসিং যুক্ত করি: অনক্লিক () এবং অনকোলিজেন ()।</p><pre>আপডেট (সময়: সংখ্যা): অকার্যকর dif var পার্থক্য: সংখ্যা = সময় - this.lastStarTime; if (diff> this.delta) {this.lastStarTime = সময়; যদি (this.delta> 500) {this.delta - = 20; } this.emitStar (); .in this.info.text = this.starsCaught + "ধরা -" + this.starsFallen + "পড়ে (সর্বোচ্চ 3)"; }</pre><pre>বেসরকারী অনক্লিক (তারা: Phaser.Physics.Arcade.I छवि): () => শূন্য {রিটার্ন ফাংশন () {তারকা.setTint (0x00ff00); star.setVelocity (0, 0); this.starsCaught + = 1; this.time.delayedCall (100, ফাংশন (তারা) {তারকা.ডেস্ট্রয় ();}, [তারা], এটি); }}</pre><pre>বেসরকারী onFall (তারা: Phaser.Physics.Arcade.I छवि): () => শূন্য {রিটার্ন ফাংশন () {তারকা.setTint (0xff0000); this.starsFallen + = 1; this.time.delayedCall (100, ফাংশন (তারা) {তারকা.ডেস্ট্রয় ();}, [তারা], এটি); }}</pre><pre>বেসরকারী emitStar (): অকার্যকর তারা: Phaser.Physics.Arcade.I छवि; var x = Phaser.Math.Between (25, 775); var y = 26; তারকা = this.physics.add.image (x, y, "তারা");</pre><pre>star.setDisplaySize (50, 50); star.setVelocity (0, 200); star.setInteractive ();</pre><pre>স্টার.অন ('পয়েন্টারডাউন', this.on ক্লিক (তারকা), এটি); this.physics.add.collider (তারা, এটি.স্যান্ড, এটি.অনফ্যাল (তারকা), নাল, এটি); }</pre><p>আমাদের শেষ পর্যন্ত একটি খেলা আছে! এখনও কোন বিজয়ী শর্ত নেই। আমরা আমাদের টিউটোরিয়ালের শেষ অংশে এটি যুক্ত করব।</p><img alt="আমি তারার ধরতে খারাপ ..." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569967677698.png" /><h3>সব কিছু প্যাক করুন</h3><p>একটি গেমটি সাধারণত বেশ কয়েকটি দৃশ্য ধারণ করে। গেমপ্লেটি সহজ হলেও, আপনার একটি খোলার দৃশ্য প্রয়োজন হবে (কমপক্ষে "প্লে!" বোতাম সহ) এবং একটি সমাপ্ত দৃশ্য (আপনার গেমিং সেশনের ফলাফল সহ, যেমন স্কোর বা সর্বোচ্চ স্কোর অর্জন)। আসুন আমাদের অ্যাপ্লিকেশনগুলিতে এই দৃশ্যগুলি যুক্ত করুন।</p><p>আমাদের ক্ষেত্রে, এগুলি বেশ অনুরূপ হবে কারণ আমি গেমের গ্রাফিক ডিজাইনের প্রতি খুব বেশি মনোযোগ দিতে চাই না। সর্বোপরি, এটি একটি প্রোগ্রামিং টিউটোরিয়াল।</p><p>স্বাগতমScene.ts এ স্বাগত দৃশ্যে নিম্নলিখিত কোড রয়েছে। নোট করুন যে কোনও ব্যবহারকারী সেই দৃশ্যে ক্লিক করলে একটি গেমের দৃশ্য উপস্থিত হবে।</p><pre>"phaser" আমদানি করুন;</pre><pre>ওয়েলকামসীন রফতানি ক্লাস Phaser.Scene {শিরোনাম: Phaser.GameObjects.Text প্রসারিত করে; দ্রষ্টব্য: Phaser.GameObjects.Text;</pre><pre>কনস্ট্রাক্টর () {সুপার ({কী: "ওয়েলকামসীন"}); }</pre><pre>তৈরি (): শূন্য {var শিরোনাম পাঠ্য: স্ট্রিং = "স্টারফল"; this.title = this.add.text (150, 200, শিরোনাম পাঠ, {ফন্ট: '128px আরিয়াল বোল্ড', পূরণ করুন: '#FBFBAC'});</pre><pre>var hintText: স্ট্রিং = "শুরু করতে ক্লিক করুন"; this.hint = this.add.text (300, 350, hintText, {ফন্ট: '24px আরিয়াল বোল্ড', পূরণ করুন: '#FBFBAC'});</pre><pre>this.input.on ('পয়েন্টারডাউন', ফাংশন (/ * পয়েন্টার * /) {this.scene.start ("গেমসিন");}, এটি); }};</pre><p>স্কোরিংয়ের দৃশ্যটি প্রায় একইরকম দেখায় এবং ক্লিক করা হলে স্বাগত দৃশ্যে পৌঁছে যায় (স্কোরসিন.টিস)।</p><pre>"phaser" আমদানি করুন;</pre><pre>ক্লাস স্কোর রফতানি করুন Phaser.Scene {স্কোর: সংখ্যা; ফলাফল: Phaser.GameObjects.Text; দ্রষ্টব্য: Phaser.GameObjects.Text;</pre><pre>কনস্ট্রাক্টর () {সুপার ({কী: "স্কোরসীন"}); }</pre><pre>init (প্যারামস: যে কোনও): শূন্য {this.score = params.starsCaught; }</pre><pre>(): অকার্যকর {var ফলাফল পাঠ্য: স্ট্রিং = 'আপনার স্কোর' + এটি.স্কোর + '!'; this.result = this.add.text (200, 250, রেজাল্ট টেক্সট, {ফন্ট: '48px এরিয়াল বোল্ড', পূরণ করুন: '#FBFBAC'});</pre><pre>var হিন্টেক্সট: স্ট্রিং = "পুনঃসূচনা করতে ক্লিক করুন"; this.hint = this.add.text (300, 350, hintText, {ফন্ট: '24px আরিয়াল বোল্ড', পূরণ করুন: '#FBFBAC'});</pre><pre>this.input.on ('পয়েন্টারডাউন', ফাংশন (/ * পয়েন্টার * /) {this.scene.start ("ওয়েলকামসীন");}, এটি); }};</pre><p>আমাদের এখন আমাদের মূল অ্যাপ্লিকেশন ফাইলটি আপডেট করতে হবে: এই দৃশ্যগুলি যুক্ত করুন এবং ওয়েলকামসিনকে তালিকায় প্রথম করুন:</p><pre>"phaser" আমদানি করুন; "./WelcomeScene" থেকে "ওয়েলকামসীন Import আমদানি করুন; "./GameScene" থেকে {গেমসিন; আমদানি করুন; "./ScoreScene" থেকে {স্কোরসীন Import আমদানি করুন;</pre><pre>কনস্ট কনফিগারেশন: গেমকনফিগ = {... দৃশ্য: [ওয়েলকামসিন, গেমসিন, স্কোরসিন], ...</pre><p>আপনি কি অনুপস্থিত লক্ষ্য করেছেন? ঠিক আছে, আমরা এখনও কোথাও স্কোরসীনকে কল দিচ্ছি না! খেলোয়াড় যখন তৃতীয় তারকা মিস করেছেন তখন এটি কল করুন:</p><pre>বেসরকারী onFall (তারা: Phaser.Physics.Arcade.I छवि): () => শূন্য {রিটার্ন ফাংশন () {তারকা.setTint (0xff0000); this.starsFallen + = 1; this.time.delayedCall (100, ফাংশন (তারা) {তারকা.ডেস্ট্রয় (); যদি (this.starsFallen> 2) {this.scene.start ("স্কোরসেন", {তারক্যাচ: this.starsCaught aught);}}, [তারা], এটি); }}</pre><p>সর্বোপরি, আমাদের স্টারফল গেমটি একটি বাস্তব গেমের মতো দেখাচ্ছে - এটি শুরু হয়, শেষ হয় এবং আর্কাইভ করার লক্ষ্যও রয়েছে (আপনি কতটি তারা ধরতে পারবেন?)।</p><p>আমি আশা করি এই টিউটোরিয়ালটি আপনার জন্য ততটাই কার্যকর হবে যখন আমি এটি লিখেছিলাম।</p><p>এই টিউটোরিয়ালটির উত্স কোডটি এখানে পাওয়া যাবে।</p></div><div class="neighbor-articles"><h4 class="ui header">আরো দেখুন</h4><a href="/question/how-to-connect-samsung-note-5-to-computer/" title="কম্পিউটারে কিভাবে স্যামসাং নোট 5 সংযোগ করবেন">কম্পিউটারে কিভাবে স্যামসাং নোট 5 সংযোগ করবেন</a><a href="/question/how-to-turn-on-epson-projector-without-remote/" title="রিমোট ছাড়াই কীভাবে অ্যাপসন প্রজেক্টর চালু করবেন">রিমোট ছাড়াই কীভাবে অ্যাপসন প্রজেক্টর চালু করবেন</a><a href="/question/how-to-determine-if-a-matrix-is-singular/" title="ম্যাট্রিক্স একবচন হলে কীভাবে তা নির্ধারণ করবেন">ম্যাট্রিক্স একবচন হলে কীভাবে তা নির্ধারণ করবেন</a><a href="/question/how-to-paralyze-yourself/" title="নিজেকে কীভাবে পক্ষাঘাতগ্রস্থ করবেন">নিজেকে কীভাবে পক্ষাঘাতগ্রস্থ করবেন</a><a href="/question/how-to-say-wet-paint-in-spanish/" title="স্প্যানিশ মধ্যে ভিজা পেইন্ট কিভাবে বলতে হয়">স্প্যানিশ মধ্যে ভিজা পেইন্ট কিভাবে বলতে হয়</a><a href="/question/how-to-install-avada/" title="কীভাবে আবাদ ইনস্টল করবেন">কীভাবে আবাদ ইনস্টল করবেন</a><a href="/question/how-to-test-for-endogeneity/" title="দীর্ঘস্থায়ী জন্য পরীক্ষা কিভাবে">দীর্ঘস্থায়ী জন্য পরীক্ষা কিভাবে</a><a href="/question/how-to-open-a-stapler-all-the-way/" title="কীভাবে পুরোপুরি স্ট্যাপলারটি খুলতে হয়">কীভাবে পুরোপুরি স্ট্যাপলারটি খুলতে হয়</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">আরো দেখুন</h4><a href="/article/the-burden-of-making-decisions-and-how-to-break-the-toxic-cycle-of-procrastination-51b2e8/" title="সিদ্ধান্ত গ্রহণ এবং বিলম্বের বিষাক্ত চক্র ভেঙে দেওয়ার ভার।">সিদ্ধান্ত গ্রহণ এবং বিলম্বের বিষাক্ত চক্র ভেঙে দেওয়ার ভার।</a><a href="/article/how-to-make-work-better-bcc75a/" title="কীভাবে আপনার কাজের উন্নতি করবেন">কীভাবে আপনার কাজের উন্নতি করবেন</a><a href="/article/a-practical-guide-on-how-to-stop-people-pleasing-and-start-being-yourself-50e709/" title="কীভাবে লোকেদের সন্তুষ্ট হওয়া থেকে বিরত রাখা যায় এবং নিজের হতে শুরু করা যায় সে সম্পর্কে একটি সহজ গাইড">কীভাবে লোকেদের সন্তুষ্ট হওয়া থেকে বিরত রাখা যায় এবং নিজের হতে শুরু করা যায় সে সম্পর্কে একটি সহজ গাইড</a><a href="/article/how-to-update-the-apollo-client-s-cache-after-a-mutation-929230/" title="কোনও মিউটেশনের পরে অ্যাপোলো ক্লায়েন্ট ক্যাশে কীভাবে আপডেট করবেন">কোনও মিউটেশনের পরে অ্যাপোলো ক্লায়েন্ট ক্যাশে কীভাবে আপডেট করবেন</a><a href="/article/how-to-put-the-reader-in-the-story-with-description-aabaab/" title="গল্পে বর্ণনা সহ পাঠককে কীভাবে sertোকানো যায়">গল্পে বর্ণনা সহ পাঠককে কীভাবে sertোকানো যায়</a><a href="/article/how-to-start-a-successful-side-hustle-and-make-1000-mo-or-more-98634d/" title="কীভাবে সফল পাশের তাড়াহুড়া শুরু করবেন এবং 1000 ডলার / মাস বা তার বেশি উপার্জন করুন">কীভাবে সফল পাশের তাড়াহুড়া শুরু করবেন এবং 1000 ডলার / মাস বা তার বেশি উপার্জন করুন</a><a href="/article/how-to-optimize-your-writing-toolbox-and-determine-what-type-of-writer-you-want-to-be-d2d588/" title="আপনার লেখার সরঞ্জামবক্সকে কীভাবে অনুকূলিত করবেন এবং কী ধরণের লেখক হতে চান তা নির্ধারণ করুন">আপনার লেখার সরঞ্জামবক্সকে কীভাবে অনুকূলিত করবেন এবং কী ধরণের লেখক হতে চান তা নির্ধারণ করুন</a><a href="/article/how-to-handle-adult-temper-tantrums-982625/" title="প্রাপ্তবয়স্কদের মধ্যে তন্ত্রের মোকাবেলা Cop">প্রাপ্তবয়স্কদের মধ্যে তন্ত্রের মোকাবেলা Cop</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="sa flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>