2014-11-19 20:48
とりあえず、なんにもよくわからないが ググって調べて 始めてみるぜ☆ｗｗ
HTML 5 を選んだのは、名前を聞いたことがあるからだぜ☆ｗｗｗｗ ←考えずに進むぜ☆ｗｗ
『HTML5でサイトをつくろう』
http://www.html5-memo.com/first-html5/html5-001/
まず コピペします☆ｗｗｗ
文字コードも 合わせるんだぜ☆
ｗｗ☆
まず 試しに 将棋盤を描いてみるぜ☆
わたしの 考え方なんだが、 線を引いて盤を作るのではなくて、
マスが 画面に浮いている感じで 将棋盤を描こうと思うぜ☆ｗｗ
2014-11-19 22:11
将棋盤１個で 文字が４０個なんだが、
局面の表示を考えると 合法手は 最大 ５９３手あるだろうから、
駒が ２４００個 ぐらい表示することになるかもしれないし、
しかもそれは 「ログ」 なんだぜ☆
大量に吐き出されるんだぜ☆
気が遠くなってきて 頭の向こうに見えていた平和な映像が 白くぼやけてきたんだぜ……☆
とりあえず ここまでのソースコードを貼るぜ☆
<!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();">
ｖ（＾▽＾）ｖ 将棋盤のログを 視覚化したいんだぜ☆<br/>
<canvas id="c1" width="590" height="290" style="border:solid 1px black;">
</canvas>
</body>
</html>
[1回]
PR
http://grayscale.dou-jin.com/Entry/95/【将棋】めざせ世界コンピュータ将棋選手権☆(11) 視覚的に分かりやすいログを作るために、HTML 5 を覚えてみるぜ☆ｗｗ
