基于Canvas的js简单版接元宝游戏

最新推荐文章于 2025-05-20 19:46:38 发布

luqiren

最新推荐文章于 2025-05-20 19:46:38 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/luqiren/article/details/82783001

本文介绍了一个基于HTML5 Canvas的接元宝小游戏实现，详细讲解了涉及的Canvas相关知识，包括获取画图对象、绘制图片、写文字、设置渐变等。游戏包括小人、元宝、炸弹三个实体类，通过键盘控制小人移动接住元宝避开炸弹。代码已上传至GitHub：https://github.com/luqiren/Canvas.git

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本游戏是基于canvas的简单版接元宝游戏v1.0.0版本，往后还会进一步完善，游戏代码git地址：https://github.com/luqiren/Canvas.git

里面的gold_v1.0.0.html就是这个游戏的代码了。废话不多说，下面先介绍涉及代码的关于canvas的一些知识，然后再介绍游戏的实现。

1.涉及到的相关canvas知识介绍

如果对canvas已经很熟悉了可以忽略这一段。

<canvas>是HTML5的标签，<canvas>可以说是一个画布，其本身并没有绘制图像的能力，所以我们只能通过脚本来绘图，游戏中所有的图像都是利用getContext()方法返回的一个对象来进行绘制的，该对象提供了用于在画布上绘图的方法和属性。

如何获取画图对象？

<canvas id="canvas" width="400" height="500"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

这个ctx就是用来绘图，这个游戏中的绘图任务都交由它来完成。另外你可以用以下代码来判断自己的浏览器支不支持canvas

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
    console.log('你的浏览器支持Canvas!');
} else {
    console.log('你的浏览器不支持Canvas!');
}

如何在画布上画图片？

游戏中的小人、礼物和炸弹都是用的现成的图片，所以需要知道如何在画布上绘制图片。

使用drawImage()方法可以将图片画到画布上，这个方法有9个参数，但有些参数是可选的

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

根据这些参数的组合，将图片画到画布上共有三种方式：

第一种：将图片完全画在画布上，只规定在画布上的位置，不规定大小不剪切图片。

ctx.drawImage(img,x,y);

第二种：规定图片在画布上的位置和大小，不剪切图片。

ctx.drawImage(img,x,y,width,height);

第三种：剪切图片，并将剪切后的图片定位在画布上并且设置大小。

ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

游戏中用的就是第三种。

如何在画布上写一段文字？

游戏结束时在画布上写GAME OVER，这时就要用到fillText()来写文字了。

ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

第一行代码用来设置文字的大小和字体，第二行就设置文字内容以及在画布的位置，先x坐标然后y坐标。

如何设置渐变？

为了字体能够好看些，我们设置个渐变

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"red");
grd.addColorStop(0.25,"orange");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(0.75,"blue");
g