html5 游戏制作教程,html5一步步实现超级玛丽游戏制作(新手教程源码)

【实例简介】

【实例截图】

【核心代码】

My first Game

body {

border:none 0px;

margin:0px;

padding:10px;

font-size : 16px;

background-color : #f3f3f3;

}

canvas {

border : 1px solid blue;

}

// 页面初始化函数

function init(){

//加载图片,并存入全局变量 ImgCache,

// 加载完成后,调用startDemo

ImgCache=loadImage( [

{ id : "player",

url : "../res/player.png"

},

{ id : "enemy",

url : "../res/enemy.png"

},

{ id : "bg",

url : "../res/bg.png"

}

],

startDemo );

}

//定义游戏所用 按键的keyCode的常量

var Key={

A : 65,

W : 87,

D : 68

}

var game=new Game({

FPS : 30,

width : 600,

height : 400,

sprites : [ ]

});

// Demo的启动函数

function startDemo(){

//加入马里奥

game.sprites.push(createPlayer());

//加入五个敌人

for(var i=0;i<5;i++){

game.sprites.push(createEnemy());

}

game.init();

game.start();

}

Time :

www.Linuxidc.com