Html5小游戏之小小塔防

很久没有更新博客了,最近比较忙,而且也没什么idea!

最近看了一个坦克大战的html5源码,发觉颇有收获。所以抽空写了一个相对于以前的小游戏复杂些的塔防游戏!也算是一种对于自身的突破!

虽然是demo版,也不能太丑,所以我还是找了一些素材图片,找素材图片还真麻烦!

 

本次用到了5个canvas画布标签!

map:用于绘制背景地图,基本上画上一次就不会重画。

main:用于绘制敌人与子弹,因为这两个基本上会一直变,需要一直重画。

tower:用于绘制塔,塔基本上画上去后,不会动,最多也是会给擦出。

select:用于绘制塔的选择区域,攻击范围等,会根据用户的操作而进行重画画布。

info:用于绘制游戏的基本数据信息,会跟据金钱分数关卡等数据而变化。

 

该游戏支持ff,chrome,ie9,safari。ie6,7,8就不支持了,你懂,其余的没测试过,理论上支持html5的浏览器都能用。

 

说明:每种塔都可以升级到3级,升级的价格与本身建造相同,卖掉的话就是总额的一半。

  第一种塔:升级到3级,有小偷功能,每攻击一次会偷取1块钱。

  第二种塔:减速攻击,3级时可以同时减速两个。

  第三种塔:多重攻击。攻击多个目标。

  第四种塔:穿刺攻击,攻击一条线上,攻击力最高。

  第五种塔:秒杀攻击,有一定几率把敌人秒杀。

 

选择地图地图一地图二,然后按开始游戏!

 

 bug肯定也会有。。源码有注释,希望大家能看得懂,也希望能给那些跟我一样刚学习html5的人一点点帮助!有不懂,有bug,都可以直接私信,我很乐意回答!

 

这是源码-》完整源码

转载于:https://www.cnblogs.com/floyd/archive/2011/06/18/2084289.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值