忍者ブログ

ぐれーすけーるブログ

ゲームプログラミングを独習中なんだぜ☆

↑同人活動☆w
ホームページ☆
『きふわらべ』のダウンロード
は、ホームページへ飛ぶ↑☆

ぐれーすけーる は、ゲーム86パーセントでお送りするんだぜ☆↑押すと最新記事に飛ぶぜ☆



第25回世界コンピュータ将棋選手権1日目に
初出場した『きふわらべ』の記事はこちら↑☆
↑東方二次創作音楽
CD78サークル分買った
積みゲー1本ずつ1ステージだけ
遊んでいく記事は別ブログへ飛ぶ↑☆
秋葉原裏通りの潰れそうなオリジナル同人
ソフト店『さんげっと』の記事はこちら☆

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

現在、新しいコメントを受け付けない設定になっています。

【将棋】めざせ世界コンピュータ将棋選手権☆(11) 視覚的に分かりやすいログを作るために、HTML 5 を覚えてみるぜ☆ww

2014-11-19 20:48

とりあえず、なんにもよくわからないが ググって調べて 始めてみるぜ☆ww

HTML 5 を選んだのは、名前を聞いたことがあるからだぜ☆wwww ←考えずに進むぜ☆ww



『HTML5でサイトをつくろう』
http://www.html5-memo.com/first-html5/html5-001/



まず コピペします☆www



文字コードも 合わせるんだぜ☆



ww☆



まず 試しに 将棋盤を描いてみるぜ☆

わたしの 考え方なんだが、 線を引いて盤を作るのではなくて、
マスが 画面に浮いている感じで 将棋盤を描こうと思うぜ☆ww




2014-11-19 22:11



将棋盤1個で 文字が40個なんだが、
局面の表示を考えると 合法手は 最大 593手あるだろうから、

駒が 2400個 ぐらい表示することになるかもしれないし、
しかもそれは 「ログ」 なんだぜ☆
大量に吐き出されるんだぜ☆

気が遠くなってきて 頭の向こうに見えていた平和な映像が 白くぼやけてきたんだぜ……☆



とりあえず ここまでのソースコードを貼るぜ☆


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サイトのタイトル</title>
    <link rel="stylesheet" type="text/css" href="css/html5reset.css"  />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <script type="text/javascript">
        function draw1()
        {
            var canvas = document.getElementById('c1');
            if ( ! canvas || ! canvas.getContext ) { return false; }
            /* 2D描画 */
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            
            /* 後手駒台 */
            ctx.fillStyle = 'rgb(255,200,120)'; //塗りつぶしの色
            var x = 10;
            var y = 25;
            var w = 22;
            var h = 22;
            var spW = 3; //すきま
            var spH = 3;
            var col;
            var row;
            for( col=0; col<4; col++ )
            {
                for( row=0; row<10; row++ )
                {
                    ctx.fillRect( (w+spW)*col+x, (h+spH)*row+y, w, h );
                }
            }
            
            /* 将棋盤 */
            ctx.fillStyle = 'rgb(255,240,160)'; //塗りつぶしの色
            x += 110;
            for( col=0; col<9; col++ )
            {
                for( row=0; row<9; row++ )
                {
                    ctx.fillRect( (w+spW)*col+x, (h+spH)*row+y, w, h );
                }
            }
            
            /* 後手駒台 */
            ctx.fillStyle = 'rgb(255,200,120)'; //塗りつぶしの色
            x += 255;
            for( col=0; col<4; col++ )
            {
                for( row=0; row<10; row++ )
                {
                    ctx.fillRect( (w+spW)*col+x, (h+spH)*row+y, w, h );
                }
            }
            
            /* 駒袋 */
            ctx.fillStyle = 'rgb(200,120,255)'; //塗りつぶしの色
            x += 110;
            for( col=0; col<4; col++ )
            {
                for( row=0; row<10; row++ )
                {
                    ctx.fillRect( (w+spW)*col+x, (h+spH)*row+y, w, h );
                }
            }
        }
        
        function draw2()
        {
            var canvas = document.getElementById('c1');
            if ( ! canvas || ! canvas.getContext ) { return false; }
            /* 文字1 */
            ctx = canvas.getContext('2d');
            ctx.beginPath();
            var w = 20;
            var h = 20;
            ctx.save();
            ctx.translate( w, h/4 );
            ctx.rotate( 180 * Math.PI / 180 )
            
            ctx.font = '400 '+h+'px/2 Unknown Font, sans-serif';
            ctx.strokeStyle = 'rgb( 10, 10, 10)';
            ctx.strokeText( '歩', 0, 0 )
        }
        
    </script>
</head>
<body onLoad="draw1(); draw2();">
    v(^▽^)v 将棋盤のログを 視覚化したいんだぜ☆<br/>
    <canvas id="c1" width="590" height="290" style="border:solid 1px black;">
    </canvas>
</body>
</html>

拍手[1回]

PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

ブログ内検索

PR



絶版・品切れ本を皆さまからの投票で復刊させる読者参加型のリクエストサイト
復刊ドットコム

ネイフィールウォーター

応援フリーエリア

デジゲー博
むずでょは、第1回から毎年 出展しているんだぜ☆

ウサギのように新品入荷☆
カメのようにまだ置いてある既刊☆

同人ソフト一押し店 さんげっと
むずでょは、さんげっと を応援しているんだぜ☆

TVアニメ「Charlotte(シャーロット)」公式サイト
ニコ生の Angel Beats! 一挙放送が 面白かったので次のも応援するぜ☆ww

プロフィール

HN:
むずでょ
性別:
非公開

最新コメント

[01/02 Free Tax Marlboro Gold Regular Cigarettes Coupons 3 Cartons]
[12/30 Hot Selling Newport Regular Cigarettes Outlet 160 Cartons]
[12/29 http://www.patersonlabs.com/Marlboro/41.html]
[12/29 http://xz84.com/Marlboro/16.html]
[12/29 http://www.paragoninks.co.uk/Marlboro/93.html]

P R