Bina permainan web dalam satu jam dengan Visual Studio dan ASP.NET

Artikel ini adalah sebahagian daripada siri pembangunan web dari Microsoft. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Artikel ini membincangkan:

Falsafah Pembangunan Permainan Asas
menggunakan teknologi web untuk pembangunan permainan
Menambah Kawalan Permainan dan Ai

Teknologi yang dibincangkan:

Visual Studio 2013 Pro, Visual Studio 2013 Komuniti, ASP.NET
muat turun kod (.zip)

Anda tidak memerlukan set kemahiran yang sama sekali baru untuk membangunkan permainan. Malah, kemahiran pembangunan web semasa anda di HTML, JavaScript, CSS dan sebagainya adalah baik untuk pelbagai permainan. Apabila anda membina permainan dengan teknologi web, ia akan berjalan dengan cukup banyak peranti dengan penyemak imbas.

Untuk membuktikan ini, saya akan menunjukkan membina permainan dari awal menggunakan teknologi web dan hanya dua perpustakaan luaran, dan saya akan melakukannya dalam masa kurang dari satu jam. Saya akan merangkumi pelbagai topik pembangunan permainan, dari reka bentuk asas dan susun atur, kawalan dan sprite, kepada kecerdasan buatan (AI) untuk lawan yang mudah. Saya juga akan membangunkan permainan supaya ia berfungsi pada PC, tablet dan telefon pintar. Jika anda mempunyai pengalaman dengan pengaturcaraan sebagai pemaju web atau domain pembangunan lain, tetapi tidak ada pengalaman menulis permainan, artikel ini akan membuat anda bermula. Sekiranya anda memberi saya satu jam, saya berjanji untuk menunjukkan kepada anda tali.

Takeaways Key

Pembangunan cepat: Gunakan kemahiran pembangunan web sedia ada di HTML, JavaScript, dan CSS untuk membuat permainan yang berjalan pada hampir mana -mana peranti dengan penyemak imbas, menggunakan Visual Studio dan ASP.NET.
Visual Studio sebagai alat: Leverage Visual Studio untuk pembangunan permainan pesat dan ujian merentasi peranti yang berbeza, memastikan keserasian dan prestasi.
Reka bentuk permainan dipermudahkan: Mulakan dengan prinsip reka bentuk permainan asas dan permainan mudah seperti "ping" (varian pong), memberi tumpuan kepada susun atur dan mekanik permainan penting.
Elemen Interaktif: Menggabungkan kawalan permainan interaktif menggunakan JavaScript dan CSS untuk permainan dinamik, memastikan unsur -unsur seperti bola dan pemain bertindak balas terhadap input pengguna dengan berkesan.
• Integrasi AI: Melaksanakan kecerdasan buatan asas untuk lawan permainan, yang membolehkan pengalaman pemain tunggal yang lebih menarik.
• Keserasian Cross-Platform: Ujian dan pastikan permainan berfungsi dengan baik di pelbagai pelayar dan peranti, menggunakan alat seperti BrowserStack untuk ujian komprehensif.
Bangun dan berlari

Saya akan melakukan semua pembangunan di Visual Studio, yang akan membolehkan pelaksanaan aplikasi web yang cepat ketika saya membuat perubahan. Pastikan anda mempunyai versi terkini Visual Studio supaya anda boleh mengikuti. Saya menggunakan Visual Studio 2013 Pro, tetapi mengemas kini kod dengan komuniti Visual Studio 2013. Juga jika anda mempunyai Mac atau Linux, kod Visual Studio tersedia pada masa kini.

Aplikasi ini tidak memerlukan kod pelayan, jadi saya mulakan dengan membuat projek laman web yang baru dan kosong di Visual Studio. Saya akan menggunakan template C# kosong untuk laman web dengan memilih pilihan C# Visual selepas memilih Fail | Baru | Asp.net laman web kosong.

