RPG戦闘システム プログラム例

ターン式戦闘システムは、どんなプログラムで作ればいいか、試しに作ってみました。

JavaScriptで戦闘システムを作りたい方には参考になるかもしれません。


test




このプログラム:
<html lang="ja">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">






<link rel="stylesheet" type="text/css" href="file:///D:/common_css/version1.css">
<link rel="stylesheet" type="text/css" href="/common_css/version1.css">

<title>RPG戦闘システム プログラム例</title>
<script>

function $( id ) {
	
return document.getElementById( id );
	
}


var endofbattleFLG = false;
var playerHP = 100;
var enemyHP = 100;
var playercmd;


function onloadx() {
update();
ta.clear();
cml.clear();
cml.value = "攻撃";

ta.addLine( "敵が現れた!" );
dispPrompt();
}


function execOnePhase() {
ta.clear();
var toggle = Math.random() > .5;

for( var i = 0; i < 2 ; i++ ) {
switch( toggle ) {
case true:
var atk = Math.floor( Math.random() * 10 ) + 1;
ta.addLine( "主人公は " + playercmd + "!" );
ta.addLine( "→ 敵に " + atk + " のダメージをあたえた!" );
enemyHP -= atk;
//check.
if( enemyHP <= 0 ) {
endofbattle( true );
return;
}
break;
case false:
var atk = Math.floor( Math.random() * 10 ) + 1;
ta.addLine( "敵の攻撃!" );
ta.addLine( "→ 主人公は " + atk + " のダメージをうけた!" );
playerHP -= atk;
//check.
if( playerHP <= 0 ) {
playerHP = 0;
update();
endofbattle( false );
return;
}
update();
break;
}
toggle = ! toggle;
}

dispPrompt();
}


function endofbattle( result ) {
endofbattleFLG = true;
if( result ) {
ta.addLine( "主人公は勝利した!" );
} else {
ta.addLine( "主人公はちからつきた…" );
}
}


function update() {
$( "HP" ).innerHTML = "主人公 HP: " + playerHP;
}


function dispPrompt() {
ta.addLine( "コマンド?" );
cml.focus();
}


</script>
<style>
.textarea {
font-family:monospace; font-size:16px; width:40em;
}
</style>
</head>
<body onload="onloadx();"><h1>
RPG戦闘システム プログラム例</h1>
<p>ターン式戦闘システムは、どんなプログラムで作ればいいか、試しに作ってみました。</p>
<p>JavaScriptで戦闘システムを作りたい方には参考になるかもしれません。</p>
<p><br></p>
<div style="
border
	
:
	
outset 8px lightgray;

padding
	
:
	
8px;

width
	
:
	
40em;

margin
	
:
	
auto;


">
<div id="HP">test</div>
<textarea id="ta" class="textarea" style="
height
			
:
	
7.5em;

border-radius
	
:
	
1em;

padding
			
:
	
.75em;

overflow
		
:
	
hidden;

border
			
:
	
solid 2px black;

"></textarea><br>
<script>
ta = document.getElementById( "ta" );
ta.clear = function() {
this.value = "";
};
ta.addLine = function( line ) {
if( this.value != "" ) this.value += "\n";
this.value += line;
this.scroll();
};
ta.scroll = function() {
this.scrollTop = this.scrollHeight;
};
</script>
<input id="textID" class="textarea" type="text">
<script>
cml = document.getElementById( "textID" );
cml.clear = function() {
this.value = "";
};
cml.onkeydown = function( e ) {
//check.
if( e.which != 13 ) return true;

//check.
if( endofbattleFLG ) return false;

playercmd = this.value;
execOnePhase();

return false;
};
</script>
<br>
<input value="実行" onclick="
cml.onkeydown( { which:13 } );
" type="button">
<input value="再度" onclick="location.reload();" type="button">
</div>
<br>
<br>このプログラム:<br><ul>

<li>敵、主人公ともにHPは100で、攻撃は1~10までの乱数で、対等になっている。</li>
<li>試作なので、入力フィールドにどんなコマンドを入力しても「攻撃」になる。</li>
<li>setInterval() を使用せず、入力フィールドでのリターンキー入力(または実行ボタン押下)で、主人公ターンと敵のターン( execOnePhase() )を実行している形。</li>
<li>(説明が下手なので何を言っているかわからないかもしれませんが、) 1ターンでは主人公と敵の順番を乱数で決めています。プレイヤーのターンと敵のターンのスクリプトの順番を切り替える方法について迷いました。つまり、同じ命令を繰り返し書きたくない(冗長にしたくない)とき、命令の実行順を変更する制御構造が各プログラミング言語には用意されていないんです。もう少しわかりやすく言うと、複数の命令はすべて実行することが決まっている(1ターンにおいて自分のターンと敵のターンはそれぞれ必ず実行する)が、それらの実行順は決まっていなくて(かならず自分のターンが先、などと決まっていなくて)、その都度自由に変更したい(乱数やすばやさでその都度決めたい)。そういう、命令文の順序が都度変更できるような制御構造が言語に用意されていません。<br> そこで、toggleという真偽値を使う方法を考えました。toggleが真ならば自分のターンを実行し、偽なら敵のターンを実行します。toggleは最初に乱数で真偽を決めます(自分と敵とどちらが先になるかわからない)。for文により命令の実行は真の分と偽の分の2回まで行われます。switch文でtoggleの値次第で命令を分岐します。switch文が終わるとtoggleがトグルされます(真が偽になり偽が真になる)。<br> これで同じ命令を繰り返し書いていないし、命令の実行順は自由(乱数)になっています。<br> (ただしこれだと3人いた場合に対応できません)</li>
<li>テキストエリア、入力フィールドのHTMLタグの直後にその要素についてのスクリプト(メソッド)を書いている。</li>
</ul><code>%%com.include:default.html%%</code></body></html>

ページの上端へ (もくじ開く)