H TML5 之 (6)下雨效果

2021-09-06 16:43:51 字數 1491 閱讀 4750

在對html5進行研究之後,有了一點想法,思考出遊戲其實感覺就是四個步驟

1.建立乙個你需要的物件,賦予屬性(一些影響方法的屬性),方法(運動,叫....)

2.例項化這個物件,讓它成為乙個或者多個個體

3.畫圖方法,畫出你所需要畫出的物件的外形

4.呼叫畫圖方法,將例項化後的物件傳進去,乙個物件例項化後的外形就出來了,剩下的就是思考該在合適顯示這個外形,

就達到遊戲的基本思想了,

doctype html

>

<

html

>

<

head

>

<

title

>shot

title

>

<

meta

charset

="gbk"

/>

<

link

type

="text/css"

href

="canvas.css"

rel="stylesheet"

/>

head

>

<

body

onkeydown

="getcommand();"

>

<

canvas

id="canvas"

width

="880"

height

="400"

style

="background:black"

>

您的瀏覽器不支援眮e苔吹交?

canvas

>

body

>

<

script

>

varcanvas

=document.getelementbyid(

"canvas");

varcxt

=canvas.getcontext("2d

"); //

建立乙個物件

function

shot(x,y,speed)

this

.y +=

speed;

}

} //例項化物件,放入陣列中

varshots

=new

array();

for(vari =

1;i<

50;i++)

//畫子彈的方法

function

drawshot(tank)

//呼叫子彈的畫出的方法

function

run()

} window.setinterval(

"run()",

100);

script

>

html

>

html5實現刮刮卡效果

通過canvas實現的可刮塗層效果.修改img.src時塗層也會自動適應新的尺寸.修改layer函式可更改塗層樣式.塗層 可刮效果 以下是html源 已增加移動裝置支援 12 3456 78910 1112 1314 1516 1718 1920 2122 2324 2526 2728 2930 3...

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

HTML5 陪你去看流星雨

在上一篇的基礎上 1 新增流星雨物件 流星 var meteorrain function 獲取隨機顏色函式 this.getrandomcolor function 重新計算流星座標的函式 this.countpos function 獲取隨機座標的函式 this.getpos function ...