Fail HTML Indeks memerlukan hanya tiga sumber: jQuery, lembaran gaya utama dan fail JavaScript utama. Saya menambah fail CSS kosong ke projek yang dipanggil Style.css dan fail JavaScript kosong yang dipanggil ping.js untuk mengelakkan kesilapan apabila memuatkan halaman:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Juga jangan lupa untuk menguji aplikasi ini (atau yang lain) untuk perkara itu di seluruh pelayar & peranti. Walaupun kod yang saya tulis adalah saling beroperasi dengan pelayar moden seperti Chrome, Firefox, dan Microsoft Edge, ia sentiasa menjadi amalan terbaik untuk menyemak semula. Sekarang anda boleh melakukannya dengan mesin maya percuma dan alat lain seperti http://www.browserstack.com.

reka bentuk asas

Permainan yang saya bina adalah variasi pong yang saya panggil ping. Ping pada dasarnya mempunyai peraturan yang sama seperti Pong, kecuali bahawa pemain mana -mana pemain merebut bola ketika datang kepada mereka dan kemudian dapat membakar bola sama ada secara langsung atau pada sudut atas atau ke bawah. Selalunya terbaik untuk menarik bagaimana anda ingin permainan melihat sebelum anda membinanya. Untuk permainan ini, susun atur keseluruhan yang saya mahu lihat ditunjukkan di bawah.

Sebaik sahaja saya telah membangunkan susun atur reka bentuk permainan, ia hanya satu perkara untuk menambah setiap elemen ke HTML untuk membina permainan. Walau bagaimanapun, satu perkara yang perlu diperhatikan ialah saya akan mengumpulkan papan skor dan kawalan untuk memastikan mereka duduk bersama. Jadi satu demi satu, anda dapat melihat saya telah menambah unsur -unsur, seperti yang ditunjukkan di bawah:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Main dengan gaya

Jika anda memuatkan halaman ini, anda tidak akan melihat apa -apa kerana tidak ada gaya yang digunakan. Saya sudah menyediakan pautan ke fail main.css di HTML saya, jadi saya akan meletakkan semua CSS saya dalam fail baru dengan nama itu. Perkara pertama yang akan saya lakukan ialah meletakkan segala -galanya di skrin. Badan halaman perlu mengambil keseluruhan skrin, jadi saya akan menetapkannya terlebih dahulu:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

kedua, saya perlu mempunyai arena mengisi keseluruhan skrin dengan imej latar belakang arena (lihat imej di bawah) Digunakan:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Seterusnya, saya akan meletakkan papan skor. Saya mahu ini muncul di atas dan pusat, melalui unsur -unsur lain. Kedudukan Perintah: Mutlak membolehkan saya meletakkannya di mana sahaja saya mahu dan meninggalkan: 50% meletakkannya di bahagian atas tingkap, tetapi bermula di bahagian paling kiri elemen papan skor. Untuk memastikan ia berpusat dengan sempurna, saya menggunakan harta transformasi dan harta z-indeks memastikan ia sentiasa berada di bahagian atas:

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

Saya juga mahu fon teks menjadi bertema retro. Pelayar yang paling moden membolehkan saya memasukkan fon saya sendiri. Saya dapati fon permulaan akhbar yang sesuai 2P dari CodeMan38 (zon38.net). Untuk menambah fon ke papan skor, saya perlu membuat wajah fon baru:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Sekarang, skor berada dalam tag H1, jadi saya boleh menetapkan font untuk semua tag H1. Sekiranya font hilang, saya akan menyediakan beberapa pilihan sandaran:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Untuk unsur -unsur lain, saya akan menggunakan lembaran imej sprite. Lembaran sprite mengandungi semua imej yang saya perlukan untuk permainan dalam satu fail (lihat imej di bawah).

Mana -mana elemen yang mempunyai imej pada helaian ini akan mempunyai kelas Sprite yang diberikan. Kemudian, untuk setiap elemen, saya akan menggunakan kedudukan latar belakang untuk menentukan bahagian lembaran sprite yang saya ingin tunjukkan:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

