html5網(wǎng)頁游戲-6小時編寫經(jīng)典坦克大戰(zhàn)筆記和公開課_第1頁
html5網(wǎng)頁游戲-6小時編寫經(jīng)典坦克大戰(zhàn)筆記和公開課_第2頁
html5網(wǎng)頁游戲-6小時編寫經(jīng)典坦克大戰(zhàn)筆記和公開課_第3頁
html5網(wǎng)頁游戲-6小時編寫經(jīng)典坦克大戰(zhàn)筆記和公開課_第4頁
html5網(wǎng)頁游戲-6小時編寫經(jīng)典坦克大戰(zhàn)筆記和公開課_第5頁
已閱讀5頁，還剩67頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領

文檔簡介

html5公開課的前提1.請大家的chrome瀏覽器/opera/ie9以上，才能和老師一起來玩chrome瀏覽器小小的要求希望大家堅持聽課，不要因為有一點聽不懂，就跑了.,javascript的面向?qū)ο蟮募夹g(shù)會提升一個檔次，同時你會掌握html5開發(fā)網(wǎng)絡的游戲的的技術(shù)?特別說明我把java版大戰(zhàn)--→html5的游戲主要還是學習編程1分鐘為什么要學習html5html5webhtml5html5的介紹和快速html5(html+css3+javascript一句話html5css3的強大的選擇器和動畫等功能+javascript很多新的函數(shù)，html5就很強大了.來我們快速體驗一下html5的強大功能(這是可以和老師一起編寫代碼flash,在canvas上畫出矩形代碼html5-1.html<!--html5<!DOCTYPE<canvasid="can1"width="500px"height="400px"style="border:1pxsolid<script//1.varcanvas=.ge//2.得到上下文環(huán)境.,cxtvar//cxt增加了<header><footer>，做到內(nèi)容和結(jié)構(gòu)分離，利用增加<>和<audio>，我們和音頻嵌入變得非常容易<!--html5<!DOCTYPE<src="[HTML5 ].(HTML5.Tutorial).-.1.-.Introduction.mp4"controls="controls"width="300px"height="200px"></>?1.這里的支持ogg格式和mp4…不是所有的格式支如果我把這個html5_2.html放在apahce下，可以直接看這個html5的離線功能 語言識別圖像識別html5游戲 html5支持強大的css3的各種功能(css3的選擇器)<!DOCTYPE<metacharset="utf-8"<title>Animations功能使用方法(以前必須使用flash現(xiàn)在使用css3動畫效果div}@-webkit-keyframesmycolor{0%{40%{70%{}100%}}div:hover}體驗一下css3<!--html5<!DOCTYPE<style<!--p1,p2.p3,p4,傳統(tǒng)做法是定兩個選擇器<p<p<p<phtml5增加了不少新，同時也廢棄了一些老html5的大的概念，現(xiàn)在我們可以考慮開始寫游戲是:一個功能一個功能實現(xiàn)，我實現(xiàn)一個，跟著實現(xiàn).html5的canvas畫布的坐標體系 <!--html5<!DOCTYPE<canvasid="can1"width="500px"height="400px"style="border:1pxsolid<scriptvar //2.得到上下 var()//提醒:strokefill//strokeRect(x,y,width,//fillStyle////六個參數(shù)arc(x,yradius,startAngleendAnglecounterclockwise)//1.imagevarimg1=new}vartext="PHP";cxt.font="30px華文";.(筆記和代碼發(fā)給大家現(xiàn)在正式分步驟，分功能來完成我們的html5-大戰(zhàn)(大家一起做（出的，不是用的）+javascript的oop設計.①首先畫出我們的Game1.html<!DOCTYPE<canvasid="Map"width="400px"height="300px"style="background-<scriptvarcxt=canvas1.getContext("2d");//我的herovarheroX=130;varheroY=230;//老師使用先死--->后活(初學者最好用這個方法10min大家完成到這里②讓可以上下左右移動js的變量范圍//vara=40;functiontest(){vara=0;}先補講一個知識點:javasccript處理機.代碼Demo1.html<!DOCTYPE<!--test<body<scriptvarcanvas1=.gevarcxt=canvas1.getContext("2d");varballX=30;varfunction//}//w->"向上d="右s="下a=>"左"http://說明:onkeydownfunctiontest(){//說明當按下鍵后--->event對象----->處理函數(shù)()case87://casecasecase}}讓可以任意移代碼:012方向3 - js<!DOCTYPE<body <h1>hmtl5-經(jīng)典的大戰(zhàn)<canvasid="Map"width="400px"height="300px"style="background-<scripttype="text/javascript" <scriptvarcanvas1=.geementById("varcxt=canvas1.getContext("2d");//我的varhero=new //說明當按下鍵后--->event對象----->處理函數(shù)()case87://case68:casecase}}//Hero

//x表示的橫坐標,y表示縱坐標,direct方function}}}}}functiondraw(case0://上case2:////老師使用先死--->后活(初學者最好用這個方法 .x+6, }elseif(.direct==2){}case1:case//老師使用先死--->后活(初學者最好用這個方法 .x+5, }elseif(.direct==3){//向左 }}}在編程中出現(xiàn)了兩個問題?(發(fā)現(xiàn)問題->分析問題->解決問題-毛錄當我的移動時，敵人的神秘<!DOCTYPE<body <!--把Games.js引入到本頁面--<scriptvarcxt=canvas1.getContext("2d");//我的varhero=new中

//定義敵人的(敵人的有多少?思路:是單個單個的定義，還是放在數(shù)varenemy=new//先死后活，定3個，后面我們把敵人的數(shù)量，作出變//0->上1->右2->3->左for(vari=0;i<3;i++){var =newEnemy }functionflash for(var}} //說明當按下鍵后--->event對象----->處理函數(shù)()case87://case68:casecase}//觸發(fā)這個函數(shù)flashMap();}varheroColor=newArray("#BA9658","#FEF26E");varenmeyColor=newArray("#00A2B5","#00FEFE");//這是一個function}}}}}//Hero//x表示的橫坐標,y表示縱坐標,direct方function}//定義一個EnemyfunctionEnemy//也通過對象冒充，來繼承}functiondraw(case0://上case2:////老師使用先死--->后活(初學者最好用這個方法 .x+6, }elseif(.direct==2){}case1:case//老師使用先死--->后活(初學者最好用這個方法 .x+5, }elseif(.direct==3){//向}}}<!DOCTYPE<script//AnimalfunctionAnimal(name,age){}}function//Animalthis.hsp}vardog1=newDog("小狗",20);大家先思考(5分鐘思考),當玩家按下J鍵后，就可以發(fā)出一顆.(休息我思想，不管是敵人的，還是我的，都是區(qū)，因此我們可以定為全局變量,因為我們是OOP,所以也是一個對象.J要畫出自己的->寫了一個函數(shù)drawHeroBullet(思想)[自己回去把，這個大戰(zhàn)寫3遍后，思想就活]在哪里調(diào)用.,刷新區(qū)的函數(shù)調(diào)考慮的位置(結(jié)合hero的位置來編寫坐標怎樣自動的變換,思想是我們可以定時去修改的坐bulletrun函數(shù)顆。思考:原因是，你只有一個變量，因此我們可以考慮吧我們的放入數(shù)組管理.<!DOCTYPE<body <canvasid="Map"width="400px"height="300px"style="background-<spanid="aa">數(shù)據(jù)<!--把Games.js引入到本頁面--<scriptvarcxt=canvas1.getContext("2d");//我的varhero=new//定義敵人的(敵人的有多少?思路:是單個單個的定義，還是放在數(shù)組中?)varenemy=newArray();//先死后活，定3個，后面我們把敵人的數(shù)量，作出變//0->上1->右2->3->左for(vari=0;i<3;i++){var =newEnemy }functionflash//飛效果是怎么出現(xiàn)的?[答：首先我們應該每隔一定時間(setInterval)就去刷for(var}} //說明當按下鍵后--->event對象----->處理函數(shù)()case87://case68:casecasecase}//觸發(fā)這個函數(shù)flashMap();}varheroColor=newArray("#BA9658","#FEF26E");varenmeyColor=newArray("#00A2B5","#00FEFE");functionBullet(x,y,direct,speed){this.run=functionrun(){casecasecasecase}}

.geementById("aa").innerText="x="+this.x+"}}//這是一個function}}}}}//Hero//x表示的橫坐標,y表示縱坐標,direct方function//創(chuàng)建,的位置應該和hero有關(guān)系，并且和hero的方向有關(guān)//this.xhero的橫坐標,這里我們簡單的處理(細化case0:caseheroBullet=newBullet(this.x+30,this.y+9,this.direct,1);caseheroBullet=newBullet(this.x+9,this.y+30,this.direct,1);case3:heroBullet=newBullet(this.x,this.y+9,this.direct,1);}較大

//把這個對象放入到數(shù)組中->push函//調(diào)用我們的run,50是老師多次測試得到的一個結(jié)論.,這里技術(shù)難度//就算你工作過1-2年，你也未必想到,下面啟動方式，每個的定時器//把這個timer賦給這個(js對象是傳遞!)}}//定義一個EnemyfunctionEnemy//也通過對象冒充，來繼承}function

for(vari=0;i<heroBullets.length;i++){varheroBullet=heroBullets[i];}}}functiondraw(case0://上case2:////老師使用先死--->后活(初學者最好用這個方法 .x+6, }elseif(.direct==2){}case1:case//老師使用先死--->后活(初學者最好用這個方法 .x+5, }elseif(.direct==3){//向}}}大家代碼寫的，我寫的這個地方。然后明天8:00繼續(xù).(一會發(fā)代碼),晚安,！，完成功能:當我的發(fā)出的敵人的時候敵人的就了(后面再， 怎么判斷，我的，碰到了敵人的我這里寫一個函數(shù)isHitEnemy()專門判斷，我的是否敵for(取出每顆){for(取出每個敵人的//那當前的和每個去判}}}當我們的打掉一個后，會繼續(xù)跑，所以我們需要把這個的生命也設為，出現(xiàn)問題:但是成了一顆.(原因是雖然沒有畫了但是任然在，出現(xiàn)問題:敵人的沒有畫出，但是還在，所以敵人清除.階段代碼varheroColor=newArray("#BA9658","#FEF26E");varenmeyColor=newArray("#00A2B5","#00FEFE");functionBullet(x,y,direct,speed){this.run=functionrun(){//不前進，有兩個邏輯，1.碰到邊界，2.碰到敵人.casecasecasecase}}

.geementById("aa").innerText="x="+this.x+"}}//這是一個function}}}}}//Hero//x表示的橫坐標,y表示縱坐標,direct方function//創(chuàng)建,的位置應該和hero有關(guān)系，并且和hero的方向有關(guān)//this.xhero的橫坐標,這里我們簡單的處理(細化case0:caseheroBullet=newBullet(this.x+30,this.y+9,this.direct,1);caseheroBullet=newBullet(this.x+9,this.y+30,this.direct,1);case3:heroBullet=newBullet(this.x,this.y+9,this.direct,1);}較大

//把這個對象放入到數(shù)組中->push函//調(diào)用我們的run,50是老師多次測試得到的一個結(jié)論.,這里技術(shù)難度//就算你工作過1-2年，你也未必想到,下面啟動方式，每個的定時器//把這個timer賦給這個(js對象是傳遞!)}}//定義一個EnemyfunctionEnemy//也通過對象冒充，來繼承}functionfor(var

var}}}functiondraw(){if(case0://上case2:////老師使用先死--->后活(初學者最好用這個方法 .x+6, }elseif(.direct==2){}case1:case//老師使用先死--->后活(初學者最好用這個方法 .x+5, }elseif(.direct==3){//向}}}}for(varvarheroBullet=heroBullets[i];if(heroBullet.isLive){//是活的，才去判斷varenemy=enemy

敵人的條件是什么?很多思路,老師 case0://敵 向case2://敵人向//把isLive設為false,表示 }case1://敵人向case3://敵人向//把isLive設為false,表}}}}}}varheroColor=newArray("#BA9658","#FEF26E");varenmeyColor=newArray("#00A2B5","#00FEFE");functionBullet(x,y,direct,speed){this.run=functionrun(){//不前進，有兩個邏輯，1.碰到邊界，2.碰到敵人.casecasecasecase}}

.geementById("aa").innerText="x="+this.x+"}}//這是一個function}}}}}//Hero//x表示的橫坐標,y表示縱坐標,direct方function//創(chuàng)建,的位置應該和hero有關(guān)系，并且和hero的方向有關(guān)//this.xhero的橫坐標,這里我們簡單的處理(細化case0:caseheroBullet=newBullet(this.x+30,this.y+9,this.direct,1);caseheroBullet=newBullet(this.x+9,this.y+30,this.direct,1);case3:heroBullet=newBullet(this.x,this.y+9,this.direct,1);}較大

//把這個對象放入到數(shù)組中->push函//調(diào)用我們的run,50是老師多次測試得到的一個結(jié)論.,這里技術(shù)難度//就算你工作過1-2年，你也未必想到,下面啟動方式，每個的定時器//把這個timer賦給這個(js對象是傳遞!)}}//定義一個EnemyfunctionEnemy//也通過對象冒充，來繼承}

functionfor(vari=0;i<heroBullets.length;i++){varheroBullet=heroBullets[i];}}}functiondraw(){if(case0://上case2:////老師使用先死--->后活(初學者最好用這個方法 .x+6, }elseif(.direct==2){}case1:case//老師使用先死--->后活(初學者最好用這個方法 .x+5, }elseif(.direct==3){//向}}}}for(varvarheroBullet=heroBullets[i];if(heroBullet.isLive){//是活的，才去判斷varenemy=enemy

敵人的條件是什么?很多思路,老師 case0://敵 向case2://敵人向//把isLive設為false,表示 }case1://敵人向case3://敵人向//把isLive設為false,表}}}}}}實現(xiàn)功能:當我們的敵人時，出現(xiàn)效果(畫出效果思路我準備了3張，當切換時，就會產(chǎn)生效果我認為，也是對象.,定義一個Bomb思考:對象在什么時候創(chuàng)建合理->當碰到了敵人的思考:因為會很多，因此我們把這個作成數(shù)同一秒鐘，會出現(xiàn)多個點，所以，我需要遍歷這個數(shù)組,把所有的都畫出來.)思考：這個函數(shù)在什么地方調(diào)用?flash<!DOCTYPE<body <h1>hmtl5-經(jīng)典的大戰(zhàn)<canvasid="Map"width="400px"height="300px"style="background-<spanid="aa">數(shù)據(jù) <scriptvarcxt=canvas1.getContext("2d");//我的varhero=new//定義敵人的(敵人的有多少?思路:是單個單個的定義，還是放在數(shù)組中?)varenemy =newArray(); varbombs=new//先死后活，定3個，后面我們把敵人的數(shù)量，作出變//0->上1->右2->3->左for(vari=0;i<3;i++){var =newEnemy }functionflash//飛效果是怎么出現(xiàn)的?[答：首先我們應該每隔一定時間(setInterval)就去刷for(var}} //說明當按下鍵后--->event對象----->處理函數(shù)()case87://case68:casecasecase}//觸發(fā)這個函數(shù)flashMap();}varheroColor=newArray("#BA9658","#FEF26E");varenmeyColor=newArray("#00A2B5","#00FEFE");functionBomb(x,y){}}}functionBullet(x,y,direct,speed){this.run=functionrun(){//不前進，有兩個邏輯，1.碰到邊界，2.碰到敵人.casecasecasecase}}

.geementById("aa").innerText="x="+this.x+"}}//這是一個function}}}}}//Hero//x表示的橫坐標,y表示縱坐標,direct方function//創(chuàng)建,的位置應該和hero有關(guān)系，并且和hero的方向有關(guān)//this.xhero的橫坐標,這里我們簡單的處理(細化case0:caseheroBullet=newBullet(this.x+30,this.y+9,this.direct,1);caseheroBullet=newBullet(this.x+9,this.y+30,this.direct,1);case3:heroBullet=newBullet(this.x,this.y+9,this.direct,1);}較大

//把這個對象放入到數(shù)組中->push函//調(diào)用我們的run,50是老師多次測試得到的一個結(jié)論.,這里技術(shù)難度//就算你工作過1-2年，你也未必想到,下面啟動方式，每個的定時器//把這個timer賦給這個(js對象是傳遞!)}}//定義一個EnemyfunctionEnemy//也通過對象冒充，來繼承}

functionfor(vari=0;i<heroBullets.length;i++){varheroBullet=heroBullets[i];}}}functiondraw(){if(case0://上case2:////老師使用先死--->后活(初學者最好用這個方法 .x+6, }elseif(.direct==2){}case1:case//老師使用先死--->后活(初學者最好用這個方法 .x+5, }elseif(.direct==3){//向}}}}for(varvarheroBullet=heroBullets[i];if(heroBullet.isLive){//是活的，才去判斷varenemy=enemy

敵人的條件是什么?很多思路,老師 case0://敵 向case2://敵人向//把isLive設為false,表示

}

case1://敵人向case3://敵人向//把isLive設為false,表

}

}}}}}functionfor(varvarbomb=bombs[i]; varimg1=newImage();varx=bomb.x;var}}elsevarimg2=newImage();varx=bomb.x;vary=bomb.y;}}elsevarimg3=newImage();varx=bomb.x;vary=bomb.y;}}}}}}實現(xiàn)功能:敵人的可以移動，同時控制不出界思考敵人類就應該有run函如何控制不要出界階段代碼<!DOCTYPE<body <canvasid="Map"width="400px"height="300px"style="background-<spanid="aa">數(shù)據(jù)<!--把Games.js引入到本頁面--<scriptvarcxt=canvas1.getContext("2d");//我的varhero=newvarheroBullets=new//定義敵人的(敵人的有多少?思路:是單個單個的定義，還是放在數(shù)組中?)varenemy =newArray(); varbombs=new//先死后活，定3個，后面我們把敵人的數(shù)量，作出變//0->上1->右2->3->左for(vari=0;i<3;i++){var =newEnemy }functionflash//飛效果是怎么出現(xiàn)的?[答：首先我們應該每隔一定時間(setInterval)就去刷for(var}} //說明當按下鍵后--->event對象----->處理函數(shù)()case87://case68:casecasecase}//觸發(fā)這個函數(shù)flashMap();}varheroColor=newArray("#BA9658","#FEF26E");varenmeyColor=newArray("#00A2B5","#00FEFE");functionBomb(x,y){}}}functionBullet(x,y,direct,speed){this.run=functionrun(){//不前進，有兩個邏輯，1.碰到邊界，2.碰到敵人.casecasecase

case}}

.geementById("aa").innerText="x="+this.x+"}}//這是一個function}}}}}//Hero//x表示的橫坐標,y表示縱坐標,direct方function//創(chuàng)建,的位置應該和hero有關(guān)系，并且和hero的方向有關(guān)//this.xhero的橫坐標,這里我們簡單的處理(細化case0:caseheroBullet=newBullet(this.x+30,this.y+9,this.direct,1);caseheroBullet=newBullet(this.x+9,this.y+30,this.direct,1);case3:heroBullet=newBullet(

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論