文章/答案/技术大牛

发布

社区首页 >专栏 >超级玛丽HTML5源代码学习------(四)

超级玛丽HTML5源代码学习------(四)

wust小吴

发布于 2022-03-03 12:42:13

1.6K00

代码可运行

文章被收录于专栏：风吹杨柳风吹杨柳

运行总次数：0

代码可运行

首先我们需要知道

每一个游戏都是由：

A:获得用户输入

B:更新游戏状态

C:处理AI

D:播放音乐和音效

E:画面显示

这些行为组成。游戏主循环就是用来处理这个行为序列，在javascript中可以用setInterval方法来轮询。在超级玛丽中是这个循环

	//主循环
	var mainLoop=setInterval(function(){

		//距上一次执行相隔的时间.(时间变化量), 目前可近似看作sleep.
		var deltaTime=sleep;
		
		// 更新Animation状态
		animation.update(deltaTime);
	
		//使用背景覆盖的方式 清空之前绘制的图片
		context.drawImage(ImgCache["bg"],0,0);
				
		//绘制Animation
		animation.draw(context, x,y);
		
	},sleep);

如何去做到让游戏角色进行移动呢？今天这里只学习让玩家在原地进行移动，也就是step3_1

实现人物移动的方法就是：将精灵图片的不同动作图片，在画布上同一位置交替显示，就形成了人物原地移动的动画。在画布的不同的位置显示动作图片，就形成了人物在画布上来回移动的动画。

首先实现炸弹人在画布上原地移动，显示移动动画；

了解精灵图片含义：所谓精灵图片就是包含多张小图片的一张大图片，使用它可以减少http请求，提升性能。

第一步：实现人物的显示

首先，要显示玩家角色。需要创建画布并获得上下文，加载缓存图像，调用StartDemo，然后是清空画布区域，使用drawImage来绘制图片。

// 页面初始化函数
function init(){
	
	// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
	canvas=document.createElement("canvas");
	canvas.width=600;
	canvas.height=400;
	document.body.appendChild(canvas);
		
	// 取得2d绘图上下文 
	context= canvas.getContext("2d");
	
	//加载图片,并存入全局变量 ImgCache, 
	// 加载完成后,调用startDemo
	ImgCache=loadImage( [ 
			{ 	id : "player",
				url : "../res/player.png"
			},
			{ 	id : "bg",
				url : "../res/bg.png"
			}
		], 
		startDemo );

}

第二步：游戏的帧数 FPS=30

每秒所运行的帧数。游戏主循环每33.3（1000/30）ms轮询一次

FPS决定游戏画面更新的频率，决定主循环的快慢。

主循环中的间隔时间sleep与FPS有一个换算公式：

间隔时间 = 就近最大取整（1000 / FPS），不同于四舍五入，也叫向下取整

	// 一些简单的初始化, 
	var FPS=30;
	var sleep=Math.floor(1000/FPS);
	
	//初始坐标
	var x=0, y=284;

第三步：使用帧动画

一些基本要理解的知识：

动画是通过绘制一组帧图片来实现的。具体实现时有这些关键问题：

一组帧应该以怎样的顺序来绘制？
如何控制每一帧绘制的时间？
在画布的什么位置绘制帧？
如何控制绘制的帧的内容、图片大小？

策略：帧动画控制类Animation

// Animation类.动画类
// cfg为Object类型的参数集, 其属性会覆盖Animation原型中定义的同名属性.
function Animation(cfg){
	for (var attr in cfg ){
		this[attr]=cfg[attr];
	}
}

Animation.prototype={
	constructor :Animation ,

	// Animation 包含的Frame, 类型:数组
	frames : null,
	// 包含的Frame数目
	frameCount : -1 ,
	// 所使用的图片id(在ImgCache中存放的Key), 字符串类型. 
	img : null,
	// 当前播放的 frame
	currentFrame : null ,
	// 当前播放的帧
	currentFrameIndex : -1 ,
	// 已经播放的时间
	currentFramePlayed : -1 ,
	
	// 初始化Animation
	init : function(){
		// 根据id取得Image对象
		this.img = ImgCache[this.img]||this.img;
		
		this.frames=this.frames||[];
		this.frameCount = this.frames.length;
		
		// 缺省从第0帧播放
		this.currentFrameIndex=0;
		this.currentFrame=this.frames[this.currentFrameIndex];
		this.currentFramePlayed=0;
	},
	
	
	// 更新Animation状态. deltaTime表示时间的变化量.
	update : function(deltaTime){
		//判断当前Frame是否已经播放完成, 
		if (this.currentFramePlayed>=this.currentFrame.duration){
			//播放下一帧
			
			if (this.currentFrameIndex >= this.frameCount-1){
				//当前是最后一帧,则播放第0帧
				this.currentFrameIndex=0;
			}else{
				//播放下一帧
				this.currentFrameIndex++;
			}
			//设置当前帧信息
			this.currentFrame=this.frames[ this.currentFrameIndex ];
			this.currentFramePlayed=0;
		
		}else{
			//增加当前帧的已播放时间.
			this.currentFramePlayed += deltaTime;
		}
	},
	
	//绘制Animation
	draw : function(gc,x,y){
		var f=this.currentFrame;
		gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h );
	}
};