Seterusnya, saya akan menambah kelas Sprite ke semua elemen yang akan menggunakan lembaran sprite. Saya perlu melompat kembali ke HTML untuk melakukan ini:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Sekarang saya perlu menunjukkan kedudukan setiap sprite pada helaian untuk setiap elemen. Sekali lagi, saya akan melakukan ini menggunakan kedudukan latar belakang:

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

Kedudukan: Harta mutlak pada pemain, lawan dan bola akan membiarkan saya memindahkan mereka ke JavaScript. Jika anda melihat halaman sekarang, anda akan melihat kawalan dan bola mempunyai kepingan yang tidak perlu yang dilampirkan kepada mereka. Ini kerana saiz sprite lebih kecil daripada 128 piksel lalai, jadi saya akan menyesuaikannya dengan saiz yang betul. Hanya ada satu bola, jadi saya akan menetapkan saiznya secara langsung:

<span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>

Terdapat empat elemen kawalan (butang pengguna boleh menekan untuk memindahkan pemain), jadi saya membuat saya membuat kelas khas untuk mereka. Saya juga akan menambah margin supaya mereka mempunyai sedikit ruang di sekeliling mereka:

<span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>

Setelah menambah kelas ini, permainan ini mempunyai kawalan yang lebih baik:

<span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>

Perkara terakhir yang perlu saya lakukan ialah meletakkan kawalan supaya mereka oleh ibu jari pengguna apabila halaman berjalan pada peranti mudah alih. Saya akan melekatkan mereka ke sudut bawah:

<span><span><span><div> id<span>="player"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="opponent"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="ball"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-left"</span>>
  <span><span><span><div> id<span>="up"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="down"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-right"</span>>
  <span><span><span><div> id<span>="left"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="right"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Satu perkara yang baik mengenai reka bentuk ini adalah semuanya ditetapkan dengan kedudukan relatif. Ini bermakna skrin boleh menjadi beberapa saiz yang berbeza semasa masih membuat permainan kelihatan baik.

ikuti bola melantun

Sekarang saya akan membuat bola bergerak. Untuk kod JavaScript, saya telah merujuk fail yang dipanggil ping.js dalam html, seperti yang saya lakukan dengan CSS. Saya akan menambah kod ini ke fail baru dengan nama itu. Saya akan membuat objek untuk bola dan setiap pemain, tetapi saya akan menggunakan corak kilang untuk objek.

Ini adalah konsep yang mudah. Fungsi bola mencipta bola baru apabila anda memanggilnya. Tidak perlu menggunakan kata kunci baru. Corak ini mengurangkan beberapa kekeliruan di sekitar pembolehubah ini dengan menjelaskan sifat objek yang tersedia. Dan kerana saya hanya mempunyai satu jam untuk membuat permainan ini, saya perlu meminimumkan konsep yang mengelirukan.

struktur corak ini, kerana saya membuat kelas bola mudah:

<span><span>#player</span> {
</span>  <span>position: absolute;
</span>  <span>background-position: 0px 128px;
</span><span>}
</span><span><span>#opponent</span> {
</span>  <span>position: absolute;
</span>  <span>background-position: 0px 0px;
</span><span>}
</span><span><span>#ball</span> {
</span>  <span>position: absolute;
</span>  <span>background-position: 128px 128px;
</span><span>}
</span><span><span>#right</span> {
</span>  <span>background-position: 64px 192px;
</span><span>}
</span><span><span>#left</span> {
</span>  <span>background-position: 64px 0px;
</span><span>}
</span><span><span>#down</span> {
</span>  <span>background-position: 128px 192px;
</span><span>}
</span><span><span>#up</span> {
</span>  <span>background-position: 128px 0px;
</span><span>}
</span>

