LoginSignup
2
2

More than 5 years have passed since last update.

@Kashiwagi_K

救助求む。心が折れそう（解決済み）

Last updated at Posted at 2016-04-16

　遙か昔にC言語を一時断念して、今度はお恥ずかしながらJavaScriptを引っ提げて帰ってきました。いえもうね、自分の続かなさにびっくりですよ。
　とはいえ、もうそろそろここら辺の技術を身につけないと時期的にヤバい部分もあるので、頑張ろうかなとも思ったり。

　で、いつぞやのC言語のようにRPGっぽいのを作って技能の習熟に努めようと思ったのですが、ここで壁にぶち当たってしまいました。
　ゲームって、ボタン押したり、方向キーでカーソル合わせて決定したりすれば何らかの形で画面が更新されますよね。そのとき押したボタンが消えたり、また元の画面に戻れば同じボタンが現れたりします。
　それでまあ、まずはHTMLの方で基本となる黒い画面を生成して、JavaScriptの方で適宜必要なGUIを表示する方式でそういう形式を再現しようと思ったのですが、肝心要のJavaScriptによるDOMオブジェクトの追加ができなかったんですよね。
　今私が使っているノートPCのOSがWin10なのがいけないのかと思って、Win7のデスクトップで試してみても結果は同じ。そもそも、ほかの方が書いたDOMオブジェクト追加のサンプルコードはノートの方でも機能したので、環境の問題ではなさそうです。ChromeとIEの二つで試してもだめでした。

Game.css
#gamescreen {
    position:absolute;
    background-color:#000000;
    left: 0px;
    top:70px;
    width: 640px;
    height: 360px;
}

#button1back { /* ゲーム開始画面「はじめから」「つづきから」に使うボタンの背景 */
    position:absolute;
    background-color:#ffffff;
    left: 160px;
    top: 0px;
    width: 320px;
    height: 20px;
}

#button1front { /* ゲーム開始画面「はじめから」「つづきから」に使うボタンの前面 */
    position:absolute;
    background-color:#000000;
    left: 162px;
    top: 0px;
    width: 316px;
    height: 16px;
}
Game.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Game</title>

        <link href="Game.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="Functions.js"></script>
        <!--Functions.jsはGame.jsで使用しているFamiliaとCharactersの作成用なので無関係と思われる。-->

        <script type="text/javascript" src="Game.js"></script>
    </head>

    <body>
        <div id="gamescreen"></div> <!--ゲーム画面を生成。-->
    </body>
</html>
Functions.js
function Items() {
    this.Name = ""; //アイテム名
    this.Kind = 0; //アイテムの種類。0:ただの飾り 
    this.Weight = 0; //アイテムの重さ

    /*以後、アイテムによって変動する各種能力値を記載する。アイテムなら回復（悪化）し、装備なら向上（減少）する。
    頭にRtとついているものは百分率(Rate)、Dcとついているものはダイス数(Dice)、Scとついているものは固定値(Scalar)。*/
    this.RtHP = 0;
    this.ScHP = 0;
    this.RtMP = 0;
    this.ScMP = 0;
    this.RtSP = 0;
    this.ScSP = 0;

    this.RtAtk = 0;
    this.ScAtk = 0;
    this.RtMgAtk = 0;
    this.ScMgAtk = 0;
    this.RtDef = 0;
    this.ScDef = 0;
    this.RtRes = 0;
    this.ScRes = 0;
    this.RtSpd = 0;
    this.ScSpd = 0;

    this.DcHit = 0;
    this.RtScHit = 0;
    this.ScHit = 0;
    this.DcAvoid = 0;
    this.RtScAvoid = 0;
    this.ScAvoid = 0;
    this.DcSearch = 0;
    this.RtScSearch = 0;
    this.ScSearch = 0;

    this.RtMaxCarriableWeight = 0;
    this.ScMaxCarriableWeight = 0;
}

function Equipments() {
    this.Name = ""; //装備名
    this.Weight = 0;

    /*以後、アイテムによって変動する各種能力値を記載する。アイテムなら回復（悪化）し、装備なら向上（減少）する。
    頭にRtとついているものは百分率(Rate)、Dcとついているものはダイス数(Dice)、Scとついているものは固定値(Scalar)。*/
    this.RtHP = 0;
    this.ScHP = 0;
    this.RtMP = 0;
    this.ScMP = 0;
    this.RtSP = 0;
    this.ScSP = 0;

    this.RtAtk = 0;
    this.ScAtk = 0;
    this.RtMgAtk = 0;
    this.ScMgAtk = 0;
    this.RtDef = 0;
    this.ScDef = 0;
    this.RtRes = 0;
    this.ScRes = 0;
    this.RtSpd = 0;
    this.ScSpd = 0;

    this.DcHit = 0;
    this.RtScHit = 0;
    this.ScHit = 0;
    this.DcAvoid = 0;
    this.RtScAvoid = 0;
    this.ScAvoid = 0;
    this.DcSearch = 0;
    this.RtScSearch = 0;
    this.ScSearch = 0;

    this.RtMaxCarriableWeight = 0;
    this.ScMaxCarriableWeight = 0;
}

