基于HTMl5实现简单的闪动效果

闲着想写一个小游戏玩玩,主要基于html5+div进行实现,游戏内容很简单,就是3个面会随机出现对应的船,不同的船需要停泊到对应的港口才能得分,用户可以点击船,绘制船的任意行进路线,船之间不同进行碰撞,碰撞则game over。现在已实现船的自动生成,及样条曲线的绘制(借助tween.js)。游戏引擎采用sprite.js.感觉这个还是挺适合我,既可以使用canvas,也可以使用div。canvas 主要实现动画效果,比如闪动,绘制得分、绘制路线等,div则主要是各个游戏对象的绘制及对应的动画效果。刚尝试测试了把canvas的闪动,感觉也还不错。主要测试当船靠近只有10个像素时,则进行闪动提示预警。当时想通过globalCompositeOperation来实现,画大圈然后再画个小圈,后来想想不行可以直接画个宽点的线就行,尝试了下,看效果也还不错。

代码如下:

 

 boaut1.blinkflag = true;
                boaut1.blinkTransparency = 1.0;
                boaut1.blink = function () {
                    if (this.blinkflag) {
                        effectLayerContext.save(); //
                        effectLayerContext.beginPath();
                        effectLayerContext.lineWidth = 6;
                        effectLayerContext.globalAlpha = this.blinkTransparency;
                        effectLayerContext.strokeStyle = "#DE0006";
                        effectLayerContext.arc(this.x+this.w/2, this.y+this.h/2, this.w / 2 + 3, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                        effectLayerContext.stroke();
                        effectLayerContext.closePath();
                        effectLayerContext.restore();
                        this.blinkTransparency -= 0.008;
                        if (this.blinkTransparency < 0) this.blinkTransparency = 1.0;

                    }
                };

截图:

本文固定链接: http://www.higis.org/2012/07/11/html5-blink/ | Hi,GIS


该日志由 H.J 于2012年07月11日发表在 Html5, 程序 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 基于HTMl5实现简单的闪动效果 | Hi,GIS
关键字: , , ,

基于HTMl5实现简单的闪动效果:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter