這里實現(xiàn)了Html5版的音樂游戲的核心玩法。
游戲的制作借鑒了，很多經(jīng)典的音樂游戲玩法，通過簡單的代碼將音樂的節(jié)奏與操作相結(jié)合。
可以通過手機(jī)進(jìn)行游戲，準(zhǔn)確點擊下落時的目標(biāo)，進(jìn)行得分。
點擊試玩
游戲內(nèi)的下落數(shù)據(jù)是通過手打記錄的，可能有些偏差哈。
實現(xiàn)功能
1、Html中加入了聲音控制功能
2、根據(jù)音樂節(jié)奏，準(zhǔn)確提示敲擊提示
3、判斷點擊時機(jī)節(jié)奏的準(zhǔn)確性
4、手打進(jìn)行音頻樂譜數(shù)據(jù)的記錄，可以實現(xiàn)多個關(guān)卡的制作
（游戲內(nèi)的下落數(shù)據(jù)是通過手打記錄的，可能有些偏差哈。）? ? ? ? ?
?
源碼地址：pro.youyu001.com
制作思路
1、游戲分為四條下落的區(qū)間，通過幀頻動畫實現(xiàn)效果。
2、點擊時，進(jìn)行下落的圖片位置的判斷，計算得分，并加以提示。
3、游戲中的每條下落的道是按照對象方式定義，可以添加或減少，進(jìn)行難度控制（這個還沒實現(xiàn)哈）。
4、游戲采用了手機(jī)觸屏方式進(jìn)行游玩。
5、游戲中的樂譜踩點，是跟著游戲先完一遍手敲的，記錄游戲運行的幀頻數(shù)據(jù)，進(jìn)行游戲節(jié)奏的控制。
更多擴(kuò)展的思路
可以通過這個思路，可以擴(kuò)展出（太鼓達(dá)人、旋律天國）等等音樂游戲作品的制作。
如果還有更好的思路或?qū)τ螒蜷_發(fā)感興趣
可以在評論區(qū)出留言，一起探討
代碼說明
這里給出一些關(guān)鍵代碼的說明
1、音頻掉落數(shù)據(jù)數(shù)組，根據(jù)幀頻計算掉落的數(shù)據(jù)
var musicArray = [{"fps":180,"button":2},{"fps":221,"button":3},{"fps":332,"button":2},{"fps":373,"button":4},
{"fps":423,"button":3},{"fps":442,"button":3},{"fps":479,"button":2},{"fps":518,"button":3},
{"fps":626,"button":4},{"fps":652,"button":3},{"fps":671,"button":2},{"fps":707,"button":3},
{"fps":728,"button":4}];
2、每條音頻通道的對象，包括顯示、掉落物品控制得分判斷等
function Button(){
//背景
this.bjt = new PIXI.Sprite.fromImage("res/lianxi/music/bjt"+imgNumber+".png");
gameObjectCeng.addChild(this.bjt);
this.bjt.anchor.set(0.5,1);
this.bjt.x = buttonX;
this.bjt.y = 800;
this.bjt.visible = false;
//按鈕
this.button =new PIXI.Sprite.fromImage("res/lianxi/music/anniu"+imgNumber+".png");
uiCeng.addChild(this.button);
this.button.anchor.set(0.5,0.5);
this.button.y = 754;
this.button.x = this.bjt.x;
this.type = imgNumber;
//線
this.line = new PIXI.Sprite.fromImage("res/lianxi/music/xian.png");
lineCeng.addChild(this.line);
this.line.anchor.set(0.5,0);
this.line.x = this.bjt.x;
//點擊位置中心點
this.kong = new PIXI.Sprite.fromImage("res/lianxi/music/kong.png");
lineCeng.addChild(this.kong);
this.kong.anchor.set(0.5,0.5);
this.kong.x = this.bjt.x;
this.kong.y =600;
this.button.interactive = true;
this.animalArray = [];
this.createAnimal = function(){
//調(diào)用創(chuàng)建動物對象
var animal =new Animal(this.type,this.button.x);
animalCeng.addChild(animal.animal);
this.animalArray.push(animal);
};
//動物對象進(jìn)行移動
this.animalMove = function(){
for(var i = 0; i < this.animalArray.length; i++){
var animal = this.animalArray[i];
animal.move();
}
};
//刪除動物
this.show = true;
this.deleteAnimal = function(){
for(var i = this.animalArray.length-1; i >=0; i--){
var animal = this.animalArray[i];
if(this.kong.y + 46 < animal.animal.y && this.show == true){
this.scoreAction("miss");
this.show = false;
}
if(animal.animal.y>800){
this.show = true;
animalCeng.removeChild(animal.animal);
this.animalArray.splice(i,1);
}
}
};
var soft = this;
var num = 1;
//鼠標(biāo)按下
this.button.on("mousedown",function(){
soft.buttonClick();
});
//鼠標(biāo)抬起
this.button.on("mouseup",function(){
soft.bjt.visible = false;
});
this.button.on("click",function(){
//var str = {"zp":zp,"button":soft.type};
//musicArray.push(str);
//console.log(JSON.stringify(musicArray));
});
//移動端點擊
this.button.on("touchstart",function(){
soft.buttonClick();
});
//移動端抬起
this.button.on("touchend",function(){
soft.bjt.visible = false;
});
//點擊事件
this.buttonClick = function(){
soft.bjt.visible = true;
for(var i = 0;i < soft.animalArray.length;i++){
if(soft.kong.y - 10 < soft.animalArray[i].animal.y && soft.kong.y + 10 > soft.animalArray[i].animal.y){
score += 10;
scoreTxt.text = score;
animalCeng.removeChild(soft.animalArray[i].animal);
soft.animalArray.splice(i,1);
this.scoreAction("perfect");
}else if(soft.kong.y - 20 < soft.animalArray[i].animal.y && soft.kong.y + 20 > soft.animalArray[i].animal.y){
score += 5;
scoreTxt.text = score;
animalCeng.removeChild(soft.animalArray[i].animal);
soft.animalArray.splice(i,1);
this.scoreAction("good");
}else if(soft.kong.y - 30 < soft.animalArray[i].animal.y && soft.kong.y + 30 > soft.animalArray[i].animal.y){
score += 1;
scoreTxt.text = score;
animalCeng.removeChild(soft.animalArray[i].animal);
soft.animalArray.splice(i,1);
this.scoreAction("bad");
}
//soft.bjt.visible = false;
}
};
//鍵盤點擊事件
this.keyDown = function() {
soft.bjt.visible = true;
for(var i = 0;i<soft.animalArray.length;i++){
if(soft.kong.y - 30 < soft.animalArray[i].animal.y && soft.kong.y + 30 > soft.animalArray[i].animal.y){
score ++;
scoreTxt.text = score;
animalCeng.removeChild(soft.animalArray[i].animal);
soft.animalArray.splice(i,1);
}
//soft.bjt.visible = false;
}
// var str = {"zp":zp,"button":soft.type};
// musicArray.push(str);
// console.log(JSON.stringify(musicArray));
};
this.keyUp = function() {
soft.bjt.visible = false;
};
//記錄點擊之后結(jié)果
this.scoreArray = [];
this.scoreAction = function(name){
var score = new PIXI.Sprite.fromImage("res/lianxi/music/"+name+".png");
gameObjectCeng.addChild(score);
score.y = 540;
score.x = this.bjt.x;
score.anchor.set(0.5,0.5);
score.alpha = 1;
this.scoreArray.push(score);
};
//成績效果圖片移動
this.scoreMove = function(){
for(var i = 0; i < this.scoreArray.length; i++){
var score = this.scoreArray[i];
score.alpha -= 0.01;
score.y -= 2;
}
for(var i = this.scoreArray.length - 1; i >= 0; i--){
var score =this.scoreArray[i];
if(score.y <= 400){
gameObjectCeng.removeChild(score);
this.scoreArray.splice(i,1);
}
}
};
}3、下落圖片的對象，控制下落的速度及顯示樣式。文章來源：http://www.zghlxwxcb.cn/news/detail-416270.html
function Animal(type,animalX){
var number=Math.floor(Math.random()*5+1);
if(type == 1){
this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/blue/lan" + number + ".png");
}
if(type == 2){
this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/green/lv" + number + ".png");
}
if(type == 3){
this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/red/hong" + number + ".png");
}
if(type == 4){
this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/yellow/huang" + number + ".png");
}
this.animal.anchor.set(0.5,0.5);
this.animal.x = animalX;
this.animal.y = 0;
//動物對象移動
this.move = function(){
this.animal.y += 3.33;
}
}4、音頻的控制，這里封裝了Html網(wǎng)頁通過Js對音頻文件的播放控制。文章來源地址http://www.zghlxwxcb.cn/news/detail-416270.html
function SoundManager() {
var audioObj = {};
var cacheNum = 3;//預(yù)留聲音最小個數(shù)
//添加聲音
this.addAudio = function(name, url) {
var audio = new Audio();
//audio.autoplay = true;
audio.src = url;
audio.load();
//audio.pause();
audio.preload="auto";
document.body.appendChild(audio);
var audioArr = audioObj[name];
if(audioArr == null) {
audioArr = [];
}
audioArr.push(audio);
audioObj[name] = audioArr;
if(audioArr.length < cacheNum) {
//自動添加該音色
this.addAudio(name, audio.src);
}
}
//播放聲音
this.play = function(name, loop = false) {
var audioArr = audioObj[name];
var audio = null;
if(audioArr.length > 0) {
audio = audioArr[0];
audioArr.splice(0, 1);
if(loop == true) {
audio.loop = true;
}
audio.play();
audio.onended = function() {
//console.log(audio + "音頻播放完成" + audio.src);
audioArr.push(audio);
};
if(audioArr.length < cacheNum) {
//console.log("緩存數(shù)量不夠了！");
//自動添加該音色
this.addAudio(name, audio.src);
}
} else {
//console.log("沒有該聲音的緩存");
}
return audio;
}
}
var soundManager = null;
SoundManager.getInstance = function() {
if(soundManager == null) {
soundManager = new SoundManager();
}
return soundManager;
}
SoundManager.getInstance().addAudio("bgm", "res/lianxi/music/tkzc.mp3");到了這里，關(guān)于Html5版音樂游戲制作及分享（H5音樂游戲）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
