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>
