HTML5游戏_基于DOM平台跳跃小游戏开发_10.玩家精灵移动

HTML5游戏_基于DOM平台跳跃小游戏开发

玩家精灵移动

---

---

• 在 精灵.js 里添加玩家精灵函数和玩精灵动作

修改 精灵.js

//定义全局对象 精灵集合
var 精灵集合 = 
{
	"@": 玩家精灵,
	"o": 金币精灵,
	"=": 熔岩精灵,
	"v": 熔岩精灵,
	"|": 熔岩精灵
};
//定义全局变量 玩家移动速度
var 玩家移动速度 = 10;
//定义全局变量 玩家跳跃速度
var 玩家跳跃速度 = 14;
//定义全局变量 重力
var 重力 = 30;

/**
 *@描述:	玩家精灵 函数
 *@传参:	坐标 (矢量)
 *@参数:	坐标,大小,速度矢量,类型
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/04
 *@修改人和其它信息:
**/
function 玩家精灵(坐标) 
{
	this.类型 = "玩家";
	this.坐标 = 坐标;
	this.大小 = new 矢量(0.5, 1);
	this.速度矢量 = new 矢量(0, 0);
}
/**
 *@描述:	玩家精灵 添加 行为 方法
 *@传参:	每帧执行时间, 生成地图数据, 按键内容
 *@参数:	
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/04
 *@修改人和其它信息:
**/
玩家精灵.prototype.行为 = function(每帧执行时间, 生成地图数据, 按键内容)
{
	this.x方向移动(每帧执行时间, 生成地图数据, 按键内容);
	this.y方向移动(每帧执行时间, 生成地图数据, 按键内容);
};
/**
 *@描述:	玩家精灵 添加 x方向移动 方法
 *@传参:	每帧执行时间, 生成地图数据, 按键内容
 *@参数:	新坐标,障碍物
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/04
 *@修改人和其它信息:
**/
玩家精灵.prototype.x方向移动 = function(每帧执行时间, 生成地图数据, 按键内容)
{
	//给 速度矢量.x 赋值0
	this.速度矢量.x = 0;
	//判断按键内容
	if (按键内容.左) 
	{
		this.速度矢量.x -= 玩家移动速度;
	}
	if (按键内容.右)
	{
		this.速度矢量.x += 玩家移动速度;
	}
	//定义定量 新坐标
	const 新坐标 = this.坐标.偏移(new 矢量(this.速度矢量.x * 每帧执行时间, 0));
	//定义定量 障碍物
	const 障碍物 = 生成地图数据.判断障碍物(新坐标, this.大小);
	//判断有没有障碍物
	if(障碍物)
	{
		//有障碍物
	}
	else
	{
		this.坐标 = 新坐标;
	}	
};
/**
 *@描述:	玩家精灵 添加 y方向移动 方法
 *@传参:	每帧执行时间, 生成地图数据, 按键内容
 *@参数:	新坐标,障碍物
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/04
 *@修改人和其它信息:
**/
玩家精灵.prototype.y方向移动 = function(每帧执行时间, 生成地图数据, 按键内容) 
{
	//给 速度矢量.y 每帧执行时间 * 重力
	this.速度矢量.y += 每帧执行时间 * 重力;
	//定义定量 新坐标
	const 新坐标 = this.坐标.偏移(new 矢量(0, this.速度矢量.y * 每帧执行时间));
	//定义定量 障碍物
	const 障碍物 = 生成地图数据.判断障碍物(新坐标, this.大小);
	//判断有没有障碍物
	if(障碍物)
	{
		//下方有障碍物
		if (按键内容.上 && this.速度矢量.y > 0)
		{
			//如果按上键,给玩家速度矢量.y一个向上的速度
			this.速度矢量.y = -玩家跳跃速度;	
		}
		else
		{
			//定义速度矢量.y=0
			this.速度矢量.y = 0;	
		}
	}
	else
	{
		//无障碍物
		if (按键内容.下 && this.速度矢量.y > 0)
		{
			//如果按下键,给玩家速度矢量.y一个向下的速度
			this.速度矢量.y += 每帧执行时间 * 重力 * 2;
		}
		this.坐标 = 新坐标;
	}
};
/**
 *@描述:	熔岩精灵 函数
 *@传参:	坐标 (矢量)
 *@参数:	初始坐标,坐标,大小,速度矢量,类型
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/01
 *@修改人和其它信息:
**/
function 熔岩精灵(坐标, 元素) 
{
	//定义属性 类型
	this.类型 = "熔岩";
	//定义属性 初始坐标
	this.坐标 = 坐标;
	//定义大小
	this.大小 = new 矢量(1, 1);
	//根据元素来定义速度矢量属性 在x,y上的移动速度
	if(元素 === "=")
	{
		//= 是横向移动熔岩,所以x有速度y没有
		this.速度矢量 = new 矢量(2, 0);
	}
	else if(元素 === "|")
	{
		//| 是横向移动熔岩,所以y有速度x没有
		this.速度矢量 = new 矢量(0, 2);
	}
	else if(元素 === "v")
	{
		//v 是掉落熔岩,所以y有速度x没有
		this.速度矢量 = new 矢量(0, 3);
		this.初始坐标 = 坐标;
	}
}
/**
 *@描述:	熔岩精灵 添加 行为 方法
 *@传参:	每帧执行时间, 生成地图数据
 *@参数:	
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/01
 *@修改人和其它信息:
**/
熔岩精灵.prototype.行为 = function(每帧执行时间, 生成地图数据)
{
	//熔岩精灵偏移后的新坐标
	const 新坐标 = this.坐标.偏移(this.速度矢量.矢积(每帧执行时间));
	//判断熔岩精灵偏移后的新坐标是否有障碍物
	if (!生成地图数据.判断障碍物(新坐标, this.大小))
	{
		//新坐标区域内没有障碍元素,熔岩可以移动
		//将新坐 付给 坐标
		this.坐标 = 新坐标;
	}
	//有障碍物 回到初始坐标
	else if (this.初始坐标)
	{
		this.坐标 = this.初始坐标;
	}
	//有障碍物 反向运动
	else
	{
		this.速度矢量 = this.速度矢量.矢积(-1);
	}
};
/**
 *@描述:	金币精灵 函数
 *@传参:	坐标 (矢量)
 *@参数:	初始坐标,大小,晃动值,类型
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/02/24
 *@修改人和其它信息:
**/
function 金币精灵(坐标) 
{
	//定义属性 类型
	this.类型 = "金币";
	//定义属性 初始坐标
	this.初始坐标 = this.坐标 = 坐标;
	//定义大小 因为游戏场景中每格大小为15*15
	this.大小 = new 矢量(0.7, 0.7);
	//定义属性 晃动值 初始的晃动系数
	/*
		PI是180°,PI*2=360° 随机数(0~1)*PI*2 就是在0°~360°中随机取一个角度
		范围即0*3.1415*2 ~ 0.9999*3.1415*2
	*/
	this.晃动值 = Math.random() * Math.PI * 2;
}
/**
 *@描述:	金币精灵 添加 行为 方法
 *@传参:	每帧执行时间 (每帧执行时间)
 *@参数:	晃动速度,晃动区域,晃动坐标y
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/02/24
 *@修改人和其它信息:
**/
金币精灵.prototype.行为 = function(每帧执行时间) 
{
	//定义定量 晃动速度
	const 晃动速度 = 8;
	//定义定量 晃动区域
	const 晃动区域 = 0.07;
	//晃动值自加 每帧执行时间*晃动速度=每帧移动距离
	this.晃动值 += 每帧执行时间 * 晃动速度;
	//定义定量 晃动坐标y
	const 晃动坐标y = Math.sin(this.晃动值) * 晃动区域;
	//设置坐标偏移后的值
	this.坐标 = this.初始坐标.偏移(new 矢量(0, 晃动坐标y));
};

运行html操作方向键就可以看到玩家精灵的移动啦
效果图