Takeaways Key
masa pembangunan yang lebih cepat
Bermula
Seperti biasa, semua kod dari tutorial ini boleh didapati di GitHub dan demo boleh didapati di Codepen atau pada akhir tutorial.
arahan kopi yang paling biasa yang akan anda gunakan adalah:
Nama fail kopi -c akan menyusun fail Coffeescript ke fail dengan nama yang sama tetapi dengan lanjutan .js (fail coffeescript biasanya mempunyai lanjutan.).
Coffee -CW FileName akan menonton perubahan dalam fail (setiap kali anda menyimpan fail) dan menyusunnya.
Coffee -CW FolderName/ akan menonton perubahan pada semua fail.
Akhirnya, berguna untuk menyusun Coffeescript dari folder dengan fail .coffee ke folder yang mengandungi hanya .js fail.kopi -o js / -cw / coffee akan menonton perubahan dalam semua fail .cofee yang terletak di folder kopi dan letakkan output (JavaScript) dalam folder JS.
Jika anda tidak masuk ke terminal, anda boleh menggunakan alat dengan GUI untuk mengendalikan fail Coffeescript anda. Sebagai contoh, anda boleh mencuba Prepros pada percubaan tanpa had percuma (walaupun anda perlu membelinya jika anda suka). Imej di bawah menunjukkan beberapa pilihan yang disediakan:
anda dapat melihat bahawa prepros melakukan semua kerja untuk anda -ia menetapkan pemerhati supaya fail. dan ia menyokong Coffeescript ICED. Prepros juga boleh digunakan untuk preprocessors CSS seperti enjin kurang dan sass dan templat seperti Jade.
Permainan
antara muka permainan terdiri daripada yang berikut:
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
header yang secara ringkas menggambarkan permainan
Styling
kita juga boleh menambah warna yang berbeza ke dataran bergantung kepada sama ada mereka mempunyai Kelas X atau O (yang ditambah menggunakan JavaScript).
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Coffeescript in Action
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>Anda dapat melihat aplikasi tic-tac-toe kami bermula dengan $->, ini bersamaan dengan fungsi jQuery yang melaksanakan kod apabila DOM siap: $ (fungsi () {... ...});.
Coffeescript tidak bergantung pada titik -titik besar dan pendakap tetapi pada lekukan. -> memberitahu Coffeescript bahawa anda menentukan fungsi supaya anda boleh memulakan badan fungsi pada baris seterusnya dan indent badan dengan dua ruang.
Seterusnya, kami membuat objek yang dipanggil tic yang sendiri mengandungi objek yang dipanggil data. Anda dapat melihat bahawa pendakap atau koma tidak wajib apabila membuat objek, selagi anda menghidupkan sifat dengan betul.
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
Harta giliran akan memegang jumlah giliran yang diambil dalam permainan. Kita boleh menyemak sama ada ia memegang nombor yang sama atau tidak sekata dan dengan cara itu menentukan sama ada giliran X atau O.
sifat X dan O adalah objek dan akan mengandungi data yang berkaitan dengan bilangan X atau O pada tiga paksi yang penting untuk permainan: mendatar, menegak dan pepenjuru. Mereka akan dikemas kini pada setiap langkah melalui kaedah Checkend untuk mewakili pengedaran X dan O di papan. Kaedah pemeriksaan kemudian akan memanggil Checkwin untuk menentukan sama ada terdapat pemenang.
selepas itu kita mempunyai kaedah di dalam objek tic yang akan mendapat segala -galanya dan berjalan:
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Perhatikan penggunaan @ yang dikumpulkan kepada kata kunci JavaScript ini. Seperti yang digambarkan dalam harta pertama yang dimulakan, anda boleh melangkau titik selepas kata kunci @ apabila menetapkan atau memanggil harta atau kaedah.
dengan memberikan kaedah nama yang masuk akal, kami mempunyai idea yang adil tentang apa yang mereka lakukan:
mari kita lihat beberapa kaedah ini dengan lebih terperinci.
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>di sini kita melangkah sembilan kali dan menambah sembilan div dengan kelas persegi ke papan kosong untuk memisahkannya. Ini menunjukkan bagaimana Coffeescript membolehkan anda menulis gelung satu baris dan mengisytiharkan badan gelung sebelum menulis keadaan itu sendiri.
$ <span>->
</span> <span>Tic =
</span> <span>data:
</span> <span>turns: 0
</span> <span>x: {}
</span> <span>o: {}
</span> <span>gameOver: false</span>Coffeescript membolehkan interpolasi rentetan yang meningkatkan kebolehbacaan dan mengurangkan kerumitan dan panjang kod. Anda boleh menambah #{} dalam mana -mana rentetan dan masukkan sebarang pembolehubah atau nilai pulangan dari panggilan fungsi dalam pendakap.
<span>initialize: -> </span> @data<span>.gameOver = false </span> @<span>.setPlayerNames() </span> @<span>.retrieveStats() </span> @<span>.assignRoles() </span> @<span>.prepareBoard() </span> @<span>.updateNotifications() </span> @<span>.addListeners()</span>
Kaedah penambahan mencontohkan bagaimana anda menentukan parameter dalam Coffeescript. Anda menulisnya sebelum anak panah (->):
anda boleh memberikan nilai lalai untuk parameter yang serupa dengan php:
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
Apabila fungsi dengan parameter lalai disusun, ia ditukar kepada:
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Akhirnya, mari kita beralih kepada kaedah AddListeners:
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>di sini kita melihat bahawa Coffeescript menawarkan kata kunci tambahan untuk mewakili nilai -nilai yang benar dan palsu seperti tidak, ya, off dan seterusnya. Selain itu ,! ==, ===, && ,! boleh diwakili menggunakan ISNT, adalah, dan dan tidak sewajarnya.
anda boleh membuat syarat baris tunggal yang boleh dibaca menggunakan jika ... maka ... lain ... sintaks.
Pemeriksaan Pemeriksaan Kaedah Workhorse jika ada pemenang setiap kali pemain membuat langkah. Ia melakukan ini dengan melelehkan ke atas papan dan mengira dataran yang dimiliki oleh X dan O. Ia mula -mula memeriksa paksi pepenjuru, maka menegak, kemudian mendatar.
$ <span>->
</span> <span>Tic =
</span> <span>data:
</span> <span>turns: 0
</span> <span>x: {}
</span> <span>o: {}
</span> <span>gameOver: false</span>seperti yang anda lihat, ini menggunakan ciri -ciri Coffeescript yang berguna.
<span>initialize: -> </span> @data<span>.gameOver = false </span> @<span>.setPlayerNames() </span> @<span>.retrieveStats() </span> @<span>.assignRoles() </span> @<span>.prepareBoard() </span> @<span>.updateNotifications() </span> @<span>.addListeners()</span>
Ini akan gelung tiga kali, menetapkan baris sama dengan 0, 1 dan 2 dalam perintah ini. Sebagai alternatif, [0 ... 2] (julat eksklusif) akan menghasilkan hanya dua lelaran, menetapkan baris sama dengan 0 dan 1.
Dalam pemeriksaan mendatar kita melihat lagi bagaimana lekukan penting dalam menentukan apa yang merupakan sebahagian daripada gelung dan apa yang ada di luar gelung -hanya panggilan medan di dalam gelung dalaman.
ini adalah apa yang kelihatan seperti:
<span>prepareBoard: ->
</span> <span>...
</span> <span>$("<div>", {class: "square"}).appendTo("#board") for square in [0..8]</span>Kaedah ini menunjukkan penggunaan? Kata kunci, yang apabila dimasukkan di sebelah pembolehubah dalam bersyarat, disusun kepada:
<span>updateNotifications: ->
</span> <span>$(".notifications").empty().show()
</span> @<span>.addNotification "#{@data.player1} is playing #{@data.rolep1}"
</span> <span>...</span>yang jelas agak berguna.
Apa kaedah semakan medan adalah menambah satu ke paksi yang sesuai dengan harta X atau O bergantung pada nama kelas dataran yang diklik. Nama kelas ditambah apabila pengguna mengklik pada persegi papan kosong dalam kaedah AddListeners.
Ini membawa kami ke kaedah Checkwin, yang digunakan untuk memeriksa sama ada salah seorang pemain telah memenangi permainan:
<span>addNotification: (msg) ->
</span> <span>$(".notifications").append($("<p>", text: msg));</span>Dalam Coffeescript anda boleh gunakan untuk ... dalam array untuk gelung ke atas nilai array dan untuk kunci, nilai objek untuk gelung ke atas sifat objek. CheckWin menggunakan ini untuk memeriksa semua sifat di dalam objek X dan O. Jika mana -mana daripada mereka memegang nombor yang lebih besar daripada atau sama dengan tiga, maka kami mempunyai pemenang dan permainan harus berakhir. Dalam kes sedemikian, kami memanggil kaedah AddToscore yang berterusan hasil pemain melalui LocalStorage.
LocalStorage adalah sebahagian daripada spesifikasi storan web dan mempunyai sokongan pelayar yang cukup baik. Ia membolehkan anda menyimpan data (serupa dengan kuki) pada mesin pengguna dan mengaksesnya bila -bila masa yang anda mahukan.
anda boleh mengakses API dalam beberapa cara, contohnya seperti yang anda lakukan kepada sifat objek biasa:
<span>addNotification: (msg = "I am a message") -></span>
Penyimpanan tempatan sentiasa menjimatkan rentetan jadi jika anda ingin menyimpan objek atau array anda perlu menggunakan json.stringify apabila menyimpan array/objek dan json.parse apabila mengambilnya.
Kaedah AddToscore kami menggunakan fakta ini:
<span><span><span><div</span> class<span>="wrapper"</span>></span> </span> <span><span><span><header</span> class<span>="text-center"</span>></span> </span> <span><span><span><h1</span>></span>Tic Tac Toe<span><span></h1</span>></span> </span> <span><span><span></header</span>></span> </span> <span><span><span><div</span> id<span>="board"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="alerts welcome"</span>></span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="notifications"</span>></span><span><span></div</span>></span> </span> <span><span><span><form</span> action<span>=""</span> method<span>="POST"</span>></span> </span> ... <span><span><span></form</span>></span> </span><span><span><span></div</span>></span> </span> <span><span><span><script</span> src<span>="jquery.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> src<span>="logic/app.js"</span>></span><span><span></script</span>></span></span>
Ia juga menunjukkan bagaimana anda boleh menghilangkan kurungan dalam Coffeescript (JSON.Stringify), walaupun itu disyorkan untuk panggilan fungsi paling luar sahaja.
Seterusnya kami mempunyai beberapa kaedah utiliti. Kami menggunakan emptystoragevar untuk membersihkan kandungan baris mendatar tertentu atau pepenjuru. Ini perlu kerana terdapat dua pepenjuru di papan dan di dalam kaedah Chekend kami, kami menggunakan harta data yang sama untuk kedua -dua pepenjuru. Oleh itu, kita perlu membersihkan harta itu sebelum memeriksa pepenjuru kedua. Begitu juga untuk baris mendatar.
<span><span>.square:nth-of-type(<span>3n + 1</span>)</span> {
</span> <span>clear: both;
</span><span>}</span>Apabila borang dengan nama pemain diserahkan pada permulaan permainan, kita dapat menghalang tindakan lalainya dan mengendalikan penyerahan menggunakan JavaScript. Kami periksa sama ada terdapat nama kosong atau jika kedua -dua nama adalah sama dan memaparkan amaran mesra jika ya. Jika tidak, kami memulakan permainan dengan memanggil tic.initialize ().
<span><span>.square.x</span> {
</span> <span>color: crimson;
</span><span>}
</span>
<span><span>.square.o</span> {
</span> <span>color: #3997ff;
</span><span>}</span>Baris terakhir menggunakan delegasi acara untuk mempunyai elemen dengan kelas play-again bertindak balas terhadap satu klik. Delegasi acara diperlukan, kerana elemen ini hanya ditambah ke halaman setelah permainan selesai. Ia tidak hadir apabila DOM pertama kali diberikan.
$ <span>->
</span> <span>Tic =
</span> <span>data:
</span> <span>turns: 0
</span> <span>x: {}
</span> <span>o: {}
</span> <span>gameOver: false</span>Dan itu sahaja. Dalam kurang daripada 150 baris Coffeescript kita mempunyai permainan kerja. Jangan lupa, anda boleh memuat turun kod dari tutorial ini dari GitHub.
lihat pena-tac-toe oleh sitepoint (@sitePoint) pada codepen.
Saya berharap tutorial ini telah mengukuhkan pengetahuan anda tentang Coffeescript dan telah menunjukkan kepada anda bagaimana jQuery dan Coffeescript dapat bekerjasama. Terdapat banyak perkara yang boleh anda lakukan untuk memperbaiki permainan. Sebagai contoh, anda boleh menambah pilihan untuk membuat papan berbeza daripada dimensi standard 3 × 3. Anda boleh melaksanakan beberapa AI yang mudah supaya pemain boleh bermain menentang mesin, atau anda boleh melaksanakan bom dalam permainan, mis. dengan menambah X atau O secara rawak bergerak rawak sementara pemain berjuang untuk kemuliaan.
Mewujudkan papan permainan untuk Tic Tac Toe dalam Coffeescript melibatkan menentukan matriks 3 × 3. Ini boleh dilakukan dengan menggunakan pelbagai tatasusunan. Setiap array dalaman mewakili baris di papan permainan, dan setiap elemen dalam array dalaman mewakili sel di papan permainan. Pada mulanya, semua sel kosong. Apabila pemain bergerak, sel yang sepadan dalam matriks dikemas kini dengan tanda pemain. papan dan memeriksa jika permainan telah dimenangi. Apabila pemain membuat langkah, anda perlu mengemas kini sel yang sepadan di papan permainan dengan tanda pemain. Kemudian, anda perlu menyemak sama ada pemain telah memenangi permainan. Ini boleh dilakukan dengan memeriksa semua kemungkinan gabungan sel.
Memeriksa semua kemungkinan gabungan sel. Terdapat 8 kemungkinan kombinasi yang menang: 3 baris, 3 lajur, dan 2 pepenjuru. Anda boleh menyemak setiap kombinasi untuk melihat sama ada semua sel dalam gabungan mempunyai tanda yang sama, iaitu tanda pemain semasa. Jika ya, pemain telah memenangi permainan. Pemain telah memenangi permainan. Jika semua sel telah ditandakan dan tiada pemain telah menang, permainan adalah seri. Anda boleh menyemak ini selepas setiap pemain bergerak.
Atas ialah kandungan terperinci Coffeescript Praktikal: Membuat Permainan Tic-Tac-Toe. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Pengenalan kepada pembekal perkhidmatan dengan harga pelayan awan kos efektif
Nama fail mengandungi kandungan haram
Antivirus telefon mudah alih Apple
Pengenalan kepada tag standard dalam php
Apakah perisian lukisan?
Detik WeChat, dua sengkang dan satu titik
Bagaimana untuk mengubah suai nama fail secara kelompok
Bagaimana untuk menetapkan bahasa Cina dalam gerhana
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
