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

- URL: https://justfly.idv.tw/titanium%e7%94%a8webview%e7%b5%90%e5%90%88html%e4%b8%ad%e7%9a%84javascript-%e3%80%8c%e3%82%bd%e3%83%a9%e5%a4%a7%e5%86%92%e9%99%ba%e3%80%8d/
- 日期: 2012-01-26
- 分類: WEB&RIA
- 標籤: app, event, game, iphone, javascript, JustWorks, RIA, skytree, Titanium, アプリ

https://justfly.idv.tw/wp-content/uploads/2012/01/appicon.png[東京天空樹（東京スカイツリー）](http://www.tokyo-skytree.jp/)就要在今年的5月22日開放了！張小建說他們系為了這個活動決定要以東京天空樹來做為一次專題的題目，希望我可以幫忙一起來做一個app。正好我也想要做一個單純用titanium的webview的app，剛好就趁此機會來試一試。原本張小建取名叫做「ソラ大冒険」,但是後來又覺得在名字放漢字有點….不是那麼帥,最後就定名「[スカイビュー](http://itunes.apple.com/us/app/sukaibyu/id498170490)」！

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

本來長得是這個樣子：

https://justfly.idv.tw/wp-content/uploads/2012/01/invaders_screenshot.gif

整合到titanium後:

https://justfly.idv.tw/wp-content/uploads/2012/01/スクリーンショット-2012-01-26-14.43.27.pnghttps://justfly.idv.tw/wp-content/uploads/2012/01/スクリーンショット-2012-01-25-23.36.29.png

其中碰到第一個比較麻煩的是,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重寫會比較好吧。

https://justfly.idv.tw/wp-content/uploads/2012/01/AAAAAAAA1.png