这里实现了Html5版的音乐游戏的核心玩法。

游戏的制作借鉴了，很多经典的音乐游戏玩法，通过简单的代码将音乐的节奏与操作相结合。

可以通过手机进行游戏，准确点击下落时的目标，进行得分。

点击试玩

游戏内的下落数据是通过手打记录的，可能有些偏差哈。

实现功能

1、Html中加入了声音控制功能

2、根据音乐节奏，准确提示敲击提示

3、判断点击时机节奏的准确性

4、手打进行音频乐谱数据的记录，可以实现多个关卡的制作

（游戏内的下落数据是通过手打记录的，可能有些偏差哈。）         

源码地址：pro.youyu001.com

制作思路

1、游戏分为四条下落的区间，通过帧频动画实现效果。

2、点击时，进行下落的图片位置的判断，计算得分，并加以提示。

3、游戏中的每条下落的道是按照对象方式定义，可以添加或减少，进行难度控制（这个还没实现哈）。

4、游戏采用了手机触屏方式进行游玩。

5、游戏中的乐谱踩点，是跟着游戏先完一遍手敲的，记录游戏运行的帧频数据，进行游戏节奏的控制。

更多扩展的思路

可以通过这个思路，可以扩展出（太鼓达人、旋律天国）等等音乐游戏作品的制作。

如果还有更好的思路或对游戏开发感兴趣

可以在评论区出留言，一起探讨

代码说明

这里给出一些关键代码的说明

1、音频掉落数据数组，根据帧频计算掉落的数据

2、每条音频通道的对象，包括显示、掉落物品控制得分判断等

