java-ja.js #2 で『AAなゲームをJSで』を発表しました

java-ja javascript

Aaなゲームをjsで

動画をAAに変換するデモは以下で観れます。 (動画がTheoraなのでSafariは非対応)

http://dl.dropbox.com/u/673207/aalibtest/index.html

紹介したサンプルコードその1:

<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);
    scr.appendChild(document.createTextNode("\r\n"));
}
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);
</script>
</body>
</html>

サンプルコードその2:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<pre id="screen" style="width:80ex; height:25em; line-height:100%; color:white; background-color:black; font-family: Osaka, MS Gothic"></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("　", 40);
for (var i = 0; i < lines.length; i++) {
    var line = document.createTextNode(lineChars);
    lines[i] = line;
    scr.appendChild(line);
    scr.appendChild(document.createTextNode("\r\n"));
}
function update(x, y, c) {
    var line = lines[y];
    line.nodeValue = line.nodeValue.substring(0, x) + c + line.nodeValue.substring(x + c.length);
}

function updateMultiple(x, y, c) {
    for (var i = 0; i < c.length; i++)
        update(x, y + i, c[i]);
}

var characterE = [
    "　　　　　　　",
    "　　　　　　　",
    "　　　　　　　",
    "　　　　　　　",
    "　　　　　　　"
];

var character = [
    "　＼　｜　／　",
    "　　／￣＼　　",
    "─（゜∀゜）─",
    "　　＼＿／　　",
    "　／　｜　＼　"
];

var x = 0, y = 0;
updateMultiple(x, y, character);
setInterval(function() {
    if (x < 40 - 7) {
        updateMultiple(x, y, characterE);
        x++;
        updateMultiple(x, y, character);
    }
}, 200);
</script>
</body>
</html>

サンプルコードその3:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<pre id="screen" style="width:80ex; height:25em; line-height:100%; color:white; background-color:black; font-family: Osaka, MS Gothic"></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("　", 40);
for (var i = 0; i < lines.length; i++) {
    var line = document.createTextNode(lineChars);
    lines[i] = line;
    scr.appendChild(line);
    scr.appendChild(document.createTextNode("\r\n"));
}
function update(x, y, c) {
    var line = lines[y];
    line.nodeValue = line.nodeValue.substring(0, x) + c + line.nodeValue.substring(x + c.length);
}

function updateMultiple(x, y, c) {
    for (var i = 0; i < c.length; i++)
        update(x, y + i, c[i]);
}

var characterE = [
    "　　　　　　　",
    "　　　　　　　",
    "　　　　　　　",
    "　　　　　　　",
    "　　　　　　　"
];

var character = [
    "　＼　｜　／　",
    "　　／￣＼　　",
    "─（゜∀゜）─",
    "　　＼＿／　　",
    "　／　｜　＼　"
];

var c = [];
for (var i = 10; --i >= 0;) {
    var e = { x: Math.random() * (40 - 7) | 0, y: Math.random() * (25 - 5) | 0 }
    c.push(e);
    updateMultiple(e.x, e.y, character);
}
setInterval(function() {
    for (var i = c.length; --i >= 0; )
        updateMultiple(c[i].x, c[i].y, characterE);
    for (var i = c.length; --i >= 0; ) {
        c[i].x++;
        updateMultiple(c[i].x, c[i].y, character);
    }
}, 200);
</script>
</body>
</html>