超级玛丽HTML5源代码学习------(四)
超级玛丽HTML5源代码学习------(四)
wust小吴
发布于 2022-03-03 12:42:13
发布于 2022-03-03 12:42:13
代码可运行
运行总次数：0
代码可运行
首先我们需要知道
每一个游戏都是由：
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);如何去做到让游戏角色进行移动呢？今天这里只学习让玩家在原地进行移动，也就是step3_1
实现人物移动的方法就是：将精灵图片的不同动作图片，在画布上同一位置交替显示，就形成了人物原地移动的动画。在画布的不同的位置显示动作图片，就形成了人物在画布上来回移动的动画。
首先实现炸弹人在画布上原地移动，显示移动动画；
了解精灵图片含义：所谓精灵图片就是包含多张小图片的一张大图片，使用它可以减少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 );
}第二步：游戏的帧数 FPS=30
每秒所运行的帧数。游戏主循环每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
// 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类.动画类 // cfg为Object类型的参数集, 其属性会覆盖Animation原型中定义的同名属性.
配置：
初始化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;2.如何控制每一帧的绘制时间：
当 当前帧 播放没有完成的时候：
//增加当前帧的已播放时间.
this.currentFramePlayed += deltaTime;当 当前帧 播放完成的时候：
this.currentFramePlayed=0;3.在画布的什么位置开始绘制：
//绘制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 );
}4. 如何控制绘制的帧的内容、图片大小：
帧内容：首先是一个数组 frames[]，其次是当前播放的帧 currentFrame : null ,
初始化时控制操作：
this.currentFrame=this.frames[this.currentFrameIndex];currentFrameIndex : -1 ,可以看作是一个索引
更新的时候：
//设置当前帧信息
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.οnlοad=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 οnlοad="init()">
<div align="center"><a href="http://www.linuxidc.com" target="_blank">www.Linuxidc.com</a></div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
从Chrome小恐龙游戏学习2D游戏制作
更多 >
腾讯云开发者