function Character() {
    this.Name = ""; //キャラクターネーム
    this.Level = 1; //レベル
    this.Feat = 0; //普通のRPGでいうExp

    /*ステイタス。Expはダンジョン探索の結果上昇するステイタスの値を指す。
    このゲームではステイタスを利用して各種能力値を上昇させる。*/
    this.Strength = 0; //力
    this.Vitality = 0; //耐久
    this.Dexterity = 0; //器用
    this.Agility = 0; //敏捷
    this.Mgclpow = 0; //魔力

    this.StrExp = 0;
    this.VitExp = 0;
    this.DexExp = 0;
    this.AgiExp = 0;
    this.MgcExp = 0;

    /*各種能力値。頭にDcとついているものはダイス数(dice)、Scとついているものは固定値(Scalar)。
    さらにEqとついているものは装備による補正値を表す。
    ダイスと固定値、両方の値を持っていない能力値はどちらの値かを別途表記する*/
    this.MaxHP = 0; //ヒットポイント。生命力。これが無くなると戦闘不能になる。固定値。
    this.HP = 0;
    this.EqHP = 0;
    this.MaxMP = 0; //マジックパワー。魔法力。ここでは魔法の行使の際に支払うコストを指す。固定値。
    this.MP = 0;
    this.EqMP = 0;
    this.MaxSP = 0; //スタミナ。ダンジョンの探索や技に支払うコスト。固定値。
    this.SP = 0;
    this.EqSP = 0;

    this.Atk = 0; //攻撃力。固定値。
    this.EqAtk = 0;
    this.MgAtk = 0; //魔法攻撃力。固定値。
    this.EqMgAtk = 0;
    this.Def = 0; //物理防御力。固定値。
    this.EqDef = 0;
    this.Res = 0; //魔法防御力。固定値。
    this.EqRes = 0;
    this.Spd = 0; //素早さ。固定値。
    this.EqSpd = 0;

    this.DcHit = 0; //命中値
    this.EqDcHit = 0;
    this.ScHit = 0;
    this.EqScHit = 0;
    this.DcAvoid = 0; //回避値
    this.EqDcAvoid = 0;
    this.ScAvoid = 0;
    this.EqScAvoid = 0;
    this.DcSearch = 0; //索敵値
    this.EqDcSearch = 0;
    this.ScSearch = 0;
    this.EqScSearch = 0;

    this.MaxCarriableWeight = 0; //最大所持重量。固定値。
    this.EqMaxCarriableWeight = 0;
    this.CarryingWeight = 0; //現在所持重量。

    this.Items = [];
    for (var i = 0; i <= 99; i++) {
        this.Items[i] = new Items();
    }

    this.Equipments = [];
    for (var i = 0; i <= 4; i++) {
        this.Equipments[i] = new Equipments(); //装備部位 0:武器 1:防具 2～4:補助装備・アクセサリ
    }
}

function Familia() {
    this.Name = ""; //自団体の名前
    this.Money = 0; //所持金
    this.Fame = 0; //名声
}
Game.js
window.onload = function() {

    //ゲーム画面の描画
    var ScShift = (window.innerWidth - 640) / 2; //ゲーム画面を画面の中心に置くための変数を作成。以降も画面の部品をずらして配置するのに使用する。
    var gamescreen = document.getElementById("gamescreen");
    gamescreen.style.left = ScShift + "px"; //実際に画面をずらす処理。

    //ゲーム中で使う諸変数の準備。
    var Familia = new Familia(); //Functions.jsで作成したオブジェクトを使用しているが、Functions.jsは作成したオブジェクトのみの集団なので無関係？

    var Characters = []; //キャラクターデータの格納場所を作成。
    for (var i = 0; i <= 99; i++) {
        Characters[i] = new Character();
    }

    //ここから
    var hazimekaraBack = document.createElement("div");
    hazimekaraBack.id = "button1back";
    document.body.appendChild(hazimekaraBack); 
    //ここまでがDOMオブジェクト追加のための記述……のはず。機能しないけど。

};

　追加するDOMオブジェクトの細かな座標指定がありませんが、とりあえずまずは追加したいと思って記述していません。たぶんこのままの設定だと、画面の端に追加されて黒画面の端っこにちょっと映るくらいだと思います。
　それで、ここでも表示順の問題かと思って、黒画面を表示しないようにして、表示したいDOMオブジェクトの色を黒にしてやってみてもだめなんですよね……。グーグル先生に頼ってあの手この手を尽くしてもどーーーーーーーーーーーーーーーーーーーしても表示されません。元々無い知恵ですが。

　タスケテ
　
　
　
　
　
　
Functions.jsの記述を見てピンと来た方もいらっしゃると思いますが、ゲームのシステムはダンまちにあやかった部分が多々あります。どうでもいい情報ですが。

2
2
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2