首先我们需要知道
每一个游戏都是由:
A:获得用户输入
B:更新游戏状态
C:处理AI
D:播放音乐和音效
E:画面显示
这些行为组成。游戏主循环就是用来处理这个行为序列,在javascript中可以用setInterval方法来轮询。在超级玛丽中是这个循环
//主循环 var mainLoop=setInterval(function(){ //距上一次执行相隔的时间.(时间变化量), 目前可近似看作sleep. var deltaTime=sleep; // 更新Animation状态 animation.update(deltaTime); //使用背景覆盖的方式 清空之前绘制的图片 context.drawImage(ImgCache["bg"],0,0); //绘制Animation animation.draw(context, x,y); },sleep);
实现人物移动的方法就是:将精灵图片的不同动作图片,在画布上同一位置交替显示,就形成了人物原地移动的动画。在画布的不同的位置显示动作图片,就形成了人物在画布上来回移动的动画。
首先实现炸弹人在画布上原地移动,显示移动动画;
了解精灵图片含义:所谓精灵图片就是包含多张小图片的一张大图片,使用它可以减少http请求,提升性能。
第一步:实现人物的显示
首先,要显示玩家角色。需要创建画布并获得上下文,加载缓存图像,调用StartDemo,然后是清空画布区域,使用drawImage来绘制图片。
// 页面初始化函数 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 ); }
每秒所运行的帧数。游戏主循环每33.3(1000/30)ms轮询一次
FPS决定游戏画面更新的频率,决定主循环的快慢。
主循环中的间隔时间sleep与FPS有一个换算公式:
间隔时间 = 就近最大取整(1000 / FPS),不同于四舍五入,也叫向下取整
// 一些简单的初始化, var FPS=30; var sleep=Math.floor(1000/FPS); //初始坐标 var x=0, y=284;
一些基本要理解的知识:
动画是通过绘制一组帧图片来实现的。具体实现时有这些关键问题:
// Animation类.动画类 // cfg为Object类型的参数集, 其属性会覆盖Animation原型中定义的同名属性. function Animation(cfg){ for (var attr in cfg ){ this[attr]=cfg[attr]; } } Animation.prototype={ constructor :Animation , // Animation 包含的Frame, 类型:数组 frames : null, // 包含的Frame数目 frameCount : -1 , // 所使用的图片id(在ImgCache中存放的Key), 字符串类型. img : null, // 当前播放的 frame currentFrame : null , // 当前播放的帧 currentFrameIndex : -1 , // 已经播放的时间 currentFramePlayed : -1 , // 初始化Animation init : function(){ // 根据id取得Image对象 this.img = ImgCache[this.img]||this.img; this.frames=this.frames||[]; this.frameCount = this.frames.length; // 缺省从第0帧播放 this.currentFrameIndex=0; this.currentFrame=this.frames[this.currentFrameIndex]; this.currentFramePlayed=0; }, // 更新Animation状态. deltaTime表示时间的变化量. update : function(deltaTime){ //判断当前Frame是否已经播放完成, if (this.currentFramePlayed>=this.currentFrame.duration){ //播放下一帧 if (this.currentFrameIndex >= this.frameCount-1){ //当前是最后一帧,则播放第0帧 this.currentFrameIndex=0; }else{ //播放下一帧 this.currentFrameIndex++; } //设置当前帧信息 this.currentFrame=this.frames[ this.currentFrameIndex ]; this.currentFramePlayed=0; }else{ //增加当前帧的已播放时间. this.currentFramePlayed += deltaTime; } }, //绘制Animation draw : function(gc,x,y){ var f=this.currentFrame; gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h ); } };
Animation负责读取、配置、更新帧数据,控制帧数据的播放
读取:
创建一个Animation对象:
// 创建一个Animation对象 var animation = new Animation({ img : "player" , //该动画由3帧构成,对应图片中的第一行. 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} ] } );
function Animation(cfg){ for (var attr in cfg ){ this[attr]=cfg[attr]; } }
配置:
初始化Animation对象:
// 初始化Animation animation.init();
// 初始化Animation init : function(){ // 根据id取得Image对象 this.img = ImgCache[this.img]||this.img; this.frames=this.frames||[]; this.frameCount = this.frames.length; // 缺省从第0帧播放 this.currentFrameIndex=0; this.currentFrame=this.frames[this.currentFrameIndex]; this.currentFramePlayed=0; },
// 更新Animation状态 animation.update(deltaTime);
// 更新Animation状态. deltaTime表示时间的变化量. update : function(deltaTime){ //判断当前Frame是否已经播放完成, if (this.currentFramePlayed>=this.currentFrame.duration){ //播放下一帧 if (this.currentFrameIndex >= this.frameCount-1){ //当前是最后一帧,则播放第0帧 this.currentFrameIndex=0; }else{ //播放下一帧 this.currentFrameIndex++; } //设置当前帧信息 this.currentFrame=this.frames[ this.currentFrameIndex ]; this.currentFramePlayed=0; }else{ //增加当前帧的已播放时间. this.currentFramePlayed += deltaTime; } },
就是绘制帧动画:
//绘制Animation animation.draw(context, x,y);
//绘制Animation draw : function(gc,x,y){ var f=this.currentFrame; gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h ); }
1.一组帧应该以怎样的顺序进行播放
// 缺省从第0帧播放 this.currentFrameIndex=0;
当 当前帧 播放没有完成的时候:
//增加当前帧的已播放时间. this.currentFramePlayed += deltaTime;当 当前帧 播放完成的时候:
this.currentFramePlayed=0;
//绘制Animation draw : function(gc,x,y){ var f=this.currentFrame; gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h ); }
帧内容:首先是一个数组 frames[],其次是当前播放的帧 currentFrame : null ,
初始化时控制操作:
this.currentFrame=this.frames[this.currentFrameIndex];
更新的时候:
//设置当前帧信息 this.currentFrame=this.frames[ this.currentFrameIndex ];
<!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 { border:none 0px; margin:0px; padding:10px; font-size : 16px; background-color : #f3f3f3; } canvas { border : 1px solid blue; } </style> <script type="text/javascript"> // 加载图片 function loadImage(srcList,callback){ var imgs={}; var totalCount=srcList.length; var loadedCount=0; for (var i=0;i<totalCount;i++){ var img=srcList[i]; var image=imgs[img.id]=new Image(); image.src=img.url; image.onload=function(event){ loadedCount++; } } if (typeof callback=="function"){ var Me=this; function check(){ if (loadedCount>=totalCount){ callback.apply(Me,arguments); }else{ setTimeout(check,100); } } check(); } return imgs; } //定义全局对象 var ImgCache=null; 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 ); } // Animation类.动画类 // cfg为Object类型的参数集, 其属性会覆盖Animation原型中定义的同名属性. function Animation(cfg){ for (var attr in cfg ){ this[attr]=cfg[attr]; } } Animation.prototype={ constructor :Animation , // Animation 包含的Frame, 类型:数组 frames : null, // 包含的Frame数目 frameCount : -1 , // 所使用的图片id(在ImgCache中存放的Key), 字符串类型. img : null, // 当前播放的 frame currentFrame : null , // 当前播放的帧 currentFrameIndex : -1 , // 已经播放的时间 currentFramePlayed : -1 , // 初始化Animation init : function(){ // 根据id取得Image对象 this.img = ImgCache[this.img]||this.img; this.frames=this.frames||[]; this.frameCount = this.frames.length; // 缺省从第0帧播放 this.currentFrameIndex=0; this.currentFrame=this.frames[this.currentFrameIndex]; this.currentFramePlayed=0; }, // 更新Animation状态. deltaTime表示时间的变化量. update : function(deltaTime){ //判断当前Frame是否已经播放完成, if (this.currentFramePlayed>=this.currentFrame.duration){ //播放下一帧 if (this.currentFrameIndex >= this.frameCount-1){ //当前是最后一帧,则播放第0帧 this.currentFrameIndex=0; }else{ //播放下一帧 this.currentFrameIndex++; } //设置当前帧信息 this.currentFrame=this.frames[ this.currentFrameIndex ]; this.currentFramePlayed=0; }else{ //增加当前帧的已播放时间. this.currentFramePlayed += deltaTime; } }, //绘制Animation draw : function(gc,x,y){ var f=this.currentFrame; gc.drawImage(this.img, f.x , f.y, f.w, f.h , x, y, f.w, f.h ); } }; // Demo的启动函数 function startDemo(){ // 一些简单的初始化, var FPS=30; var sleep=Math.floor(1000/FPS); //初始坐标 var x=0, y=284; // 创建一个Animation对象 var animation = new Animation({ img : "player" , //该动画由3帧构成,对应图片中的第一行. 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} ] } ); // 初始化Animation animation.init(); //主循环 var mainLoop=setInterval(function(){ //距上一次执行相隔的时间.(时间变化量), 目前可近似看作sleep. var deltaTime=sleep; // 更新Animation状态 animation.update(deltaTime); //使用背景覆盖的方式 清空之前绘制的图片 context.drawImage(ImgCache["bg"],0,0); //绘制Animation animation.draw(context, x,y); },sleep); } </script> </head> <body onload="init()"> <div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div> </body> </html>