HTML5實戰之《瘋狂人參果》

2021-07-04 03:01:11 字數 2752 閱讀 2739

一轉眼，在這一行業也有段時間了，從開始的懵懵懂懂，到現在看到乙個專案，腦子裡就會自然而然地會構思其中的功能怎麼去實現，我想我是進步了，心裡很高興。

其實這個專案也很簡單，在遊戲中主要實現了場景裡的樹生長出桃子(我稱它為仙桃

這裡主要介紹一下按鈕的動畫實現，這在平台的動畫裡可以設定。如圖：

只要設定好水平和垂直的縮放變化 就可以了。然後是遊戲介面，遊戲介面因為要有個遊戲提示，所以我選擇了顏色塊，把它填充黑色，透明度為0.5就可以了，當然這個顏色塊最後再新增也不遲。場景裡仙桃和人參果的生成範圍要在樹的上方，所以我放了個顏色塊作範圍，猴兒的移動主要寫了指標按下事件，當指標的點在螢幕左邊的時候就給猴兒乙個向左的速度，點在右邊螢幕的時候就給猴兒乙個向右的速度，當然還要考慮到達兩邊的時候要使猴兒停止，可以在它的移動事件裡設定當它到達兩邊的時候設定速度為0.計時器因為數字有「：」號，所以要對分秒顯示進行設定，我這裡只有30秒。下面是遊戲介面的參考**：

視窗開啟前事件：

this.resetgame();


var win = this.getwindow();


var monkey= win.find("猴子");


var underprop = win.find("underprop");


win.scorebase = 1;


win.iphoneflag = 1;//用於下方是否碰到


monkey.setposition(win.w / 2 - monkey.w / 2,underprop.y - monkey.h);


win.times = 30;


win.score = 0;


win.find("ui-timer").stop();


win.find("ui-timer-general").stop();


var colorstone = win.find("area");


//取點函式


win.preparepoint = function ();


return getpoint;


};//四邊形的四個頂點


win.leftuppoint = ;


win.rightuppoint = ;


win.leftdownpoint = ;


win.rightdownpoint = ;
指標按下事件：

var win = this.getwindow();


if(this.targetshape && this.targetshape.name.indexof("提示頁面") === 0)


var monkey= win.find("猴子");


if(point.x > win.w/2 && person.x < (win.w - person.w))


else if(point.x <= win.w/2 && monkey.x > 0)
指標鬆開事件：

var win = this.getwindow();


var monkey = win.find("猴子");


monkey.setv(0);
定時器事件(生成桃子和人參果)： 

var win = this.getwindow();


var gainpoint = win.preparepoint();


function fallintsomething(sth));


}var item = math.random() > 0.5 ? "人參果" : "桃子";


fallintsomething(item);
定時器事件(計時) 

var win = this.getwindow();


win.times--;


var timer = win.find("倒計時計分板/剩餘時間");


var min = math.floor(win.times / 60);


var sec = win.times % 60;


var minstr = (min >= 10 ? min : '0' + min);


var secstr = (sec >= 10 ? sec : '0' + sec);


timer.setvalue(minstr + ":" + secstr);


if(win.times === 0);


win.openwindow("結束介面", 


活動視窗因為要做出彈跳的效果出來，所以需要動畫去實現，實現方法類似開始按鈕的動畫操作。


然後我們做好結束介面就大概完成了。當然最後別忘了去除錯螢幕適應性的問題，根據各控制項在視窗的位置調整x,y的位置屬性和寬度高度的屬性。然後別忘了我們的開發神器tangide


最後，show一下遊戲成果：
 
瘋狂html5講義（一） HTML5簡介
1.在html發展歷史中，最廣為人知的是html3.2和html4.01.2.將html與xml的長處加以結合,從而得到xhtml,xhtml是更嚴格 更純淨的html 3.w3c組織使用dtd document type definition，文件型別定義 來定義html和xhtml的語義約束，包...


HTML5 瘋狂的表單
第一 新的input type 我們熟悉的原來表單1.0的input type有 文字輸入框 密碼輸入框 核取方塊單選框 檔案選擇框 隱藏框提交按鈕框 重置按鈕框 普通按鈕框 表單2.0中新出的10個input type屬性有 以下詳細介紹各自的含義和功能 email 在表單提交時提供了格式驗證功能...


《HTML5實戰》 導讀
前言 寫一本能夠較為全面介紹html5內容的書遠比想象更為困難。首先，瀏覽器和規範本身一直在改變，似乎無論半年內寫了多少東西，瀏覽器總會對乙個實現加以調整，從而讓幾章的內容都失效。這就會讓整個寫作過程反覆，很難再為章節確定最終版本。另外，我們還看到許多關於html5的書僅僅上市幾個月後，內容就完全過...