The core gameplay of the Html5 version of the music game is realized here.
The production of the game draws lessons from many classic music game playing methods, and combines the rhythm of music with operation through simple code.
You can play the game through your mobile phone, and accurately click on the target when it falls to score.
The whereabouts data in the game is recorded by hand, there may be some deviations.
Realize the function
1. Added sound control function to Html
2. According to the rhythm of the music, accurately prompt the tap prompt
3. Judging the accuracy of the click timing rhythm
4. Record audio score data by hand, which can realize the production of multiple levels
( The whereabouts data in the game is recorded by hand, there may be some deviation. )
Source address: pro.youyu001.com
production ideas
1. The game is divided into four falling sections, and the effect is realized through frame rate animation.
2. When clicking, judge the position of the falling picture, calculate the score, and give a reminder.
3. Each falling path in the game is defined according to the object method, which can be added or reduced to control the difficulty (this has not yet been realized).
4. The game is played on the touch screen of a mobile phone.
5. The score stepping in the game is hand-knocked after the game is finished first, and the frame rate data of the game running is recorded to control the rhythm of the game.
More ideas for expansion
Through this idea, it is possible to expand the production of music games such as (Taiko Master, Melody Heaven) and so on.
If you have a better idea or are interested in game development
You can leave a message in the comment area and discuss together
code description
Here is a description of some key codes
1. Audio drop data array, calculate the dropped data according to the frame rate
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. Objects of each audio channel, including display, falling items control score judgment, etc.
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(){
//调用创建动物对象
var animal =new Animal(this.type,this.button.x);
animalCeng.addChild(animal.animal);
this.animalArray.push(animal);
};
//动物对象进行移动
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;
//鼠标按下
this.button.on("mousedown",function(){
soft.buttonClick();
});
//鼠标抬起
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;
};
//记录点击之后结果
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. Drop the object of the picture, control the falling speed and display style.
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. Audio control, which encapsulates the playback control of audio files through Js on Html web pages.
function SoundManager() {
var audioObj = {};
var cacheNum = 3;//预留声音最小个数
//添加声音
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("缓存数量不够了！");
//自动添加该音色
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");