Untuk membuat bola baru, saya hanya panggil fungsi ini yang telah saya tentukan:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Sekarang saya mahu membuat bola bergerak dan melantun di sekitar skrin. Pertama, saya perlu memanggil fungsi kemas kini pada beberapa selang untuk membuat animasi bola. Pelayar moden menyediakan fungsi yang dimaksudkan untuk tujuan ini yang dipanggil RequestAnimationFrame. Ini memerlukan fungsi sebagai hujah, dan akan memanggil fungsi lulus pada kali berikutnya ia menjalankan kitaran animasinya. Ini membolehkan bola bergerak dalam langkah -langkah lancar apabila penyemak imbas siap untuk kemas kini. Apabila ia memanggil fungsi lulus, ia akan memberikan masa dalam beberapa saat sejak halaman dimuatkan. Ini penting untuk memastikan animasi adalah konsisten dari masa ke masa. Dalam permainan, penggunaan RequestAnimationFrame muncul seperti berikut:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Perhatikan bahawa RequestAnimationFrame dipanggil lagi dalam fungsi, kerana bola telah selesai mengemaskini. Ini memastikan animasi berterusan.

Walaupun kod ini akan berfungsi, mungkin ada masalah di mana skrip bermula sebelum halaman dimuatkan sepenuhnya. Untuk mengelakkan ini, saya akan memulakan kod apabila halaman dimuatkan, menggunakan jQuery:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

Kerana saya tahu kelajuan bola (halaju) dan masa sejak kemas kini terakhirnya, saya dapat melakukan beberapa fizik mudah untuk menggerakkan bola ke hadapan:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Cuba menjalankan kod dan anda akan melihat bola bergerak pada sudut dan di luar skrin. Ini menyeronokkan untuk satu saat, tetapi apabila bola keluar dari tepi skrin, keseronokan berhenti. Oleh itu, langkah seterusnya adalah untuk membuat bola melantun dari tepi skrin, seperti yang dilaksanakan dalam Rajah 7. Tambahkan kod ini dan menjalankan aplikasi akan menunjukkan bola yang terus memantul.

pemain yang boleh bergerak

Sekarang sudah tiba masanya untuk membuat objek pemain. Langkah pertama dalam fleshing kelas pemain adalah untuk membuat fungsi bergerak mengubah kedudukan pemain. Pembolehubah sampingan akan menunjukkan sisi mana mahkamah pemain akan tinggal, yang akan menentukan cara meletakkan pemain secara mendatar. Nilai Y, yang diluluskan ke dalam fungsi bergerak, akan menjadi berapa banyak atau ke bawah pemain akan bergerak:

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

kita kemudian boleh meletakkan pergerakan pemain, menghentikan gerakan jika pemain sprite mencapai bahagian atas atau bawah tingkap.

<span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>

Saya kini boleh membuat dua pemain dan memajukan mereka ke sisi yang sesuai dari skrin:

<span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>

input papan kekunci

Jadi dalam teori anda boleh memindahkan pemain, tetapi ia tidak akan bergerak tanpa arahan. Tambah beberapa kawalan kepada pemain di sebelah kiri. Anda mahukan dua cara untuk mengawal pemain itu: menggunakan papan kekunci (pada PCS) dan mengetuk kawalan (pada tablet dan telefon).

Untuk memastikan konsistensi antara input sentuhan dan input tetikus pada pelbagai platform, saya akan menggunakan kerangka penyatuan yang hebat Hand.js (handjs.codeplex.com). Pertama, saya akan menambah skrip ke HTML di bahagian kepala:

<span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>

Saya kemudian akan menggunakan Hand.js dan jQuery untuk mengawal pemain apabila anda menekan kekunci papan kekunci A dan Z, atau apabila anda mengetuk kawalan.

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Tangkap bola

Ketika bola melantun, saya ingin membiarkan pemain menangkapnya. Apabila ia ditangkap, bola mempunyai pemilik, dan ia mengikuti gerakan pemilik itu. Saya akan menambah fungsi ke kaedah langkah bola, yang membolehkan pemilik, yang mana bola kemudian akan mengikuti:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Pada masa ini, tidak ada cara untuk mendapatkan kedudukan objek pemain, jadi saya akan menambah getPosition dan getSide aksesor ke objek pemain:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

