hujung hadapan web
uni-app
Mari kita bincangkan tentang cara menggunakan uniapp untuk membangunkan permainan ular!
Mari kita bincangkan tentang cara menggunakan uniapp untuk membangunkan permainan ular!
May 20, 2022 pm 07:56 PM
Bagaimana untuk menggunakan uniapp untuk membangunkan permainan ular? Artikel berikut akan membimbing anda langkah demi langkah dalam melaksanakan permainan Snake dalam uniapp. Saya harap ia akan membantu anda!
Kali pertama saya bermain Snake, saya masih samar-samar ingat ia adalah permainan pertama yang ayah saya mainkan untuk saya selepas ??
Permainan mini ini menggunakan uniappPembangunan
Saya tidak akan menerangkan butiran mengenai butiran bahagian hadapan, sila baca secara terperinci: https://juejin.cn/post/7085727363547283469#heading-14
Demo Permainan
Struktur kod
Jika perlu, sila pergi ke github untuk melihat struktur kod terperinciBeri ular kami kotnya Rendering badan ular adalah berdasarkan
(dengan badan ular di dalam) untuk memadankan indeks panel lantai untuk mencari grid yang sepadan dan mengubah suai imej latar belakang untuk menjadikan badan ular, kepala dan ekor ular, iaitu untuk mengambil digit ke-0 dan terakhirDan cari grid yang sepadan untuk mengubah suai imej latar belakang semasa
<template>
<view ref="body" class="content">
<view>蛇蛇目前：{{snakes.length}}米長(zhǎng)</view>
<view class="game-field">
<!-- 地面板塊 -->
<view class="block" v-for="(x, i) in blocks" :key="i"></view>
</view>
<view v-show="!started || ended" class="game-board-wrap">
<view v-show="!started" class="game-board">
<view class="title">選擇游戲難度</view>
<radio-group name="radio" @change="bindLevelChange">
<label class="label">
<radio value="1" :checked="level==1" /><text>簡(jiǎn)單模式</text>
</label>
<label class="label">
<radio value="2" :checked="level==2" /><text>正常模式</text>
</label>
<label class="label">
<radio value="3" :checked="level==3" /><text>困難模式</text>
</label>
<label class="label">
<radio value="4" :checked="level==4" /><text>地獄模式</text>
</label>
</radio-group>
<button type="primary" @click="start">開(kāi)始游戲</button>
</view>
<view v-show="ended" class="settle-board">
<view class="title">游戲結(jié)束</view>
<view class="result">您的蛇蛇達(dá)到了{(lán){snakes.length}}米</view>
<view class="btns">
<button type="primary" @click="reStart">再次挑戰(zhàn)</button>
<button type="primary" plain @click="rePick">重選難度</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
blocks: [], // 板塊
worms: [], // 蟲子
snakes: [0, 1, 2, 3], // 蛇身
direction: "right", // 蛇移動(dòng)方向
};
},
onLoad() {
this.initGame();
},
methods: {
initGame() {
this.blocks = new Array(100).fill(0); // 生成100個(gè)地面板塊
this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機(jī)生成蟲子
this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置
}
}
}
</script>Kawal arah ular
Kawal arah ular Di bahagian PC, kami mencari kekunci papan kekunci yang sepadan dengan mendengar acara papan kekunci Pengekodan adalah atas, bawah, kiri dan kanan untuk menukar arah ular nilai paksi titik sentuh jari dan titik gelongsor pada masa sentuhan untuk menentukan arah ular snakessnakes
<template>
<view class="game-field">
<view class="block" :style="`background-image: ${bg(x, i)}" v-for="(x, i) in blocks" :key="i">
</view>
</view>
</template>
<script>
import worm from "worm.png";
import snakeBody from "snake_body.png";
import snakeHead from "snake_head.png";
import snakeTail from "snake_tail.png";
import polluteBlock from "pollute.png";
import wormBoom from "worm_4.png";
export default {
methods: {
bg(type, index) {
let bg = "";
switch (type) {
case 0: // 地板
bg = "unset";
break;
case 1: // 蟲子
if (this.boom) {
bg = `url(${wormBoom})`;
} else {
bg = `url(${worm})`;
}
break;
case 2: // 蛇
let head = this.snakes[this.snakes.length - 1];
let tail = this.snakes[0];
if (index === head) {
bg = `url(${snakeHead})`;
} else if (index === tail) {
bg = `url(${snakeTail})`;
} else {
bg = `url(${snakeBody})`;
}
break;
case 3: // 污染的地塊
bg = `url(${polluteBlock})`;
break;
}
return bg；
},
}
}
</scipt>Tambah kesan bunyi pada ular tamakMenambah kesan bunyi permainan akan menjadikan permainan lebih mengasyikkan Sekarang kita perlu menambahkan muzik latar pada ular, klik muzik interaktif, muzik untuk ular kentut, muzik untuk ular makan makanan, dan undur untuk muzik letupan serangga
Mula-mula tambah muzik latar, sentiasa ada orang jahat yang boleh bermain sehingga peta penuh Gunakan
untuk mencipta dan mengembalikan objek konteks audio dalaman<template>
<view ref="body" class="content" @keyup.left="bindLeft" @keyup.right="bindRight" @keyup.down="bindDown"
@keyup.up="bindUp" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
<view>蛇蛇目前：{{snakes.length}}米長(zhǎng)</view>
<view class="game-field">
<view class="block" :style="`background-image: ${bg(x, i)}; v-for="(x, i) in blocks" :key="i"></view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
direction: "right",
started: false, // 游戲開(kāi)始了
ended: false, // 游戲結(jié)束了
level: 1, // 游戲難度
lastX: 0,
lastY: 0,
}
},
onLoad() {
this.initGame();
},
methods:{
initGame() {
this.blocks = new Array(100).fill(0); // 生成100個(gè)地面板塊
this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機(jī)生成蟲子
this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置
document.onkeydown = (e) => {
switch (e.keyCode) { // 獲取當(dāng)前按下鍵盤鍵的編碼
case 37: // 按下左箭頭鍵
this.bindLeft();
break;
case 39: // 按下右箭頭鍵
this.bindRight();
break;
case 38: // 按下上箭頭鍵
if (!this.started) {
this.level--;
} else {
this.bindUp();
}
break;
case 40: // 按下下箭頭鍵
if (!this.started) {
this.level++;
} else {
this.bindDown();
}
break;
}
}
},
handleTouchStart(e) {
// 手指開(kāi)始位置
this.lastX = e.touches[0].pageX;
this.lastY = e.touches[0].pageY;
},
handleTouchMove(e) {
let lastX = e.touches[0].pageX; // 移動(dòng)的x軸坐標(biāo)
let lastY = e.touches[0].pageY; // 移動(dòng)的y軸坐標(biāo)
let touchX = lastX - this.lastX;
let touchY = lastY - this.lastY
if (Math.abs(touchX) > Math.abs(touchY)) {
if (touchX < 0) {
if(this.direction === "right") return;
this.direction = 'left'
} else if (touchX > 0) {
if(this.direction === "left") return;
this.direction = 'right'
}
} else {
if (touchY < 0) {
if(this.direction === "down") return;
this.direction = 'up'
} else if (touchY > 0) {
if(this.direction === "up") return;
this.direction = 'down'
}
}
this.lastX = lastX;
this.lastY = lastY;
},
bindUp() {
if (this.direction === "down") return;
this.direction = "up";
},
bindDown() {
if (this.direction === "up") return;
this.direction = "down";
},
bindLeft() {
if (this.direction === "right") return;
this.direction = "left";
},
bindRight() {
if (this.direction === "left") return;
this.direction = "right";
},
}
}
</script> untuk mendapatkan laluan muzik dan menyediakan main balik automatik Muzik latar belakang berdering dan ia terus berdering selepas permainan berakhir. Saya keliru apabila mendengarnya. Tidak sabar, kami menjeda muzik latar selepas permainan ular
Muzik dijeda dan ia tidak akan jelasMuzik pertama berjaya ditambahkan dan rehat adalah lebih mudah. ??Kira detik letupan pepijat juga perlu meletup atau Selepas permainan selesai, anda perlu mengosongkan kesan bunyi undur uni.createInnerAudioContext (main balik seterusnya akan bermula dari awal lagi kesan bunyi dan main balik gelung tidak). diperlukan. Kod yang selebihnya dilampirkan di bawah innerAudioContext
<script>
import bgm from 'bgm.mp3';
export default {
data(){
return {
bgmInnerAudioContext:null,
}
},
methods:{
start() { // 開(kāi)始游戲
this.initGame();
this.handleBgmVoice()
},
handleBgmVoice() {
// 背景音樂(lè)
this.bgmInnerAudioContext = uni.createInnerAudioContext() // 創(chuàng)建上下文
this.bgmInnerAudioContext.autoplay = true; // 自動(dòng)播放
this.bgmInnerAudioContext.src= bgm; // 音頻地址
this.bgmInnerAudioContext.loop = true; // 循環(huán)播放
}
}
}
<script>KesimpulanpauseTerima kasih khas
<script>
import bgm from 'bgm.mp3';
export default {
data(){
return {
bgmInnerAudioContext:null,
}
},
methods:{
start() { // 開(kāi)始游戲
this.initGame();
this.handleBgmVoice()
},
handleBgmVoice() {
// 背景音樂(lè)
this.bgmInnerAudioContext = uni.createInnerAudioContext() // 創(chuàng)建上下文
this.bgmInnerAudioContext.autoplay = true; // 自動(dòng)播放
this.bgmInnerAudioContext.src= bgm; // 音頻地址
this.bgmInnerAudioContext.loop = true; // 循環(huán)播放
}
checkGame(direction, next) {
let gameover = false;
let isSnake = this.snakes.indexOf(next) > -1;
let isPollute = this.pollutes.indexOf(next) > -1;
// 撞到蛇和被污染的地塊游戲結(jié)束
if (isSnake || isPollute) {
gameover = true;
}
// 撞到邊界游戲結(jié)束
switch (direction) {
case "up":
if (next < 0) {
gameover = true;
}
break;
case "down":
if (next >= 100) {
gameover = true;
}
break;
case "left":
if (next % 10 === 9) {
gameover = true;
}
break;
case "right":
if (next % 10 === 0) {
gameover = true;
}
break;
}
return gameover;
},
toWards(direction) {
let gameover = this.checkGame(direction, next);
if (gameover) {
this.ended = true;
this.handleDieVoice()
this.bgmInnerAudioContext.pause() // 游戲結(jié)束 暫停背景音樂(lè)
clearInterval(this.timer);
clearInterval(this.boomTimer);
} else {
// 游戲沒(méi)結(jié)束
this.snakes.push(next);
let nextType = this.blocks[next];
this.blocks[next] = 2;
// 如果是空白格
if (nextType === 0) {
this.snakes.shift();
} else {
// 如果是蟲子格
this.handleEatVoice() // 吃掉蟲子后的音樂(lè)
this.worms = this.worms.filter((x) => x !== next);
let nextWorm = this.createWorm();
this.worms.push(nextWorm);
}
this.blocks[tail] = 0;
this.paint();
}
},
}
}
<script>@Pengakhiran belum tibastop Terima kasih kepada En. Dashuai atas kepimpinan dan bimbingan serta penyeliaan hariannya, dan terima kasih khas kepada rakan sepasukannya atas bantuan dan sokongan mereka
<script>
export default {
data() {
return {
bgmInnerAudioContext:null,
clockInnerAudioContext:null,
}
},
watch: {
boomCount(val) {
if (val === 0) {
// 超過(guò)爆炸時(shí)間還沒(méi)吃到,則將蟲子格子變成被污染的土地,并且重置爆炸狀態(tài),同時(shí)生成一只新的蟲子:
this.handleExplodeVoice() // 爆炸的音樂(lè)
this.clockInnerAudioContext.stop() // 清楚倒計(jì)時(shí)音樂(lè)
const boomWorm = this.worms.pop();
this.pollutes.push(boomWorm);
this.blocks[boomWorm] = 3; // 被污染的地方我們用3表示
this.boom = false;
this.worms.push(this.createWorm());
}
}
},
methods:{
// 蛇吃到食物后的聲音
handleEatVoice() {
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = eatVoice;
},
// 蟲子污染爆炸后的聲音
handleExplodeVoice(){
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = explodeVoice;
},
// 游戲背景音樂(lè)
handleBgmVoice() {
this.bgmInnerAudioContext = uni.createInnerAudioContext()
this.bgmInnerAudioContext.autoplay = true;
this.bgmInnerAudioContext.src= bgm;
this.bgmInnerAudioContext.loop = true;
},
// 按鈕點(diǎn)擊的聲音
handleClickVoice() {
const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true;
innerAudioContext.src= click;
},
// 爆炸倒計(jì)時(shí)的聲音
handleClockVoice() {
this.clockInnerAudioContext = uni.createInnerAudioContext()
this.clockInnerAudioContext.autoplay = true;
this.clockInnerAudioContext.src= clock;
},
// 蛇gameover后的聲音
handleDieVoice() {
const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true;
innerAudioContext.src= die;
},
checkGame(direction, next) {
let gameover = false;
let isSnake = this.snakes.indexOf(next) > -1;
let isPollute = this.pollutes.indexOf(next) > -1;
// 撞到蛇和被污染的地塊游戲結(jié)束
if (isSnake || isPollute) {
gameover = true;
}
// 撞到邊界游戲結(jié)束
switch (direction) {
case "up":
if (next < 0) {
gameover = true;
}
break;
case "down":
if (next >= 100) {
gameover = true;
}
break;
case "left":
if (next % 10 === 9) {
gameover = true;
}
break;
case "right":
if (next % 10 === 0) {
gameover = true;
}
break;
}
return gameover;
},
paint() {
this.worms.forEach((x) => {
this.blocks[x] = 1;
});
this.snakes.forEach((x) => {
this.blocks[x] = 2;
});
this.$forceUpdate();
},
toWards(direction) {
let gameover = this.checkGame(direction, next);
if (gameover) {
this.ended = true;
this.handleDieVoice()
this.bgmInnerAudioContext.pause() // 游戲結(jié)束 暫停背景音樂(lè)
this.clockInnerAudioContext && this.clockInnerAudioContext.stop() // 清楚倒計(jì)時(shí)音樂(lè)
clearInterval(this.timer);
clearInterval(this.boomTimer);
} else {
// 游戲沒(méi)結(jié)束
this.snakes.push(next);
let nextType = this.blocks[next];
this.blocks[next] = 2;
// 如果是空白格
if (nextType === 0) {
this.snakes.shift();
} else {
// 如果是蟲子格
this.handleEatVoice() // 吃掉蟲子后的音樂(lè)
this.worms = this.worms.filter((x) => x !== next);
let nextWorm = this.createWorm();
this.worms.push(nextWorm);
}
this.blocks[tail] = 0;
this.paint();
}
},
// 生成下一只蟲子
createWorm() {
this.boom = false;
let blocks = Array.from({
length: 100
}, (v, k) => k);
// 在不是蛇和被污染的地方生成蟲子
let restBlocks = blocks.filter(x => this.snakes.indexOf(x) < 0 && this.pollutes.indexOf(x) < 0);
let worm = restBlocks[Math.floor(Math.random() * restBlocks.length)];
// 根據(jù)游戲難度,概率產(chǎn)出會(huì)爆炸的蟲子:
this.boom = Math.random() / this.level < 0.05;
// 生成了新蟲子說(shuō)明吃到了那個(gè)爆炸的蟲子，重置下爆炸
if (this.boom) {
this.boomCount = 10;
this.boomTimer && clearInterval(this.boomTimer);
this.handleClockVoice()
this.boomTimer = setInterval(() => {
this.boomCount--;
}, 1000)
} else {
this.clockInnerAudioContext && this.clockInnerAudioContext.stop()
clearInterval(this.boomTimer);
}
return worm;
},
}
}
<script>Alamat kod sumber: https://github.com/MothWillion/snake_eat_worm
Alamat asal: https://juejin.cn/post/7087525655478272008Pengarang: Sophora
mengesyorkan: "
tutorial uniapp ??>"
Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan uniapp untuk membangunkan permainan ular!. 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)
Bagaimana untuk membangunkan uni-app dalam VSCode? (Perkongsian tutorial)
May 13, 2022 pm 08:11 PM
Bagaimana untuk membangunkan uni-app dalam VSCode? Artikel berikut akan berkongsi dengan anda tutorial tentang membangunkan uni-app dalam VSCode Ini mungkin tutorial terbaik dan paling terperinci. Datang dan lihat!
Gunakan uniapp untuk membangunkan navigasi peta yang mudah
Jun 09, 2022 pm 07:46 PM
Bagaimana untuk menggunakan uniapp untuk membangunkan navigasi peta yang mudah? Artikel ini akan memberi anda idea untuk membuat peta mudah saya harap ia akan membantu anda!
Bagaimana untuk merangkum permintaan antara muka vue3 uni-app
May 11, 2023 pm 07:28 PM
antara muka uni-app, enkapsulasi kaedah global 1. Cipta fail api dalam direktori akar, buat fail api.js, baseUrl.js dan http.js dalam folder api 2.baseUrl.js kod fail exportdefault"https://XXXX .test03.qcw800.com/api/"3.http.js kod fail exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method
Membawa anda langkah demi langkah untuk membangunkan pemalam kalendar uni-apl (dan menerbitkannya)
Jun 30, 2022 pm 08:13 PM
Artikel ini akan membimbing anda langkah demi langkah dalam membangunkan pemalam kalendar uni-apl dan memperkenalkan cara pemalam kalendar seterusnya dibangunkan dari pembangunan hingga keluaran saya harap ia akan membantu anda!
Mari kita bincangkan tentang cara menggunakan uniapp untuk membangunkan permainan ular!
May 20, 2022 pm 07:56 PM
Bagaimana untuk menggunakan uniapp untuk membangunkan permainan ular? Artikel berikut akan membimbing anda langkah demi langkah dalam melaksanakan permainan Snake dalam uniapp. Saya harap ia akan membantu anda!
Contoh terperinci tentang cara uniapp melaksanakan fungsi rakaman telefon (dengan kod)
Jan 05, 2023 pm 04:41 PM
Artikel ini membawakan anda pengetahuan yang berkaitan tentang uniapp terutamanya cara menggunakan uniapp untuk membuat panggilan dan menyegerakkan rakaman. Saya harap ia dapat membantu semua orang.
Contoh untuk menerangkan cara uniapp melaksanakan fungsi semua pilihan kotak berbilang pilihan
Jun 22, 2022 am 11:57 AM
Artikel ini membawa anda pengetahuan yang berkaitan tentang uniapp, yang terutamanya mengatur isu berkaitan melaksanakan fungsi pilih-semua kotak berbilang pilihan Sebab mengapa ia tidak dapat mencapai fungsi pilih-semua ialah apabila medan yang ditandakan pada kotak pilihan adalah diubah suai secara dinamik, status pada antara muka boleh berubah masa nyata, tetapi acara perubahan kumpulan kotak semak tidak boleh dicetuskan. Saya harap ia akan membantu semua orang.
Mari kita bincangkan tentang pemuatan lungsur turun paparan skrol uniapp
Jul 14, 2022 pm 09:07 PM
Bagaimanakah uniapp melaksanakan pemuatan lungsur turun paparan skrol? Artikel berikut bercakap tentang pemuatan lungsur turun applet WeChat scroll-view Saya harap ia akan membantu semua orang.
