[titanium]用webview結合html中的javaScript – 「スカイビュー」

LINEで送る
[`evernote` not found]

東京天空樹(東京スカイツリー)就要在今年的5月22日開放了!張小建說他們系為了這個活動決定要以東京天空樹來做為一次專題的題目,希望我可以幫忙一起來做一個app。正好我也想要做一個單純用titanium的webview的app,剛好就趁此機會來試一試。原本張小建取名叫做「ソラ大冒険」,但是後來又覺得在名字放漢字有點….不是那麼帥,最後就定名「スカイビュー」!

因為時間並不多,所以我就想說先上網找一個現成的小蜜蜂遊戲來改一改在放到webview就好。很順利的找到一個經典的Space Invaders遊戲。
本來長得是這個樣子:

整合到titanium後:



其中碰到第一個比較麻煩的是,iphone並沒有左右鍵跟空白建這種東西,所以,操作當然就必須另外想辦法。
所以在控制ソラカラちゃん(小空空)左右的地方加上:

	doMove : function(toX){
		if (this.moveLeft) {
			this.moveLeft.stop();
			this.moveLeft = false;
		}
		this.moveLeft = glow.anim.css(this.sprite, 0.1, {"left": {to:toX-20}}, {tween: glow.tweens.linear()}).start();
	}
	//原來這邊也可以監聽titanium所播的event
	Ti.App.addEventListener('goLeft', function(e){Game.getShip().doMoveLeft(e.toX);});

然後在titanium中加上:

	var sX = 0;
	function touchstart(event) {
  		sX = event.x;
  		Ti.App.fireEvent("goLeft",{toX:sX});
	}
	function touchmove(event) {
		Ti.App.fireEvent("goLeft",{toX:event.globalPoint.x});
	}

這樣一來,就可以把iphone的螢幕觸碰的event傳到html中的javascript中。
只不過,反應有點慢(尤其是4s之下的機種),或許像這樣的遊戲,還是要整個用titanium重寫會比較好吧。
スカイビュー

說點什麼吧!

8 個留言

當物件和物件碰撞時候 該用什麼函數去判斷?
就像是你設計的遊戲當他發射子彈時,去碰觸另一個物件時 他會判斷碰觸到而消失。
就如actionscript的 hitTestObject的函式
這網址有actionscript的 hitTestObject的函式 範例
http://www.actionscriptmoron.com/?p=1340

再次深深的感謝你

 

我是用offset().x跟offset().y判斷兩個物件的位置,在加上長與寬的判斷有沒有重疊!

 
 

如果像你說 調整遊戲的可視範圍 就不會 放大縮小了嗎!?
還有寫在 Javascript 是不是也不能用 DOM

謝謝你的回答!!!

不好意思 由於我是新手 可以說一下在哪裡調整可視範圍嗎?
謝謝你

如果是寫在titanium外的javescript就可以用DOM。反之則不行。
我所謂的調整可是範圍,就是把外面html的最大範圍(css的width就可以)設成320PX以下!
這樣應該就不會有放大縮小的問題了!

 
 
 

請問一下 你那個遊戲是 先在 javascript 弄好的嗎?
然後再 titanium 裡 用 webview 加進去嗎?
我有試過 把做好的 javascript+html 放在 webview
but javascript 效果沒出來 點兩下就放大縮小了
但是我看你的影片 點很多下 都沒有類似像放大縮小
可以給些指點嗎?
謝謝

沒錯!世在外面做好再整個放到titanium的webView中,
會放大縮小首先你可能要先調整遊戲的可視範圍!

 
 

留言板RSS 引用 URI

說點什麼吧!