![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 65
孟德三笑
原谅我这一生不羁放纵爱自由
展开
-
HTML5——canvas制作游戏2048
笔者刚学HTML5不久,这是笔者第一次用HTML5制作游戏,希望大家多多提点意见。 废话不多说,先来一张效果图: 笔者只做了游戏主体,至于那些得分啊,历史最高分之类的,都没有去实现。那些都是比较简单的内容,这里就不多说了。下面讲述的过程中,将主要是讲讲笔者本人制作过程中的一些思路。 首先,是页面部分,这部分也没啥好讲的,直接上代码:原创 2016-11-07 20:36:32 · 8498 阅读 · 1 评论 -
canvas学习心得之save与restore
在运用canvas画图的时候,如果我们使用过放大、缩小、平移、重置画布原点等方法的话,那么在画下一个图的时候,有可能得到的结果并不是我们想要的,例如,我用了重置画布原点属性画的时钟,时钟每走一秒图画就会偏离,如图1: 图1:偏离原创 2016-10-28 11:37:08 · 389 阅读 · 0 评论 -
canvas学习心得之路径
刚开始接触canvas的路径时,有些迷糊。 由于我们正常生活的绘画逻辑,或者由于java的GUI编程的影响,我们总是以为绘画就是有纸有笔,直接画出图形就可以了。 这纸笔也就是编程环境,这是必不可少的,一般来说,我们就可以直接绘图了,但在canvas的绘图中,虽然也能直接绘制一些图,但是更多的图是通过路径来绘制的。刚开始接触的时候,有好几次都是设置好路径,运行程序,结果界面空白一片,就是没有图出原创 2016-10-27 20:21:28 · 2025 阅读 · 0 评论 -
canvas学习心得之arcTo
canvas提供画圆弧有两种方法,一个是arc,另一个就是arcTo,arc挺简单的,这里就不再说了,单说一下arcTo。 arcTo的作用是绘制介于两条切线之间的弧,语法是arcTo(x1,y1,x2,y2,r),其中x1,y1是起始点的坐标,x2,y2是终点的坐标,r则是圆弧的半径。这里面有个很大的误区,一般的初学者看到这里,都会错误的判断起始点的位置,如图1所示:原创 2016-10-28 16:49:37 · 2773 阅读 · 1 评论 -
HTML5——canvas制作游戏接住小球
先来一张效果图并完整版代码下载地址:HTML5——canvas制作游戏接住小球 游戏的整体逻辑是随机在上面生成障碍物,当小球碰到障碍物时障碍物消失,当全部障碍物被消灭时赢得游戏,而当小球掉到木板以下则输掉游戏。 先从页面说起,比较简单的代码,只有一个div一个canvas,就不多做解释了。 move_ball di原创 2016-11-11 09:04:53 · 5780 阅读 · 0 评论 -
HTML5实现消灭星星
消灭星星游戏制作思路: (1)本游戏基于canvas画布实现。从界面看,消灭星星由10X10的星星方块组成,因而我们要定义一个二维数组来存储它。 (2)消灭星星的方块有红黄蓝绿紫五种,可以用一个随机数随机生成0到4这五个数字分别赋给数组;根据数组元素不同的值绘制不同颜色的星星方块。 (3)界面做出来后就是互动方面了,通过js的鼠标点击事件获取点击位置的x,y坐标,因为是网页版的,所以采用js原创 2016-11-15 20:50:17 · 2432 阅读 · 0 评论