RのWeb制作

Webサービス制作のための技術情報を。データ分析（Python、機械学習コンペ他）や自作野球ゲームMeisyoのこと中心。

EBS2

EBS3 – 探索の表示改変案策定中（RPG風）

投稿日：

RPG風に画面遷移しない探索を考え中です。
キーボードてカチカチやりながらできると、ヒマつぶしとして面白くなりそう。
↓現状はこんな感じ（Gif動画なのでクリックしてどうぞ）
gyazo

あとは追加したいのは・・・
・キーボードで移動
・確率でモブ出現
・宝箱を空ける
・出口到達で階層移動
ですね。
普通に探索として遊べる感じで。

コードはcanvas（HTML5）とJavaScriptで書いています。
動けばOKとかいう考え方なのでスパゲッテイなやつです。
（最初imgとpositionでやってたら重すぎたので、現状にしました）

<!--[if IE]><script type='text/javascript' src='/home/rei-farms/www/js/excanvas.js'></script><![endif]--><table class=border><tr><td style='position: relative; width: 336px; height: 336px;'><canvas id='hunt_map' width='336' height='336' style='width: 336px; height: 336px; background: url(/home/rei-farms/www/img/ebs/map/off.png);'></canvas>
</td>
<td valign=top style='width: 200px;'>移動コマンド
<table style='margin: auto;'>
<form method=POST><tr><td>&nbsp;</td><td><input type=button onclick='change_map(0,-1);' value='▲'></td><td>&nbsp;</td></tr>
<tr><td><input type=button onclick='change_map(-1,0);' value='◀'></td><td><input type=button value='■' onclick='location.href="/home/rei-farms/www/ebs/hunt";'></td><td><input type=button onclick='change_map(1,0);' value='▶'></td></tr>
<tr><td>&nbsp;</td><td><input type=button onclick='change_map(0,1);' value='▼'></td><td>&nbsp;</td></tr>
<input type=hidden name=x><input type=hidden name=y></form></table>
<hr>
ステータス
<table style='margin: auto;'>
<tr><th>HP</th><td><img src='/home/rei-farms/www/img/ebs/hp_blue.gif' width='95' height='8' title='3210/3210'></td></tr><tr><th>EN</th><td><img src='/home/rei-farms/www/img/ebs/hp_blue.gif' width='95' height='8' title='540/540'></td></tr></table><hr>
<input type=button value='このマップから脱出する' onclick='location.href="/home/rei-farms/www/ebs/hunt_exit";'><br></td><td><textarea id='text' cols=100 rows=30></textarea></td></tr></table>
</td></tr></table>

<script type="text/javascript">
<!--
// Map Set
var id_x = 3;
var id_y = -5;
var base_x = 3 - 10;
var base_y = -5 - 10;

// Img Set
var img_off = '/home/rei-farms/www/img/ebs/map/off.png';
var img_on = '/home/rei-farms/www/img/ebs/map/on.png';
var img_my = '/home/rei-farms/www/img/ebs/noimg.png';
var img_box = '/home/rei-farms/www/img/ebs/map/box.png';
var img_str = '/home/rei-farms/www/img/ebs/map/stair.png';

// Load Maps
var mapData = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1],
[1,1,1,1,1,0,1,1,1,0,0,0,0,0,1,1,1,1],
[1,1,1,1,1,0,1,1,1,1,1,1,9,1,1,1,1,1],
[1,1,2,1,0,0,1,0,0,0,0,0,0,0,1,1,1,1],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0]
];

// Load Views
var mapView = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];

// function
window.onload = function ()
{
    // Read
    read_map(id_x, id_y);
}

// change
function change_map(mx, my)
{
    var vx = id_x + mx;
    var vy = id_y + my;
    
    // X
    if(-5 > vx)
    {
        vx = -5;
    }
    else if(12 < vx)
    {
        vx = 12;
    }
    // Y
    if(-6 > vy)
    {
        vy = -6;
    }
    else if(10 < vy)
    {
        vy = 10;
    }
    
    // Change
    var x = vx - -5;
    var y = vy - -6;
    if(y in mapData)
    {
        if(x in mapData[y])
        {
            if(mapData[y][x] >= 1 && Math.sqrt(Math.pow(mx, 2)+Math.pow(my, 2)) == 1 &&(id_x != vx || id_y != vy))
            {
                id_x = vx;id_y = vy;
                base_x += mx;base_y += my;
                //
                read_map(id_x, id_y);
            }
        }
    }
}