1.  
   function Button(){
2.  
   //背景
3.  
   this.bjt = new PIXI.Sprite.fromImage("res/lianxi/music/bjt" imgNumber ".png");
4.  
   gameObjectCeng.addChild(this.bjt);
5.  
   this.bjt.anchor.set(0.5,1);
6.  
   this.bjt.x = buttonX;
7.  
   this.bjt.y = 800;
8.  
   this.bjt.visible = false;
9.  
   //按钮
10.  
    this.button =new PIXI.Sprite.fromImage("res/lianxi/music/anniu" imgNumber ".png");
11.  
    uiCeng.addChild(this.button);
12.  
    this.button.anchor.set(0.5,0.5);
13.  
    this.button.y = 754;
14.  
    this.button.x = this.bjt.x;
15.  
    this.type = imgNumber;
16.  
    //线
17.  
    this.line = new PIXI.Sprite.fromImage("res/lianxi/music/xian.png");
18.  
    lineCeng.addChild(this.line);
19.  
    this.line.anchor.set(0.5,0);
20.  
    this.line.x = this.bjt.x;
21.  
    //点击位置中心点
22.  
    this.kong = new PIXI.Sprite.fromImage("res/lianxi/music/kong.png");
23.  
    lineCeng.addChild(this.kong);
24.  
    this.kong.anchor.set(0.5,0.5);
25.  
    this.kong.x = this.bjt.x;
26.  
    this.kong.y =600;
27.  
     
28.  
    this.button.interactive = true;
29.  
    this.animalArray = [];
30.  
    this.createAnimal = function(){
31.  
    //调用创建动物对象
32.  
    var animal =new Animal(this.type,this.button.x);
33.  
    animalCeng.addChild(animal.animal);
34.  
    this.animalArray.push(animal);
35.  
     
36.  
    };
37.  
    //动物对象进行移动
38.  
    this.animalMove = function(){
39.  
     
40.  
    for(var i = 0; i < this.animalArray.length; i ){
41.  
    var animal = this.animalArray[i];
42.  
    animal.move();
43.  
    }
44.  
    };
45.  
    //删除动物
46.  
    this.show = true;
47.  
    this.deleteAnimal = function(){
48.  
    for(var i = this.animalArray.length-1; i >=0; i--){
49.  
    var animal = this.animalArray[i];
50.  
    if(this.kong.y 46 < animal.animal.y && this.show == true){
51.  
    this.scoreAction("miss");
52.  
    this.show = false;
53.  
    }
54.  
    if(animal.animal.y>800){
55.  
    this.show = true;
56.  
    animalCeng.removeChild(animal.animal);
57.  
    this.animalArray.splice(i,1);
58.  
    }
59.  
     
60.  
    }
61.  
    };
62.  
    var soft = this;
63.  
    var num = 1;
64.  
    //鼠标按下
65.  
    this.button.on("mousedown",function(){
66.  
    soft.buttonClick();
67.  
    });
68.  
    //鼠标抬起
69.  
    this.button.on("mouseup",function(){
70.  
    soft.bjt.visible = false;
71.  
    });
72.  
     
73.  
    this.button.on("click",function(){
74.  
    //var str = {"zp":zp,"button":soft.type};
75.  
    //musicArray.push(str);
76.  
    //console.log(JSON.stringify(musicArray));
77.  
     
78.  
    });
79.  
    //移动端点击
80.  
    this.button.on("touchstart",function(){
81.  
    soft.buttonClick();
82.  
    });
83.  
    //移动端抬起
84.  
    this.button.on("touchend",function(){
85.  
    soft.bjt.visible = false;
86.  
    });
87.  
    //点击事件
88.  
    this.buttonClick = function(){
89.  
    soft.bjt.visible = true;
90.  
     
91.  
    for(var i = 0;i < soft.animalArray.length;i ){
92.  
    if(soft.kong.y - 10 < soft.animalArray[i].animal.y && soft.kong.y 10 > soft.animalArray[i].animal.y){
93.  
    score = 10;
94.  
    scoreTxt.text = score;
95.  
    animalCeng.removeChild(soft.animalArray[i].animal);
96.  
    soft.animalArray.splice(i,1);
97.  
    this.scoreAction("perfect");
98.  
     
99.  
    }else if(soft.kong.y - 20 < soft.animalArray[i].animal.y && soft.kong.y 20 > soft.animalArray[i].animal.y){
100.  
     score = 5;
101.  
     scoreTxt.text = score;
102.  
     animalCeng.removeChild(soft.animalArray[i].animal);
103.  
     soft.animalArray.splice(i,1);
104.  
     this.scoreAction("good");
105.  
     }else if(soft.kong.y - 30 < soft.animalArray[i].animal.y && soft.kong.y 30 > soft.animalArray[i].animal.y){
106.  
     score = 1;
107.  
     scoreTxt.text = score;
108.  
     animalCeng.removeChild(soft.animalArray[i].animal);
109.  
     soft.animalArray.splice(i,1);
110.  
     this.scoreAction("bad");
111.  
     }
112.  
     //soft.bjt.visible = false;
113.  
     }
114.  
     };
115.  
     //键盘点击事件
116.  
     this.keyDown = function() {
117.  
     soft.bjt.visible = true;
118.  
     for(var i = 0;i<soft.animalArray.length;i ){
119.  
     if(soft.kong.y - 30 < soft.animalArray[i].animal.y && soft.kong.y 30 > soft.animalArray[i].animal.y){
120.  
     score ;
121.  
     scoreTxt.text = score;
122.  
     animalCeng.removeChild(soft.animalArray[i].animal);
123.  
     soft.animalArray.splice(i,1);
124.  
     }
125.  
     //soft.bjt.visible = false;
126.  
     }
127.  
     // var str = {"zp":zp,"button":soft.type};
128.  
     // musicArray.push(str);
129.  
     // console.log(JSON.stringify(musicArray));
130.  
     };
131.  
      
132.  
     this.keyUp = function() {
133.  
     soft.bjt.visible = false;
134.  
     };
135.  
     //记录点击之后结果
136.  
     this.scoreArray = [];
137.  
     this.scoreAction = function(name){
138.  
     var score = new PIXI.Sprite.fromImage("res/lianxi/music/" name ".png");
139.  
     gameObjectCeng.addChild(score);
140.  
     score.y = 540;
141.  
     score.x = this.bjt.x;
142.  
     score.anchor.set(0.5,0.5);
143.  
     score.alpha = 1;
144.  
     this.scoreArray.push(score);
145.  
     };
146.  
     //成绩效果图片移动
147.  
     this.scoreMove = function(){
148.  
     for(var i = 0; i < this.scoreArray.length; i ){
149.  
     var score = this.scoreArray[i];
150.  
     score.alpha -= 0.01;
151.  
     score.y -= 2;
152.  
     }
153.  
     for(var i = this.scoreArray.length - 1; i >= 0; i--){
154.  
     var score =this.scoreArray[i];
155.  
     if(score.y <= 400){
156.  
     gameObjectCeng.removeChild(score);
157.  
     this.scoreArray.splice(i,1);
158.  
     }
159.  
     }
160.  
     };
161.  
     }

