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

本文介绍了一个基于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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值