Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <!-- three.min.js r87 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

<!-- vox.js v1.0.1 -->
<script src="https://cdn.jsdelivr.net/gh/daishihmr/vox.js@1.0.1/build/vox.min.js"></script>

<!-- easeljs v0.8.1 -->
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>

<!-- tweenjs v0.6.1 -->
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>

            
          
!

CSS

            
              body { background-color: #DDDDDD; font: 30px sans-serif; }

.overlay {
    position:absolute; top:250px; left:50px; width:350px; height:150px;    
    padding: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    border-radius: 5px;
    font: 20px bold 80%/150%  sans-serif;
}

.overlayTalkButton {
    position:absolute; top:120px; left:310px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}

.overlayMoveButton {
    position:absolute; top:200px; left:310px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}
.overlayMoveToSouryokoButton {
    position:absolute; top:330px; left:10px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}
.overlayMoveToMajokoButton {
    position:absolute; top:330px; left:160px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}
.overlayMoveToShikabaneButton {
    position:absolute; top:390px; left:130px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}
.overlayMoveToIsekiButton {
    position:absolute; top:390px; left:310px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}
.overlayBackButton {
    position:absolute; top:200px; left:310px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}
.overlayBattleButton {
    position:absolute; top:120px; left:290px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}
.overlaySearchButton {
    position:absolute; top:120px; left:290px;
    font: 20px bold 80%/150% sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background: rgba(0, 0, 0, 0.8);
    color: rgb(255,255,255);
    letter-spacing: 5px;
    padding: 5px 15px;
    border-radius: 25px;
    margin-bottom: 0.5em;

}



            
          
!

JS

            
              // forked from siouxcitizen's "Three.js r71とCreateJSによる「たたかう」時の動きを改良してみました" http://jsdo.it/siouxcitizen/Kg7U
// forked from siouxcitizen's "Three.js r71とCreateJSで「たたかう」時の動きを作成してみました" http://jsdo.it/siouxcitizen/wKF9
// forked from siouxcitizen's "Three.js r71とCSSボタンによるインターフェースをためしてみるテスト" http://jsdo.it/siouxcitizen/wpgTY
//
//前回のコードに、HTML5のAudio機能による、「たたかう」時の攻撃SE音の再生機能を追加
//PCのFirefox41.0.1では音の再生できました
//
//
//「いどう」ボタン押下ででてくる「僧侶子」「魔女子」「しかばね」「遺跡」ボタンを押下すれば
//それぞれの画面へ遷移できます。
//
//「たたかう」ボタンは「しかばね」画面で試せます
//
//あと画面をクリック&ドラッグで3Dの視点が変化します
//
//以下の自分作成のコードを参考にしました
//HTML5のAudio機能でOGGファイルのSE音を再生
//http://jsdo.it/siouxcitizen/h9NM
//
//
//音楽:魔王魂
//MP3ファイルとOGGファイルは以下サイトからのファイルを使用させていただきました
//魔王魂
//http://maoudamashii.jokersounds.com/
//

var container;
var scene; 
var camera; 
var renderer;

//読み込みリソースURL
//フィールドマップ用テクスチャ画像URL
//var planeFieldPngURL = "http://jsrun.it/assets/d/c/u/e/dcue2.png";
//var planeDesertPngURL = "http://jsrun.it/assets/s/t/h/2/sth2z.png";
//var planeWaterPngURL = "http://jsrun.it/assets/5/z/t/g/5ztgk.png";
var planeFieldPngURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAdUlEQVR4nGMo/Cz9fyAxw6gD0AWsJzOAMbUtwmUu1hCgtiPwmYfXAdRwBCGzcKYBaocA0WmA3njUAaMOGHUA2Q5AztuUlBkUOYAaJSZZDoBZiGw5uY4YulFALTzqgFEHjDpgcDbJBrxROqDN8kHRMaEnHnUAADjp2hzJ3BYuAAAAAElFTkSuQmCC";
var planeDesertPngURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAUklEQVR4nGP4v1r3/0BihlEHjDpg1AH4JN/3M4AxuYYTo3/wO4DSIKbIAQOeBkYdMOqAUQeMOmDUAQNeFwz52hDmAHzmDO40MOqAUQeMOoAeGAArslGyN38s2wAAAABJRU5ErkJggg==";
var planeWaterPngURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACTklEQVR4nK2X3VHDMBCEDQRCgBkqYRJIQuCJMiiCRiiFFqgqSgUmZ1ixWt/JDuHhxpaseD+d7sdpbp53rdnHZ5sNc2a3L21nfO9ZM992dvfa5ivMxnj32/u3YdywOO4jgAgC4grBY7NOcD82AEA1vHOQMYBntmb2mHrCkbE3IA5PZA/YwO7ZPTUAs9PFtuoR3OtxAKIbq7iKeOKAnDykUUfCEL2jgitswBCeJ7xAqgHgzCOg7h4vMwFAeAAsrmsikRzp8/5RZQgIQ5zvIaYZgucXq5QFPBAO8BCABT0A9gR7SqM6EsbzKsBQ2gFEj2qyTDm/2QPqjcgDnUW7x5jPXJ+f3W9zWnm75iroeaoAsCuXXN49uxzzV5tdFtHiwuu1FKtnGt6dll4NTAaYrlOxS96hl/NcPwqveK5lD0QAUXXTXqAwgMjrvUqncxw8Nr5cJ1cgqnYMyfGR64BXfhmEAa6fdu3Jot50huaqANVmtBe3+u9Vt7EtWY+u0d1z8VGA82UqIrkGoJBhu0ZgQRxppQCTH3GOZAXA1esBHCcFFItzDuMls81vwVEP1ZqQlmA+CszlLyItsewF3pECRgBeu+bnBQDELbrtxdNVKtLGK638zGtCvQ/PoFl17/VSRHdTy2utbOwlrzExQO6GvLuoium8upo7JtZ43wp6nE2RkwISVTmvvHo5jljyIPPvOTC8/I4CyPu4iDYTQRZHMCQwtvJ5FdBrVCFAzcbsWtdFYHnuEADvBUMAuq73m7+K145s6M9JAfHfAIc+PxrgWMAvxUC/XyZ/924AAAAASUVORK5CYII=";


var mapData;

var mapDataNum = 0;
//マップ配列 0:草原 1:砂漠 2:水辺
//マップ配列はマップの縦横の長さが同じ(10*10)になるように設定
var mapData00 = [[ 2, 2, 2, 2, 0, 2, 2, 2, 2, 2],
                 [ 2, 0, 0, 1, 0, 1, 0, 0, 0, 2],
                 [ 2, 0, 1, 0, 1, 0, 1, 1, 0, 2],
                 [ 2, 0, 1, 1, 1, 0, 0, 0, 0, 2],
                 [ 2, 0, 1, 1, 1, 0, 0, 1, 1, 0],
                 [ 2, 0, 1, 1, 0, 0, 0, 1, 0, 2],
                 [ 2, 1, 0, 1, 0, 0, 0, 0, 1, 2],
                 [ 2, 1, 1, 1, 1, 1, 0, 1, 0, 2],
                 [ 2, 0, 1, 0, 0, 1, 0, 1, 0, 2],
                 [ 2, 2, 2, 2, 0, 2, 2, 2, 2, 2]];

var mapData01 = [[ 2, 2, 2, 2, 0, 2, 2, 2, 2, 2],
                 [ 2, 1, 1, 1, 0, 1, 0, 0, 2, 2],
                 [ 2, 0, 1, 1, 1, 0, 1, 2, 2, 2],
                 [ 2, 1, 1, 1, 1, 1, 0, 0, 0, 2],
                 [ 2, 1, 1, 1, 1, 0, 0, 1, 2, 2],
                 [ 2, 0, 1, 1, 0, 1, 0, 1, 1, 2],
                 [ 2, 1, 1, 1, 0, 1, 0, 0, 1, 2],
                 [ 2, 1, 1, 1, 1, 1, 1, 2, 1, 2],
                 [ 2, 0, 1, 0, 1, 1, 1, 1, 1, 2],
                 [ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]];

var mapData02 = [[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
                 [ 2, 1, 1, 1, 0, 1, 0, 0, 2, 2],
                 [ 2, 0, 1, 1, 1, 0, 1, 2, 2, 2],
                 [ 2, 1, 1, 1, 1, 1, 0, 0, 0, 2],
                 [ 2, 1, 1, 1, 1, 0, 0, 1, 2, 2],
                 [ 2, 0, 1, 1, 0, 1, 0, 1, 1, 2],
                 [ 2, 1, 1, 1, 0, 1, 0, 0, 1, 2],
                 [ 2, 1, 1, 1, 1, 1, 1, 2, 1, 2],
                 [ 2, 0, 1, 0, 1, 1, 1, 1, 1, 2],
                 [ 2, 2, 2, 2, 0, 2, 2, 2, 2, 2]];

var mapData03 = [[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
                 [ 2, 1, 1, 1, 0, 1, 0, 0, 2, 2],
                 [ 2, 0, 1, 1, 1, 0, 1, 2, 2, 2],
                 [ 2, 1, 1, 1, 1, 1, 0, 0, 0, 2],
                 [ 0, 1, 1, 1, 1, 0, 0, 1, 2, 2],
                 [ 2, 0, 1, 1, 0, 1, 0, 1, 1, 0],
                 [ 2, 1, 1, 1, 0, 1, 0, 0, 1, 2],
                 [ 2, 1, 1, 1, 1, 1, 1, 2, 1, 2],
                 [ 2, 0, 1, 0, 1, 1, 1, 1, 1, 2],
                 [ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]];

var mapData04 = [[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
                 [ 2, 1, 1, 1, 0, 1, 2, 0, 1, 2],
                 [ 2, 0, 1, 2, 2, 2, 2, 2, 2, 2],
                 [ 2, 1, 1, 2, 2, 2, 2, 2, 1, 2],
                 [ 0, 1, 1, 1, 2, 2, 2, 2, 2, 2],
                 [ 2, 0, 1, 2, 2, 2, 2, 2, 2, 2],
                 [ 2, 1, 1, 2, 2, 2, 2, 2, 2, 2],
                 [ 2, 1, 1, 2, 2, 2, 2, 2, 1, 2],
                 [ 2, 0, 1, 0, 1, 1, 1, 1, 1, 2],
                 [ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]];

//3Dモデル共用テクスチャ
var texture;
//3Dモデル保持用
var yuushaModel;
var sonchoModel;
var shikabaneModel;
var souryokoModel;
var majokoModel;
var isekiModel;
var bokaModel;

var rot = 0; // 角度
// マウスを押した状態かどうかを判別するフラグ
var isMouseDown = false;
// 一時的なマウスの値を格納する変数
var oldX = 0;
var targetRot = 0;

// メッセージ表示タイル
var messageTile;

// 「はなす」ボタン
var talkButton;
// 「はなす」状態かどうか判定
var isTalk = false;

// 「いどう」ボタン
var moveButton;
// 「いどう」状態かどうか判定
var isMove = false;

// 「もどる」ボタン
var moveBack;
// 「もどる」状態かどうか判定(未使用)
var isBack = false;

// 「たたかう」ボタン
var battleButton;
// 「たたかう」状態かどうか判定
var isBattle = false;
// 「しかばね」を倒した状態かどうか判定
var isDefeating = false;

// 「しらべる」ボタン
var searchButton;
// 「しらべる」状態かどうか判定
var isSearch = false;

var battleCounter = 0;


var audioBattleSE01;
var audioBattleSE02;

init();
render();

function init() {
    
    container = document.createElement( 'div' );
    document.body.appendChild( container );

    // 3Dシーン作成
    scene = new THREE.Scene(); 

    // カメラ設定
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
    camera.position.x = 4.5;
    camera.position.y = 3; 
    camera.position.z = 5.5; 

    // 3D描画用レンダラ設定
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize( window.innerWidth, window.innerHeight ); 
    document.body.appendChild( renderer.domElement ); 
    //背景の色を設定する
    renderer.setClearColor(0x00ffff, 1); 

    // 光源の設定
    var light = new THREE.DirectionalLight("#ffffff", 1);
    var ambient = new THREE.AmbientLight("#771111");
    light.position.set(0, 100, 30);
    scene.add(light);
    scene.add(ambient);
    
    
    // Planeオブジェクトによるマップを作成
    mapDataNum = 0;
    createMap();

    // vox.jsで3Dモデル読込
    vox3DModelLoader();

    //メッセージ表示用タイルを作成    
    messageTile = document.createElement('div');
    messageTile.classList.add( 'overlay' );
    messageTile.innerHTML = "よくぞまいった勇者よ!<br>わしがこの村の村長じゃ!";
    messageTile.style.display = 'none';
    container.appendChild(messageTile);
  
    //「はなす」状態の初期値を設定
    isTalk = false;
    //「はなす」ボタンを作成    
    talkButton = document.createElement('div');
    talkButton.classList.add( 'overlayTalkButton' );
    talkButton.innerHTML = "はなす";
    talkButton.onclick = function() {
        
        if (isTalk) {
        
            messageTile.style.display = 'none';
            isTalk = false;
        
        } else {

            //マップごとのメッセージを設定
            if(mapDataNum == 0) {

                //「いどう」ボタンが押下されて移動先を示すボタンが表示されている場合は、それらを非表示の状態にもどしておく
                if (isMove) {
                    SouryokoButton.style.display = 'none';
                    MajokoButton.style.display = 'none';
                    ShikabaneButton.style.display = 'none';
                    IsekiButton.style.display = 'none';
                    isMove = false;
                }

                if(isDefeating) {
                    messageTile.innerHTML = "あのしかばねを退けるとは! さすが勇者殿!<br>ありがとうございますじゃ!";    
                } else {    
                    messageTile.innerHTML = "旅の勇者殿よ! <br>どうか遺跡近くに現れる<br>しかばねを退治してもらえまいか";
                }
            } else if (mapDataNum == 3) {
                //messageTile.innerHTML = "はじめまして勇者殿!<br>拙者しかばねと申します!";
            } else if (mapDataNum == 1) {
                if(isDefeating) {
                    messageTile.innerHTML = "しかばねを退治するなんて<br>勇者クン本当に強いんだね! 見直した!!かっこいい!!";    
                } else {    
                    messageTile.innerHTML = "はじめまして勇者クン!<br>わたし僧侶子!<br>以後ヨロシクっす!";
                }
            } else if (mapDataNum == 2) {
                if(isDefeating) {
                    messageTile.innerHTML = "あの恐ろしいしかばねがいなくなりました!<br>さすが勇者さまです!!<br>ありがとうございます!!";    
                } else {    
                    messageTile.innerHTML = "はじめまして勇者さま<br>わたし魔女子と申します";
                }
            } else if (mapDataNum == 4) {
                messageTile.innerHTML = "遺跡です<br>どうぞ見てってください!";
            }

            messageTile.style.display = '';
            isTalk = true;
            
        }
    };
    container.appendChild(talkButton);
    //container.removeChild(talkButton);

    //「いどう」状態の初期値を設定
    isMove = false;
    //「いどう」ボタンを作成    
    moveButton = document.createElement('div');
    moveButton.classList.add( 'overlayMoveButton' );
    moveButton.innerHTML = "いどう";
    moveButton.onclick = function() {

        //「はなす」ボタンが押下されてメッセージが表示されている場合は、それらを非表示の状態にもどしておく
        if (isTalk) {        
            messageTile.style.display = 'none';
            isTalk = false;
        }

        //「いどう」時の移動先を示すボタンの表示・非表示の切り替え
        if (!isMove) {
            SouryokoButton.style.display = '';
            MajokoButton.style.display = '';
            ShikabaneButton.style.display = '';
            IsekiButton.style.display = '';
            isMove = true;
        } else {
            SouryokoButton.style.display = 'none';
            MajokoButton.style.display = 'none';
            ShikabaneButton.style.display = 'none';
            IsekiButton.style.display = 'none';
            isMove = false;
        }
    };
    container.appendChild(moveButton);

    //マップナンバー { 村長: 0, 僧侶子: 1, 魔女子: 2, しかばね: 3 , 遺跡: 4 } );
    //「僧侶子」ボタンを作成    
    SouryokoButton = document.createElement('div');
    SouryokoButton.classList.add( 'overlayMoveToSouryokoButton' );
    SouryokoButton.innerHTML = "僧侶子";
    SouryokoButton.onclick = function() {
        //「僧侶子」マップへ移動
        mapDataNum = 1;
        changeMap();
    };
    container.appendChild(SouryokoButton);
    //村長マップの最初の状態では「僧侶子」ボタンは表示されない
    SouryokoButton.style.display = 'none';

    //「魔女子」ボタンを作成    
    MajokoButton = document.createElement('div');
    MajokoButton.classList.add( 'overlayMoveToMajokoButton' );
    MajokoButton.innerHTML = "魔女子";
    MajokoButton.onclick = function() {
        //「魔女子」マップへ移動
        mapDataNum = 2;
        changeMap();
    };
    container.appendChild(MajokoButton);
    //村長マップの最初の状態では「魔女子」ボタンは表示されない
    MajokoButton.style.display = 'none';

    //「しかばね」ボタンを作成    
    ShikabaneButton = document.createElement('div');
    ShikabaneButton.classList.add( 'overlayMoveToShikabaneButton' );
    ShikabaneButton.innerHTML = "しかばね";
    ShikabaneButton.onclick = function() {
        //「しかばね」マップへ移動
        mapDataNum = 3;
        changeMap();
    };
    container.appendChild(ShikabaneButton);
    //村長マップの最初の状態では「しかばね」ボタンは表示されない
    ShikabaneButton.style.display = 'none';

    //「遺跡」ボタンを作成    
    IsekiButton = document.createElement('div');
    IsekiButton.classList.add( 'overlayMoveToIsekiButton' );
    IsekiButton.innerHTML = "遺跡";
    IsekiButton.onclick = function() {
        //「遺跡」マップへ移動
        mapDataNum = 4;
        changeMap();
    };
    container.appendChild(IsekiButton);
    //村長マップの最初の状態では「遺跡」ボタンは表示されない
    IsekiButton.style.display = 'none';

    //「もどる」ボタンを作成    
    backButton = document.createElement('div');
    backButton.classList.add( 'overlayBackButton' );
    backButton.innerHTML = "もどる";
    backButton.onclick = function() {
        //戦闘時は「もどる」操作できない
        if(isBattle) return;

        //村長マップへ「もどる」
        mapDataNum = 0;
        changeMap();
    };
    container.appendChild(backButton);
    //最初の画面では「もどる」ボタンは表示されない
    backButton.style.display = 'none';

    //「たたかう」状態の初期値を設定
    isBattle = false;
    //「たたかう」ボタンを作成    
    battleButton = document.createElement('div');
    battleButton.classList.add( 'overlayBattleButton' );
    battleButton.innerHTML = "たたかう";
    battleButton.onclick = function() {

        if(isDefeating) {
            messageTile.innerHTML = "";
            messageTile.style.display = 'none';
            return;
        }

        if(battleCounter > 2) {

            createjs.Tween.get(yuushaModel.position)
            .to({y:2,z:-3},200)
            .to({y:0,z:-5},200)
            .call(soundBattleSE01)
            .call(visibleBokaModel)
            .call(hideShikabaneModel)
            .wait(100)
            .call(visibleShikabaneModel)
            .to({z:-2},350)
            .call(hideBokaModel)
            .call(dispBattleEndMessage)
            .call(hideShikabaneModel);

            isDefeating = true;
            return;
        
        }

        //
        if (!isBattle) {
            //カウントアップしていって戦闘状態が終了しているか確認用  
            battleCounter = battleCounter + 1;
            isBattle = true;
            createjs.Tween.get(yuushaModel.position)
            .to({y:2,z:-3},200)
            .to({y:0,z:-5},200)
            .call(soundBattleSE01)
            .call(visibleBokaModel)
            .call(hideShikabaneModel)
            .wait(100)
            .call(visibleShikabaneModel)
            .to({z:-2},350)
            .call(hideBokaModel)
            .call(dispAttackMessage)
            .call(shikabaneAttack);
            //.call(onAttackMoveComplete);

        }
        
    };
    container.appendChild(battleButton);
    //最初の画面では「たたかう」ボタンは表示されない
    battleButton.style.display = 'none';

    //「しらべる」状態の初期値を設定
    isSearch = false;
    //「しらべる」ボタンを作成    
    searchButton = document.createElement('div');
    searchButton.classList.add( 'overlaySearchButton' );
    searchButton.innerHTML = "しらべる";
    searchButton.onclick = function() {
        //
        if (isSearch) {        
            messageTile.style.display = 'none';
            isSearch = false;
        } else {
            //「しらべる」時のメッセージを設定
            messageTile.innerHTML = "勇者は遺跡を調べた<br>しかし何もみつからなかった";
            messageTile.style.display = '';
            isSearch = true;
        }
    };
    container.appendChild(searchButton);
    //最初の画面では「しらべる」ボタンは表示されない
    searchButton.style.display = 'none';
    //container.removeChild(searchButton);

    // AudioElement を作成
    //audioFieldBGM = new Audio();
    //audioBattleBGM = new Audio();
    audioBattleSE01 = new Audio();
    audioBattleSE02 = new Audio();

    
    // プリロードを設定する
    //audioFieldBGM.preload = "metadata";
    //audioBattleBGM.preload = "metadata";
    audioBattleSE01.preload = "metadata";
    audioBattleSE02.preload = "metadata";

    // ループ再生を有効
    //audioFieldBGM.loop = true;  
    //audioBattleBGM.loop = true;  
    
    // 音量を 設定する
    //audioFieldBGM.volume = 0.5;
    //audioBattleBGM.volume = 0.3;
    audioBattleSE01.volume = 0.1;
    audioBattleSE02.volume = 0.1;

    
    // マウス、タッチ処理を呼び出すイベントリスナーをセット
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("touchstart", onMouseDown);
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("touchend", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("touchmove", onMouseMove);
    
}

// 攻撃時のダメージを受けたときの点滅表示のための3Dモデル表示・非表示機能
// 「たたかう」で敵を攻撃時に「しかばね」3Dモデルを表示
function visibleYuushaModel() {
    yuushaModel.visible = true;
}
// 「たたかう」で攻撃終了時に「しかばね」3Dモデルを非表示
function hideYuushaModel() {
    yuushaModel.visible = false;
}

// 「たたかう」で敵を攻撃時に「しかばね」3Dモデルを表示
function visibleShikabaneModel() {
    shikabaneModel.visible = true;
}
// 「たたかう」で攻撃終了時に「しかばね」3Dモデルを非表示
function hideShikabaneModel() {
    shikabaneModel.visible = false;
}

// 「たたかう」で敵を攻撃時に擬音「ボカ」を表示
function visibleBokaModel() {
    bokaModel.visible = true;
}

// 「たたかう」で攻撃終了時に擬音「ボカ」を非表示
function hideBokaModel() {
    bokaModel.visible = false;
}

// 「たたかう」時のメッセージを表示
function dispAttackMessage() {
    messageTile.innerHTML = "勇者のこうげき!<br>しかばねにダメージをあたえた!!!<br>";
    messageTile.style.display = '';
}

// 「たたかう」時の「しかばね」攻撃時メッセージを表示
function dispShikabaneAttackMessage() {
    messageTile.innerHTML += "しかばねのこうげき!<br>勇者はダメージをうけた!";
    messageTile.style.display = '';
}

// 「たたかう」時のメッセージを非表示
function hideAttackMessage() {
    messageTile.innerHTML = "";
    messageTile.style.display = 'none';
}

// 「たたかう」時の戦闘終了メッセージを表示
function dispBattleEndMessage() {
    messageTile.innerHTML = "勇者のこうげき!<br>しかばねにダメージをあたえた!!!<br>しかばねをたおした!!!!";
    messageTile.style.display = '';
}

// 「しかばね」の「たたかう」時の動作をTween機能で指定
function shikabaneAttack() {
            createjs.Tween.get(shikabaneModel.position)
            .to({z:-3},250)
            .call(soundBattleSE02)
            .call(visibleBokaModel)
            .call(hideYuushaModel)
            .wait(100)
            .call(visibleYuushaModel)
            .to({z:-6},250)
            .call(hideBokaModel)
            .call(dispShikabaneAttackMessage)
            .wait(10)
            .call(onAttackMoveComplete);
}

// 「たたかう」時の勇者攻撃SE音ならす
function soundBattleSE01() {
    // サウンドファイルの URL アドレスを指定
    audioBattleSE01.src = "https://rawcdn.githack.com/siouxcitizen/3DModel/c19617dd78dc9314a75e2336d7797a0ac4a0e3e0/ogg/yuushKougeki.ogg";
    // 読み込みを開始する
    audioBattleSE01.load(); 
    // 再生を開始する
    audioBattleSE01.play();
}

// 「たたかう」時のしかばね攻撃SE音をならす
function soundBattleSE02() {
    // サウンドファイルの URL アドレスを指定
    audioBattleSE02.src = "https://rawcdn.githack.com/siouxcitizen/3DModel/c19617dd78dc9314a75e2336d7797a0ac4a0e3e0/ogg/shikabaneKougeki.ogg";
    // 読み込みを開始する
    audioBattleSE02.load(); 
    // 再生を開始する
    audioBattleSE02.play();
}

// 「たたかう」動作が終了したとき
function onAttackMoveComplete() {
    isBattle = false;
}

// マップ移動
function changeMap() {

    removeMap();
    //CSSによるボタン等を非表示
    hideCSSObj();
    hide3DModel();

    createMap();
    //CSSによるボタン等を表示
    displayCSSObj();
    display3DModel();

    messageTile.style.display = 'none';
}


// CSSでマップごとに表示指定されているオブジェクトを表示する
// CSSオブジェクトの状態保持用の変数の初期化も行う
function displayCSSObj() {

    // CSSオブジェクトの状態保持用の変数の初期化
    isTalk = false;
    isMove = false;
    isBattle = false;
    isSearch = false;


    // CSSでマップごとに表示指定されているオブジェクトを表示
    if (mapDataNum == 0) {

        talkButton.style.display = '';
        moveButton.style.display = '';

    } else if (mapDataNum == 1) {

        talkButton.style.display = '';
        backButton.style.display = '';

    }  else if (mapDataNum == 2) {

        talkButton.style.display = '';
        backButton.style.display = '';

    }  else if (mapDataNum == 3) {

        //talkButton.style.display = '';
        battleButton.style.display = '';
        backButton.style.display = '';

    }   else if (mapDataNum == 4) {

        //talkButton.style.display = '';
        searchButton.style.display = '';
        backButton.style.display = '';

    } 
}

// 3DModelを表示する
function display3DModel() {

    if (mapDataNum == 0) {

        //勇者3Dモデルを表示
        yuushaModel.position.set( 5, 0, -2 );
        yuushaModel.rotation.y =Math.PI;
        yuushaModel.visible = true;

        //村長3Dモデルを表示
        sonchoModel.position.set( 5, 0, -5 );
        sonchoModel.visible = true;

    } else if (mapDataNum == 1) {

        //勇者3Dモデルを表示
        yuushaModel.position.set( 5, 0, -2 );
        yuushaModel.rotation.y =Math.PI;
        yuushaModel.visible = true;

        //僧侶子3Dモデルを表示
        souryokoModel.position.set( 5, 0, -6 );
        souryokoModel.visible = true;

    }  else if (mapDataNum == 2) {

        //勇者3Dモデルを表示
        yuushaModel.position.set( 5, 0, -2 );
        yuushaModel.rotation.y =Math.PI;
        yuushaModel.visible = true;

        //魔女子3Dモデルを表示
        majokoModel.position.set( 5, 0, -6 );
        majokoModel.visible = true;

    }  else if (mapDataNum == 3) {

        //勇者3Dモデルを表示
        yuushaModel.position.set( 5, 0, -2 );
        yuushaModel.rotation.y =Math.PI;
        yuushaModel.visible = true;

        //しかばね撃退後はしかばね3Dモデルを表示しない
        if (!isDefeating) {
            //しかばね3Dモデルを表示
            shikabaneModel.position.set( 5, 0, -6 );
            shikabaneModel.visible = true;
        }
    }   else if (mapDataNum == 4) {

        //勇者3Dモデルを表示
        yuushaModel.position.set( 5, 0, -1 );
        yuushaModel.rotation.y =Math.PI;
        yuushaModel.visible = true;

        //遺跡3Dモデルを表示
        isekiModel.position.set( 4.5, 0.7, -6 );
        isekiModel.visible = true;
    } 
}

// CSSで表示指定されているオブジェクトを非表示にする
function hideCSSObj() {

    messageTile.style.display = 'none';

    talkButton.style.display = 'none';
    moveButton.style.display = 'none';

    SouryokoButton.style.display = 'none';
    MajokoButton.style.display = 'none';
    ShikabaneButton.style.display = 'none';
    IsekiButton.style.display = 'none';

    backButton.style.display = 'none';
    battleButton.style.display = 'none';
    searchButton.style.display = 'none';

}

// 3DModelを非表示にする
function hide3DModel() {

    //勇者3Dモデルを非表示
    yuushaModel.visible = false;
    //村長3Dモデルを非表示
    sonchoModel.visible = false;
    //しかばね3Dモデルを非表示
    shikabaneModel.visible = false;
    //僧侶子3Dモデルを非表示
    souryokoModel.visible = false;
    //魔女子3Dモデルを非表示
    majokoModel.visible = false;
    //遺跡3Dモデルを非表示
    isekiModel.visible = false;
    //「ボカ」3Dモデルを非表示
    bokaModel.visible = false;


}

// Planeオブジェクトによるマップを作成
function createMap() {

    var mapData;
    if (mapDataNum == 0) {
        mapData = mapData00;
    } else if (mapDataNum == 1) {
        mapData = mapData01;
    } else if (mapDataNum == 2) {
        mapData = mapData02;
    } else if (mapDataNum == 3) {
        mapData = mapData03;
    } else if (mapDataNum == 4) {
        mapData = mapData04;
    }

    // PLANEオブジェクト作成
    // 共通PLANEジオメトリ作成
    var geometry = new THREE.PlaneGeometry( 1, 1, 1 ); 

    // 草原テクスチャの作成
    var fieldTexture = THREE.ImageUtils.loadTexture( planeFieldPngURL );
    var fieldMaterial = new THREE.MeshPhongMaterial( { map: fieldTexture, side: THREE.DoubleSide, ambient:0x111111, specular:0x353535} );

    // 砂漠テクスチャの作成
    var desertTexture = THREE.ImageUtils.loadTexture( planeDesertPngURL );
    var desertMaterial = new THREE.MeshPhongMaterial( { map: desertTexture, side: THREE.DoubleSide, ambient:0x111111, specular:0x353535 } );

    // 水辺テクスチャの作成
    var waterTexture = THREE.ImageUtils.loadTexture( planeWaterPngURL );
    var waterMaterial = new THREE.MeshPhongMaterial( { map: waterTexture, side: THREE.DoubleSide, ambient:0x111111, specular:0x353535 } );

    // マップ配列を読み取り、Planeにマップ用テクスチャ画像を貼り付けて表示
    for (var xCounter = 0; xCounter < mapData.length; xCounter++) {

        for (var zCounter = 0; zCounter < mapData[0].length; zCounter++) {

            if(mapData[xCounter][zCounter] == 0) {
	            
	            var fieldPlane = new THREE.Mesh( geometry, fieldMaterial ); 
	            fieldPlane.position.x = xCounter;
	            fieldPlane.position.z = -zCounter;
	            fieldPlane.rotation.x =  Math.PI / 360 * 180;
	            //fieldPlane.name = "座標X:" + xCounter + " Z:-" + zCounter + "草原マップ";
	            fieldPlane.name = "Axis_X:" + xCounter + " Axis_Z:-" + zCounter + "FieldMap";
	            scene.add( fieldPlane ); 

            } else if (mapData[xCounter][zCounter] == 1) {

	            var desertPlane = new THREE.Mesh( geometry, desertMaterial ); 
	            desertPlane.position.x = xCounter;
	            desertPlane.position.z = -zCounter;
	            desertPlane.rotation.x = Math.PI / 360 * 180;
	            //desertPlane.name = "座標X:" + xCounter + " Z:-" + zCounter + "砂漠マップ";
	            desertPlane.name = "Axis_X:" + xCounter + " Axis_Z:-" + zCounter + "DesertMap";
	            scene.add( desertPlane ); 

            } else if (mapData[xCounter][zCounter] == 2) {

	            var waterPlane = new THREE.Mesh( geometry, waterMaterial ); 
	            waterPlane.position.x = xCounter;
	            waterPlane.position.z = -zCounter;
	            waterPlane.rotation.x =  Math.PI / 360 * 180;
	            //waterPlane.name = "座標X:" + xCounter + " Z:-" + zCounter + "水辺マップ";
	            waterPlane.name = "Axis_X:" + xCounter + " Axis_Z:-" + zCounter + "WaterMap";
	            scene.add( waterPlane.clone() ); 

            }

        }
    }

}

// Planeオブジェクトによるマップをクリア
function removeMap() {

    var removePlaneName;

    var mapData;
    if (mapDataNum == 0) {
        mapData = mapData00;
    } else if (mapDataNum == 1) {
        mapData = mapData01;
    } else if (mapDataNum == 2) {
        mapData = mapData02;
    } else if (mapDataNum == 3) {
        mapData = mapData03;
    } else if (mapDataNum == 4) {
        mapData = mapData04;
    }

    // マップ配列を読み取り、Planeにマップ用テクスチャ画像を貼り付けて表示
    for (var xCounter = 0; xCounter < mapData.length; xCounter++) {

        for (var zCounter = 0; zCounter < mapData[0].length; zCounter++) {

            if(mapData[xCounter][zCounter] == 0) {
	            //removePlaneName = "座標X:" + xCounter + " Z:-" + zCounter + "草原マップ";
	            removePlaneName = "Axis_X:" + xCounter + " Axis_Z:-" + zCounter + "FieldMap";

            } else if (mapData[xCounter][zCounter] == 1) {
	            //removePlaneName = "座標X:" + xCounter + " Z:-" + zCounter + "砂漠マップ";
	            removePlaneName = "Axis_X:" + xCounter + " Axis_Z:-" + zCounter + "DesertMap";

            } else if (mapData[xCounter][zCounter] == 2) {
	            //removePlaneName = "座標X:" + xCounter + " Z:-" + zCounter + "水辺マップ";
	            removePlaneName = "Axis_X:" + xCounter + " Axis_Z:-" + zCounter + "WaterMap";
            }

            var selectedObject = scene.getObjectByName(removePlaneName);
            scene.remove(selectedObject);

        }
    }
}

// vox.jsでMagicaVoxelで作成した作成3Dモデルを読み込み
function vox3DModelLoader() { 

    var parser = new vox.Parser();

    //勇者3Dモデルを作成・設置
    parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/8506b62fd6e9ed38e5c5f47f1d5fab80ba82dd97/vox/yuusha.vox").then(function(voxelData) {
        var builder = new vox.MeshBuilder(voxelData, {
            voxelSize: 0.1,
            vertexColor: true,
            optimizeFaces: false,
        });
        yuushaModel = builder.createMesh();
        yuushaModel.position.set( 5, 0, -2 );
        yuushaModel.rotation.y =Math.PI;
        scene.add(yuushaModel);
    });

    //村長3Dモデルを作成・設置
    parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/b2d06e45f6b64c3e342b724a4ec5a0c427a4ce0a/vox/soncho.vox").then(function(voxelData) {
        var builder = new vox.MeshBuilder(voxelData, {
            voxelSize: 0.1,
            vertexColor: true,
            optimizeFaces: false,
        });
        sonchoModel = builder.createMesh();
        sonchoModel.position.set( 5, 0, -5 );
        scene.add(sonchoModel);
    });

    //しかばね3Dモデルを作成・設置 最初の画面では非表示
    parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/b2d06e45f6b64c3e342b724a4ec5a0c427a4ce0a/vox/shikabane.vox").then(function(voxelData) {
        var builder = new vox.MeshBuilder(voxelData, {
            voxelSize: 0.1,
            vertexColor: true,
            optimizeFaces: false,
        });
        shikabaneModel = builder.createMesh();
        shikabaneModel.position.y -= 50;
        scene.add(shikabaneModel);
        //最初の画面では非表示にする
        shikabaneModel.visible = false;
    });

    //僧侶子3Dモデルを作成・設置 最初の画面では非表示
    parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/69266c8836d6333f4f01b399421d0f8f95ca41bd/vox/souryo.vox").then(function(voxelData) {
        var builder = new vox.MeshBuilder(voxelData, {
            voxelSize: 0.1,
            vertexColor: true,
            optimizeFaces: false,
        });
        souryokoModel = builder.createMesh();
        souryokoModel.position.set( 5, 0, -5 );
        scene.add(souryokoModel);
        //最初の画面では非表示にする
        souryokoModel.visible = false;
    });

    //魔女子3Dモデルを作成・設置 最初の画面では非表示
    parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/69266c8836d6333f4f01b399421d0f8f95ca41bd/vox/majyo.vox").then(function(voxelData) {
        var builder = new vox.MeshBuilder(voxelData, {
            voxelSize: 0.1,
            vertexColor: true,
            optimizeFaces: false,
        });
        majokoModel = builder.createMesh();
        majokoModel.position.set( 5, 0, -5 );
        scene.add(majokoModel);
        //最初の画面では非表示にする
        majokoModel.visible = false;
    });

    //謎の遺跡3Dモデルを作成・設置 最初の画面では非表示
    parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/4e2812efb8809a27f76898a29d9675deb425466e/vox/iseki.vox").then(function(voxelData) {
        var builder = new vox.MeshBuilder(voxelData, {
            voxelSize: 0.5,
            vertexColor: true,
            optimizeFaces: false,
        });
        isekiModel = builder.createMesh();
        isekiModel.position.set( 5, 1, -7 );
        scene.add(isekiModel);
        //最初の画面では非表示にする
        isekiModel.visible = false;
    });
    
    //擬音「ボカ」3Dモデルを作成・設置 最初の画面では非表示
    //「たたかう」で攻撃時に表示される
    parser.parse("https://rawcdn.githack.com/siouxcitizen/3DModel/06fac89d0cfa3048354f937490ea7a77deb18ab3/vox/boka.vox").then(function(voxelData) {
        var builder = new vox.MeshBuilder(voxelData, {
            voxelSize: 0.15,
            vertexColor: true,
            optimizeFaces: false,
        });
        bokaModel = builder.createMesh();
        //bokaModel.position.y -= 50;
        bokaModel.position.set( 5, 2, -5 );
        scene.add(bokaModel);
        //最初の画面では非表示にする
        bokaModel.visible = false;
    });

}

function render() { 

    requestAnimationFrame( render ); 

    //rot += 0.5; // 毎フレーム角度を0.5度ずつ足していく
    // イージングの公式を用いて滑らかにする
    // 値 += (目標値 - 現在の値) * 減速値
    rot += (targetRot - rot) * 0.05;

    // 角度に応じてカメラの位置を設定
    camera.position.x = yuushaModel.position.x + 5 * Math.sin(rot * Math.PI / 180);
    camera.position.z = yuushaModel.position.z + 5 * Math.cos(rot * Math.PI / 180);
    // キャラクタ方向を見つめる
    camera.lookAt({x:yuushaModel.position.x,  y:yuushaModel.position.y,  z:yuushaModel.position.z});

    renderer.render(scene, camera);
    
}

// マウスを押したとき
function onMouseDown(event) {
    isMouseDown = true;
    oldX = event.pageX;
}

// マウスを動かした時
function onMouseMove(event) {
    if (isMouseDown) {
        // 3DモデルをX軸とY軸方向に回転させます
        var dy = event.pageX - oldX;
        targetRot += dy * 0.25;
        oldX = event.pageX;
    }
}

// マウスを離したとき
function onMouseUp(event) {
    isMouseDown = false;
}
            
          
!
999px

Console