html5網(wǎng)頁游戲-坦克大戰(zhàn)

北京傳智播客教育HTML5網(wǎng)頁游戲-坦克大戰(zhàn)講師：韓順平主講韓順平介紹朋友們玩過HTML5版本的坦克大戰(zhàn)嗎?HTML5橫空出世，開始了RIA新的革命，直接導(dǎo)致Flex“易主”，Silverlight被“雪藏”，目前絕大多數(shù)智能手機(jī)瀏覽器均支持HTML5，基于HTML5的網(wǎng)站也如雨后春筍般出現(xiàn)。帶大家完成HTML5版的坦克大戰(zhàn),融入了大量的OOP編程思想。學(xué)習(xí)完后，你完全有能力編寫出屬于自己的個(gè)性化的游戲(比如貪吃蛇、俄羅斯方塊、采蘑菇等)。您需要有:html4javascriptb/s開發(fā)的基礎(chǔ)|簡(jiǎn)單演示坦克大戰(zhàn)主講韓順平學(xué)習(xí)HTML5的理由①工作需要②HTML5將成為未來WEB技術(shù)標(biāo)準(zhǔn)主講韓順平HTML5發(fā)展簡(jiǎn)史HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來，成立了一個(gè)叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本應(yīng)用技術(shù)工作組-WHATWG）的組織。WHATWG致力于Web表單和應(yīng)用程序，而W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）專注于XHTML2.0。在2006年，雙方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的HTML。HTML5[1]草案的前身名為WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5支持。主講韓順平HTML5優(yōu)秀的學(xué)習(xí)網(wǎng)站

主講韓順平HTML5是什么和快速體驗(yàn)案例HTML5約等于HTML+CSS3+JAVASCRIPTAPI支持HTML5的瀏覽器有:目前Firefox、Chrom、Opera、Safari（版本4以上）、InternetExplorer9。你必須使用這些瀏覽器，才能瀏覽HTML5頁面主講韓順平HTML5是什么和快速體驗(yàn)案例支HTML5相對(duì)于前幾版新增功能:1.增加<canvas>標(biāo)簽2.增加<header>和<footer>標(biāo)簽3.增加音頻和視頻嵌入功能<video>和<audio>4.增加離線存儲(chǔ)功能.主講韓順平HTML5是什么和快速體驗(yàn)案例支HTML5相對(duì)于前幾版新增功能:5.高級(jí)應(yīng)用體驗(yàn)案例語言識(shí)別:圖像識(shí)別:html5游戲:主講韓順平HTML5是什么和快速體驗(yàn)案例支HTML5相對(duì)于前幾版新增功能:5.支持更加強(qiáng)大的css3(參考頁面)主講韓順平HTML5是什么和快速體驗(yàn)案例支HTML5相對(duì)于前幾版新增功能:5.支持更加強(qiáng)大的css3主講韓順平HTML5是什么和快速體驗(yàn)案例支HTML5相對(duì)于前幾版新增功能:6.增加拖放，跨文檔消息，瀏覽器歷史管理等7.增強(qiáng)各大瀏覽器的兼容性.主講韓順平HTML5不在支持的標(biāo)簽HTML5在引入新標(biāo)簽的同時(shí)，廢棄了不少常見元素，大抵分為如下幾類。第一類：表現(xiàn)性元素basefont/big/center/font/s/strike/tt/u建議用語義正確的元素代替他們，并使用CSS來確保渲染后的效果第二類：框架類元素因框架有很多可用性及可訪問性問題，HTML5規(guī)范將以下元素移除。frame/frameset/noframes，但html5支持iframe。主講韓順平HTML5不在支持的標(biāo)簽第三類:屬性類很多表現(xiàn)性的屬性也被新規(guī)范移除，如下：align/body標(biāo)簽上的link、vlink、alink、text屬性/bgcolor/height和widthiframe元素上的scrolling屬性/valign/hspace和vspacetable標(biāo)簽上的cellpadding、cellspacing和border屬性header標(biāo)簽上的profile屬性img和iframe元素的longdesc屬性第四類：其他abbr取代acronym（用于表示縮寫）object取代了appletul取代了dir主講韓順平HTML5坦克大戰(zhàn)游戲■

游戲演示普通版改進(jìn)版改進(jìn)版豪華版主講韓順平HTML5坦克大戰(zhàn)游戲■

為什么選擇這個(gè)項(xiàng)目 ①好玩 ②涉及到html和js多方面的技術(shù)

1.javascript面向?qū)ο缶幊?.界面編程3.繪圖技術(shù)

4.多個(gè)獨(dú)立定時(shí)器協(xié)同工作

(java:多線程) 5.網(wǎng)頁游戲的編程思想 ③充分體驗(yàn)html+jsapis的強(qiáng)大功能主講韓順平HTML5坦克大戰(zhàn)游戲■

如何講解這個(gè)項(xiàng)目 我們授課是基于案例教學(xué)，項(xiàng)目驅(qū)動(dòng)的方式來教授的，因此只要你有一定的HTML+Javascript基礎(chǔ)是完全可以聽懂的，最核心的部分我都會(huì)帶大家一起完成。(我做一個(gè)功能，大家跟著做一個(gè)功能,增強(qiáng)互動(dòng)性)記住一點(diǎn):成為一個(gè)編程專家的秘訣就是：

思考------編程-----思考------編程坦克大戰(zhàn)是從小到大的過程，

從1.0到1.1….最后版，讓大家輕松的 能自己寫出坦克大戰(zhàn)，同時(shí)掌握編寫HTML5游戲的核心技術(shù)。主講韓順平HTML5-canvas畫布坐標(biāo)體系■

