HTML5游戏_基于DOM平台跳跃小游戏开发_11.玩家精灵碰撞

最新推荐文章于 2022-11-14 14:17:03 发布
最新推荐文章于 2022-11-14 14:17:03 发布 199 收藏
分类专栏： HTML5游戏_基于DOM平台跳跃小游戏开发 文章标签： javascript html5 游戏开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangtianyu06/article/details/114547384
版权

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

玩家精灵碰撞

  • 效果图
    在这里插入图片描述
  • 本章新内容
  • filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
var 年龄数组 = [32, 33, 12, 40];
var 大于三十的年龄数组 = 年龄数组.filter
(
	function(年龄)
	{
		return 年龄 > 30;
	}
);
//大于三十的年龄数组 [32,33,40]
  • **some()**方法用于检测数组中的元素是否满足指定条件,some()方法会依次执行数组的每个元素,并返回布尔值
var 年龄数组 = [32, 33, 12, 40];
var 是否有等于四十岁的年龄 = 年龄数组.some
(
	funtion(年龄)
	{
		return 年龄 === 40;
	}
);
//是否有等于四十岁的年龄 true
  • 我们先来修改 生成地图数据.js 在生成地图数据函数里添加玩家和状态属性,然后再添加 玩家精灵碰撞 方法和 判断精灵碰撞 方法

生成地图数据.js

