Html5钢琴块游戏制作(音乐游戏)

当年一款手机节奏音游,相信不少人都玩过或见过。最近也是将其做了出来分享给大家。

游戏的基本玩法:点击下落的黑色方块,弹奏音乐。(下落的速度会越来越快) 

可以进行试玩,手机玩起来效果会更好些。

点击试玩

游戏使用了一首儿歌乐谱,听出来是啥了吗^ ^

----------------------------------------------------------------------

   长期更新不同类型 H5 游戏,进行经验分享

   对游戏感兴趣的小伙伴,加个关注哈

----------------------------------------------------------------------

实现功能

  1. 制作了简单的近乎黑白的显示界面。
  2. 加入了音频乐谱,可以快速弹奏出一首简单的音乐。
  3. 游戏加入了Game Over的判断,当点击两次,或为点击黑色方块时,游戏结束。

源码地址:pro.youyu001.com

制作思路

  1. 游戏的主场景使用了js绘图进行制作,里面的方块都是程序画出来的。
  2. 音乐方面采用了weixin的js控件,进行了预加载处理。
  3. 不同的音色,找了10几个音节的Mp3文件,演奏时进行播放控制。
  4. 声音播放时做了一个音频对象池子,进行音乐的播放和停止后的回收。

以上为开发的一些思路和关键点。欢迎一起讨论

代码说明

1、通过绘图方式制作了游戏中钢琴按键的效果

this.graphics = new PIXI.Graphics();
this.graphics.beginFill(this.color, 1);
this.graphics.drawRect(0, 0, w, h);
this.addChild(this.graphics);

2、游戏的按钮进行了对象化处理控制了按钮的下落速度显示状态与点击事件等

function Rect(w, h, rectType) {
    //对象继承Container
    PIXI.Container.call(this);
    //用于控制回掉函数的本对象属性控制
    var self = this;

    this.clicked = true;

    this.rectType = rectType;
    this.color = 0x555555;
    if(this.rectType == 0) {
        //黑色
        this.color = 0x000000;
        this.clicked = false;

    } else if(this.rectType == 1){
        //白色
        this.color = 0xFFFFFF;

    } 

    this.graphics = new PIXI.Graphics();
    this.graphics.beginFill(this.color, 1);
    this.graphics.drawRect(0, 0, w, h);
    this.addChild(this.graphics);

    //添加黑色或白色方块点击事件
    if(this.rectType != 2) {
        this.interactive = true;
        this.on("click", function(){
            self.play();
        });
        this.on("touchstart", function(){
            self.play();
        });
    }

    this.play = function() {
        
        //方块只能点击一次,添加此验证
        if(this.rectType == 0 && this.clicked == false) {
            //记录点击状态
            this.clicked = true;
            //黑色方块被点击变色
            self.graphics.beginFill(0x888888, 1);
            self.graphics.drawRect(0, 0, 123, 150);
            
            //按照乐谱寻找需要播放的音色
            var mIndex = musicArrListIndex[music[musicIndex]];
            var audio = musicArrList[music[musicIndex]][mIndex];
            //播放音乐
            audio.play();

            //切换同音色的声音对象,解决同音色一起播放问题
            mIndex ++;
            if(mIndex >= 5) {
                mIndex = 0;
            }
            //记录同音色 播放的序列,5选1
            musicArrListIndex[music[musicIndex]] = mIndex;
            musicIndex ++;
            //乐谱循环播放
            if(musicIndex >= music.length - 1) {
                musicIndex = 0;
            }
            
            //得分
            score ++;
            scoreTxt.text = "score: " + score;

        } else {
            //黑色方块被点击变红
            self.graphics.beginFill(0xff1111, 1);
            self.graphics.drawRect(0, 0, 123, 200);

            over();
        }
    }

}
//对象继承Container的属性方法
Rect.prototype = Object.create(PIXI.Container.prototype);

3、游戏中的音频处理模块音频预加载

    //iphone手机声音预加载兼容
    document.addEventListener("WeixinJSBridgeReady", function () {
        
        var controls = document.getElementsByTagName('audio');
        for(var i=0; i

4、乐谱与音频对象的代码逻辑编写

//乐谱
var music = [1,1,1,3,5,5,5,5,6,6,6,8,5,4,4,6,6,3,3,3,3,2,2,2,2,5,5,1,1,1,3,5,5,5,5,6,6,6,8,5,4,4,4,6,3,3,3,3,3,3,2,2,2,3,1];
var musicIndex = 0;

//储存声音autio对象
var musicArrList = [];
var musicArrListIndex = [];
for(var i=1;i<10;i++){
    //创建声音
    var musicArr = [];
    //初始化9个音色
    for(var j = 0; j < 5;j ++) {
        var audio = new Audio();
        audio.autoplay = true;
        audio.src='';
        audio.src = 'audio/'+i+'.mp3';
        audio.load();
        audio.pause();
        audio.preload="auto";
        document.body.appendChild(audio);
        musicArr.push(audio);   
    }
    musicArrListIndex.push(0);
    musicArrList.push(musicArr);
}

你可能感兴趣的:(Html5游戏制作,H5游戏,HTML5游戏,html5,游戏,前端,游戏程序)