Animation负责读取、配置、更新帧数据，控制帧数据的播放

读取：

创建一个Animation对象：

	// 创建一个Animation对象
	var animation = new Animation({
		img : "player" ,
		//该动画由3帧构成,对应图片中的第一行.
		frames : [
			{x : 0, y : 0, w : 50, h : 60, duration : 100},
			{x : 50, y : 0, w : 50, h : 60, duration : 100},
			{x : 100, y : 0, w : 50, h : 60, duration : 100}
		]
	} );

function Animation(cfg){
	for (var attr in cfg ){
		this[attr]=cfg[attr];
	}
}

// Animation类.动画类 // cfg为Object类型的参数集, 其属性会覆盖Animation原型中定义的同名属性.

配置：

初始化Animation对象：

	// 初始化Animation
	animation.init();

初始化函数代码：

	// 初始化Animation
	init : function(){
		// 根据id取得Image对象
		this.img = ImgCache[this.img]||this.img;
		
		this.frames=this.frames||[];
		this.frameCount = this.frames.length;
		
		// 缺省从第0帧播放
		this.currentFrameIndex=0;
		this.currentFrame=this.frames[this.currentFrameIndex];
		this.currentFramePlayed=0;
	},

更新帧数据：

		// 更新Animation状态
		animation.update(deltaTime);

更新函数代码：

	// 更新Animation状态. deltaTime表示时间的变化量.
	update : function(deltaTime){
		//判断当前Frame是否已经播放完成, 
		if (this.currentFramePlayed>=this.currentFrame.duration){
			//播放下一帧
			
			if (this.currentFrameIndex >= this.frameCount-1){
				//当前是最后一帧,则播放第0帧
				this.currentFrameIndex=0;
			}else{
				//播放下一帧
				this.currentFrameIndex++;
			}
			//设置当前帧信息
			this.currentFrame=this.frames[ this.currentFrameIndex ];
			this.currentFramePlayed=0;
		
		}else{
			//增加当前帧的已播放时间.
			this.currentFramePlayed += deltaTime;
		}
	},

播放：

就是绘制帧动画：

		//绘制Animation
		animation.draw(context, x,y);

	//绘制Animation
	draw : function(gc,x,y){
		var f=this.currentFrame;
		gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h );
	}

再来看帧动画播放需要掌握的那些知识点：

1.一组帧应该以怎样的顺序进行播放

		// 缺省从第0帧播放
		this.currentFrameIndex=0;

2.如何控制每一帧的绘制时间：

当当前帧播放没有完成的时候：

			//增加当前帧的已播放时间.
			this.currentFramePlayed += deltaTime;

当当前帧播放完成的时候：

this.currentFramePlayed=0;

3.在画布的什么位置开始绘制：

	//绘制Animation
	draw : function(gc,x,y){
		var f=this.currentFrame;
		gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h );
	}

4. 如何控制绘制的帧的内容、图片大小：

帧内容：首先是一个数组 frames[]，其次是当前播放的帧 currentFrame : null ,

初始化时控制操作：

this.currentFrame=this.frames[this.currentFrameIndex];

currentFrameIndex : -1 ,可以看作是一个索引

更新的时候：

			//设置当前帧信息
			this.currentFrame=this.frames[ this.currentFrameIndex ];

最后提供源代码：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />


<title>My first Game</title>

<style type="text/css">
body {
	border:none 0px;
	margin:0px;
	padding:10px;
	font-size : 16px;
	background-color : #f3f3f3;
}

canvas {
	border : 1px solid blue; 
}
</style>


<script type="text/javascript">

