首页 > 作文

Canvas在超级玛丽游戏中的应用详解

更新时间:2023-04-07 18:04:31 阅读: 评论:0

前言

在上一篇文章中, 我们基于dom体系构建了超级玛丽, 那么在本篇文章中我们使用canvas对整个架构进行升级, 从而提升游戏的视觉体验。 有需要的同学可以查看 源码 学习.

考虑到有些同学对canvas不是很熟悉。本文将会对canvas的一些基础做一些大致的讲解。

canvas基础知识

画布元素

canvas标签可以让我们能够使用javascript在网页上绘制各种样式的图形。要访问实际的绘图接口, 首先我们需要创建一个上下文(context), 它是一个对象, 提供了绘图的接口。目前有两种广受绘图的样式: 用于二维图形的”2d“以及通过 opengl 接口的三维图形的 webgl

比如, 我们可以使用 <canvas /> dom元素上的 getcontext 方法创建上下文。

 <body>   <canvas width="500" height="500" /> </body> <script>   let canvas = document.querylector('canvas');   let context = canvas.getcontext('2d');   context.fillstyle = "yellow";   context.fillrect(10, 10, 400, 400); </script>

我们绘制了一个宽度和高度都为400像素的黄色正方形, 并且其左上角顶点处的坐标为(10, 10)。canvas的坐标系(0, 0)在其左上角.

边框的绘制

在画布的接口中, fillrect 方法用于填充矩形。 fillstyle 用于控制填充形状的方法。比如

单色

context.fillstyle = "yellow";

渐变色

let canvas = document.querylector('canvas');let context = canvas.getcontext('2d');let grd = context.createlineargradient(0,0,170,0);grd.addcolorstop(0,"black");grd.addcolorstop(1,"red");context.fillstyle = grd;context.fillrect(10, 10, 400, 400);

pattern图案对象

let canvas = document.querylector('canvas');let context = canvas.getcontext('2d');let img = document.createelement('img');img.src = "/d/file/titlepic/error.html";img.onload = () => {  let pattern = context.createpattern(img, 'no-repeat');  context.fillstyle = pattern;  context.fillrect(10,10,400,400)}

strokestyle属性与fillstyle属性类似, 但是 strokestyle 作用与描边线的颜色。线条的宽度由 linewidth 属性决定。

比如我想绘制一个边框宽度为6的黄色正方形。

let canvas = document.querylector('canvas');let context = canvas.getcontext('2d');context.strokestyle = "yellow";context.linewidth = 6;context.strokerect(10,10, 400, 400);

路径

路径是很多线条的组合。如果想要绘制各种各样的形状,我们会频繁用到 movetolineto 两个函数。

  let canvas = document.querylector('canvas');  let context = canvas.getcontext('2d');  context.beginpath();  for (let index = 0; index < 400; index+=10) {    context.moveto(10, index);    context.moveto(index, 0);    context.lineto(390, index);  }  context.stroke();

moveto 表示我们当前画笔起点的位置, lineto 表示我们画笔从起点到终点的连线。以上代码执行后就是如下所示:

当然我们可以为线条绘制的图形进行填充。

  let canvas = document.querylector('canvas');  let context = canvas.getcontext('2d');  context.beginpath();  context.moveto(50, 10);  context.lineto(10, 70);  context.lineto(90, 70);  context.fill();  context.clopath();

绘制图片

在计算机图形学中, 通常需要对矢量图形和位图图形进行区分。 矢量图形是指: 通过给出形状的逻辑来描述指定的图片。而位图图形是指使用像素数据, 而不指定实际形状。

canvas中的 drawimage 方法允许我们将像素数据绘制到画布上。像素的数据可以来自于元素或者另外一个画布。

drawimage支持传递9个参数, 第2到5个参数表明源图像中被复制的(x, y, 高度, 宽度), 第6到9个参数给出被复制的图像在canvas画布上的位置以及宽高。

下图是玛丽多个姿势的汇总图, 我们使用 drawimage 先让他能够正常跑起来。

let canvas = document.querylector('canvas');let ctx = canvas.getcontext('2d');let img = document.createelement('img');img.src = 'make翻译./player_big.png'let spritew = 47, spriteh = 58;img.onload = () => {  let cycle = 0;  tinterval(() => {    ctx.clearrect(0, 0, spritew, spriteh);    ctx.drawimage(img,     cycle*spritew, 0, spritew, spriteh,     0, 0, spritew, spriteh,    );    cycle = (cycle + 1) % 10;  }, 120);}

