blink on html5

Idle to write the play of a game, mainly based on the html5 + div, the game is very simple, that is, 3 surface corresponding to the ship will appear randomly different boat moored to the port in order to score, the user can click on the ship, drawingany route of the ship, the ship collision, collision, game over. The ship’s automatic generation, and spline curve drawing (through tween.js). The game engine to adopt sprite.js. Feel this is still quite suitable for me, you can either use the canvas, you can use div. the main canvas to achieve animation effects, such as flashing, drawing the score to draw the line, div drawing of the various game objects and the corresponding animation. Just try to test to the canvas flashing, I feel pretty good. The major test when the ship is close to 10 pixels, then blinks to warn of the warning. Thought by globalCompositeOperation to draw a large circle and then draw a small circle, then think about not directly draw the line of widest point on the line, tried to see results is also good.

code:

 

 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;

                    }
                };

pieture:

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


该日志由 H.J 于2012年07月11日发表在 Html5, Program 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: blink on html5 | Hi,GIS
关键字: , , ,

blink on html5:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter