<!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>
<script type="text/javascript" src="./Base.js"></script>
<script type="text/javascript" src="./Animation.js"></script>
<script type="text/javascript" src="./Sprite.js"></script>
<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">
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 );
}
//定义游戏所用 按键的keyCode的常量
var Key={
A : 65,
W : 87,
D : 68
}
//用来记录按键状态
var KeyState={};
function initEvent(){
//监听整个document的keydown,keyup事件, 为了保证能够监听到, 监听方式使用Capture
document.addEventListener("keydown",function(evt){
//按下某按键, 该键状态为true
KeyState[evt.keyCode]=true;
},true);
document.addEventListener("keyup",function(evt){
//放开下某按键, 该键状态为true
KeyState[evt.keyCode]=false;
},true);
}
initEvent();
var sprite = new Sprite({
//初始坐标
x : 0,
y : 284,
//移动速度.
speedX : 0,
speedY : 0,
acceY : 0,
//x/y坐标的最大值和最小值, 可用来限定移动范围.
minX : 0,
maxX : 500,
minY : 0,
maxY : 284,
defaultAnimId : "stand-right",
//定义两个Animation,向左走 和 向右走.
anims : {
"stand-left" : new Animation({
img : "player" ,
frames : [
{x : 0, y : 60, w : 50, h : 60, duration : 100}
]
} ),
"stand-right" : new Animation({
img : "player" ,
frames : [
{x : 0, y : 0, w : 50, h : 60, duration : 100}
]
} ) ,
"walk-left" : new Animation({
img : "player" ,
frames : [
{x : 0, y : 60, w : 50, h : 60, duration : 100},
{x : 50, y : 60, w : 50, h : 60, duration : 100},
{x : 100, y : 60, w : 50, h : 60, duration : 100}
]
} ),
"walk-right" : new Animation({
img : "player" ,
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}
]
} )
},
handleInput : function(){
// 读取按键状态, 如果A键为按下状态,则向左移动,如果D键为按下状态,则向右移动.
var left= KeyState[Key.A];
var right= KeyState[Key.D];
var up= KeyState[Key.W];
//取得人物当前面对的方向
var dirX=this.currentAnim.id.split("-")[1];
// 判断是否落地
if (this.y==this.maxY){
this.jumping=false;
this.speedY=0;
}
//如果按了上, 且当前不是跳跃中,那么开始跳跃.跳跃和走路使用同一个Animation.
if (up && !this.jumping){
this.jumping=true;
this.speedY=this.jumpSpeed;
this.setAnim("walk-"+dirX);
}
if (left && right || !left && !right){
// 如果左右都没有按或者都按了, 那么水平方向速度为0,不移动.
this.speedX=0;
//如果不是在跳跃中,那么进入站立状态, 站立时面对的方向根据之前的速度来决定.
if (!this.jumping){
this.setAnim("stand-"+dirX);
}
}else if(left && this.speedX!=-this.walkSpeed){
//如果按下了左 且当前不是向左走,则设置为向左走
this.setAnim("walk-left");
this.speedX=-sprite.walkSpeed;
}else if(right && this.speedX!=this.walkSpeed){
//如果按下了右 且当前不是向右走,则设置为向右走
this.setAnim("walk-right");
this.speedX=sprite.walkSpeed;
}
}
});
// Demo的启动函数
function startDemo(){
// 一些简单的初始化,
var FPS=30;
var sleep=Math.floor(1000/FPS);
// 定义走路速度的绝对值, 默认speedX
sprite.walkSpeed=200/1000;
sprite.speedX=0;
//定义跳跃初速度,垂直加速度, 默认speedY
sprite.jumpSpeed=-700/1000;
sprite.acceY=1.0/1000;
sprite.speedY=0;
//默认情况下向右站立.
sprite.defaultAnimId="stand-right";
// 初始化sprite
sprite.init();
//主循环
var mainLoop=setInterval(function(){
//距上一次执行相隔的时间.(时间变化量), 目前可近似看作sleep.
var deltaTime=sleep;
// 更新sprite状态
sprite.update(deltaTime);
//使用背景覆盖的方式 清空之前绘制的图片
context.drawImage(ImgCache["bg"],0,0);
//绘制sprite
sprite.draw(context);
//处理输入,当前输入,影响下一次迭代.
sprite.handleInput();
},sleep);
}
</script>
</head>
<body onload="init()">
<div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div>
</body>
</html>
HTML5超级玛丽小游戏源代码.zip （35个子文件） 
HTML5超级玛丽小游戏源代码 res 
bg.png 51KB enemy.png 5KB player.png 10KB step7 
Base.js 828B Game.js 3KB enemy.js 973B Animation.js 2KB Sprite.js 2KB player.js 3KB
step7-1.html 2KB step2 step2-1.html 3KB step8 Base.js 828B Game.js 3KB enemy.js 977B Animation.js 2KB Sprite.js 2KB player.js 3KB step8-1.html 2KB step5 Base.js 631B step5-1.html 6KB Animation.js 2KB Sprite.js 2KB step3 step3-1.html 5KB step3-2.html 5KB step1 step1-2.html 2KB step1-1.html 1KB step4 Base.js 585B Animation.js 2KB step4-1.html 3KB Sprite.js 2KB step6 Base.js 828B Game.js 2KB Animation.js 2KB Sprite.js 2KB step6-1.html 5KB资源评论
