• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Aaなゲームをjsで
 

Aaなゲームをjsで

on

  • 737 views

 

Statistics

Views

Total Views
737
Views on SlideShare
737
Embed Views
0

Actions

Likes
1
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Aaなゲームをjsで Aaなゲームをjsで Presentation Transcript

    • AAなゲームをJSでmoriyoshi <mozo@mozo.jp>
    • 自己紹介id:moriyoshitwitter: moriyoshitkazuhoさんに「頭からなんか汁出てる」と評されるPHPの人に分類されることが多い最近はC++とPython昔からJavaScriptがすき、好き、すきすぎてしぬ
    • 最近のブラウザ事情HTML5 Canvas / Media support / WebSocket / Web Workers...CSS3 2D / 3D transformations AnimationWebGL
    • ゲームを作りやすい環境が整ってきていますね!!!
    • でも...
    • 開発の労力➡増加Canvas, WebGL, CSS3で複雑なプレゼンテーションができるようになったおかげで、求められるものも多くなる加えて、効果音、BGMもせっかくのアイデアも形になるまでに時間が...
    • じゃあ、どうすれば?
    • 凝ったことはやめましょう!!!
    • 例えば昔のパソコンのゲームからヒントを得る
    • 昔のパソコン雑誌には読者が投稿したゲームのコードが掲載されていた雑誌に掲載できるくらいだから短い短くする工夫→AAでキャラクター等を表現する
    • たとえばこんな感じ
    • えっそれJSで
    • JSでAAなことをするにはテキスト画面に対応するブロック要素を用意するブロック要素に適用されるフォントを等幅にする適当に文字色と背景色を決定する任意の位置に文字を出力する関数を書く
    • そしてゲームにするにはイベントループの中身をsetInterval()の中に書くドキュメント全体のキーボードイベントを捕捉してキャラクターを動かす
    • テキスト画面の生成<pre id="screen" style="width:80ex;height:25em; line-height:100%; background-color:white; 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); scr.appendChild(document.createTextNode("rn"));}</script>
    • テキスト画面の生成<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
    • 文字の配置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, "*"); }}, 500);
    • 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>
    • 注意するべきポイントそれぞれの環境で使いたい文字が確実に等幅に表示されるフォントを押さえるCourier / Osaka / MS Gothic / IPA Gothic etc.いわゆる全角文字の幅の処理全角を扱うなら、はじめから全角スペースで空間を埋めておくのが得策フォントと文字種バックスラッシュ (「」 = U+005C) がフォントによっては「¥」にレンダリングされる
    • デモ
    • まあ単純なので
    • ワンライナーでも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;case83: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;case32:u.push({x:x-1,y:y});break}return false;};d.body.appendChild(n);})(document,["/ / "," _/ / _/ /_/ / "," / / /"],[],80,25,75,10,[],[],[])
    • ところで、世の中には
    • aalibというライブラリがある
    • aalibとはhttp://aa-project.sourceforge.net/aalib/ビットマップイメージをAAに変換してくれるライブラリCで書かれている
    • これをJSに移植すれば...
    • で、やりました
    • aalib.jshttp://github.com/moriyoshi/aalib.js/aalibと同じLGPLドキュメントなしtest.html 見て
    • デモ
    • あざっした!!!!!!1