超级玛丽HTML5源代码学习-----（三）

wust小吴

发布于 2022-03-03 20:41:47

1.2K0

发布于 2022-03-03 20:41:47

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

源代码：

<!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 整个空间页面  */
body {
	/** 边框：无 0像素 */
	border:none 0px;
	/** 边外补白：向外填充0像素 */
	margin:0px;
	/** 向内填充：向内填充0像素 距上级边框0像素 */
	padding:10px;
	/** 设置字体大小 16px = 1em */
	font-size : 16px;
	/** 背景颜色：#f3f3f3 */
	background-color : #f3f3f3;
}

/** 画布 canvas */
canvas {
	/** 边框：1像素 实线 蓝色 */
	border : 1px solid blue; 
}
</style>


<script type="text/javascript">

//一个简单的图片加载函数,  callback为当所有图片加载完毕后的回调函数.
function loadImage(srcList,callback){
	// 数组变量，存放img
	var imgs={};
	// 变量存放srcList的长度
	var totalCount=srcList.length;
	// 变量 计算加载图片的数量
	var loadedCount=0;
	// 加载srcList中的图片
	for (var i=0;i<totalCount;i++){
		// 获取图片
		var img=srcList[i];
		// 利用img的id 来创建一个新的Image对象
		var image=imgs[img.id]=new Image();	
		// 复制img的URL到创建的image对象的URL中	
		image.src=img.url;
		// 启动image的onload事件
		image.οnlοad=function(event){
			// 如果启动，加载数量加1
			loadedCount++;
		}		
	}
	if (typeof callback=="function"){
		// 如果回调函数调用自己，那么检查下加载数量是否大于srcList的长度
		var Me=this;
		function check(){
			if (loadedCount>=totalCount){
				callback.apply(Me,arguments);
			}else{		
				setTimeout(check,100);
			}	
		}
		check();
	}
	return imgs;
}
// 图像缓存变量
var ImgCache=null;
// 画布 canvas
var canvas=null;
// 画布上下文，利用它来绘制图像
var context=null;

function init(){
	
	// 创建canvas，并初始化 （我们也可以直接以标签形式写在页面中，然后通过id等方式取得canvas）
	canvas=document.createElement("canvas");
	//设置canvas对象的高度和宽度
	canvas.width=600;
	canvas.height=400;
	//将canvas加入到body的末尾
	document.body.appendChild(canvas);
		
	// 取得2d绘图上下文 
	context= canvas.getContext("2d");
	
	//将加载的所有图片存入ImgCache, 图片加载完成后, 调用startDemo
	// loadImage（srcList，callback）
	// loadImage（[{},{}]，startDemo）
	// 请仔细看{}里面的组成，就可以知道srcList的内容有哪些。（此处只含有id和URL）
	// ../表示根目录
	// 下面的程序表示现将图像player.png和图像bg.png存放到缓存ImgCache中
	ImgCache=loadImage( [ 
			{ 	id : "player",
				url : "../res/player.png"
			},
			{ 	id : "bg",
				url : "../res/bg.png"
			}
		], 
		startDemo );

}

// Demo的启动函数
function startDemo(){
	
	// 一些简单的初始化, 
	// feet per second 英尺/秒.下面设置为每秒30英尺
	var FPS=30;
	// Math.floor(i) 是得到一个数的整数部分  （最接近该整数的最大整数，不是采用四舍五入的方式）
	// 比如5.6和5.1，结果就是5
	// sleep的值为33
	var sleep=Math.floor(1000/FPS);
	// 从缓存中取出图像player.png
	var img=ImgCache["player"];
	
	//初始坐标
	var x=0, y=284;	
	//移动速度 . speedY<0,向上移动.
	var speedX = 65/1000 , speedY=-45/1000 ;
	//x/y坐标的最大值和最小值, 可用来限定移动范围.
	var minX=0, maxX=500, minY=0, maxY=284;
	
	//主循环<span style="font-family: Arial, Helvetica, sans-serif;">// 设置时间间隔为sleep=33毫秒调用function（）{}代码串，而且没有停止，直至你关闭网页</span>

	var mainLoop=setInterval(function(){
		//距上一次执行相隔的时间.(时间变化量), 目前可近似看作sleep.
		var deltaTime=sleep;
		
		//每次循环,改变一下绘制的坐标. 
		x=x+speedX*deltaTime; //向右移动
		y=y+speedY*deltaTime; //向上移动, 坐标y减小,这点和数学中的坐标系不同.
		
		//限定移动范围
		x=Math.max(minX,Math.min(x,maxX));
		y=Math.max(minY,Math.min(y,maxY));

		//使用清空画布的方式 清空之前绘制的图片
		//context.clearRect(0,0,canvas.width,canvas.height);
		
		//使用背景覆盖的方式 清空之前绘制的图片
		context.drawImage(ImgCache["bg"],0,0);
		
		//在新位置上绘制图片
		var sx=0, sy=60, sw=50, sh=60;
		context.drawImage(img, sx, sy, sw, sh, Math.floor(x), Math.floor(y), sw, sh );	
		
	},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>

深度学习setInterval()时间间隔函数：

定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。语法 setInterval(code,millisec[,"lang"]) 参数描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。返回值一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button οnclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>

深度学习setTimeout（）函数：

实例下面的例子每秒调用一次 timedCount() 函数。您也可以使用一个按钮来终止这个定时消息：

<html> 
<head> 
<script type="text/javascript"> 
	var c=0 
	var t 
	function timedCount() 
	{ 
		//设置id=txt的inputa按钮初始值为0
		document.getElementById('txt').value=c 
		c=c+1 
		//每一秒执行一次timeCount()函数
		//t是函数返回的id值
		//setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 
		t=setTimeout("timedCount()",1000) 
	} 
	function stopCount() 
	{ 
		//结束setTimeout()函数
		clearTimeout(t) 
	} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="Start count!" onClick="timedCount()"> 
<input type="text" id="txt"> 
<input type="button" value="Stop count!" onClick="stopCount()"> 
</form> 
</body> 
</html>

对下面的代码再一次学习下：

	if (typeof callback=="function"){
		// 判断callback是否是函数
		var Me=this;
		function check(){
			if (loadedCount>=totalCount){
				// 是将函数的属性与方法进行拷贝，主要是实现类的继承
				callback.apply(Me,arguments);
			}else{		
				setTimeout(check,100);
			}	
		}
		check();
	}

可以参考上一篇文章

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法