JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
1 |
|
1 | //设置属性函数,定义了三个参数,元素对象elem,属性名称prop和属性值value |
1 |
|
1 | //常量,整个div.city的宽高 |
1 | //定义一个速度常量,用于控制速度, 值越大,速度越快 |
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
1 |
|
1 |
|
1 |
|
1 |
|
1 |
|
1 |
|
1 |
|
]]>如果希望角色能够动起来,需要添加JS脚本,先看下图, 具体怎样做下篇见分晓
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
在Canvas画布上绘制圆形,画多个不同大小的圆
1 |
|
1 | function Ball(x, y, radius, dx, dy) { |
1 | class Ball { |
1 | //创建Ball对象 |
单个球的实现效果
1 | //创建一个数组,用于存储多个球对象 |
1 | function animate() { |
1 | function animate() { |
效果如图,知道这是什么原理吧
]]>JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
在Canvas画布上绘制圆形,而且还要让这个圆形不断地在画布上移动,这是第一步;后面还需要实现N个球飘浮随机移动,再加上碰撞功能。先实现一个球的飘动吧
1 |
|
1 | const canvas = document.getElementById('myCanvas') |
1 | function Ball(x, y, radius) { |
1 | function Ball(x, y, radius) { |
1 | var ball = new Ball(200,200,30) |
1 | var ball = new Ball(200,200,3,3,30) |
1 | function Ball(x, y, radius, dx, dy) { |
制作一个简单的翻牌游戏, 使用HTML5/CSS3设计界面, Javascript翻牌对比; 麻雀虽小,五脏俱全, 此项目将CSS中常见的技术应用在项目中,使用JavaScript原生开发,设计简单,便于快速掌握CSS3和JavaScript的用法; 某些知识点再通过其它视频或文档去了解,事半功倍。
1 |
|
1 | /* 存储先后点击的两张扑克牌 */ |
1 | function reversal(element) { |
1 | /* 比较两张牌的值是不是相等 */ |
1 | /* 倒计时 和点击次数*/ |
最终实现的效果如下图
]]>最终代码完成,但是这里会有一些小问题,比如点击速度比较快,小小的BUG解决一下?
制作一个简单的翻牌游戏, 使用HTML5/CSS3设计界面, Javascript翻牌对比; 麻雀虽小,五脏俱全, 此项目将CSS中常见的技术应用在项目中,使用JavaScript原生开发,设计简单,便于快速掌握CSS3和JavaScript的用法; 某些知识点再通过其它视频或文档去了解,事半功倍。
1 | <!DOCTYPE html> |
注意在开发本节内容时注释之前的翻转功能
1 | /* 隐藏背面 */ |
1 | <!-- 扑克牌 --> |
1 | /* 扑克牌正面数字 */ |
如图所示
1 | /* 扑克牌正面数字 */ |
如图所示
1 | /* 伪类 content的位置 */ |
如图所示: 可以看到图中的效果和我们想要的有些不同,放在了右上角和左下角,这是因为沿着Y轴有旋转
1 | .card-front { |
1 | <!-- 数字面 ♠ ♥ ♣ ♦--> |
1 | .card { |
如图所示:
1 | <!-- 扑克牌 --> |
1 |
|
]]>最终的效果就完成了,可以多复制几份,然后更改一下数字和花色即可;下一篇将使用js实现扑克牌的比较
制作一个简单的翻牌游戏, 使用HTML5/CSS3设计界面, Javascript翻牌对比; 麻雀虽小,五脏俱全, 此项目将CSS中常见的技术应用在项目中,使用JavaScript原生开发,设计简单,便于快速掌握CSS3和JavaScript的用法; 某些知识点再通过其它视频或文档去了解,事半功倍。
1 | /* 背面图片布局 */ |
如图所示
1 | /* 使用绝对位置 */ |
如图所示
1 | .card:hover .card-back { |
1 | /* 背面图片布局 */ |
]]>本篇中我们使用css动画制作了扑克牌的背面,下一篇中设计扑克牌正面样式
制作一个简单的翻牌游戏, 使用HTML5/CSS3设计界面, Javascript翻牌对比; 麻雀虽小,五脏俱全, 此项目将CSS中常见的技术应用在项目中,使用JavaScript原生开发,设计简单,便于快速掌握CSS3和JavaScript的用法; 某些知识点再通过其它视频或文档去了解,事半功倍。
1 | <!-- 扑克牌 --> |
1 |
|
结果如下图所示
1 | /* 扑克牌 */ |
结果如图
1 | /* 扑克牌正面和背面通用样式, 两个div层需要重合,使用的是position:absolute */ |
结果如图
1 | /* 扑克牌正面和背面通用样式, 两个div层需要重合,使用的是position:absolute */ |
如图所示
1 | .card-face { |
效果如图所示: 此时会发现一个问题,也就是牌的背面没有显示,旋转过来之后还是正面
1 | .card-face { |
1 | <!DOCTYPE html> |
]]>本篇我们利用CSS中position, display,动画等技术,实现了扑克牌翻转,背后的知识可以查看相关文档。下篇中再来实现背面蜘蛛图片的布局
制作一个简单的翻牌游戏, 使用HTML5/CSS3设计界面, Javascript翻牌对比; 麻雀虽小,五脏俱全, 此项目将CSS中常见的技术应用在项目中,使用JavaScript原生开发,设计简单,便于快速掌握CSS3和JavaScript的用法; 某些知识点再通过其它视频或文档去了解,事半功倍。
1 |
|
结果如下图所示
1 | body { |
1 | .game-title { |
1 | .game-container { |
1 | .game-info-container { |
1 |
|
]]>下一篇中来设计一下扑克牌,也会用到常见的CSS样式,特别是position, z-index, 过渡效果等
汉诺塔(Tower of Hanoi),是一个源于印度古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上。并且规定,在小圆盘上不能放大圆盘,在三根柱子之间一次只能移动一个圆盘。本文使用JavaFX模拟汉诺塔,使用了Java面向对象,Java stream和Optional, JavaFX图形技术, 包含Stage、Scene、事件处理、Pane、StackPane等,要求对Java8以上版本的特性有了解。一起来实现这个小游戏吧!
创建三个塔,使用三个矩形模拟三个塔
在第一个矩形周围绘制多个圆形表示圆盘
点击塔中的圆盘选中后,再点击其它塔,移动圆盘到其它塔
直到将所有圆盘按从小到大的顺序显示在第三个塔上
1 | public class TowerHanoi extends Application { |
1 | //Tower是一个StackPane |
1 | public class TowerHanoi extends Application { |
1 | private static final int NUM_CIRCLES = 4; |
1 | public class TowerHanoi extends Application { |
1 | private Circle getTop() { |
1 | void addCircle(Circle circle) { |
1 | private Optional<Circle> selectedCircle = Optional.empty(); |
1 | //Tower是一个StackPane |
1 | private void addCircle(Circle circle) { |
1 | package top.codecool.game; |
本文使用JavaFX和Java8中的stream、Optional、Lambda表达式等技术实现了一个简易版的汉诺塔小游戏,借此练习如何使用这些新特性,提升技能水平。
]]>JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
在(九) JavaScript-Canvas 雪花飘 中利用两个Canvas绘制了一个图形并在中心旋转,本篇中加入面向对象内容,创建多个图形并旋转,让每个图形旋转的同时向上或向下移动
1 |
|
1 | function drawLine() { |
1 | const image = new Image() |
1 | //也可以使用addEventListener方式注册事件 |
1 | class Snow { |
1 | class Snow { |
1 | let snows=[] |
1 | <!DOCTYPE html> |
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
上一篇中让图片转了起来, 本篇自己设计一张图形,然后让图形转动; 在网页代码中要注意,设计了两个Canvas,两个Canvas的位置在CSS中有具体的描述。其中第一个画布准备画一个图形,然后再将图形整体画到第二个画布上
1 |
|
定义一个画线函数
设定线从坐标(0,0) 开始,线长100, 线宽4, 颜色orange
1 | function drawLine() { |
1 | function drawLine() { |
绘图结果
1 | const image = new Image() |
1 | image.onload = function(){ |
1 |
|
]]>多一些图形旋转,每个图形的大小可自由设置,垂直飘落, 后面章节再完善
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
使用 Image类型创建图片对象, 自定义类 Picture
1 |
|
1 | //创建图片对象 |
1 | cherry.addEventListener('load', function(){ |
效果如图
1 | cherry.addEventListener('load', function(){ |
效果如图
1 | cherry.addEventListener('load', function(){ |
效果如图: 桔色背景的图片旋转了30度,平移的位置相对于最开始时的状态; 如果桔色背景下方还要画图,也可以加上save和restore,使得桔色图形的属性设置不会影响后续图形
1 | const cherry = new Image() |
效果如图, 也可以去掉矩形填充
1 | let angle1 = 1 |
效果如图, 尝试去掉填充矩形
]]>再用save() 和 restore() 函数 ,尝试使用面向对象的方法绘图
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
在上节的基础上增加了事件处理,使用addEventListener() 函数,数组元素的添加与删除在示例中也有应用
1 |
|
1 | //鼠标点击时的位置记录 |
1 | class Circle { |
1 | function animate() { |
1 |
|
]]>上述代码中使用了事件,数组元素的添加和删除,学到了就能在开发中能灵活使用
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
在 (五) JavaScript-Canvas球球乱撞的基础上增加一些小小的特效,简单的平面几何的应用-勾股定理,两个点之间画一条线
1 |
|
球和球之间画一条线,要实现此功能需要用到毕达哥拉斯定理,也就是勾股定理。
在遍历数组的时候,将当前球的位置和其它所有球的位置进行距离计算,如果距离小于一定值,则画一条线
计算过程如下图所示
关键代码
1 | //两点之间的距离计算 |
1 |
|
计算过程如下图所示:
1 |
|
]]>本节内容主要是平面几何中的原理应用到实际图形开发中,是不是很有趣? 在这个基础之上还可以做出更多的效果。
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
在 JavaScript-Canvas-自由运动的球 这一节里,实现了单个球自由地在Canvas画布中运动,本节将它完善一下,创建N个球在Canvas画布中胡乱飞,见上图;这些球相互之间不会碰撞,如果需要实现这个功能,还需加点油,跟着来就对了。
本节JavaScript 技术要点
定义数组 和使用数组, 貌似一见到数组有些人就犯难了
随机设置颜色
控制一下球的运动速度(其实这算不上技术,顶多是个技巧)
1 |
|
1 | //声明一个数组 |
1 | function animate() { |
1 |
|
]]>本节中利用数组存储了多个Circle对象,在动画函数中遍历数组并调用update方法更新 Circle的位置, 后续我们增加特效,让球和球之间有连线
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
本节将使用window.requestAnimationFrame()函数制作动画,先从简单的开始, 理解以下内容需要对JavaScript 中的函数和class有基本的了解
本节JavaScript 技术要点
1 |
|
使用ES6中的class关键字 定义一个圆(也可以直接使用function),一个圆需要中心坐标以及半径参数,在本例中还需要移动的距离
使用class定义圆,x,y表示圆的中心坐标,dx,dy表示移动时的横坐标和纵坐标距离 , radius表示半径
1 | class Circle { |
使用function定义
1 | function Circle(x, y, dx, dy, radius) { |
1 |
|
1 |
|
1 |
|
效果如图,圆不会动,原因是update函数需要不断调用,此时只调用了一次
1 |
|
效果如此文开头的动图,如果注释掉ctx.clearRect(0,0,canvas.width,canvas.height) 你将得到以下结果
加上数组,再加上随机颜色的变化,就可以产生下图的效果了
]]>动画相对静态的图形稍麻烦一点,但若是掌握了requestAnimationFrame以及背后的原理,实现动画就简单多了,当然,也可以使用setTimeout或setInterval,大伙可以试试
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
1 |
|
1 | <script> |
效果如下图所示
1 | <script> |
如下图所示,第二根线的开始点为(0, -100) 结束点为 (0, -50), 整个坐标系rotate (旋转) 了 Math.PI/6 个角度
rotate 前和rotate 后的坐标系如图所示,蓝色表示是rotate 前, 红色表示rotate后
1 | <script> |
效果如下图所示
1 | <script> |
结果如下图所示, 六边形就画成了,但是多了一根线,可以直接将这行代码ctx.moveTo(0, 0) 注释掉即可
1 | <script> |
效果和上面一样,还可以改成7角星或更多角,只需要改一个数字即可
将6更改为10
1 | for(let i=0;i<10;i++) { |
1 |
|
]]>以上均为绘图基础,为后续绘制复杂的图形和动画打好基础. 最后一个函数稍微复杂一点点。用到的技术也就是前面篇章里介绍的。
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
1 |
|
1 | <script> |
效果如下图:
1 | <script> |
看看效果, 你会发现,两个矩形边框的颜色是最后一次设定的红色, 怎么解决? 其实和画线那篇类似,使用beginPath()
1 | <script> |
如下图所示
1 | <script> |
可以看到,旋转的角度是相对于上一个矩形,如果不使用save() restore()方法,那么旋转时将相对于上次绘制的形状
1 | <script> |
绘制结果如下,第二个矩形和第三个矩形重合了,可以这样理解,第三个矩形认为第二个矩形不存在一样,绘制时旋转角度就依赖于第一个矩形
1 | <script> |
效果如图,注意没有增加save()和restore()方法
save()和restore()经常在矩阵变换 translate()、缩放 scale()、旋转rotate()中使用, 因为一个Canvas只有一个2d上下文,当执行转换操作时,整个上下文的坐标系都将改变。改变后,如果我们需要将坐标系恢复到原来正常的状态,这时就需要用到save() 和 restore(), 下图中第一次绘制矩形的坐标系和旋转后绘制矩形的坐标系
]]>以上均为绘图基础,为后续绘制复杂的图形和动画打好基础
JavaScript 是前端核心, 掌握这门语言是步入前端高手行列必经之路,噢,别忘了还有TypeScript, 学习它还需要OOP知识, 底层的浏览器原理、HTTP协议也必不可少, 此系列文章记录使用JavaScript和Canvas进行游戏开发, 有游戏才有趣!!!
1 |
|
1 | <script> |
如下图所示,注意此时并没有使用beginPath()也没有使用closePath()
1 | <script> |
结果如图所示: 第一根线的样式完全变成了第二根线的样式,原因是画完第一根线时并没有关闭路径,也就是没有调用closePath()方法,导致第二根线的起始点会在第一根的结束坐标开始
1 | <script> |
1 | <script> |
1 | <script> |
1 | <script> |
结果是第四根线不再依据第三根线旋转角度,而是依据第二根红线旋转角度,对于第四根线来说就好像第三根线不存在一样, 据此可以明白save() restore()的作用
1 | <script> |
效果如下图:
]]>利用上面所了解的知识点,能画出一个五角星吗? 下一篇来试试