|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>キーによるキャラ移動のテスト</title>
<style type="text/css">
#SCR { font-family: ＭＳ ゴシック,Osaka-等幅,monospace }
</style>
<script>
// 文字スクリーン用文字列、幅、高さ
var SCRTXT = "",SCRW = 10,SCRH = 10;
var px,py,kCode;
// 半角英数字記号→全角変換
function convertFullWidth(s) {
var r;
r = s.replace(/[!-~]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
});
// 空白は上の方法だとうまく変換されないので別個
r = r.replace(/ /g," ");
return r;
}
// 指定したIDの項目に文字列を入れる
// 書式：cPrint(ID,文字列)
function cPrint(id,str) {
document.getElementById(id).innerHTML = str;
}
// 押されたキーの情報を取得する
function keyTouch(e) {
var k, ax = 0,ay = 0;
// ブラウザによって取得方法が異なる
if (window.event) {
// firefox以外
kCode = window.event.keyCode;
} else {
// firefox
kCode = e.keyCode;
}
}
// キー入力を受け付ける
document.onkeydown = keyTouch;
// 文字スクリーン表示
function pTx() {
var y,s;
s = "";
for (y = 0;y < SCRH;y++) {
s = s + SCRTXT.substr(y * SCRW,SCRW) + "<br>";
}
cPrint("SCR",s);
}
// 文字スクリーン大きさ設定
function setTxWidth(w,h) {
var x,y,s;
if (w < 0 || h < 0) return false;
SCRTXT = "";
// 空白1行分作成
s = "";
for (x = 0;x < w;x++) s = s + " ";
// 高さhの回数だけ繰り返す
for (y = 0;y < h;y++) SCRTXT = SCRTXT + s;
//
SCRW = w;
SCRH = h;
pTx();
}
// 文字スクリーン画面消去
function clsTx() {
setTxWidth(SCRW,SCRH);
pTx();
}
// 文字描画
function printTx(x,y,s) {
var p,l,t = "",t0 = "",t1 = "";
s = convertFullWidth(s);
l = s.length; // 表示したい文字列の長さ
p = y * SCRW + x; // 表示位置の計算
if (p > 0) t0 = SCRTXT.substr(0,p);
t1 = SCRTXT.substr(p + l);
SCRTXT = t0 + s + t1;
SCRTXT = SCRTXT.substr(0,SCRW*SCRH);
pTx();
}
// キャラ移動
function chrMove() {
var ax = 0, ay = 0;
if (kCode == 37 && px > 0) ax = -1; // 左
if (kCode == 39 && px < 9) ax = 1; // 右
if (kCode == 38 && py > 0) ay = -1; // 上
if (kCode == 40 && py < 9) ay = 1; // 下
//
if (ax != 0 || ay != 0) printTx(px, py, " ");
px += ax;
py += ay;
printTx(px, py, "●");
kCode = 0;
}
// 関数使用サンプル
function prog() {
setTxWidth(10,10);
px = 4; py = 4; kCode = 0;
printTx(px, py, "●");
TimerID = setInterval("chrMove()",50);
}
</script>
</head>
<body onLoad="prog()">
<table border=1><tr><td id="SCR"> </td></tr></table>
<br>
カーソルキーで●が動かせます。
</body>
</html>
|
|
