随笔分类 - HTML5
摘要：上节中讲了如何寻路，在和朋友们讨论时都反应有时走的不太对，绕远路了，其实代码主要是大方向的判断 比如目标在右上，那应该是先右还是先上 这个并没有做处理，如果这个做了处理，效果会更好一些，但也难免会走弯路。 贪心就是这样，不是最优，接近最优。也希望其他的同学有意见的可以讨论下。我这也只是个人想法。 既然可以走动了，那就可以判断是否可以消除同样颜色的行、列或斜线了。只要>=5个同样的色球，就清除他们，并且可以继续移动。如果不可以清除，那就再增加3个球。 clearLine: function (x1, y1, color, isClick) { ...
阅读全文
摘要：上节主要做了动画的实现，感觉还是比较有意思的。游戏的性能好不好，重绘应该比较重要吧，菜鸟瞎想了下 呵呵。本节就要做对泡泡的操作，上节后面提到了点击泡泡后泡泡要做出闪动响应，那我们我们如何获得被点击了哪个泡泡呢？其实Canvas也是html的一个元素而已，所以我们可以给Canvas加click事件。来查看click时鼠标的坐标，这样就等得出点击了map的哪个位置。我们给game增加一个click方法，当Canvas点击时调用此方法。要实现的效果是： 当Canvas时被点击时有几种可能：1、没点到map 那就不作响应 2、点到了泡泡，那该泡泡要做出响应（闪）3、如果之前有点击过其他的泡泡，则取消之
阅读全文
摘要：上一节中，我们留下了一个flyin的方法没有介绍，这里想单独写一篇html5的动画实现。在第二节中我们实现了画一个泡泡，并且成功的擦除了泡泡，但当时也说了别把棋盘的线给擦掉了，所以做了偏移量。所以说html5 Canvas还是低级， 没有图层的概念，擦掉再想补回来，怎么补？ 答案就是重绘。 没错，整个Canvas重绘，这样就能不用担心补哪里了。虽然带来了性能的损失，但绝对减少的编码难度。而且计算机的能力也不差这点损失。那么重绘的话，我们在Canvas是上所有的需要绘制的对象都应该有draw方法。这是必须的。另外，所有的元素都有个上下的概念，所以要先绘制下面的，再绘制上面的。 而这个上下就得靠
阅读全文
摘要：在看了几篇Canvas相关的文章后，发现前两节的代码实现还是有问题，因为知道的少，所以只能在自己已知的知识上做实现。不过还好，这是一个发现的过程，也是一个纠错和完善的过程。我第一次尝试一边学习一遍写博客，我想这也有助我的学习，可以把知识掌握的牢固些，起码忘的慢一些吧：）。 前两节学习了几个基本绘制的方法，lineTo moveTo和arc，也了解坐标的情况，但写的比较傻，只是单纯的实现。 比如棋盘的起始坐标如果有偏移量，我们还要计算他的具体开始坐标和结束坐标，实际上Canvas有现有的方法提供偏移的功能。 他叫 translate，另外还有缩放scale、旋转rotate，他们都可以用t...
阅读全文
摘要：好吧，新的一天来了，我才开始动笔，真够懒得：）昨天说了今天我们要画一个球，在canvas上。好吧，这是游戏的入门的第一步，只是昨天没写完，所以。。。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <canvas id="canvas" height="400" width="600" st
阅读全文
摘要：HTML5推出也有很长一段时间了，一直没有学习过，闲来无事学习开发个游戏吧。 用javascript+canvas编写一个 五彩连珠的游戏。Canvas 画布 标签<canvas id="canvas" ></canvas>，很简单和普通的tag没区别。 关键在于js对他的操作。先看个示例代码：<canvas id="canvas" height="100" width="100"></canvas><script> var canvas = docume
阅读全文
