在對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 ...