坐標(biāo)體系-介紹 下圖說明了canvas畫布坐標(biāo)系。坐標(biāo)原點(diǎn)位于左上角，以像素為單位。像素是計(jì)算機(jī)屏幕上最小的顯示單位。在canvas畫布坐標(biāo)系中,第一個(gè)是x坐標(biāo),表示當(dāng)前位置為水平方向，距離坐標(biāo)原點(diǎn)x個(gè)像素；第二個(gè)是y坐標(biāo)，表示當(dāng)前位置為垂直方向，距離坐標(biāo)原點(diǎn)y個(gè)像素。主講韓順平HTML5-canvas畫布坐標(biāo)體系■

問一個(gè)問題? 繪圖還必須要搞清一個(gè)非常重要的概念-像素一個(gè)像素等于多少厘米? 主講韓順平HTML5-canvas畫布坐標(biāo)體系■坐標(biāo)體系-像素 計(jì)算機(jī)在屏幕上顯示的內(nèi)容都是由屏幕上的每 一個(gè)像素組成的。例如，計(jì)算機(jī)顯示器的分辨率 是800×600，表示計(jì)算機(jī)屏幕上的每一行由800

個(gè)點(diǎn)組成，共有600行，整個(gè)計(jì)算機(jī)屏幕共有

480000個(gè)像素。現(xiàn)在的計(jì)算機(jī)可以支持更高的分辨率，也就是說，屏幕上可以顯示更多的像素因此,像素是一個(gè)密度單位,而厘米是長(zhǎng)度單位,兩者無法比較主講韓順平HTML5繪圖-快速入門■快速入門我們熟悉一下繪圖的各個(gè)函數(shù),這些函數(shù)對(duì)開發(fā)游戲尤為重要! 主講韓順平HTML5繪圖-CanvasRenderingContext2D對(duì)象■

CanvasRenderingContext2D對(duì)象 該對(duì)象是指向2d渲染環(huán)境的引用，你可以理解通過這個(gè)對(duì)象提供的方法,可以在畫布上畫各種圖形。 ①繪制當(dāng)前路徑邊框stroke()填充當(dāng)前路徑fill();說明路徑的概念主講韓順平HTML5繪圖-CanvasRenderingContext2D對(duì)象■

CanvasRenderingContext2D對(duì)象

②畫填充矩形fillRect(x,y,weight,height)；

畫出矩形邊框

strokeRect(x,y,width,height)

主講韓順平HTML5繪圖-CanvasRenderingContext2D對(duì)象■

CanvasRenderingContext2D對(duì)象 ③畫圓形邊框和填充圓形arc()

主講韓順平HTML5繪圖-CanvasRenderingContext2D對(duì)象■

CanvasRenderingContext2D對(duì)象 ④畫圖片drawImage(Image,x,y,width,height);主講韓順平HTML5繪圖-CanvasRenderingContext2D對(duì)象■

CanvasRenderingContext2D對(duì)象

⑤畫字符串fillText(str,x,y)

設(shè)置字體，字體顏色，大小cxt.fillStyle=“”cxt.font=“大小字體”

主講韓順平HTML5坦克大戰(zhàn)-實(shí)戰(zhàn)繪圖小練習(xí) 坦克大戰(zhàn)游戲中，我們會(huì)用到坦克，現(xiàn)在我們就利用html5+jsapis繪圖技術(shù)來畫出一個(gè)小坦克,完成我們的坦克大戰(zhàn)游戲1.0版本!(TankGame1.html) 主講韓順平HTML5坦克大戰(zhàn)-實(shí)戰(zhàn)繪圖小作業(yè) 請(qǐng)大家運(yùn)用html5繪圖技術(shù)充分發(fā)揮你的想象，畫出如下圖形: 1.蛤蟆

2.王八

3.小老鼠

主講韓順平Javascript事件處理機(jī)制■

事件處理機(jī)制-一個(gè)問題

請(qǐng)大家看一個(gè)小程序。(Demo1.html)

怎樣讓小球受到鍵盤的控制,上下左右移動(dòng).事件源事件監(jiān)聽者事件處理方法事件對(duì)象(event)主講韓順平HTML5坦克大戰(zhàn)-實(shí)戰(zhàn)■

逐步完善坦克大戰(zhàn)游戲(1)用OOP編程設(shè)計(jì)，實(shí)現(xiàn)讓你的坦克可以通過按鍵控制w、d、s、a鍵上右下左移動(dòng)[tankGame2.html]主講韓順平HTML5坦克大戰(zhàn)-實(shí)戰(zhàn)■

逐步完善坦克大戰(zhàn)游戲(2)畫出三個(gè)敵人的坦克,并解決刷新問題![tankGame3.html]主講韓順平HTML5坦克大戰(zhàn)-實(shí)戰(zhàn)■

逐步完善坦克大戰(zhàn)游戲(3)自己的坦克可以發(fā)送子彈,只能發(fā)送一顆[tankGame4.html]主講韓順平HTML5坦克大戰(zhàn)-實(shí)戰(zhàn)■

逐步完善坦克大戰(zhàn)游戲(4)自己的坦克可以發(fā)送子彈,可以連發(fā)100顆[tankGame5.html]主講韓順平HTML5坦克大戰(zhàn)-實(shí)戰(zhàn)■

逐步完善坦克大戰(zhàn)游戲(5)自己的子彈擊中敵人坦克時(shí)，坦克消失.[tankGame6.html]主講韓順平HT