超级玛丽HTML5源代码学习-----（三）
源代码：
<!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.onload=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 onload="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 onclick="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();
}
可以参考 上一篇文章