canvas教程

贪吃蛇游戏制作教程(一),canvas+js

字号+ 作者:H5之家 来源:H5之家 2017-07-20 18:03 我要评论( )

利用canvas加js简单的制作了一个传统的贪吃蛇游戏,都是很基础的东西,需要的朋友可以参考一下,大神请直接跳过。 游戏画面是自适应的,在电脑、手机、平板均测试通过。 一言不合先上效果图。 游戏规则:其中红色的边框为边界,蛇头碰到游戏结束,蛇头咬到自

  利用canvas加js简单的制作了一个传统的贪吃蛇游戏,都是很基础的东西,需要的朋友可以参考一下,大神请直接跳过。
  游戏画面是自适应的,在电脑、手机、平板均测试通过。
  一言不合先上效果图。

  





  游戏规则:其中红色的边框为边界,蛇头碰到游戏结束,蛇头咬到自己的身体则游戏结束。
  那条比较长的黑色长条就是蛇,那个小的黑色方块就是豆子,主要就是蛇跑来跑去吃豆子。
  目前游戏的设定是蛇每吃一个豆子加一分。分数每增加五,则蛇的速度增加100。这些初始化设定都是可以随便改的。当然你不喜欢黑色方块就改别的,用头像去画都行,可以自己简单的修改代码。
  下半部分的控制及显示按钮,都是简单的div制作并排列,这是更基础的东西,还是建议大神跳过。
  有些基础的人看到这个图之后建议自己来写游戏,下面是从基础开始制作本游戏,需要的可以看。
  第一步、制作游戏边界和内部。
  游戏边界很简单,这里用了一个div来控制
  <div></div>
  宽度建议尽量不要设置100%,因为两端顶到屏幕边上的话首先视觉不好,其次有些屏幕蛇跑到边界会有问题,所有游戏框的两边留了适当的距离,宽度设置为95%。高度设定为60%,是为了下半部分留40%的高度显示控制操作按钮。
  接着画canvas,这里有个坑就是canvas的宽不能用百分比,只能用width="500px";这种格式,而且不能画完之后再设定宽度,这样会导致所画的图片拉伸变形,图片会模糊。
  所以我这里使用jquery的append方法设置,现在应该明白为什么用一个div去控制游戏画面大小了,是为了设定方便。jquery获取div的高和宽,这都是基础的东西,然后赋值给canvas,这样canvas画的画面是等比的,再往里面添加东西不会变形模糊。
  这两句js语句是这样的。
  var can = '<canvas></canvas>'; //字符串can设定
  $(".a").append(can); //can追加到div之后。
  既然是讲基础的东西,这里就会注释的详细一点,大家不要嫌啰嗦。
  第一句中的kuan和gao,其实并不是直接取div的宽度和高度。因为这个游戏画面的大小肯定要设置成棋盘格式,要有多少行多少列,而且每个棋盘的格子,宽和高都是要相等的。
  像下图一样。

  




  中间的绿色格子,就是我们下一步要制作的棋盘,而蛇的移动就是每前进一步,蛇的身体就往前移动一个格子。
  由于这些格子都是正方形,而div的宽和高都是用百分比赋值的,不一定能取到整数,所以我们设置canvas的宽和高的时候,要经过一系列的计算得到。
  下一期讲canvas的高宽计算,还有棋盘列自动补齐的方法。

楼主发言:2次 发图:2张 | 更多

| | 楼主 |

作者:星痕姚远 时间:2016-10-27 09:25:00

  国外有个贪吃蛇网页游戏,挺逗的。

| | 1楼 | 打赏 | | 评论(1) |

楼主:你不是猪008 时间:2016-11-01 10:10:00

  这一期讲游戏画面的设定,棋盘的制作与蛇的初始化。
  首先设定一个变量var heng=23;
  表示棋盘有23行,然后根据大小自动计算每一行的高度
  gao = $(".a").height(); //预设div的高度
  gao = parseInt(gao);//取整
  jiangeh = gao/heng;//计算每一行的高度
  然后让每个格子的宽度和高度相等:jiangew = jiangeh;
  然后计算出列数:
  shu = kuan/jiangeh;//总宽度除以每个格子的宽度
  shu=parseInt(shu);//取整
  如果直接这样画出列数,会发现游戏区域的右侧会有一段的空白,因为取整之后会舍去小数点之后的位数,所以再计算数目会比原宽度小一些。这个时候就要做游戏画面的宽度补齐。
  var buqi1 = kuan-shu*jiangew;//检测剩余宽度
  if (buqi1>jiangew) //如果剩余宽度大于单个格子的宽度,则执行补齐
  {
  var shul = buqi1/jiangew;//检测剩余宽度能放下急列
  shul = parseInt(shul);//取整
  shu = shu+shul;//列数相加
  }
  这个时候基本上游戏画面就画好了。
  直接执行循环的画行和列就行了。
  for (var i=1;i<heng;i++) //循环画每一行,由于已经知道每一行的长宽,所以画起来很简单
  {
  cas.beginPath();
  cas.moveTo(0,i*jiangeh);
  cas.lineTo(kuan,i*jiangeh);
  cas.strokeStyle="green";
  cas.stroke();
  cas.closePath();
  }
  for (var i=1;i<shu;i++)//循环画每一列,由于已经知道每一行的长宽,所以画起来很简单
  {
  cas.beginPath();
  cas.moveTo(i*jiangew,0);
  cas.lineTo(i*jiangew,gao);
  cas.strokeStyle="green";
  cas.stroke();
  cas.closePath();
  }
  代码运行之后大概像下图一样:
  贪吃蛇游戏制作教程(二),canvas+js这里面有几个变量要设置成全局变量,因为游戏中很重要,比如多少行,多少列,游戏区域的高度和宽度,每个格子的高度和宽度。
  看完上图之后大家应该了解了,所谓贪吃蛇中的蛇,就是由一个个小格子组成的,每吃一个豆子,则蛇的身体增加一格。
  所以这里蛇可以用一个数组储存,我这里使用的一维数组,并没有使用二维数组,有兴趣的同学可以自己用二维数组试一下。

| | 2楼 | 打赏 | | 评论 |

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用JavaScript和Canvas开发游戏(三)

    使用JavaScript和Canvas开发游戏(三)

    2017-07-16 16:01

  • 提高canvas性能技巧

    提高canvas性能技巧

    2017-07-02 14:00

  • 如何使用HTML 5 Canvas创建太空游戏

    如何使用HTML 5 Canvas创建太空游戏

    2017-06-27 10:01

  • 25 超棒的 HTML5 Canvas 游戏

    25 超棒的 HTML5 Canvas 游戏

    2017-06-09 18:11

网友点评
n