/**
 *@描述:	生成地图数据 函数
 *@传参:	地图 (地图数组的一项,如 地图数组[0] )
 *@参数:	宽,高,元素数组,精灵数组,玩家,状态
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/02/24
 *@修改人和其它信息:
**/
function 生成地图数据(地图)
{
	//定义属性 宽 为地图[]数组的长度
	this.宽 = 地图[0].length;
	//定义属性 高 为地图数组的长度
	this.高 = 地图.length;
	//定义属性 元素数组 用来存放游戏里每个元素对应地图数据中的元素类型
	this.元素数组 = [];
	//定义 精灵数组 用来存放游戏里对应地图数据中的精灵
	this.精灵数组 = [];
	//遍历地图数组,识别地图元素
	for (var y = 0; y < this.高; y++) 
	{
		//定义变量 行 来存放地图里一行的数据
		const 行 = 地图[y];
		//定义数组 元素行 来存放解析地图一行数据后的元素类型
		let 元素行 = [];
		//遍历一行地图数据
		for (var x = 0; x < this.宽; x++) 
		{
			//定义变量 元素 来存 行[] 里的数据
			const 元素 = 行[x];
			//定义变量 元素类型 来存解析后的元素类型
			let 元素类型 = null;
			//定义变量 精灵内容 来保存在精灵集合对象中找出元素对应的属性
			const 精灵内容 = 精灵集合[元素];
			//判断元素
			if (精灵内容)
			{
				//如果是精灵集合中元素,添加到精灵数组
				this.精灵数组.push(new 精灵内容(new 矢量(x, y), 元素));
			}
			else if (元素 === "x")
			{
				元素类型 = "墙体";
			}
			else if (元素 === "@")
			{
				元素类型 = "玩家";
			}
			else if (元素 === "!")
			{
				元素类型 = "熔岩";
			}
			//将元素类型添加到元素行
			元素行.push(元素类型)
		}
		//将一行数据添加到元素数组
		this.元素数组.push(元素行);
	}
	//filter() 方法会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
	this.玩家 = this.精灵数组.filter
	(
		function(精灵) 
		{
			return 精灵.类型 === "玩家"
		}
	)[0];
	//游戏状态,null表示没有结束,成功表示游戏胜利,失败表示游戏失败
	this.状态 = null;
}
/**
 *@描述:	生成地图数据 添加 动画 方法
 *@传参:	每帧执行时间(每帧执行时间)
 *@参数:
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/02/24
 *@修改人和其它信息:
**/
生成地图数据.prototype.动画 = function(每帧执行时间, 按键内容) 
{
	//定义变量 最大每帧执行时间=0.05
	const 最大每帧执行时间 = 0.05;
	//循环查看是否需要补帧动画
	while (每帧执行时间 > 0) 
	{
		//定义变量 当前帧执行时间 如果每帧执行时间大于最大每帧执行时间则取最大每帧执行时间0.05,即秒20帧
		const 当前帧执行时间 = Math.min(每帧执行时间, 最大每帧执行时间);
		//循环遍历 精灵数组
		this.精灵数组.forEach(function(精灵) 
		{
			//依次执行精灵.行为方法
			精灵.行为(当前帧执行时间, this, 按键内容);
		}, this);
		//结合循环条件查看是否需要补帧动画
		每帧执行时间 -= 当前帧执行时间;
	}
};
/**
 *@描述:	生成地图数据 添加 判断障碍物 方法
 *@传参:	坐标 大小
 *@参数:
 *@返回值:	元素类型
 *@创建人:	王天宇
 *@创建时间:2021/03/01
 *@修改人和其它信息:
**/
生成地图数据.prototype.判断障碍物 = function(坐标, 大小) 
{
	//定义区域大小
	//x起始位置
	const x起始位置 = Math.floor(坐标.x);
	//x结束位置 坐标x+大小矢量的x
	const x结束位置 = Math.ceil(坐标.x + 大小.x);
	//y起始位置
	const y起始位置 = Math.floor(坐标.y);
	//y结束位置 坐标y+大小矢量的y
	const y结束位置 = Math.ceil(坐标.y + 大小.y);
	//判断区域是否在地图的左右上边界
	if (x起始位置 < 0 || x结束位置 > this.宽 || y起始位置 < 0)
	{
		return "墙体";
	}
	//判断区域是否在下边界
	if (y结束位置 > this.高)
	{
		return "熔岩";
	}
	//判断区域内是否有障碍物
	for (let y = y起始位置; y < y结束位置; y++) 
	{
		for (let x = x起始位置; x < x结束位置; x++) 
		{
			const 元素类型 = this.元素数组[y][x];
			//判断元素类型 是否有值
			if (元素类型) 
			{
				return 元素类型;
			}	
		}
	}
};
/**
 *@描述:	生成地图数据 添加 玩家精灵碰撞 方法
 *@传参:	碰撞精灵类型, 碰撞精灵
 *@参数:	
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/05
 *@修改人和其它信息:
**/
生成地图数据.prototype.玩家精灵碰撞 = function(碰撞精灵类型, 碰撞精灵) 
{
	//判断碰撞精灵类型如果是熔岩同时状态为null
	if (碰撞精灵类型 == "熔岩" && this.状态 == null) 
	{
		//定义状态为失败
		this.状态 = "失败";
	} 
	//判断碰撞精灵类型是金币
	else if (碰撞精灵类型 == "金币") 
	{
		//将碰撞的金币精灵从精灵数组中删除
		this.精灵数组 = this.精灵数组.filter(function(其他精灵) 
		{
			return 其他精灵 != 碰撞精灵;
		});
		//判断精灵数组中是否还有金币精灵
		if (!this.精灵数组.some(
			function(碰撞精灵) 
			{
				return 碰撞精灵.类型 == "金币";
			})) 
		{
			//没有金币精灵 设定状态为成功
			this.状态 = "成功";
		}
	}
};
/**
 *@描述:	生成地图数据 添加 判断精灵碰撞 方法
 *@传参:	精灵
 *@参数:	
 *@返回值:	无
 *@创建人:	王天宇
 *@创建时间:2021/03/05
 *@修改人和其它信息:
**/
生成地图数据.prototype.判断精灵碰撞 = function(精灵) 
{
	//依次判断精灵与其他精灵是否发生碰撞
	for (var i = 0; i < this.精灵数组.length; i++) 
	{
		const 其他精灵 = this.精灵数组[i];
		//判断精灵坐标与大小是否与精灵有碰撞
		if (其他精灵 != 精灵 &&
			精灵.坐标.x + 精灵.大小.x > 其他精灵.坐标.x &&
			精灵.坐标.x < 其他精灵.坐标.x + 其他精灵.大小.x &&
			精灵.坐标.y + 精灵.大小.y > 其他精灵.坐标.y &&
			精灵.坐标.y < 其他精灵.坐标.y + 其他精灵.大小.y)
		{
			return 其他精灵;
		}	
	}
};
  • 修改 精灵.js 补充 玩家精灵的 行为 方法,玩家精灵的 x/y方向移动 方法中关于精灵碰撞的部分