3、下落图片的对象，控制下落的速度及显示样式。

1.  
   function Animal(type,animalX){
2.  
   var number=Math.floor(Math.random()*5 1);
3.  
   if(type == 1){
4.  
   this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/blue/lan" number ".png");
5.  
   }
6.  
   if(type == 2){
7.  
   this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/green/lv" number ".png");
8.  
   }
9.  
   if(type == 3){
10.  
    this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/red/hong" number ".png");
11.  
    }
12.  
    if(type == 4){
13.  
    this.animal = new PIXI.Sprite.fromImage("res/lianxi/music/yellow/huang" number ".png");
14.  
    }
15.  
    this.animal.anchor.set(0.5,0.5);
16.  
    this.animal.x = animalX;
17.  
    this.animal.y = 0;
18.  
    //动物对象移动
19.  
    this.move = function(){
20.  
    this.animal.y = 3.33;
21.  
    }
22.  
     
23.  
    }

4、音频的控制，这里封装了Html网页通过Js对音频文件的播放控制。

1.  
   function SoundManager() {
2.  
   var audioObj = {};
3.  
   var cacheNum = 3;//预留声音最小个数
4.  
    
5.  
   //添加声音
6.  
   this.addAudio = function(name, url) {
7.  
   var audio = new Audio();
8.  
   //audio.autoplay = true;
9.  
   audio.src = url;
10.  
    audio.load();
11.  
    //audio.pause();
12.  
    audio.preload="auto";
13.  
    document.body.appendChild(audio);
14.  
     
15.  
    var audioArr = audioObj[name];
16.  
    if(audioArr == null) {
17.  
    audioArr = [];
18.  
    }
19.  
    audioArr.push(audio);
20.  
    audioObj[name] = audioArr;
21.  
    if(audioArr.length < cacheNum) {
22.  
    //自动添加该音色
23.  
    this.addAudio(name, audio.src);
24.  
    }
25.  
    }
26.  
     
27.  
    //播放声音
28.  
    this.play = function(name, loop = false) {
29.  
    var audioArr = audioObj[name];
30.  
    var audio = null;
31.  
    if(audioArr.length > 0) {
32.  
    audio = audioArr[0];
33.  
    audioArr.splice(0, 1);
34.  
    if(loop == true) {
35.  
    audio.loop = true;
36.  
    }
37.  
    audio.play();
38.  
    audio.onended = function() {
39.  
    //console.log(audio "音频播放完成" audio.src);
40.  
    audioArr.push(audio);
41.  
    };
42.  
    if(audioArr.length < cacheNum) {
43.  
    //console.log("缓存数量不够了！");
44.  
    //自动添加该音色
45.  
    this.addAudio(name, audio.src);
46.  
    }
47.  
    } else {
48.  
    //console.log("没有该声音的缓存");
49.  
    }
50.  
    return audio;
51.  
    }
52.  
     
53.  
    }
54.  
    var soundManager = null;
55.  
    SoundManager.getInstance = function() {
56.  
    if(soundManager == null) {
57.  
    soundManager = new SoundManager();
58.  
    }
59.  
    return soundManager;
60.  
    }
61.  
     
62.  
    SoundManager.getInstance().addAudio("bgm", "res/lianxi/music/tkzc.mp3");

这篇好文章是转载于：学新通技术网