我们需要大致截取玛丽的大小, 通过 cycle 锁定玛丽在动画中的位置。在合成中, 我们只需要让前面8个动作循环播放即可实现玛丽的一个奔跑动作了。

控制转换

现在我们已经可以让玛丽朝着右边跑了, 但是在实际的游戏中 玛丽是可以左右跑的。这里的话 有两个方案: 1. 我们再绘制一组朝着左边跑的组合图 2.控制画布反过来绘制图片。第一种方案比较简单, 因此我们就选择第二种比较复杂一点的方案。

canvas中可以调用scale方法按照比例尺调整然后绘制。此方法有两个参数, 第一个参数用于设置水平方向比例尺, 另外一个设置垂直方向的比例尺。

let canvas = document.querylector('canvas');let ctx = canvas.getcontext('2d');ctx.scale(3, .5);ctx.beginpath();ctx.arc(50, 50, 40, 0, 7);ctx.linewidth = 3;ctx.stroke();

上面是对 scale 的简单应用。我们调用了 scale 使得圆的水平方向被拉伸了3倍, 垂直方向被缩小了0.5倍。

如果scale中的参数为负数-1时, 在x位置为100的位置绘制的形状最终会被绘制到-100的位置。因此为了转化图片, 我们不能仅仅在drawimage的之前调用 ctx.scale(-1, 1) , 因为在当前画布中是看不到转化后的图片的。这里有两种方案: 1. 调用 drawimage 的时候设置x为-50的时候来绘制图形 2.通过调整坐标轴, 这种做法的好处在于我们编写的绘图不需要关心比例尺的变化。

我们采用 rotate 来渲染绘制的图形, 并且通过 translate 方法移动他们。

  function flip(context, around) {    context.translate(around, 0);    context.scale(-1, 1);    context.translate(-around, 0);  }

我们的思路大概是这样子:

如果我们在正x处绘制三角形, 默认情况下它会位于1位置。调用flip函数后首先进行右边平移, 得到三角形2. 然后通过调用 scale 进行翻转得到三角形3。最后再次通过调用 translate 方法, 对三角形3进行平移得到三角形4, 也就是最后我们想要的图案。

  let canvas = document.querylector('canvas');  let ctx = canvas.getcontext('2d');  let img = document.createelement('img');  img.src = './player_big.png'  let spritew = 47, spriteh = 58;  img.onload = () => {      ctx.clearrect(100, 0, spritew, spriteh);      flip(ctx, 100 + spritew / 2);      ctx.drawimage(img,      0, 0, spritew, spriteh,      100, 0, spritew, spriteh,      );  }

看, 他已经被我们转过来了!

升级超级玛丽游戏

在上一篇文章中, 我们所有的元素都是直接通过dom来显示的, 那么在我们学完canvas之后, 我们可以使用drawimage来绘制元素。

我们定义canvasdisplay替换掉之前的domdisplay, 除此之外, 我们新增了跟踪自己视图窗口, 他可以告诉我们当前正在那部分的关卡, 此外我还新增了 flipplayer 属性, 这样即使玛丽不动, 它仍然面对着它最后移动的方向。

var canvasdisplay = class canvasdisplay {  constructor(parent, level) {    this.canvas = document.createelement("canvas");    this.canvas.width = math.min(600, level.width * scale);    this.canvas.height = math.min(450, level.height * scale);    parent.appendchild(this.canvas);    this.cx = this.canvas.getcontext("2d");    this.flipplayer = fal;    this.viewport = {      left: 0,      top: 0,      width: this.canvas.width / scale,      height: this.canvas.height / scale    };  }  clear() {    this.canvas.remove();  }}

syncstate方法首先计算新视图窗口, 然后在适当的位置绘制。

canvasdisplay.prototype.syncstate = function(state) {  this.updateviewport(state);  this.cleardisplay(state.status);  this.drawbackground(state.level);  this.drawactors(state.actors);};
domdisplay.prototype.syncstate = function(state) {  if (this.actorlayer) this.actorlayer.remove();  this.actorlayer = drawactors(state.actors);  this.dom.appendchild(this.actorlayer);  this.dom.classname = `game ${state.status}`;  this.scrollplayerintoview(state);};

在之前的更新相反, 我们现在必须在每次更新的时候, 重新绘制背景。因为画布上的形状只是像素, 所以我们在绘制完后没有好的方法来移动或者删除他们。因此更新画布的唯一方法是清除并且重绘。

updateviewport 方法跟 scrollplayerintoview 方法一样。它会检查玩家是否太靠近视图边缘。