//定义全局对象 精灵集合
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方向移动(每帧执行时间, 生成地图数据, 按键内容);
	const 碰撞精灵 = 生成地图数据.判断精灵碰撞(this);
	if (碰撞精灵)
	{
		document.getElementById("碰撞").innerHTML = "碰撞精灵:" + 碰撞精灵.类型;
		生成地图数据.玩家精灵碰撞(碰撞精灵.类型, 碰撞精灵);
	}
	else
	{
		document.getElementById("碰撞").innerHTML = "碰撞精灵:";
	}
};
/**
 *@描述:	玩家精灵 添加 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页面里面加一个h3标签来显示碰撞信息

html页面

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html跳跃小游戏</title>
		<!--CSS样式-->
		<link rel="stylesheet" type="text/css" href="./css/css样式.css">
	</head>
	<body>
		<h5 id="fps" style="color: #ffffff;">FPS=0</h5>
		<h5 id="碰撞" style="color: #ffffff;">碰撞精灵:</h5>
		<!--pre标签可定义预格式化的文本-->
		<pre id="按键监听测试" style="color: #ffffff;"></pre>
		<!--JS脚本-->
		<script type="text/javascript" src="./js/精灵.js"></script>
		<script type="text/javascript" src="./js/地图数组.js"></script>
		<script type="text/javascript" src="./js/工具函数.js"></script>
		<script type="text/javascript" src="./js/按键监听.js"></script>
		<script type="text/javascript" src="./js/生成地图数据.js"></script>
		<script type="text/javascript" src="./js/生成关卡.js"></script>
		<script type="text/javascript" src="./js/运行帧动画.js"></script>
		<script>
		//初始化程序
		function 初始化()
		{
			//开始第一个关卡
			开始关卡(0);
		}
		function 开始关卡(n) 
		{
			//生成地图数据
			var 新地图数据 = new 生成地图数据(地图数组[n]);
			//生成关卡
			var 新关卡 = new 生成关卡(document.body, 新地图数据);
			//运行帧动画
			运行帧动画(function(每帧执行时间) 
			{
				/*这个方法是游戏里每帧运行的所有内容,包括动画/判断碰撞/按键监听等*/
				//播放关卡地图里精灵一帧动画动作
				新地图数据.动画(每帧执行时间, 按键内容);
				//重新绘制一帧关卡
				新关卡.画精灵层();
				//计算每秒帧数
				document.getElementById("fps").innerHTML = "FPS=" + (1 / 每帧执行时间).toFixed(2);
				//每帧显示按键信息,&#9代表tab制表符
				document.getElementById("按键监听测试").innerHTML = 
					"按键左=" + (按键内容.左 === true) + 
					"&#9按键右=" + (按键内容.右 === true) + 
					"&#9按键上=" + (按键内容.上 === true) +
					"&#9按键下=" + (按键内容.下 === true);
				//执行每帧动作方法 返回false时结束运行帧动画, 返回其他则继续执行动画
				return true;
			});
		}
		初始化();
		</script>
	</body>
</html>
  • 效果图
    在这里插入图片描述
阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
爱玎科技首席执行官
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
C++开发精灵对战小游戏
11-29
C++开发的精灵对战小游戏
games - 基于DOM、JS和HTML5的小游戏系列源代码
02-13
压缩包里面是6个小游戏 大多使用JS+DOM的方式实现，也有HTML5的尝鲜 下载后推荐使用FF或者Chrome打开，IE和Opera并未被列入测试浏览器。
html dom游戏,HTML DOM
weixin_32430445的博客
06-01 141
HTML DOM 节点关系1.节点关系图假设html代码如实例中，那么各个元素节点的关系如下:d1 d2 d3 的parentNode是parentDivparentDiv的firstNode是 d1parentDiv的lastNode是d3d2的previousSibling是d1d2的nextSibling是d3parentDiv的children是 d1 d2 d32.父节点关系通过pare...
HTML5游戏_基于DOM平台跳跃小游戏开发_7.浮动的金币精灵
爱玎科技欢迎您
02-28 267
HTML5游戏_基于DOM平台跳跃小游戏开发 浮动的金币精灵 本章新知识 Math.PI 返回圆周率π. Math.sin() 函数返回一个数值的正弦值 Math.random() 函数返回一个浮点数,伪随机数在范围从0到小于1,也就是说,从0(包括0)往上,但是不包括1(排除1) 矢量 在二维及以上维度既有大小又有方向的量为矢量.我们在工具函数.js里定义一个矢量函数用来设置游戏里所有精灵的矢量,如坐标,大小等 在 工具函数.js 中添加代码 /** *@描述: 矢量 函数 在二维及以上维度既有大小
HTML5游戏_基于DOM平台跳跃小游戏开发_9.按键监听
爱玎科技欢迎您
03-03 338
HTML5游戏_基于DOM平台跳跃小游戏开发 按键监听 本章知识点: 对象自定义名称属性,可以用变量来命名属性名称 //这段代码把多个属性（品牌, 型号, 排量）赋给名为 汽车 的对象 var 汽车1 = { 品牌: "劳斯莱斯", 型号: "幻影", 排量："6.7T" }; 汽车1.品牌; //劳斯莱斯 var 汽车2 = { "品牌": "劳斯莱斯", 型号: "幻影", 排量："6.7T" }; 汽车2.品牌; //劳斯莱斯 汽车2["品牌"]; //劳斯莱斯 addE
Gotta-Win-Em-All-provisory-:宠物小精灵浏览器游戏
04-07
MVP（DOM-CANVAS） 游戏中有一个口袋妖怪，它跳跃（箭头键向上）和鸭子（箭头键向下） 屏幕右侧随机出现障碍物如果角色和障碍物接触，则游戏结束积压增加10个等级，在1000 *个等级点之后增加等级增加难度能够以不同...
使用 HTML 5 Canvas 和 Raycasting 创建伪 3D 游戏
weixin_46596227的博客
11-14 665
随着最近浏览器性能的提高，除了像 Tic-Tac-Toe 这样的简单游戏之外，用 JavaScript 实现游戏变得更加容易。我们不再需要使用 Flash 来制作炫酷的效果，而且随着 HTML5 Canvas 元素的出现，创建外观漂亮的网页游戏和动态图形比以往任何时候都更容易。一段时间以来，我想实现的一款游戏或游戏引擎是一种伪 3D 引擎，例如 iD Software 在旧的德军总部 3D 游戏中使用的引擎。
html dom游戏,html dom
weixin_39844901的博客
06-01 62
scrapy 入门 学习笔记 二蜘蛛抓回数据需要进行分析。首先要了解一下XPath。XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。XPath 是 W3C 标准，有空再学习吧。简单看一下html dom(Document Object Model)的文档对象模型.首先用scrapy shell 进行交互式解析的实验使用命令如下：# sc...
用 Cocos Creator 制作平台跳跃游戏
Cocos的博客
09-11 4823
前言 平台跳跃类游戏如《超级马里奥》《Celeste蔚蓝》等，非常考验玩家的操作和判断，有着非常本真的游戏乐趣。这类游戏乍一看，挺容易做的，但是要做好却不太容易。今天，我将使用 Cocos Creator v2.1.2 演示如何灵活快速地使用 Cocos Creator 来制作这类经典的横版平台跳跃类游戏，主要目的是帮助大家熟悉组件的用法，横版游戏实现方法很多，这里不做讨论！ 开始游戏制...
JS扫雷小游戏(DOM (html+css+js))
路漫漫其修远兮，吾将上下而求索。
11-11 1260
JS扫雷小游戏
HTML5游戏开发
王继超的专栏
08-01 6812
一、如何学习HTML5游戏开发？ 　　如果是刚接触HTML5，也是第一次开发游戏，过程中难免会遇到这样那样的问题，我所遇到的第一个问题就是：我对HTML5还不是很了解。因此我首先要分享的就是学习方法和路线： 　　如果你还不是很熟悉HTML、CSS、和JavaScript，请不要急于求成，只要打好基础，一切都会变得容易起来。 　　如何才算是“熟悉”？ HTML常用标签你全都认识并能说
完全分享，共同进步——我开发的第一款HTML5游戏《驴子跳》
yujianshenbing的专栏
04-03 347
在线演示：http://yujianshenbing.w108.mc-test.com/game/donkeyjump/index.html（如果无法访问，请大家暂时先直接下载源码运行） 源码下载：请查看附件 操作方法：游戏开始后，按键盘“A”或“D”控制左右方向，也可以通过方向键控制。 　　（请了解：游戏中所有图片和音乐均来自手机版同名游戏，本游戏仅供学习参考。本文所有内容及结论均属...
[转]我开发的第一款HTML5游戏《驴子跳》源码
Ga Ga Love Front
01-31 2417
操作方法：游戏开始后，按键盘“A”或“D”控制左右方向，也可以通过方向键控制。 　　（请了解：游戏中所有图片和音乐均来自手机版同名游戏，本游戏仅供学习参考。本文所有内容及结论均属个人意见，如有不同见解，欢迎指正。） 　　经过两个多月断断续续的开发，我的第一款游戏《驴子跳》终于完成了，此时，我已经迫不及待地想跟大家分享这个过程，包括学习方法、游戏源码、和经验心得；本文的目的，是希望能帮助更多
HTML5开发心得。
SANGLIU的专栏
12-07 3380
一、如何学习HTML5游戏开发？ 　　如果是刚接触HTML5，也是第一次开发游戏，过程中难免会遇到这样那样的问题，我所遇到的第一个问题就是：我对HTML5还不是很了解。因此我首先要分享的就是学习方法和路线： 　　如果你还不是很熟悉HTML、CSS、和JavaScript，请不要急于求成，只要打好基础，一切都会变得容易起来。 　　如何才算是“熟悉”？ HTML常用标签你全都认识并能说
我开发的第一款HTML5游戏《驴子跳》
fanzhang1990的专栏
03-21 4581
转自   http://www.iteye.com/topic/1122395 经过两个多月断断续续的开发，我的第一款游戏《驴子跳》终于完成了，此时，我已经迫不及待地想跟大家分享这个过程，包括学习方法、游戏源码、和经验心得；本文的目的，是希望能帮助更多的人快速地加入到HTML5的大团队，同时也希望能得到各种大侠的指点。 　　本文所有内容基于个人的学习过程和经验，因此在整理文
用DOM模型和css制作web小游戏
weixin_43162735的博客
03-17 762
现在通常的web游戏都是基于html5中canvas2d或者WebGl来制作，但是css3规范能提供更加便捷的图形变换和动画定义方式，仅仅用作web文档布局有些大材小用，采用dom模型加css3来完成一些web小游戏制作需求也是一种不错的选择~ 比如绘制圆角矩形，canvas2d需要用线条绘制加一些几何组合来完成，dom+css只需要定义borderRadius属性就可以。 而且dom+...
微信小程序报错Cannot read property '__DOMTree__' of null
最新发布
05-12
这个错误通常是因为小程序页面在渲染时出现了问题，导致无法正确识别页面元素。可能的原因包括： 1. 页面代码有误，例如缺少某个必要的页面元素或属性； 2. 页面逻辑错误，例如在页面未加载完成时就进行了某些操作； 3. 小程序框架本身的问题。 你可以试着按照以下步骤来解决： 1. 检查你的页面代码，确保所有必要的元素和属性都存在； 2. 将你的代码分成几个部分，逐步排查错误，找到问题所在； 3. 如果无法解决问题，可以尝试重启小程序开发工具或者清除缓存等操作； 4. 如果问题仍然存在，可以查看小程序官方文档或者咨询官方客服。 希望以上方法能够帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱玎科技首席执行官

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值