Sekarang, jika bola mempunyai pemilik, ia akan mengikuti pemilik itu. Tetapi bagaimana saya menentukan pemiliknya? Seseorang perlu menangkap bola. Mari kita tentukan apabila salah satu pemain sprite menyentuh bola. Apabila itu berlaku, saya akan menetapkan pemilik bola kepada pemain itu.

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Jika anda cuba bermain permainan sekarang, anda akan mendapati bola melantun dari bahagian atas skrin, dan anda boleh memindahkan pemain untuk menangkapnya. Sekarang, bagaimana anda membuangnya? Itulah yang kawalan kanan adalah untuk-menafikan bola. Mari tambahkan fungsi "api" kepada pemain, serta harta matlamat.

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

kita kemudian boleh menambah fungsi papan kekunci untuk menetapkan fungsi tujuan dan kebakaran pemain. Matlamat akan berfungsi sedikit berbeza. Apabila Kunci Aiming dikeluarkan, matlamatnya akan kembali ke arah langsung.

<span><span>@font-face</span> {
</span>  <span>font-family: 'PressStart2P';
</span>  <span>src: <span>url('PressStart2P.woff')</span>;
</span><span>}
</span>

Penambahan akhir akan menjadi sokongan sentuhan pada semua kawalan. Saya akan membuat kawalan pada perubahan yang betul tujuan pemain. Saya juga akan membuatnya menyentuh mana -mana sahaja di skrin memadamkan bola:

<span>h1 {
</span>  <span>font-family: 'PressStart2P', 'Georgia', serif;
</span><span>}
</span>

Simpan skor

Apabila bola melewati pemain, saya mahu menukar skor dan memberikan bola kepada pemain itu. Saya akan menggunakan peristiwa tersuai supaya saya dapat memisahkan pemarkahan dari mana -mana objek yang ada. Fungsi kemas kini semakin lama, jadi saya akan menambah fungsi peribadi baru yang dipanggil checkscored:

<span><span>.sprite</span> {
</span>  <span>background-image: <span>url("sprites.png")</span>;
</span>  <span>width: 128px;
</span>  <span>height: 128px;
</span><span>}
</span>

Kod di bawah bertindak balas terhadap peristiwa tersebut untuk mengemas kini skor dan menyerahkan bola. Tambahkan kod ini ke bahagian bawah dokumen JavaScript.

<span><span><span><div> id<span>="player"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="opponent"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="ball"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-left"</span>>
  <span><span><span><div> id<span>="up"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="down"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span><div> id<span>="controls-right"</span>>
  <span><span><span><div> id<span>="left"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="right"</span> class<span>="sprite"</span>><span><span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Sekarang apabila bola membuatnya melepasi lawan anda (yang tidak begitu sukar, kerana lawan tidak bergerak) skor anda akan naik, dan bola akan diserahkan kepada lawan. Walau bagaimanapun, lawan hanya akan memegang bola.

Dapatkan Smart

anda hampir mempunyai permainan. Sekiranya anda mempunyai seseorang yang akan bermain. Sebagai langkah terakhir, saya akan menunjukkan cara mengawal lawan dengan AI yang mudah. Lawan akan cuba untuk tetap selari dengan bola ketika ia bergerak. Jika lawan menangkap bola, ia akan bergerak secara rawak dan api bola dalam arah rawak. Untuk membuat AI berasa sedikit lebih manusia, saya akan menambah kelewatan dalam segala yang dilakukan. Ini bukan AI yang sangat pintar, fikiran anda, tetapi ia akan menjadi sesuatu untuk bermain permainan.

Apabila merancang sistem seperti ini, adalah baik untuk berfikir di negeri -negeri. Lawan AI mempunyai tiga negeri yang mungkin: mengikuti, mensasarkan/menembak dan menunggu. Saya akan menjadi negeri antara tindakan berikut untuk menambah unsur yang lebih manusia. Mulakan dengan itu untuk objek AI:

