和小莎一起做遊戲

about me

kidwm

喜歡研究網頁技術

在社群裡作些什麼?

最近的新稱號

那個教小莎打牌的人

小莎的遊樂園!

http://moztw.org/foxmosa/

BrowserPairs

小莎染上惡習的由來

Firefox 10開始支援CSS3 Transform 3D

從只支援Webkit的原作開始改造

配合社群成員的協助

建造細節完全解析

只有淚水沒有歡笑

歡笑是看別人玩才有的

逐項解說

CSS Background

http://lea.verou.me/css3patterns/#tablecloth

background-size: 4px 4px

FullScreen API

https://developer.mozilla.org/en/
DOM/Using_full-screen_mode

先檢查支援


if (typeof document.cancelFullScreen != 'undefined' ||
		typeof document.mozCancelFullScreen 
			!= 'undefined' ||
		typeof document.webkitCancelFullScreen 
			!= 'undefined') {
		uiFullscreen.click(toggleFullscreen);
		uiFullscreen.addClass('support');
	}
    

再設定動作


function enterFullscreen(docElm) {
// cancelFullscreen is the same
	if (docElm.requestFullscreen) {
	    docElm.requestFullscreen();
	}
	else if (docElm.mozRequestFullScreen) {
	    docElm.mozRequestFullScreen();
	}
	else if (docElm.webkitRequestFullScreen) {
	    docElm.webkitRequestFullScreen();
	}
}
    

切換全螢幕


function toggleFullscreen() {
if (
	(document.fullScreenElement && 
      document.fullScreenElement !== null) ||
	(!document.mozFullScreen && 
      !document.webkitIsFullScreen)) {
		enterFullscreen(document.documentElement);
	} else {
		cancelFullscreen();
	}
}
    

:full-screen

CSS LightBox

:target

CSS 3D Transform

transform: rotate3d(0,1,0,-180deg);

PxLoader

http://thinkpixellab.com/pxloader/

QRCode

https://google-developers.appspot.com/
chart/infographics/docs/qr_codes

Offline Cache

<html manifest="./site.appcache">

Another Story

勞動服務

http://bit.ly/starpusher

Star Pusher

Porting from Pygame

to HTML5 Canvas

繪圖的效能

不斷的重繪很吃資源

而且每款Canvas遊戲都這樣

原本是有動作才重繪

但效能不佳的手機還是…

先畫好底圖

再疊上物件

最後修瑕疵

requestAnimationFrame

觸控的挑戰

A*自動導航

http://github.com/bgrins/javascript-astar

Swipe手勢

http://eightmedia.github.com/hammer.js/

One More Thing…

Canvas 3D

但是我還不會

Further Possibility

Last but not Least

Stand on frontier makes me feel like a pioneer.

眾人的讚賞

與夥伴一起打造的熱情


from http://ow.ly/i/zQ4f

一起來快樂做遊戲吧!

Thanks!