canvasdisplay.p2019七夕节是哪天rototype.updateviewport = function(state) {  let view = this.viewport, margin = view.width / 3;  let player = state.player;  let center = player.pos.plus(player.size.times(0.5));  if (center.x < view.left + margin) {    view.left = math.max(center.x - margin, 0);  } el if (center.x > view.left + view.width - margin) {    view.left = math花瓣造句.min(center.x + margin - view.width,                        state.level.width - view.width);  }  if (center.y < view.top + margin) {    view.top = math.max(center.y - margin, 0);  } el if (center.y > view.top + view.height - margin) {    view.top = math.min(center.y + margin - view.height,                        state.level.height - view.height);  }};

当我们成功或者失败的时候, 我们需要清除当前场景, 因为如果失败了, 我们需要重新来, 如果成功了, 我们需要删除当前场景, 重新绘制一个新的场景。

canvasdisplay.prototype.cleardisplay = function(status) {  if (status == "won") {    this.cx.fillstyle = "rgb(68, 191, 255)";  } el if (status == "lost") {    this.cx.fillstyle = "rgb(44, 136, 214)";  } el {    this.cx.fillstyle = "rgb(52, 166, 251)";  }  this.cx.fillrect(0, 0,                  this.canvas.width, this.canvas.height);};

接下来, 我们需要绘制墙壁和熔岩。首先, 我们遍历当前视图中所有的墙壁和砖头。我们使用 sprites.png 绘制所有非空的墙砖(墙、熔岩、金币)。在提供的素材中, 我们墙壁是20px * 20px, 偏移量是0,熔岩也是 20px * 20px, 但是偏移量是20px.

let othersprites = document.createelement("img");othersprites.src = "img/spa的x次方求导rites.png";canvasdisplay.prototype.drawbackground = function(level) {  let {left, top, width, height} = this.viewport;  let xstart = math.floor(left);  let xend = math.ceil(left + width);  let ystart = math.floor(top);  let yend = math.ceil(top + height);  for (let y = ystart; y < yend; y++) {    for (let x = xstart; x < xend; x++) {      let tile = level.rows[y][x];      if (tile == "empty") continue;      let screenx = (x - left) * scale;      let screeny = (y - top) * scale;      let tilex = tile == "lava" ? scale : 0;      this.cx.drawimage(othersprites,                        tilex,         0, 物质指的是什么scale, scale,                        screenx, screeny, scale, scale);    }  }};

最后我们需要绘制玩家的模型。

在前面的8个图像中, 是一个完整的运动过程。第九个画像是玩家静止不动的状态, 第10个画像是玩家在离地时候的状态。因此当玩家移动的时候, 我们需要每60ms切换一帧。当玩家不动的时候绘制第九个画面, 当玩家跳跃的时候绘制第十个画面。

  canvasdisplay.prototype.drawplayer = function(player, x, y,                                              width, height){  width += playerxoverlap * 2;  x -= playerxoverlap;  if (player.speed.x != 0) {    this.flipplayer = player.speed.x < 0;  }  let tile = 8;  if (player.speed.y != 0) {    tile = 9;  } el if (player.speed.x != 0) {    tile = math.floor(date.now() / 60) % 8;  }  this.cx.save();  if (this.flipplayer) {    fliphorizontally(this.cx, x + width / 2);  }  let tilex = tile * width;  this.cx.drawimage(playersprites, tilex, 0, width, height,                                  x,     y, width, height);  this.cx.restore();};

对于不是玩家的模型, 我们根据对应模型的偏移量找到对应的图像。

 canvasdisplay.prototype.drawactors = function(actors) {  for (let actor of actors) {    let width = actor.size.x * scale;    let height = actor.size.y * scale;    let x = (actor.pos.x - this.viewport.left) * scale;    let y = (actor.pos.y - this.viewport.top) * scale;    if (actor.type === "player") {      this.drawplayer(actor, x, y, width, height);    } el {      let tilex = (actor.type === "coin" ? 2 : 1) * scale;      this.cx.drawimage(othersprites,                        tilex, 0, width, height,                        x,     y, width, height);    }   } };

最后

ok! 至此, 我们的超级玛丽就改造完成, 后面会陆续加上一些其他的地图元素 ~ 有兴趣的小伙伴可以关注一下哦 ~

到此这篇关于canvas在超级玛丽游戏中的应用详解的文章就介绍到这了,更多相关canvas超级玛丽游戏内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-07 18:03:46,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/2b0dc4ade234873e93cfb499fca08b6a.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:Canvas在超级玛丽游戏中的应用详解.doc

本文 PDF 下载地址:Canvas在超级玛丽游戏中的应用详解.pdf

标签:玛丽   画布   图形   方法
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图