<span><span>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><script> src<span >="ping.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span><link> rel<span>="stylesheet"</span> href<span>="style.css"</span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span>

Bergantung pada keadaan AI, saya mahu ia melakukan tindakan yang berbeza. Sama seperti bola, saya akan membuat fungsi kemas kini yang boleh saya panggil di RequestAnimationFrame untuk bertindak AI mengikut keadaannya:

<span><span><span><div> id<span>="arena"</span>>
  <span><span><span><div> id<span>="score"</span>>
    <span><span><span><h1 id="gt">></h1></span>
</span>      <span><span><span><span> id<span>="playerScore"</span>></span>0<span><span></span></span>></span>
</span>     <span><span><span><span> id<span>="opponentScore"</span>></span>0<span><span></span></span>></span>
</span>   <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="player"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="opponent"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="ball"</span>><span><span></span></span>
</div></span>></span>
</span> <span><span><span><div> id<span>="controls-left"</span>>
   <span><span><span><div> id<span>="up"</span>><span><span></span></span>
</div></span>></span>
</span>   <span><span><span><div> id<span>="down"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> id<span>="controls-right"</span>>
    <span><span><span><div> id<span>="left"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span><div> id<span>="right"</span>><span><span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

Keadaan berikut adalah mudah. Lawan bergerak ke arah menegak bola, dan peralihan AI ke keadaan menunggu untuk menyuntik beberapa masa reaksi yang perlahan. Kod di bawah menunjukkan kedua -dua negeri ini:

<span>body {
</span>  <span>margin: 0px;
</span>  <span>height: 100%;
</span><span>}
</span>

AI bergantian antara harus mengikuti bola dan tunggu detik berpecah. Sekarang tambahkan kod ke fungsi kemas kini seluruh permainan:

<span><span>#arena</span> {
</span>  <span>background-image: <span>url(arena.png)</span>;
</span>  <span>background-size: 100% 100%;
</span>  <span>margin: 0px;
</span>  <span>width: 100%;
</span>  <span>height: 100%;
</span>  <span>overflow: hidden;
</span><span>}
</span>

Apabila anda menjalankan permainan, anda akan melihat lawan mengikuti pergerakan bola -bukan AI yang buruk dalam kurang daripada 30 baris kod. Sudah tentu, jika lawan menangkap bola, ia tidak akan melakukan apa -apa. Oleh itu, untuk helah terakhir jam itu, sudah tiba masanya untuk mengendalikan tindakan untuk keadaan yang bertujuan.

Saya mahu AI bergerak secara rawak beberapa kali dan kemudian api bola ke arah rawak. Mari tambahkan fungsi peribadi yang hanya itu. Menambah fungsi Aimandfire ke pernyataan kes yang mensasarkan menjadikan AI berfungsi sepenuhnya untuk dimainkan.

<span><span>#score</span> {
</span>  <span>position: absolute;
</span>  <span>z-index: 1000;
</span>  <span>left: 50%;
</span>  <span>top: 5%;
</span>  <span>transform: translate(-50%, 0%);
</span><span>}
</span>

membungkus

Sekarang, anda mempunyai permainan web penuh yang berfungsi pada PC, telefon pintar dan tablet. Terdapat banyak kemungkinan penambahbaikan untuk permainan ini. Ia akan kelihatan sedikit janggal dalam mod potret pada telefon pintar, contohnya, jadi anda perlu memastikan anda memegang telefon dalam landskap untuk berfungsi dengan baik. Ini hanyalah demonstrasi kecil kemungkinan untuk pembangunan permainan untuk web dan seterusnya.

Terima kasih kepada pakar teknikal Mohamed Ameen Ibrahim kerana mengkaji artikel ini.

lebih banyak tangan dengan JavaScript

