Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a Aaなゲームをjsで
Similar a Aaなゲームをjsで (20)
Más de Moriyoshi Koizumi
Más de Moriyoshi Koizumi (19)
Último
Último (11)
Aaなゲームをjsで
- 3. 最近のブラウザ事情 HTML5 Canvas / Media support / WebSocket / Web Workers... CSS3 2D / 3D transformations Animation WebGL
- 5. でも...
- 7. じゃあ、どうすれば?
- 12. たとえばこんな感じ
- 13. えっそれJSで
- 16. テキスト画面の生成 <pre id="screen" style="width:80ex; height:25em; line-height:100%; background- color:white; color:black"></pre> まあ難しいことはないですね
- 17. テキスト画面の生成 <script type="text/javascript"> function repeat(c, n) { return new Array(n+1).join(c); } var scr = document.getElementById("screen"); var lines = new Array(25); var lineChars = repeat(" ", 80); for (var i = 0; i < lines.length; i++) { var line = document.createTextNode(lineChars); lines[i] = line; scr.appendChild(line); scr.appendChild(document.createTextNode("rn")); } </script>
- 18. テキスト画面の生成 <pre> aaa 0 text node bbb text node ccc 1 text node rn 2 text node text node 3 text node rn screen 4 text node text node DOM array
- 19. 文字の配置 function update(x, y, c) { var line = lines[y]; line.nodeValue = line.nodeValue.substring(0, x) + c + line.nodeValue.substring(x + c.length); }
- 20. イベントループ var x = 0, y = 0; update(x, y, "*"); setInterval(function() { if (x < 80) { update(x, y, " "); x++; update(x, y, "*"); } }, 500);
- 21. Putting em all together <html> <body> <pre id="screen" style="width:80ex; height:25em; line-height:100%; color:white; background-color:black"></pre> <script type="text/javascript"> function repeat(c, n) { return new Array(n+1).join(c); } var scr = document.getElementById("screen"); var lines = new Array(25); var lineChars = repeat(" ", 80); for (var i = 0; i < lines.length; i++) { var line = document.createTextNode(lineChars); lines[i] = line; scr.appendChild(line); } function update(x, y, c) { var line = lines[y]; line.nodeValue = line.nodeValue.substring(0, x) + c + line.nodeValue.substring(x + c.length); } var x = 0, y = 0; update(x, y, "*"); setInterval(function() { if (x < 80) { update(x, y, " "); x++; update(x, y, "*"); } }, 1000); </script> </body> </html>
- 22. 注意するべきポイント それぞれの環境で使いたい文字が確実に等幅に表示 されるフォントを押さえる Courier / Osaka / MS Gothic / IPA Gothic etc. いわゆる全角文字の幅の処理 全角を扱うなら、はじめから全角スペースで空間を 埋めておくのが得策 フォントと文字種 バックスラッシュ (「」 = U+005C) がフォント によっては「¥」にレンダリングされる
- 23. デモ
- 24. まあ単純なので
- 25. ワンライナーでも javascript:(function(d,g,r,o,l,x,y,u,z,t,a,b,n,m,s,i,f){n=d.createElement ("pre");n.setAttribute("style","z-index:100;font-weight:bold;position:absolute;left: 0px;top:0px;background:black;color:white");s=new Array(o+1).join(" ");for(i=0;i<l;i+ +)n.appendChild(m=r[i]=d.createTextNode(s)),n.appendChild(d.createTextNode ("n"));function p(x,y,c,_){if(x>=0)with(r[y])nodeValue=nodeValue.substring(0,x)+c +nodeValue.substring(x+c.length)}function h(){t.push({x:0,y:8,s:"Python",c: 0,m:function(){with(this)x+=c>40?-3:1,y+=c>40?1:0,c++;return this.c<40|| this.x>3&&this.y<l}})}a=x,b=y,f=0,setInterval(function(i,j,k,e){Math.random()>.97?h ():0;for(i=0;++i<4;)p(0,l-i,s);p(x,y," ");for(i=0;i<3;++i)for(k=g [i].length,j=0;j<o;j+=k)p(j,l-i-1,o-j<k?g[i].substr(f,o-j):g[i].substr(f,k)+g [i].substr(0,f));f=(--f+k)%k;for(i=u.length;--i>=0;)with(u[i])p(x--,y," "),x>0?p (x,y,"-"):u.splice(i,1);x=a,y=b,p(x,y,"<?php");for(i=t.length;--i>=0;)e=t[i],p (e.x,e.y,s.substr(0,e.s.length)),e.m()?p(e.x,e.y,e.s):t.splice(i,1)}, 50);d.onkeydown=function(e){switch(e.keyCode){case 90:a=x>0?x-1:x;break;case 83:b=y>0?y-1:0;break;case 67:a=x<o-5?x+1:x;break;case 88:b=y<l-1?y+1:y;break;case 32:u.push({x:x-1,y:y});break}return false;};d.body.appendChild(n);})(document,["/ / "," _/ / _/ /_/ / "," / / / "],[],80,25,75,10,[],[],[])
- 26. ところで、世の中には
- 27. aalibというライブラリがある
- 30. これをJSに移植すれば...
- 31. で、やりました
- 33. デモ
- 34. あざっした!!!!!!1