HTML 5游戏制作之五彩连珠(画图)

开发 前端
棋盘起始的位置我也做了调整,只要修改起始的x y值,棋盘就会在这个点开始画。那,现在我们要在第五行,第六列画一个黄色的球,该怎么画呢?只需要给map增加一个方法,再调用这个方法就行啦

好吧,新的一天来了,我才开始动笔,真够懒得:)昨天说了今天我们要画一个球,在canvas上。好吧,这是游戏的入门的第一步,只是昨天没写完,所以。。。

  1. <!DOCTYPE html>   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4.     <title></title>   
  5. </head>   
  6. <body>   
  7.     <canvas id="canvas" height="400" width="600" style="background: #fff;"></canvas>   
  8.     <script type="text/javascript">   
  9.         var canvas = document.getElementById("canvas");   
  10.         var ctx = canvas.getContext("2d");   
  11.         ctx.beginPath();   
  12.     
  13.         ctx.arc(110, 110, 40, 0, Math.PI * 2);   
  14.     
  15.         ctx.strokeStyle = "red";   
  16.         ctx.fillStyle = "yellow";   
  17.     
  18.         ctx.fill();   
  19.         ctx.stroke();   
  20.     
  21.     </script>   
  22. </body>   
  23. </html> 

上面的代码是在VS11 beta上写的,实在是太舒服了,vs是非常强大的编辑器。上面的代码中我们绘制了一个大大的圆,并且着色了,红边和黄心。
看下 arc (弧度)方法,昨天的文章里有他的链接地址,我在这里粘贴下。

The arc(x, y, radius, startAngle, endAngle, anticlockwise) method draws an arc. 

arc(x,y,弧度,开始角度点,结束角度点, 顺时针),角度点你可能不是很清楚如何表示,这里是用Math.PI 圆周率来表示 6.28是周长。 想画圆的一部分也就是一段弧线,可以取开始的角度点和结束的角度点。

那么下一步就是要把圆能够画到我们棋盘上。其实,这个很简单,只要我们把x,y和radius的值调整下就会绘制出来。我把昨天代码写的更“专业”了一点。所以,今天的代码会在新的代码基础上增加了。先看下改动过的代码。

  1. var canvas = document.getElementById("canvas");   
  2. var ctx = canvas.getContext("2d");   
  3. var g = {   
  4.     cellCount: 9,   
  5.     lineCount: 5,   
  6. };   
  7.    
  8. var map = {   
  9.     startX: 20.5,   
  10.     startY: 60.5,   
  11.     cellWidth: 30,   
  12.     getEndX: function () {   
  13.         return g.cellCount * this.cellWidth + this.startX;   
  14.     },   
  15.     getEndY: function () {   
  16.         return g.cellCount * this.cellWidth + this.startY;   
  17.     },   
  18.     draw: function () {   
  19.         ctx.beginPath();   
  20.    
  21.         ctx.moveTo(this.startX, this.startY);   
  22.    
  23.         for (var i = 0; i <= g.cellCount; i++) {   
  24.    
  25.             var p1 = i * this.cellWidth + this.startX;   
  26.             ctx.moveTo(p1, this.startY);   
  27.             ctx.lineTo(p1, this.getEndY());   
  28.    
  29.             var p2 = i * this.cellWidth + this.startY;   
  30.             ctx.moveTo(this.startX, p2);   
  31.             ctx.lineTo(this.getEndX(), p2);   
  32.    
  33.         }   
  34.         ctx.strokeStyle = "#456";   
  35.         ctx.stroke();   
  36.     },   
  37.    
  38. };   
  39.    
  40. map.draw(); 

是吧,更专业了吧,这样就不会定义一坨的function,到时候没出找,而是定义在一个对象里,这种封装也能避免命名冲突。而且,棋盘起始的位置我也做了调整,只要修改起始的x y值,棋盘就会在这个点开始画。那,现在我们要在第五行,第六列画一个黄色的球,该怎么画呢?只需要给map增加一个方法,再调用这个方法就行啦

  1. drawBubble: function (x, y) {   
  2.     var px = this.startX + this.cellWidth * x - this.cellWidth / 2;   
  3.     var py = this.startY + this.cellWidth * y - this.cellWidth / 2;   
  4.     ctx.beginPath();   
  5.     ctx.arc(px, py, 12, 0, Math.PI * 2);   
  6.     ctx.strokeStyle = "white";   
  7.     ctx.fillStyle = "yellow";   
  8.     ctx.fill();   
  9.     ctx.stroke();   
  10. }, 

画出来刷新下,居然是第六行,第五列,我们搞错了吗?代码没有,只是我们误认为x是行y是列 按顺序叫顺口了,其实是反过来的:)

泡泡既然能画出来,也要能清除才是,不然没法玩,所以再增加一个清除泡泡的方法。

  1. clearBubble: function (x, y) {   
  2.     var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5;   
  3.     var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5;   
  4.     ctx.beginPath();   
  5.     ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1);   
  6.     ctx.stroke();   

ok,是不是很霸气? o(∩_∩)o 哈哈,不过在获取泡泡的位置时是不是很纠结,为什么画泡泡是 width/2 而擦除要加0.5? 

画圆是从中心点开始画,所以要去掉半径,而擦数不能擦掉我们的棋盘线,所以要偏移0.5 。

原文链接:http://www.cnblogs.com/mad/archive/2012/03/11/2390281.html

【编辑推荐】

  1. HTML 5游戏制作之五彩连珠(预览)
  2. HTML 5游戏制作之五彩连珠(设计)
  3. HTML 5游戏制作之五彩连珠(动画)
  4. HTML 5游戏制作之五彩连珠(寻路)
  5. HTML 5游戏制作之五彩连珠(试玩)

 

责任编辑:张伟 来源: 君之蘭的博客
相关推荐

2012-05-17 13:45:35

HTML5

2012-05-18 13:11:09

HTML5

2012-05-18 14:05:53

HTML5

2012-05-18 13:07:04

HTML5

2012-05-18 13:59:45

HTML5

2010-08-12 22:35:24

IBM培训

2011-11-30 15:14:32

HTML 5

2019-09-11 15:20:21

华为

2021-03-26 07:06:40

Windows 10Windows操作系统

2012-06-07 15:29:31

HTML5

2012-05-15 13:57:41

HTML5

2012-01-10 16:37:46

乐团

2019-09-12 10:10:10

Vim编辑器代码

2012-03-29 09:18:47

HTML5WEB

2020-04-22 10:01:26

Vim编辑器代码

2013-08-27 14:20:09

游戏应用图标ASO应用商店优化

2014-12-30 17:13:51

HTML5

2021-03-29 15:07:19

AI 数据人工智能

2011-12-16 11:11:36

HTML 5

2012-05-30 13:49:52

HTML5
点赞
收藏

51CTO技术栈公众号