Artikel ini adalah sebahagian daripada Siri Pembangunan Web dari Microsoft Tech Evangelists mengenai pembelajaran praktikal JavaScript, projek sumber terbuka, dan amalan terbaik interoperabilitas termasuk pelayar Microsoft Edge dan enjin rendering EdgeHTML yang baru.

Kami menggalakkan anda untuk menguji penyemak imbas dan peranti termasuk Microsoft Edge - penyemak imbas lalai untuk Windows 10 - dengan alat percuma di dev.modern.ie:

• Imbas laman web anda untuk perpustakaan, isu susun atur, dan kebolehcapaian
• Gunakan mesin maya untuk Mac, Linux, dan Windows
• Ujian jauh untuk Microsoft Edge pada peranti anda sendiri
• Makmal Pengekodan pada GitHub: Ujian Salib dan Amalan Terbaik

Pembelajaran teknologi mendalam di Microsoft Edge dan platform web dari jurutera dan penginjil kami:

• Sidang Kemuncak Web Microsoft Edge 2015 (Apa yang Harapan dengan Pelayar Baru, Piawaian Platform Web yang baru, dan penceramah tetamu dari komuniti JavaScript)
• woah, saya boleh menguji kelebihan & iaitu pada mac & linux! (dari Rey Bango)
• memajukan JavaScript tanpa melanggar web (dari Christian Heilmann)
• enjin rendering tepi yang menjadikan web hanya berfungsi (dari Jacob Rossi)
• melepaskan rendering 3D dengan webgl (dari David Catuhe termasuk projek Vorlon.js dan Babylonjs)
• Aplikasi web yang dihoskan dan inovasi platform web (dari Kevin Hill dan Kiril Seksenov termasuk projek manifold.js)

lebih banyak alat & sumber silang platform percuma untuk platform web:

• kod studio visual untuk linux, macOS, dan windows
• kod dengan node.js dan percubaan percuma di Azure

Soalan Lazim (Soalan Lazim) Mengenai Membina Permainan Web dengan Visual Studio dan ASP.NET

Bagaimana saya boleh membuat permainan multiplayer menggunakan Visual Studio dan ASP.NET? Pertama, anda perlu merancang logik permainan, termasuk peraturan, interaksi pemain, dan hasil permainan. Seterusnya, anda perlu membuat antara muka pengguna permainan menggunakan HTML, CSS, dan JavaScript. Anda boleh menggunakan perpustakaan SignalR di ASP.NET untuk mengendalikan komunikasi masa nyata antara pelayan dan pelanggan. Akhirnya, anda perlu melaksanakan logik permainan di sisi pelayan menggunakan C# dan ASP.NET. Ini melibatkan pengendalian sambungan pemain, menguruskan keadaan permainan, dan kemas kini penyiaran kepada semua pelanggan yang bersambung.

Apakah amalan terbaik untuk pembangunan permainan di Visual Studio? Studio termasuk menggunakan corak Model-View-Controller (MVC) untuk memisahkan logik permainan dari antara muka pengguna, menggunakan rangka entiti untuk akses data, dan menggunakan ujian unit untuk memastikan ketepatannya kod anda. Di samping itu, anda harus menggunakan alat debugging terbina dalam Visual Studio untuk mengenal pasti dan memperbaiki pepijat dalam kod anda. Anda boleh membangunkan permainan mudah alih dengan Visual Studio dan ASP.NET. Walau bagaimanapun, penting untuk diperhatikan bahawa ASP.NET adalah terutamanya kerangka pembangunan web, jadi anda perlu menggunakan alat dan perpustakaan tambahan untuk membuat permainan mudah alih. Xamarin, alat pembangunan silang platform yang disertakan dengan Visual Studio, membolehkan anda menulis kod permainan anda di C# dan kemudian menyusunnya untuk Android, iOS, dan Windows Phone.

Bagaimana saya boleh mengoptimumkan prestasi permainan saya di Visual Studio?

