很久很久以前，差不多大半年前吧，筆者發(fā)布了一篇關于OC版貪食蛇開發(fā)的文章，時隔多月，微信小程序橫空出世，于是閑來無事的我又寫了一個小程序版
下面這段話請務必閱讀
筆者是做iOS的，而小程序大部分都是前端的知識，筆者之前沒有做過類似開發(fā)，所以代碼寫的相當爛，很多東西都是一邊查資料一邊寫的，請各位輕噴，阿門！
進入正題
頁面布局
關于小程序筆者就不做介紹了，官方有詳細文檔，我們還是先來看張圖吧
就是這個樣子的，游戲界面跟之前的OC版是差不多的，以筆者的水平，只能設計成這樣了，畢竟不是專業(yè)的，話說這蛇怎么長的像個J(和)B(諧)啊:joy:
先來看看用來添加組件的wxml文件
<view class="backView">
<canvas canvas-id="snakeCanvas" class="canvas"/>
</view>
<view class="controlView">
<button class="btnClass" bindtap="changeDirection" id="up">up</button>
<view style="display:flex; height:33.33%">
<button class="btnClass" bindtap="changeDirection" id="left">left</button>
<button class="btnClass" bindtap="startGame" >{{btnTitle}}</button>
<button class="btnClass" bindtap="changeDirection" id="right">right</button>
</view>
<button class="btnClass" bindtap="changeDirection" id="down">down</button>
</view>內容是相當簡單滴，上面一個view，里面放一個畫布，下面一個view，里面放5個按鈕
再來看看wxss布局
內容不多，其實筆者對CSS也不是很了解，很多年前學習過，然而早隨著:hankey:排出去了，也許還有更優(yōu)的布局方式，不過湊合著用吧
功能實現
布局還是很簡單的，雖然不熟，但是多嘗試幾下還是可以弄出來的，接下來功能邏輯的實現才是重點，編程語言當然是js了。
話說筆者當年學js的時候，可是寫了滿滿一本的筆記，然而......算了，過去的就讓他過去吧，往事不提也罷。
思路其實與OC版的一樣
蛇：創(chuàng)建一個點坐標數組，然后以坐標點為中心在畫布上畫矩形
食物：隨機一個坐標點，該點不能在蛇身上，否則重新隨機
蛇的移動：把蛇尾的坐標移到蛇頭前面就行了
吃到食物：每次蛇移動完畢后，如果蛇頭的坐標與食物的坐標一樣，則蛇增長
蛇的增長：在蛇尾后面加一個點坐標即可
游戲結束：蛇頭越界或撞到自己身體即游戲結束
創(chuàng)建蛇
//創(chuàng)建蛇，初始為5節(jié)，nodeWH為矩形的邊長
function createSnake(){
nodes.splice(0, nodes.length) //清空數組
for (var i = 4; i >= 0; i--) {
var node = new Node(nodeWH * (i + 0.5), nodeWH * 0.5)
nodes.push(node);
}
}創(chuàng)建食物
function createFood(){
//矩形的邊長為10，畫布寬度為250，高度為350，所以x只能取5-245，y只能取5-345
var x = parseInt(Math.random() * 24) * nodeWH + nodeWH * 0.5
var y = parseInt(Math.random() * 34) * nodeWH + nodeWH * 0.5
//如果食物的坐標在蛇身上，則重新創(chuàng)建
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i]
if (node.x == x && node.y == y) {
createFood()
return
}
}
//Node為自定義的類，有兩個屬性x和y，表示坐標
food = new Node(x,y)
}蛇的移動
蛇的移動是有方向的，所以用一個變量direction來記錄蛇的移動方向，游戲開始時，默認是向右移動。
上面有說到蛇的移動就是把蛇尾的坐標移到蛇頭前面，但是這個前面并不是固定的，而是根據方向來判斷的，如果向右移動則右邊為前方，以此類推
吃到食物與蛇增長
每次移動完畢后，判斷蛇頭的坐標是否與食物的坐標相等就OK了，吃到食物后蛇的長度會增加，并且要創(chuàng)建一個新的食物
function isEatedFood(){
var head = nodes[0]
if (head.x == food.x && head.y == food.y) {
score++
nodes.push(lastPoint)
createFood()
}
}上面的代碼中，lastPoint就是蛇每次移動前，蛇尾的坐標，如果移動后吃到食物，那么直接在移動前的蛇尾處加上一節(jié)即可
游戲結束
每次移動后，都要判斷蛇頭是否超過畫布，或者撞到自己的身體
function isDestroy(){
var head = nodes[0]
//判斷是否撞到自己身體
for (var i = 1; i < nodes.length; i++) {
var node = nodes[i]
if (head.x == node.x && head.y == node.y) {
gameOver()
}
}
//判斷水平方向是否越界
if (head.x < 5 || head.x > 245) {
gameOver()
}
//判斷垂直方向是否越界
if (head.y < 5 || head.y > 345) {
gameOver()
}
}界面繪制
每次移動都要繪制，所以需要一個定時器，筆者用的setInterval
function move(){
lastPoint = nodes[nodes.length - 1]
var node = nodes[0]
var newNode = {x: node.x, y: node.y}
switch (direction) {
case 'up':
newNode.y -= nodeWH;
break;
case 'left':
newNode.x -= nodeWH;
break;
case 'right':
newNode.x += nodeWH;
break;
case 'down':
newNode.y += nodeWH;
break;
}
nodes.pop()
nodes.unshift(newNode)
moveEnd()
}
function startGame() {
if (isGameOver) {
direction = 'right'
createSnake()
createFood()
score = 0
isGameOver = false
}
timer = setInterval(move,300)
}網上說setInterval的性能并不怎么好，建議用requestAnimationFrame，但是很遺憾，筆者不會用，準確的說是不知道怎么暫停
var animateId = 0
function move(){
.
.
.
animateId = requestAnimationFrame(move)
}
function startGame(){
.
.
.
animateId = requestAnimationFrame(move)
}使用上面的方法可以實現蛇的移動與界面重繪，然而每次執(zhí)行animateId都會被賦予新的值，所以使用cancelAnimationFrame(animateId)無法暫停，如果有懂前端開發(fā)的大神請指導下
差不多整個邏輯就是這樣的，喜歡研究的可以自己嘗試下
【相關推薦】
Atas ialah kandungan terperinci 微信小程序-貪吃蛇教程實例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bangunkan applet WeChat menggunakan Python
Jun 17, 2023 pm 06:34 PM
Dengan populariti teknologi Internet mudah alih dan telefon pintar, WeChat telah menjadi aplikasi yang sangat diperlukan dalam kehidupan orang ramai. Program mini WeChat membenarkan orang ramai menggunakan program mini secara langsung untuk menyelesaikan beberapa keperluan mudah tanpa memuat turun dan memasang aplikasi. Artikel ini akan memperkenalkan cara menggunakan Python untuk membangunkan applet WeChat. 1. Persediaan Sebelum menggunakan Python untuk membangunkan applet WeChat, anda perlu memasang perpustakaan Python yang berkaitan. Adalah disyorkan untuk menggunakan dua perpustakaan wxpy dan itchat di sini. wxpy ialah mesin WeChat
Laksanakan kesan flip kad dalam program mini WeChat
Nov 21, 2023 am 10:55 AM
Melaksanakan kesan flipping kad dalam program mini WeChat Dalam program mini WeChat, melaksanakan kesan flipping kad ialah kesan animasi biasa yang boleh meningkatkan pengalaman pengguna dan daya tarikan interaksi antara muka. Yang berikut akan memperkenalkan secara terperinci cara melaksanakan kesan khas flipping kad dalam applet WeChat dan memberikan contoh kod yang berkaitan. Pertama, anda perlu menentukan dua elemen kad dalam fail susun atur halaman program mini, satu untuk memaparkan kandungan hadapan dan satu untuk memaparkan kandungan belakang Kod sampel khusus adalah seperti berikut: <!--index.wxml-. ->&l
Alipay melancarkan program mini 'Chinese Character Picking-Rare Characters' untuk mengumpul dan menambah pustaka aksara yang jarang ditemui
Oct 31, 2023 pm 09:25 PM
Menurut berita dari laman web ini pada 31 Oktober, pada 27 Mei tahun ini, Ant Group mengumumkan pelancaran "Projek Pemilihan Watak Cina", dan baru-baru ini membawa kemajuan baharu: Alipay melancarkan program mini "Pemilihan Watak Cina-Watak Biasa" untuk mengumpul koleksi daripada masyarakat Watak nadir menambah pustaka aksara jarang dan memberikan pengalaman input yang berbeza untuk aksara jarang untuk membantu memperbaik kaedah input aksara jarang dalam Alipay. Pada masa ini, pengguna boleh memasukkan applet "Watak Tidak Biasa" dengan mencari kata kunci seperti "Pengambilan aksara Cina" dan "aksara jarang". Dalam program mini, pengguna boleh menghantar gambar aksara jarang yang belum dikenali dan dimasukkan oleh sistem Selepas pengesahan, jurutera Alipay akan membuat entri tambahan ke dalam perpustakaan fon. Laman web ini mendapati bahawa pengguna juga boleh mengalami kaedah input pemisahan perkataan terkini dalam program mini Kaedah input ini direka untuk perkataan yang jarang dengan sebutan yang tidak jelas. Pembongkaran pengguna
Bolehkah program kecil menggunakan tindak balas?
Dec 29, 2022 am 11:06 AM
Program mini boleh menggunakan react. Cara menggunakannya: 1. Laksanakan pemapar berdasarkan "react-reconciler" dan jana DSL 2. Buat komponen program mini untuk menghuraikan dan membuat DSL 3. Pasang npm dan laksanakan Build; npm dalam alat; 4. Perkenalkan pakej ke halaman anda sendiri, dan kemudian gunakan API untuk menyelesaikan pembangunan.
Cara uniapp mencapai penukaran pantas antara program mini dan H5
Oct 20, 2023 pm 02:12 PM
Bagaimana uniapp boleh mencapai penukaran pantas antara program mini dan H5 memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet mudah alih dan populariti telefon pintar, program mini dan H5 telah menjadi bentuk aplikasi yang sangat diperlukan. Sebagai rangka kerja pembangunan merentas platform, uniapp boleh dengan cepat merealisasikan penukaran antara program kecil dan H5 berdasarkan set kod, meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan cara uniapp boleh mencapai penukaran pantas antara program mini dan H5, dan memberikan contoh kod khusus. 1. Pengenalan kepada uniapp unia
Ajar anda cara menggunakan mesej templat akaun awam dalam program mini (dengan idea terperinci)
Nov 04, 2022 pm 04:53 PM
Artikel ini membawakan kepada anda beberapa isu berkaitan tentang program mini WeChat terutamanya cara menggunakan mesej templat akaun dalam program mini. Saya harap ia dapat membantu semua orang.
Tutorial menulis program sembang mudah dalam Python
May 08, 2023 pm 06:37 PM
Idea pelaksanaan x01 Penubuhan pelayan Pertama, pada bahagian pelayan, soket digunakan untuk menerima mesej Setiap kali permintaan soket diterima, utas baharu dibuka untuk menguruskan pengedaran dan penerimaan mesej Pada masa yang sama, terdapat pengendali untuk menguruskan semua Thread, dengan itu merealisasikan pemprosesan pelbagai fungsi ruang sembang Penubuhan pelanggan x02 adalah lebih mudah daripada pelayan Fungsi pelanggan hanya untuk menghantar dan menerima mesej, dan untuk memasukkan aksara tertentu mengikut peraturan tertentu. Ini membolehkan penggunaan fungsi yang berbeza, di sisi pelanggan, anda hanya perlu menggunakan dua utas, satu didedikasikan untuk menerima mesej, dan yang lain didedikasikan untuk menghantar mesej adalah kerana, hanya
Kedudukan geografi dan paparan peta menggunakan PHP dan program mini
Jul 04, 2023 pm 04:01 PM
Kedudukan geolokasi dan paparan peta PHP dan program mini Kedudukan geolokasi dan paparan peta telah menjadi salah satu fungsi yang diperlukan dalam teknologi moden. Dengan populariti peranti mudah alih, permintaan orang ramai untuk kedudukan dan paparan peta juga meningkat. Semasa proses pembangunan, PHP dan applet adalah dua pilihan teknologi biasa. Artikel ini akan memperkenalkan anda kepada kaedah pelaksanaan kedudukan lokasi geografi dan paparan peta dalam program PHP dan mini, serta melampirkan contoh kod yang sepadan. 1. Geolokasi dalam PHP Dalam PHP, kita boleh menggunakan geolokasi pihak ketiga
