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

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

本游戏是基于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.7
HTML5 CANVAS游戏开发实战(PDF和源代码) 第一部分 准备工作篇 第1章 准备工作 / 2 1.1 html5介绍 / 2 1.1.1 什么是html5 / 2 1.1.2 html5的新特性 / 2 1.2 canvas简介 / 5 1.2.1 canvas标签的历史 / 5 1.2.2 canvas的定义和用法 / 6 1.2.3 如何使用canvas来绘图 / 6 1.2.4 canvas的限制 / 7 1.3 开发与运行环境的准备 / 7 1.3.1 浏览器的支持 / 7 1.3.2 准备一个本地的服务器 / 8 1.4 开发工具的选择 / 8 1.5 测试与上传代码 / 12 1.6 javascript中的面向对象 / 13 1.6.1 类 / 13 1.6.2 静态类 / 16 .1.6.3 继承 / 16 1.7 小结 / 17 第二部分 基础知识篇 第2章 canvas基本功能 / 20 2.1 绘制基本图形 / 20 2.1.1 画线 / 20 2.1.2 画矩形 / 22 2.1.3 画圆 / 24 2.1.4 画圆角矩形 / 26 2.1.5 擦除canvas画板 / 27 2.2 绘制复杂图形 / 28 2.2.1 画曲线 / 28 2.2.2 利用clip在指定区域绘 图 / 30 2.2.3 绘制自定义图形 / 31 2.3 绘制文本 / 32 2.3.1 绘制文字 / 32 2.3.2 文字设置 / 33 2.3.3 文字的对齐方式 / 38 2.4 图片操作 / 41 2.4.1 利用drawimage绘制图片 / 41 2.4.2 利用getimagedata和putimagedata绘制图片 / 45 2.4.3 利用createimagedata新建像素 / 47 2.5 小结 / 49 第3章 canvas高级功能 / 50 3.1 变形 / 50 3.1.1 放大与缩小 / 50 3.1.2 平移 / 53 3.1.3 旋转 / 54 3.1.4 利用transform矩阵实现多样化的变形 / 56 3.2 图形的渲染 / 65 3.2.1 绘制颜色渐变效果的图形 / 65 3.2.2 颜色合成之globalcompositeoperation属性 / 67 3.2.3 颜色反转 / 69 3.2.4 灰度控制 / 70 3.2.5 阴影效果 / 71 3.3 自定义画板 / 72 3.3.1 画板的建立 / 72 3.3.2 canvas画布的导出功能 / 79 3.4 小结 / 81 第4章 lufylegend开源库件 / 82 4.1 lufylegend库件简介 / 82 4.1.1 工作原理 / 82 4.1.2 库件使用流程 / 83 4.2 图片的加载与显示 / 84 4.2.1 图片显示举例 / 84 4.2.2 lbitmapdata对象 / 86 4.2.3 lbitmap对象 / 87 4.3 层的概念 / 88 4.4 使用lgraphics对象绘图 / 90 4.4.1 绘制矩形 / 90 4.4.2 绘制圆 / 91 4.4.3 绘制任意多边形 / 92 4.4.4 使用canvas的原始绘图函数进行绘图 / 93 4.4.5 使用lsprite对象进行绘图 / 94 4.4.6 使用lgraphics对象绘制图片 / 95 4.5 文本 / 101 4.5.1 文本属性 / 101 4.5.2 输入框 / 102 4.6 事件 / 103 4.6.1 鼠标事件 / 103 4.6.2 循环事件 / 104 4.6.3 键盘事件 / 105 4.7 按钮 / 106 4.8 动画 / 108 4.9 小结 / 113 第三部分 开发实战篇 第5章 从简单起—“石头剪子布”游戏 / 116 5.1 游戏分析 / 116 5.2 必要的javascript知识 / 117 5.2.1 随机数 / 117 5.2.2 条件分支 / 117 5.3 分层实现 / 117 5.4 各个层的基本功能 / 119 5.4.1 基本画面显示 / 119 5.4.2 结果层的显示 / 126 5.4.3 控制层的显示 / 127 5.5 出拳 / 129 5.6 结果判定 / 131 5.7 小结 / 137 第6章 开发“俄罗斯方块”游戏 / 138 6.1 游戏分析 / 138 6.2 必要的javascript知识 / 138 6.3 游戏标题画面显示 / 139 6.4 向游戏里添加方块 / 141 6.5 控制方块的移动 / 152 6.5.1 键盘事件 / 152 6.5.2 触屏事件 / 155 6.6 方块的消除和得分的显示 / 157 6.7 小结 / 160 第7章 开发“是男人就下一百层”游戏 / 161 7.1 游戏分析 / 161 7.2 游戏标题画面显示 / 161 7.3 读取图片与背景显示 / 162 7.4 添加一个静止的地板 / 167 7.5 添加游戏主角 / 170 7.5.1 让游戏主角出现在画面上 / 170 7.5.2 通过键盘事件来控制游戏主角的移动 / 177 7.5.3 通过触屏事件来控制游戏主角的移动 / 178 7.6 添加多种多样的地板 / 179 7.6.1 会消失的地板 / 179 7.6.2 带刺的地板 / 181 7.6.3 带有弹性的地板 / 182 7.6.4 向左和向右移动的地板 / 184 7.7 游戏数据的显示 / 187 7.8 游戏结束与重开 / 190 7.9 小结 / 192 第8章 开发射击类游戏 / 193 8.1 游戏分析 / 193 8.2 添加一架可控飞机 / 194 8.2.1 添加一个飞机类 / 194 8.2.2 可控飞机类 / 197 8.3 为飞机添加多样化的子弹 / 203 8.3.1 建立一个子弹类 / 203 8.3.2 单发子弹 / 205 8.3.3 多发子弹 / 207 8.3.4 环形子弹 / 208 8.3.5 反向子弹 / 209 8.4 添加敌机 / 209 8.4.1 建立一个敌机类 / 210 8.4.2 建立一个敌机boss类 / 214 8.5 碰撞检测 / 217 8.5.1 飞机与子弹的碰撞 / 217 8.5.2 我机与敌机的碰撞 / 220 8.6 子弹的变更 / 221 8.6.1 建立一个弹药类 / 222 8.6.2 弹药与我机的碰撞 / 223 8.7 飞机生命值的显示 / 225 8.8 游戏胜利与失败判定 / 226 8.9 小结 / 228 第9章 开发物理游戏 / 229 9.1 box2d简介 / 229 9.2 box2dweb在lufylegend库件中的使用 / 229 9.3 创建各种各样的物体 / 234 9.3.1 矩形物体 / 234 9.3.2 圆形物体 / 237 9.3.3 多边形物体 / 239 9.4 响应鼠标拖拽物体 / 242 9.5 关节(joint) / 243 9.5.1 距离关节(b2distancejointdef) / 243 9.5.2 旋转关节(b2revolutejointdef) / 245 9.5.3 滑轮关节(b2pulleyjointdef) / 247 9.5.4 移动关节(b2prismaticjoint) / 248 9.5.5 齿轮关节(b2gearjoint) / 250 9.5.6 悬挂关节(b2linejoint) / 252 9.5.7 焊接关节(b2weldjoint) / 253 9.5.8 鼠标关节(mouse joint) / 254 9.6 力 / 254 9.7 碰撞检测 / 256 9.8 镜头移动 / 260 9.9 一个简单的物理游戏 / 263 9.10 小结 / 267 第10章 开发网络游戏 / 268 10.1 http通信 / 268 10.1.1 如何实现http通信 / 268 10.1.2 http通信的弊端 / 275 10.2 socket通信 / 275 10.2.1 区分socket通信和http通信 / 276 10.2.2 服务器端 / 276 10.2.3 客户端 / 281 10.3 利用websocket实现简单的聊天室 / 283 10.4 一款多人在线的坦克大战 / 293 10.4.1 服务器 / 293 10.4.2 客户端 / 293 10.5 小结 / 307 第四部分 技能提高篇 第11章 提高效率的分析 / 310 11.1 绘图时使用小数的影响 / 310 11.2 drawimage和putimagedata的效率比较 / 311 11.3 区域更新和图片大小对绘图效率的影响 / 311 11.4 图片格式对绘图效率的影响 / 313 11.5 优化代码以提高整体效率 / 314 11.5.1 使用位运算 / 314 11.5.2 少用math静态类 / 316 11.5.3 优化算法 / 319 11.6 小结 / 322
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值