Terdapat beberapa cara untuk mengoptimumkan prestasi permainan anda di Visual Studio. Pertama, anda harus menggunakan alat profil terbina dalam untuk mengenal pasti kesesakan dalam kod anda. Seterusnya, anda boleh menggunakan teknik seperti pengoptimuman kod, pengoptimuman struktur data, dan pengoptimuman algoritma untuk meningkatkan prestasi kod anda. Di samping itu, anda harus menggunakan ciri pecutan perkakasan kad grafik moden untuk meningkatkan prestasi rendering permainan anda. Kesan bunyi dan muzik ke permainan anda di Visual Studio melibatkan menggunakan kelas SoundPlayer di ruang nama System.Media. Anda boleh menggunakan kaedah main untuk memainkan kesan bunyi atau trek muzik, dan kaedah berhenti untuk berhenti bermain bunyi. Anda juga boleh menggunakan kaedah playlooping untuk memainkan bunyi secara berterusan. Kelas SoundPlayer menyokong fail WAV, jadi anda perlu menukar kesan bunyi dan trek muzik anda ke format ini. Dibangunkan di Visual Studio melibatkan beberapa langkah. Pertama, anda perlu membina permainan anda dalam mod pelepasan untuk membuat fail yang boleh dilaksanakan. Seterusnya, anda perlu membuat pemasang untuk permainan anda menggunakan alat seperti InstallShield. Akhirnya, anda boleh mengedarkan permainan anda melalui pelbagai saluran, seperti laman web anda sendiri, kedai permainan dalam talian, atau kedai aplikasi. > Walaupun mungkin untuk membangunkan permainan 3D menggunakan Visual Studio dan ASP.NET, ia bukan kes penggunaan yang paling biasa untuk alat ini. ASP.NET adalah terutamanya rangka kerja pembangunan web, dan Visual Studio adalah persekitaran pembangunan tujuan umum. Jika anda berminat untuk membangunkan permainan 3D, anda mungkin ingin mempertimbangkan menggunakan enjin pembangunan permainan yang berdedikasi seperti Unity atau Unreal Engine, yang menyediakan alat dan ciri yang lebih maju untuk pembangunan permainan 3D. -Pelala sokongan kepada permainan saya di Visual Studio?

Menambah sokongan pelbagai bahasa ke permainan anda di Visual Studio melibatkan menggunakan ciri penyetempatan ASP.NET. Anda boleh menggunakan fail sumber untuk menyimpan teks untuk setiap bahasa, dan kemudian gunakan kelas ResourceManager untuk mendapatkan teks yang sesuai berdasarkan tetapan bahasa pengguna. Anda juga boleh menggunakan kelas CultureInfo untuk mengendalikan perbezaan dalam format nombor, format tarikh, dan tetapan khusus locale yang lain. Visual Studio melibatkan menggunakan alat ujian terbina dalam. Anda boleh menggunakan ujian unit untuk menguji komponen individu permainan anda, ujian integrasi untuk menguji bagaimana komponen ini berfungsi bersama -sama, dan ujian UI untuk menguji antara muka pengguna. Anda juga boleh menggunakan alat penyahpepijatan di Visual Studio untuk mengenal pasti dan memperbaiki pepijat dalam kod anda.

Bolehkah saya menggunakan Visual Studio dan Asp.net untuk membangunkan permainan untuk konsol? alat. Pembangunan permainan konsol biasanya melibatkan menggunakan enjin pembangunan permainan yang berdedikasi seperti Unity atau Unreal Engine, yang menyediakan alat dan ciri yang lebih maju untuk pembangunan permainan konsol. Walau bagaimanapun, anda boleh menggunakan Visual Studio dan ASP.NET untuk membangunkan komponen-komponen pelayan permainan konsol, seperti perkhidmatan pembuatan jodoh berbilang pemain atau sistem pendahulu.

Atas ialah kandungan terperinci Bina permainan web dalam satu jam dengan Visual Studio dan ASP.NET. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!