// 加载图片
function loadImage(srcList,callback){
	var imgs={};
	var totalCount=srcList.length;
	var loadedCount=0;
	for (var i=0;i<totalCount;i++){
		var img=srcList[i];
		var image=imgs[img.id]=new Image();		
		image.src=img.url;
		image.οnlοad=function(event){
			loadedCount++;
		}		
	}
	if (typeof callback=="function"){
		var Me=this;
		function check(){
			if (loadedCount>=totalCount){
				callback.apply(Me,arguments);
			}else{		
				setTimeout(check,100);
			}	
		}
		check();
	}
	return imgs;
}

//定义全局对象
var ImgCache=null;
var canvas=null;
var context=null;

// 页面初始化函数
function init(){
	
	// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
	canvas=document.createElement("canvas");
	canvas.width=600;
	canvas.height=400;
	document.body.appendChild(canvas);
		
	// 取得2d绘图上下文 
	context= canvas.getContext("2d");
	
	//加载图片,并存入全局变量 ImgCache, 
	// 加载完成后,调用startDemo
	ImgCache=loadImage( [ 
			{ 	id : "player",
				url : "../res/player.png"
			},
			{ 	id : "bg",
				url : "../res/bg.png"
			}
		], 
		startDemo );

}


// Animation类.动画类
// cfg为Object类型的参数集, 其属性会覆盖Animation原型中定义的同名属性.
function Animation(cfg){
	for (var attr in cfg ){
		this[attr]=cfg[attr];
	}
}

Animation.prototype={
	constructor :Animation ,

	// Animation 包含的Frame, 类型:数组
	frames : null,
	// 包含的Frame数目
	frameCount : -1 ,
	// 所使用的图片id(在ImgCache中存放的Key), 字符串类型. 
	img : null,
	// 当前播放的 frame
	currentFrame : null ,
	// 当前播放的帧
	currentFrameIndex : -1 ,
	// 已经播放的时间
	currentFramePlayed : -1 ,
	
	// 初始化Animation
	init : function(){
		// 根据id取得Image对象
		this.img = ImgCache[this.img]||this.img;
		
		this.frames=this.frames||[];
		this.frameCount = this.frames.length;
		
		// 缺省从第0帧播放
		this.currentFrameIndex=0;
		this.currentFrame=this.frames[this.currentFrameIndex];
		this.currentFramePlayed=0;
	},
	
	
	// 更新Animation状态. deltaTime表示时间的变化量.
	update : function(deltaTime){
		//判断当前Frame是否已经播放完成, 
		if (this.currentFramePlayed>=this.currentFrame.duration){
			//播放下一帧
			
			if (this.currentFrameIndex >= this.frameCount-1){
				//当前是最后一帧,则播放第0帧
				this.currentFrameIndex=0;
			}else{
				//播放下一帧
				this.currentFrameIndex++;
			}
			//设置当前帧信息
			this.currentFrame=this.frames[ this.currentFrameIndex ];
			this.currentFramePlayed=0;
		
		}else{
			//增加当前帧的已播放时间.
			this.currentFramePlayed += deltaTime;
		}
	},
	
	//绘制Animation
	draw : function(gc,x,y){
		var f=this.currentFrame;
		gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h );
	}
};



// Demo的启动函数
function startDemo(){
	
	// 一些简单的初始化, 
	var FPS=30;
	var sleep=Math.floor(1000/FPS);
	
	//初始坐标
	var x=0, y=284;
	
	// 创建一个Animation对象
	var animation = new Animation({
		img : "player" ,
		//该动画由3帧构成,对应图片中的第一行.
		frames : [
			{x : 0, y : 0, w : 50, h : 60, duration : 100},
			{x : 50, y : 0, w : 50, h : 60, duration : 100},
			{x : 100, y : 0, w : 50, h : 60, duration : 100}
		]
	} );
	// 初始化Animation
	animation.init();
	
	//主循环
	var mainLoop=setInterval(function(){

		//距上一次执行相隔的时间.(时间变化量), 目前可近似看作sleep.
		var deltaTime=sleep;
		
		// 更新Animation状态
		animation.update(deltaTime);
	
		//使用背景覆盖的方式 清空之前绘制的图片
		context.drawImage(ImgCache["bg"],0,0);
				
		//绘制Animation
		animation.draw(context, x,y);
		
	},sleep);

}





	
</script>

</head> 
<body οnlοad="init()"> 


<div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div>
</body>
</html>