珍走記を改造しよう

第一回:マップを変更しよう

main.jsを理解しよう

普通いきなりマップの変更しませんよね(ぇ

しかし、アイテムの追加とかはネタがないのでこれからやることにしました。

まず、珍走記の改造に必要なデータはmain.jsに主に入っています。

1行目のgraph=...の部分が、場所のデータです。今回は、ここをいじります。

2行目のprfname=...の部分が県名のデータで、最初の数字は県の数です。ここには、県名以外にも「日本海」「太平洋」などのフェリー用の区分も入っています。つまり フェリーのマスのデータをいじれば フェリーをどこかの県の一部にして そこを領地にしたりもできます(ぇ

3行目のitemdata=...は車とアイテムのデータです。

4行目のpexp=...は特殊な場所(道の駅や支払い所など)のデータです。

5行目,10行目はプレイヤー以外の車のデータです。

6行目、7行目はプレイヤーが領地に建てられる建物のデータです。

8行目,9行目はプレイヤーの状態のデータです。

ここまでは、CGIから読み込まれるので勝手に改行を入れることなどもできません。

その下のmap=...画像のデータです。

とりあえずここまで分かれば今のところいいです。というか 僕もこれより下はあまり詳しく知りません(ぇ

画像のデータを変更しよう

珍走記のマップというのは上のとおり画像のデータと場所のデータに分かれていて、
画像のデータは1文字が1マスに相当し、1列200文字でできています。200文字ごとに改行してみると日本列島の形になっているのが分かります。ただし JavaScriptで読み込むので改行したままだと動きません。

しかし このままだととてもやりにくいので、下のように変数mapに200文字ずつ代入すると見やすくなります。 var map=''; map+='AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.....(200文字).....AAAA'; map+='AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.....(200文字).....AAAA'; : : : 1文字が1マス分に相当するわけですが、どのように決まるかは単純で、「A」のときはmapa_.gif,「a」のときはmapa.gif,「1」のときはmap1.gif...のように、数字のときそのままmap(数字).gifで、小文字のアルファベットのときはそのままmap(アルファベット).gifで、大文字のアルファベットのときはmap(小文字のアルファベット)_.gif と対応しています。

ここをいじると、見た目がその通りになります。

とりあえず今回は、水戸の2つ右に大洗を追加してみたいと思います。

とりあえず大洗の画像はmap1.gifにして、左の「水戸」と上の「日立」と道でつなぎましょう。

今いじっているのは画像のデータなので、これだけいじっても「大洗」とは表示されないし、行くこともできません。

そこで、今度は場所のデータをいじって行けるようにします。

場所のデータを変更しよう

場所のデータは、1行目のデータですが、先にやっておくことがあります。 function getposition(x,y) { var i,s,e; s=prfname[0]+1; e=graph.length-1; while(e-s>1){ i=Math.floor((s+e)/2); if(graph[i][1] == x && graph[i][2] == y){ return(i); } if(graph[i][2]> y || (graph[i][2] == y && graph[i][1] > x)){ e=i; }else{ s=i; } } for(i=s; i<=e; i++){ if(graph[i][1] == x && graph[i][2] == y){ return(i); } } for(i=1; i<=prfname[0]; i++){ if(graph[i][1] == x && graph[i][2] == y){ return(i); } } return(0); } という部分がmain.jsにあるので、それを function getposition(x,y) { var i,s,e; s=prfname[0]+1; e=graph.length-1; while(e-s>1){ i=Math.floor((s+e)/2); if(graph[i][1] == x && graph[i][2] == y){ return(i); } if(graph[i][2]> y || (graph[i][2] == y && graph[i][1] > x)){ e=i; }else{ s=i; } } for(i=s; i<=e; i++){ if(graph[i][1] == x && graph[i][2] == y){ return(i); } } for(i=1; i<=prfname[0]; i++){ if(graph[i][1] == x && graph[i][2] == y){ return(i); } } for(i=390;i<graph.length;i++){ if(graph[i][1] == x && graph[i][2] == y){ return(i); } } return(0); } とします。こうしないと、新しく追加した場所が認識されません。

「390」という数字がありますが、これはどういうことかというと、場所はそれぞれ東京は1番、札幌は2番・・・のように番号で表されているのですが、実はもともと全部で389個の場所があったのです。そこで、新しい地形を追加すると390番以降となり、それを認識させるには390番以降に対して特別な処理をする必要があったのです。そのための「390」です。だから、この先地形を何個追加しようと、ここの数字を変える必要はありません。

そして、1行目を見てみましょう。かなり横に長いデータですが、CGIから読み込むので途中で改行を入れて見やすくすることはできません。

しかし、これだとやりにくいので、別のテキストファイルにこれをコピーして分かりやすくしてみましょう。

このデータは、['ナシ',0,0,51],['東京',109,97,1,'','','',203,207,''],...のように、「[」から「]」までを1つの単位として、「,」で区切られているのが分かります。そこで、「,」の位置で改行していくと分かりやすくなります。

これは今後の作業で使うので、「['ナシ',0,0,51],」が1行目、「['東京',109,97,1,'','','',203,207,''],」が2行目...となるようにしておいて下さい。また、行数が表示されるテキストエディタがあるととても便利です。「Terapad」などがお勧めです。

そして、もう分かっているかもしれませんが、「['東京',109,97,1,'','','',203,207,'']」などの「[」と「]」で囲まれたのが1つの場所のデータです。

それでは、これの説明をしていきます。

この中でもそれぞれの情報は「,」で区切られています。最初の「'東京'」は地名です。「'」で囲む必要があります。道の駅や支払い所などの特殊な場所は「''」として構いません。

その次の「109」と「97」はx(横)座標とy(縦)座標です。これはさっきの画像データと共通していて、一番左上がxとyがそれぞれ「0」の場所です。そこから右に1いくとxが1増えていき、下に1いくとyが1増えます。つまり「109,97」は「左から数えて109番目、上から数えて97番目の場所」という意味です。

その次の「1」は、どの県の場所かです。main.jsの2行目の県名の順番に対応していて、「東京都」は1です。

その次の「''」は特殊地形の情報で、ここが'p'だと道の駅、'm'だと支払い所、'c'だとカーショップ、'f'だとフェリー、'b'だとカジノ、'i'だとアイテムショップです。

その次の「''」はカーショップとアイテムショップのときに使われ、品揃えを決定します。

カーショップは数字の0〜9,アイテムショップはアルファベットのa〜z,A〜Zを使います。

アイテムショップのアイテムの対応は、main.jsの3行目と対応していて、眺めるとアイテムの名前が順番に出てきていることが分かると思います。その一番左側の「くぎ」がaで、その次の「まきびし」がb、と続いていきます。そして、zの次は大文字のAです。

その次の4つが、右、上、左、下にそれぞれ進んだときにたどり着く場所を示しています。

その方向に進めないときは「''」で、進めるときは数字になっています。

分かるように、場所はすべて数字で表されます。何の数字かというと、[〜]で囲まれたデータが、最初から何番目のデータかです。

また、一番最初は0番から始まります。最初の「ナシ」が0で、次の「東京」は1、となります。

もう分かると思いますが、水戸→大洗 とか大洗→水戸 とか 日立→大洗 とか 大洗→日立 とかを通れるようにするには、水戸や大洗や日立の位置を数えなければならないということです。

ここで活躍するのが、さっき作った1行ずつのデータと、行数が分かるテキストエディタです。1行ずつにしてあれば、1行目が0、2行目が1,3行目が2...ということになり、地名で検索すれば「水戸」が10番、「日立」が168番ということもすぐ分かります。

では、データの読み方が分かったので、いよいよ「大洗」のデータを作る作業に入ります。

また、作ったデータは途中に入れてはいけません。途中に入れると、それ以降の番号がずれてしまうからです。

1から作ると座標を数えるのが面倒なので、近い「水戸」のデータをコピーして変えていきましょう。 ['水戸',115,91,10,'','',390,167,179,''] まず、最初の地名は「'大洗'」としましょう。そして、次の座標は、y座標は同じで、x座標は水戸の2つ右なので、「117,91」となります。

その次の県は、10番は「茨城県」なのでそのままにしておきましょう。

その次の2つも、普通の場所なのでどちらも''のままです。

その次の4つは、全部書き直す必要があります。1つ目が右、次が上、次が左、そして最後は下なので、右と下は''となります。

そして、左側は「水戸」なので水戸の番号を、上側は「日立」なので日立の番号を入れます。 ['大洗',117,91,10,'','','',168,10,''] これで、大洗のデータは完成です。これを、main.jsの1行目の最後に入れましょう。 ...['',3,171,47,'c','58','',387,47,'']]; → ...['',3,171,47,'c','58','',387,47,''],['大洗',117,91,10,'','','',168,10,'']]; しかし、これでまだ終わりではありません。このままだと、大洗から水戸や日立に行けても、水戸や日立からは大洗に行くことはできません。

そこで、水戸と日立のデータを大洗に行けるように書き換える必要があります。今まで学んだことを使えばできるはずなので、ここは自分でやってみて下さい。

これができれば、もうあなたはマップの変更ができるようになっているはずです。