js+canvas实现小游戏和小应用
关注
分享
扫一扫
文章平均质量分 53
前端小黑
never give up never give in
展开
-
canvas+js绘制简单能力图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-01-30 17:45:45 · 1070 阅读 · 0 评论 -
canvas+js实现简单的画图工具
在实现画板前，先明确一下要实现的功能：1.可以改变画笔的颜色2.可以改变画笔的大小3.可以改变画笔的形状4.可以改变画笔的类型（边框绘制或者填充绘制）5.清空画布那么先写出对应的html结构<p class="set"> <label for="fillColor">填充颜色</label> <input ty...原创 2019-04-05 18:22:57 · 9057 阅读 · 0 评论 -
canvas+js实现坦克大战多模式版
之前上传的坦克大战因为改来改去没完整上传导致出了bug。。。半年前的代码改到心累。。。这次干脆就把修改到最后的版本发上来，虽然也是几个月前的东西了。。。路过的大佬有兴趣就拉下代码玩玩吧在之前的版本上添加了地图选择，玩家数量选择，模式选择，按键设置等文件路径：tankAI.html<!DOCTYPE html><html><head> ...原创 2019-03-19 21:32:19 · 1159 阅读 · 3 评论 -
canvas+js实现简单的数字华容道小游戏
数字华容道是个很简单的小游戏，今天就尝试使用canvas+js做个简单的数字华容道小游戏。有关于游戏的具体规则请上网查阅。一如既往先写个html页面，这里我把游戏的界面水平居中了，这里预留了一个动画，在后面时间跳动的时候使用。<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-02-17 20:30:58 · 5498 阅读 · 3 评论 -
canvas+js实现简单的扫雷小游戏
扫雷小游戏作为windows自带的一个小游戏，受到很多人的喜爱，今天我们就来尝试使用h5的canvas结合js来实现这个小游戏。要写游戏，首先要明确游戏的规则，扫雷游戏是一个用鼠标操作的游戏，通过点击方块，根据方块的数字推算雷的位置，标记出所有的雷，打开所有的方块，即游戏成功，若点错雷的位置或标记雷错误，则游戏失败。具体的游戏操作如下1.可以通过鼠标左键打开隐藏的方块，打开后若不是雷，...原创 2019-02-02 17:10:52 · 1499 阅读 · 0 评论 -
canvas+js实现简单的2048小游戏
学习前端半年，本着兴趣用canvas结合了js写了个2048小游戏，有的地方没有完善的欢迎各位大神指出。在写游戏开始，首先要在html里创建canvas标签，并为canvas增添id，以便使用js调用。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>20...原创 2018-07-29 00:16:25 · 1347 阅读 · 0 评论 -
canvas+js实现简单的贪吃蛇小游戏
贪吃蛇作为一个经典的游戏，直到现在还有不少人在玩，但是比起玩别人的游戏，还是玩自己的游戏比较有成就感，本篇博文就将告诉大家如何用<canvas>+js实现简单的贪吃蛇小游戏，如果对canvas的API不了解的同学请先学习canvas的基础知识再看本文。本人还只是入坑前端不久，如有哪些做的不好，还请各位大神指出。首先，在写游戏开始，我们要先写一个简单的html文件，这里不考虑美观...原创 2018-08-15 19:39:36 · 2058 阅读 · 1 评论 -
canvas+js实现简单的贪吃蛇小游戏（进阶篇）
通过在<canvas>+js实现简单的贪吃蛇小游戏这篇博文中，我们实现了基本的贪吃蛇游戏，让贪吃蛇得以移动和吃到果实，但是贪吃蛇现在在很多版本中都添加了或多或少的内容，今天我将以上一篇博文为基础，为贪吃蛇游戏添加几个新的内容。分别为穿透容器，障碍物的设置，道具的设置。首先，上一篇博文的长宽为10*10的数组，为了添加更多内容，这里先将数组扩增为20*20。var number...原创 2018-08-18 11:02:14 · 1305 阅读 · 0 评论 -
canvas+js实现简单的双人坦克对战小游戏
相信有很多人对坦克大战的游戏模仿很有兴趣，在实现经典的坦克大战之前，我先写了个双人的坦克对战，实现了基本的对战功能。下面就开始介绍游戏的编写。首先创建一个基本的html文件，添加canvas标签以实现游戏的展示。<!DOCTYPE html><html><head> <title>双人对战坦克大战</title> <...原创 2018-08-25 16:46:29 · 2978 阅读 · 2 评论 -
canvas+js实现简单的坦克大战小游戏
使用canvas和js实现经典的坦克大战并不难，坦克和炮弹的绘制可以使用canvas的里API画出，而坦克的移动和炮弹的发射可以依赖于键盘事件和定时器来实现。在这里我要实现的坦克大战是双人模式，有木块（能被炮弹摧毁）和铁块（不能被炮弹摧毁）两种障碍物，有一些简单的小道具，摧毁一定数量的坦克就能获得胜利，下面就着手来实现这个坦克大战。首先我们需要在html中创建一个canvas标签，以显示游...原创 2018-08-30 17:15:48 · 3053 阅读 · 3 评论 -
canvas+js绘制简单统计图(扇形图，条形图)
第一次写项目，遇上产品让写个统计图分析内容，想来用canvas实现比较方便,顺便把这两个方法放进自己的canvas库中。绘图前先看一下要绘制的内容，在扇形图中，我们需要每个块占用的百分比，然后计算角度，对应画出弧和分隔线，而对于条形图，我们需要知道每个内容对应的数据量，还需要画出坐标轴。除此之外，两个图都需要的是用不同颜色来标出不同内容，再加个标注标出不同内容对应的颜色，话不多说上代码：...原创 2018-12-09 04:19:59 · 4515 阅读 · 1 评论