これまであまりcanvasを使ってこなかったんですが、レンダリングエンジンの性能を考えて、きちんと向き合うことを決心した、ユゲタです。
svgでグラフも作れるし、ドロー系描画もアニメーションもできることから、canvasの有用性を考えたことが無かったんですが、webGLを使えるcanvasに最近魅力を感じてきて、その使い方になれておく必要があるので、今回は「三目並べ」ゲームをcanvasを使って作ってみたいと思います。
ただし、学習も兼ねて備忘録として残していくので、数日に分けてブログに書きたいと思います。
本日のIT謎掛け
「Canvas API」と、かけまして・・・
「青森産のスイーツ」と、ときます。
そのココロは・・・
Appleで作られたモノらしいですね。
Canvasおさらい
Canvasは、HTML5の機能ですが、その描画、表示内容のアニメーションや、各種処理は全てjavascriptで行わなければいけません。
要するに標準web環境の「html」「css」「javascript」のセットで構成されるんですね。
サーバーへのデータ保存が無いのであれば、これだけでかなりのクオリティができてしまうというのも魅力です。
三目並べについて
なんと、Googleで「三目並べ」と検索すると、検索結果のトップに、ブラウザでできるゲームが現れます。
どうやらこれは、svgで作られているんですが、これをcanvasで構築するイメージですね。
そして、wikipediaの「三目並べ」を見てみると、ルールが書かれていたので、そのままのルールを摘要しましょう。
https://ja.wikipedia.org/wiki/%E4%B8%89%E7%9B%AE%E4%B8%A6%E3%81%B9
おまけに、先手よりも後手の方が勝つ確率が高い事と、その必勝法も書かれているので、コンピュータが後手になると確実に勝てるゲームを作ることは可能そうですね。
でも、その辺は、乱数でゆらぎを与えて、ミスレベルの確率を強さレベルで表すといい感じだと思います。
ちなみに、更に調べてみると、「三目並べ」は英語で「Tic-tac-toe」という風に言うらしいです。「チクタクｔゥー」って読むんでしょうか？
基本画面の構築
とりあえず、初期表示する画面を作って初日を終えたいと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TicTacToe</title>
<style>
#mycanvas{
border:1px solid #ccc;
}
</style>
<script src="tictactoe.js"></script>
</head>
<body>
<canvas id="mycanvas" width="400" height="200">not canvas</canvas>
</body>
</html>
(function(){
(function(){
var LIB = function(){};
LIB.prototype.event = function(target, mode, func , flg){
flg = (flg) ? flg : false;
if (target.addEventListener){target.addEventListener(mode, func, flg)}
else{target.attachEvent('on' + mode, function(){func.call(target , window.event)})}
};
LIB.prototype.construct = function(){
switch(document.readyState){
case "complete" : new MAIN();break;
case "interactive" : this.event(window , "DOMContentLoaded" , (function(){new MAIN()}).bind(this));break;
default : this.event(window , "load" , (function(){new MAIN()}).bind(this));break;
}
};
var MAIN = function(){
this.drawBase();
};
MAIN.prototype.drawBase = function(){
var ctx = document.getElementById("mycanvas").getContext("2d");
// 背景
ctx.fillStyle = "#14bdac";
ctx.fillRect(0,0,400,200);
// 枠線
ctx.strokeStyle = "#0da192";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(170,20);
ctx.lineTo(170,180);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(230,20);
ctx.lineTo(230,180);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(120,70);
ctx.lineTo(280,70);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.moveTo(120,130);
ctx.lineTo(280,130);
ctx.stroke();
ctx.fill();
// クリック枠
ctx.strokeStyle = "red";
ctx.fillStyle = "rgba(255,255,255,0.2)";
ctx.fillRect(118,18,47,47);
ctx.fillRect(177,18,47,47);
ctx.fillRect(236,18,47,47);
ctx.fillRect(118,76,47,47);
ctx.fillRect(177,76,47,47);
ctx.fillRect(236,76,47,47);
ctx.fillRect(118,134,47,47);
ctx.fillRect(177,134,47,47);
ctx.fillRect(236,134,47,47);
};
new LIB().construct();
})();
})();