// read
function read_map(mx, my)
{
    // Map Set
    var map = document.getElementById('hunt_map');
    if(!map){return false;}
    var ctx = map.getContext('2d');
    ctx.clearRect(0, 0, map.width, map.height);
    
    // リスト化
    var i = 0;
    var map_imgs = [];
    var map_xys = [];
    for(var vy = (my - 10); vy <= (my + 10); vy++)
    {
        var y = vy - -6;
        for(var vx = (mx - 10); vx <= (mx + 10); vx++)
        {
            var x = vx - -5;
            
            // str読み込み
            var str = 0;
            if(y in mapData)
            {
                if(x in mapData[y])
                {
                    str = mapData[y][x];
                }
            }
            if(x < 0 || y < 0 || str == 0){continue;}
            
            // Image
            var img_src = null;
            if(vx == mx && vy == my)
            {
                img_src = img_my;
            }
            else if(y in mapView)
            {
                if(x in mapView[y])
                {
                    // View化
                    if(Math.abs(mx - vx) <= 3 && Math.abs(my - vy) <= 3)
                    {
                        mapView[y][x] = 1;
                    }
                    
                    // Str
                    if(mapView[y][x] == 0){continue;}
                    
                    // 土地
                    map_imgs[i] = new Image();
                    map_imgs[i].src = img_on;
                    map_xys[i] = vx + ',' + vy;
                    i++;
                    
                    if(str == 9)
                    {
                        img_src = img_str;
                    }
                    else if(str == 2)
                    {
                        img_src = img_box;
                    }
                }
            }
            
            // 
            if(img_src)
            {
                map_imgs[i] = new Image();
                map_imgs[i].src = img_src;
                map_xys[i] = vx + ',' + vy;
                i++;
            }
        }
    }
    
    //
    document.getElementById('text').value = null;
    var loadedCount = 1;
    for(var i in map_imgs)
    {
        map_imgs[i].addEventListener('load', function() {
            if (loadedCount == map_imgs.length)
            {
                for(var j in map_imgs)
                {
                    var xys = map_xys[j].split(',');
                    var x = (xys[0] - id_x + 10) * 16;
                    var y = (xys[1] - id_y + 10) * 16;
                    ctx.drawImage(map_imgs[j], x, y, 16, 16);
                    document.getElementById('text').value += x + "," + y + "!";
                }
            }
            loadedCount++;
        }, false);
    }
}//-->
</script>

-EBS2

執筆者：

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

関連記事

no image

EBS3 大幅に追加追加

EBS3にいろいろ追加してました。 ・戦闘 　・見やすく（したつもり） ・勢力 　・都市制圧、国滅亡 　・亡命 　・制圧時の強制送還 　・支配権移行時間設定（数秒でオセロにならないように） ・歴史 　 …

no image

EBS3 – 今後の予定

コンセプトは以下の３点。 ・多vs多の戦略シミュレーション ・“最強”は要らない ・“THINK”（考え、行動せよ） コンセプトを生かしつつ面白くするには？ （といってもメインコンテンツを停止している …

no image

ENDLESS BATTLE 2(仮)配布

やっと書き換え終わったので公開します！ リンク ENDLESS BATTLE 2(仮) 配布サイト どんなゲーム？ 10年くらい前に流行ったENDLESS BATTLEをモチーフとして作ったゲームプロ …

no image

EBS3 – 探索作成中、あとはMob出現と宝箱の設定のみ

マップは今の所こんな感じになってます。 どうやら、風来のシレンに似てるようです。 EBS3のメインコンテンツは戦争（勢力）です。 ただ、人が集まらないとただの色塗りゲーになるので、 人がいない時間帯で …

no image

EBS3 – 基礎完成？

以前書いたコレの不具合っぽいところとか、EBSに必要だと考えていた基礎的な機能をすべて追加しました。 これでバグがなければとりあえずは基礎の完成とします。 一応できる機能だけ説明しますね。 ・勢力（国 …

PREV
EBS3 - 探索完成・追加、作戦補正変更
NEXT
EBS3 - PRG風探索完成