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

首先放置源代码：My first Game/** body 整个空间页面*/body {/** 边框：无 0像素 */border:none 0px;/** 边外补白：向外填充0像素 */margin:0px;/** 向内填充：向内填充0像素距上级边框0像素 */padding:10px;/** 设置字体大小 16px = 1em *

wust小吴

2380人浏览 · 2014-07-27 12:37:56

wust小吴 · 2014-07-27 12:37:56 发布

首先放置源代码：

<!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);//check继承callback的属性和方法
			}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 );

}

function startDemo(){
	// Demo展示电脑图形与音乐的程式
	// 绘制背景
	// 表示从左上角（0，0）位置开始绘制
	var dx=0, dy=0 ;
	// 首先加载背景图
	context.drawImage(ImgCache["bg"],dx,dy);	

	//绘制站在地上的player, 坐标为200,284
	// 绘制玩家角色图像
	var sx=0, sy=60, sw=50, sh=60;
	var dx=400, dy=284, dw=50, dh=60;
	// 选取图像的一部分矩形区域进行绘制
	// sx：图像上的x坐标  表示从player图像上截取的x坐标
       // sy：图像上的y坐标  表示从player图像上截取的y坐标
       // sw：矩形区域的宽度
       // sh：矩形区域的高度
       // dx：画在canvas的x坐标
       // dy：画在canvas的y坐标
 <span style="white-space:pre">	</span>// dw：画出来的宽度
        // dh：画出来的高度
        // ImgCache["player"]表示从图像缓存中取出player图像
	context.drawImage(ImgCache["player"], sx, sy, sw, sh, dx, dy, dw, dh );	

}


	
</script>

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


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

运行截图：