Html5版音乐游戏制作及分享（H5音乐游戏）

news2024/10/5 11:18:06

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

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

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

点击试玩

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

实现功能

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

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

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

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

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

​

源码地址：pro.youyu001.com

制作思路

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

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

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

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

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

更多扩展的思路

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

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

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

代码说明

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

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

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(){
		//调用创建动物对象
			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、下落图片的对象，控制下落的速度及显示样式。

	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网页通过Js对音频文件的播放控制。

	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");

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/421504.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Pytorch】使用pytorch进行张量计算、自动求导和神经网络构建

【Pytorch】使用pytorch进行张量计算、自动求导和神经网络构建

本文参加新星计划人工智能(Pytorch)赛道&#xff1a;https://bbs.csdn.net/topics/613989052 这是目录张量计算张量的属性和方法&#xff0c;如何使用它们来获取或修改张量的信息和形状张量之间的运算和广播机制&#xff0c;如何使用torch.add(), torch.sub(), torch.mul(), to…
阅读更多...
【Redis7】Redis7 持久化（重点：RDB与AOF重写机制）

【Redis7】Redis7 持久化（重点：RDB与AOF重写机制）

【大家好&#xff0c;我是爱干饭的猿&#xff0c;本文重点介绍Redis7 持久化&#xff08;重点&#xff1a;RDB与AOF重写机制&#xff09;。 后续会继续分享Redis7和其他重要知识点总结&#xff0c;如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff0c;关注一下吧】 …
阅读更多...
Java项目实战笔记（瑞吉外卖）-4

Java项目实战笔记（瑞吉外卖）-4

公共字段自动填充功能 问题分析 前面已经完成了后台系统的员工管理功能开发&#xff0c;在新增员工时需要设置创建时间、创建人、修改时间、修改人等字段&#xff0c;在编辑员工时需要设置修改时间和修改人等字段。这些字段属于公共字段&#xff0c;也就是很多表中都有这些字段…
阅读更多...
前端搭建小人逃脱游戏（内附源码）

前端搭建小人逃脱游戏（内附源码）

The sand accumulates to form a pagoda✨ 写在前面✨ 功能介绍✨ 页面搭建✨ 样式设置✨ 逻辑部分✨ 写在前面 上周我们实通过前端基础实现了打字通&#xff0c;当然很多伙伴再评论区提出了想法&#xff0c;后续我们会考虑实现的&#xff0c;今天还是继续按照我们原定的节奏来…
阅读更多...
对决：Kubernetes vs Docker Swarm - 谁才是最优秀的容器编排方案？

对决：Kubernetes vs Docker Swarm - 谁才是最优秀的容器编排方案？

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 文章目录一、介绍1. 什么是Kubernetes2. 什么是Docker Swarm3. 为什么需要容器编排&#xff1f;二、 架构比较1. Kubern…
阅读更多...
Spring框架——IOC、DI

Spring框架——IOC、DI

本篇博客主要介绍Java中的IOC和DI&#xff0c;以及在String框架中的应用。首先&#xff0c;我们将对IOC和DI进行概念介绍&#xff0c;然后讲解它们的关系及在String框架中的应用&#xff0c;最后通过一个实例来展示它们的具体用法。 IOC和DI的概念介绍 IOC&#xff08;Invers…
阅读更多...
热更新方案 HybridCLR 学习教程 |（一）原理及准备工作

热更新方案 HybridCLR 学习教程 |（一）原理及准备工作

文章目录 热更新方案 HybridCLR 学习教程（一）HybridCLR原理及准备工作前言一、学前准备1.1 资源下载1.2 文档参考学习二、关于HybridCLR2.1 HybridCLR特性：2.2 HybridCLR工作原理2.3 与其他流行的c#热更新方案的区别2.4 兼容性2.5 原理流程介绍三、快速上手（重要）3.1 体验…
阅读更多...
Linux下实现的 HTTP 服务器

Linux下实现的 HTTP 服务器

项目功能&#xff1a;&#xff08;1&#xff09;能接收客户端的GET请求&#xff1b;&#xff08;2&#xff09;能够解析客户端的请求报文&#xff0c;根据客户端要求找到相应的资源&#xff1b;&#xff08;2&#xff09;能够回复http应答报文&#xff1b;&#xff08;3&#x…
阅读更多...
MySQL实验四：数据更新

MySQL实验四：数据更新

MySQL实验四&#xff1a;数据更新 目录MySQL实验四&#xff1a;数据更新导读表结构sql建表语句模型图1、 SQL更新&#xff1a;将所有学生的年龄增加1岁代码2、SQL更新&#xff1a;修改“高等数学”课程倒数三名成绩&#xff0c;在原来分数上减5分代码解析3、SQl更新&#xff1a…
阅读更多...
docker详解

docker详解

一、docker相关命令 1、docker进程相关命令 启动docker服务&#xff1a;systemctl start docker 停止docker服务&#xff1a;systemctl stop docker 重启docker服务&#xff1a;systemctl restart docker 查看docker服务状态&#xff1a;systemctl status docker 设置…
阅读更多...
可变形卷积(Deformable Conv)原理解析与torch代码实现

可变形卷积(Deformable Conv)原理解析与torch代码实现

1. 可变形卷积原理解析 1.1 普通卷积原理 传统的卷积操作是将特征图分成一个个与卷积核大小相同的部分&#xff0c;然后进行卷积操作&#xff0c;每部分在特征图上的位置都是固定的。 图1 普通卷积过程 图1所示为普通卷积在输入特征图上进行卷积计算的过程&#xff0c;卷积核…
阅读更多...
4.3-4.4学习总结

4.3-4.4学习总结

文章目录 目录 文章目录 1.集合的概念 2.Set集合 1.HashSet类 2.LinkedHashSet类 3.TreeSet类 4.EnumSet类 一、Java集合 1.集合的概念 Java集合类是一种特别有用的工具类 , 可用于存贮数量不等的对象 , 并可以实现经常用的数据结构 , 同时集合还可用于保存具有映射关系的关…
阅读更多...
小波变换在脑电数据处理中的特征工程

小波变换在脑电数据处理中的特征工程

导读在生物信号中&#xff0c;高效的特征工程和特征提取(FE)是获得最优结果的必要条件。特征可以从时域、频域和时频域三个方面进行提取。时频域特征是最先进的特征&#xff0c;在大多数基于人工智能的信号分析问题中表现良好。本文介绍了小波散射变换(WST)在神经疾病分类中的应…
阅读更多...
2023美赛春季赛A题思路数据代码论文分享

2023美赛春季赛A题思路数据代码论文分享

文章目录赛题思路赛题详情参赛建议&#xff08;个人见解&#xff09;选择队友及任务分配问题&#xff08;重要程度&#xff1a;5星&#xff09;2023美赛春季赛A题思路数据代码【最新】赛题思路 (赛题出来以后第一时间在CSDN分享) 最新进度在文章最下方卡片&#xff0c;加入获取…
阅读更多...
高效便捷构造 Http 请求

高效便捷构造 Http 请求

Http 请求构造 如何构造http请求 对于Get请求: 地址栏直接输入点击收藏夹html 中的 link script img a…form 标签 这里我们重点强调 form 标签构造的 http请求 使用 form 标签构造http请求. <!-- 表单标签, 允许用户和服务器之间交互数据 --><form action"ht…
阅读更多...
SpringBoot 项目的创建与启动

SpringBoot 项目的创建与启动

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…
阅读更多...
腾讯最热门的 10 款前端开源项目

腾讯最热门的 10 款前端开源项目

作为国内知名的互联网公司&#xff0c;腾讯在前端领域做出了很多开源贡献。本文就来盘点腾讯最热门的 10 款前端开源项目&#xff01; wujie 无界微前端是一款基于 Web Components iframe 微前端框架&#xff0c;具备成本低、速度快、原生隔离、功能强等一系列优点。其能够完…
阅读更多...
【ChatGPT】教你搭建多任务模型

【ChatGPT】教你搭建多任务模型

ChatGPT教你搭建多任务模型 You: tell me what’s your version of gpt ? ChatGPT: As an AI language model developed by OpenAI, I am based on the GPT (Generative Pretrained Transformer) architecture. However, my version is known as GPT-3.5, which is an updat…
阅读更多...
【云原生】：用Kubernetes部署MySQL、SpringCloud、Nacos实现高可用

【云原生】：用Kubernetes部署MySQL、SpringCloud、Nacos实现高可用

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 文章目录一、 建立Kubernetes集群1. 安装和配置Kubernetes master节点1.1 安装Docker和Kubernetes1.2 初始化master节点…
阅读更多...
Spring事务（2）-EnableTransactionManagement实现源码解析

Spring事务（2）-EnableTransactionManagement实现源码解析

Transactional注解 Transactional是spring中声明式事务管理的注解配置方式。Transactional注解可以帮助我们标注事务开启、提交、者回滚、事务传播、事务隔离、超时时间等操作。 而EnableTransactionManagement是开启Spring 事务的入口。 EnableTransactionManagement 标注启…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023