html5で遊ぶ canvasでマインスイーパーを作ってみた
html5の勉強（お遊び）がてらマインスイーパーを作ってみた
html5というかjavascriptごりごりだけどね
ソースは長いのでブログには貼りませんが、
コメント書いてあるので参考にしたいという稀有な方が見えたら
右クリックから好きなだけソースを見てください
ゲームオーバーするとブロックが崩れるよ
2019年 秋野菜の準備 その1
急に秋らしくなったので。畑の夏野菜はナスを残して終了
朝からせっせと夏野菜を取り除いたり草むしったりと畑を耕しました。
今年の秋冬野菜は
かぶ、だいこん、そらまめ、にんにく、白菜、キャベツ、人参かなー
だいたい毎年同じだけど
白菜、キャベツは家庭菜園レベルなので毎年苗を購入
なので最寄りの農業屋へ
にんにくも買っただけど、
紫々丸（ししまる）という紫色っぽいにんにくにしたよ
なんだかって、家庭菜園レベルなのでそこまで量いらないので、
一番少ない量がこれだっただけです（笑
ただ、調べるとなかなか人気の品種らしいので楽しみ♩
写真撮ればよかったー、文字オンリー
html5で遊ぶ その３（canvasでアニメーション）【玄人向け】
前回までcontextをくるくるさせることで三角形を動かしていましたが、
contextそのものを動かさなくても描画する図形そのものを動かす方法もあります。
※translateやrotateを使わないパターンです。
難点はcosやsinが必要なぐらいですかね。
<html> <head> <script type="text/javascript"> function init(){ var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); context.fill(); } var angle = 0; setInterval( function() { var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.save() radian = (++angle) * Math.PI/180; context.moveTo(100, 100); context.lineTo( 100 - Math.sin(radian) * 50, 100 + Math.cos(radian) * 50 ); context.lineTo( 100 + Math.cos(radian) * 50, 100 + Math.sin(radian) * 50 ); context.fill(); context.restore() }, 10); </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
半径さえわかっていれば座標が計算できますね！
処理速度的なやつは測ってないのでよくわかりませんが（汗
html5で遊ぶ その2（canvasでアニメーション）
前回は１つの三角形をくるくると回転させただけですので、
今回は複数の三角形をくるくるさせてみたいと思います。
<html> <head> <script type="text/javascript"> function init(){ var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); // 1つ目の三角形 context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); // 2つ目の三角形 context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); } var angle = 0; setInterval( function() { var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.save() // 1つ目の三角形 context.translate(100, 100); context.rotate((++angle * Math.PI)/180); context.translate(-100, -100); context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); context.fill(); // 2つ目の三角形 context.translate(200, 200); context.rotate((++angle * Math.PI)/180); context.translate(-200, -200); context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); context.restore(); }, 10); </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
単純に三角形を１つ増やしてやればいいだけだろ・・・へへん！
が、あれ？うまくいってませんね・・・
contextそのものを回転させているので、
まるで紙に２つ書いた三角形をくるくる回転させてるみたいですね。
修正してみる
そうではなくて、三角形１つづつを回転させるためには、
それぞれに対してsaveとrestoreをしてやる必要があります。
<html> <head> <script type="text/javascript"> function init(){ var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); // 1つ目の三角形 context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); // 2つ目の三角形 context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); } var angle = 0; setInterval( function() { var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.save() // 1つ目の三角形 context.translate(100, 100); context.rotate((++angle * Math.PI)/180); context.translate(-100, -100); context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); context.fill(); context.restore() context.save() // 2つ目の三角形 context.translate(200, 200); context.rotate((++angle * Math.PI)/180); context.translate(-200, -200); context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); context.restore(); }, 10); </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
ちょっと間に足しただけですね！
いい感じですね。
html5で遊ぶ その１（canvasでアニメーション）
今更ながらhtml5のcanvasで遊んでみました。
canvasはJavaScriptを使うといろいろとお絵かきができちゃいます。
しかも、大抵のスマホでも動かすことができます、素敵！！
（ばいばい、flash!
htmlを用意する
<html> <head></head> <body> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
いろいろ省いていますが超シンプルに書くとこんなかんじ。
canvasのidは任意の名前で良いですが、今回は「field」としました。
では、図形を書いています。四角のサンプルはよくみるのであえて三角にしてみます。
図形の描画にはJavaScriptを使います。
JavaScriptを用意する
<html> <head> <script type="text/javascript"> function init(){ var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); context.fill(); } </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
var canvas = document.getElementById('field');
var context = canvas.getContext('2d');
canvasから描画機能を利用するための2Dコンテキストを取得し、
context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150);
三角形の3点を座標指定して線を結び、
context.fill();
最後に塗りつぶしをしている流れになります。
これをonloadイベントで呼び出しているわけですね。
注意点としては2Dコンテキストはcanvasに対して１つということです。
これは後々重要になってきます。
動かしてみる
アニメーションなので三角形をくるくる回してみたいと思います。
<html> <head> <script type="text/javascript"> function init(){ var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); context.fill(); } var angle = 0; setInterval( function() { var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.save(); context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.translate(100, 100); context.rotate((++angle * Math.PI)/180); context.translate(-100, -100); context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); context.fill(); context.restore(); }, 10); </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
setInterval( function() {
hogehoge
}, 10);
タイマー処理で10ミリ秒ごとにhogehogeを実行します。
context.save(); ↓ context.restore();
アニメーションをつくるときのお作法的な感じですが、
描画前の状態を一旦保存し、
間に描画処理を記述して、描画内容を反映するといった流れになります。
context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath();
これがないと残像が残ります（笑
ようはいったんクリアするための処理です
context.translate(100, 100); context.rotate((++angle * Math.PI)/180); context.translate(-100, -100);
回転する処理です、contextそのものを回転させています。
そのままrotateだけ書くと軸がずれるので、その場でくるくるそうような形にはなりません。
今回はここまで！
次は複数の図形をくるくるさせてみます。
■
地図って面白いよね、地名とかって面白いよね
というわけで住んでるところがバレそうですが、
近所の地名が不思議だったもんでちょっと調べてみました。
【！注意！】
個人的な調査と想像を交えながら書いていますので、学術的根拠はありません！
ふーんそうなんだ、ぐらいにお楽しみにください。
岐阜県瑞穂市生津周辺の地図ですが、
町の名前がなんだが立派？な感じがします。
生津外宮
生津内宮
生津天王
といった感じ。お世辞にも歴史ある町並みなんかがあるとも思えません。
近くに住んでいて長年疑問でした・・・
ぇ、こんなところに外宮と内宮があるん？
地図をよく見てみるとありました。
生津内宮 ・・・ 神明神社
生津外宮 ・・・ 豊受神社
外宮、内宮があるなんてまるで、伊勢神宮を思い出しますね。
そういえば、伊勢神宮と瑞穂市、つながりがないようであるという話を聞いたことがあります。
瑞穂市のホームページより抜粋（http://www.city.mizuho.lg.jp/1426.htm）
なんだかいろいろ書いてありますが、
今の伊勢神宮に定まる前、倭姫命さんは各地を転々として頃合いのいい場所を探していたようです。
その中でしばらく様子をみるためにとどまった場所が「元伊勢」と呼ばれているそうです。
瑞穂市居倉がこの元伊勢にあたるようです、そして生津から川を下ったとも書いてありますね。
これは関係がありそうだ！
しかし、「豊葦原」ってようは葦がたくさん生えてる湿地帯ということですね。
周囲を木曽川水系に囲まれた濃尾平野ですので、想像しやすいですが・・・
で、元伊勢についてググってみるとwikiにこんな記述が。
ふむふむ、なるほど。
居倉から次の場所に向けて出発するときに船を用意した場所が生津なんですね。
「倭姫命は豪雨でこの地にしばらく滞在したという」とも書いてありますね。
湿地帯ですからね・・・さぞ苦労したことでしょう。
「生津」という地名からも水害に弱かったことが伺えますね。
以上のことから、倭姫命さんが安住の地を探している途中に立ち寄ったということがわかりました！
名前には何かしら理由があるもんですね・・・
しかしまたなんで、居倉にしばらく滞在したのでしょうか？
近くに中山道がありますが、時代的には中山道が確立するずっと前のことと思われます。
交通の要所だったのでしょうか・・・このあたりは謎です。
