2016年 5月 の投稿一覧

ラグビーボールを追いかけて

さて前回の続き、2つの画像が canvas の枠の中を動くソースを見つけてラグビーボールを私のおじんラガーアイコンが追いかけるものを作って自分のWEBサイトのTOPページに置こうと思いましたが枠から出るとなくなっちゃうので悪戦苦闘しておりました。

ソースを引っ張ってきてつなぎ合わせても自分流にカスタマイズすることは難しいので、参考の書籍とドットインストールの canvas 入門の動画を見て ” canvas で画像を表示する、そしてその画像を動かす” ところからお勉強のし直しです。

ボールを持ったらとりあえず突っ込んじゃうので、毎度のことながら足踏みの連続ですよね。

初期値(最初に画像をおく座標)と画像の動く速度を設定するのですが、2つの画像なので Array を使い設定して、IF文では枠の上下左右の端に画像が来たときに反転する(速度に-1をかける)ところに留意してようやく完成となりました。

さて今度はこのスクリプトを “gengen33ドットコム” のTOPページに貼っけなくては。

うーーん。またここで苦労しそうだゾ。






ラグビーボールを転がすぞぉ

私の個人WEBサイト ”gengen33ドットコム” にラグビーボールを私のおじんラガーのアイコンが追いかけているシーンを載せたくて2つのアイコンが動くソースを引っ張ってきましたがこれだと枠をはみ出したら2つのアイコンがどこかに行って帰ってきません。

こんな感じ

IF文で壁にぶつかったら進行方向を逆にする(速度に-1をかける)といいとHTML5のなかしまぁ師匠と愚息にアドバイスをもらいましたが canvas に画像を取り込みその画像を動かすということがすんなりできません。まずは canvas の描画テクそして跳ね返るボールのスクリプトを足元からきっちり勉強しますわ。

理想とするコードを読む(プログラムの動きがわかる)コードを書く(自分流にカスタマイズする)ことができるようになるまでまだまだ先は長いなぁ~






サッカー場をラグビー場に(その2)

3月のHTML5レベル2のペーパー試験は見事に落ちましたが、懲りずに JavaScript のお勉強は続けております。今日は放置していたサッカー場をラグビー場にしようと思います。

ソースは JavaScript のゲーム本にあります。(文末にこのゲーム本の紹介してます。)

scc

まずは前回打ち込んだソースのセンターサークルの部分をカットします。次にセンターラインの両脇に10mラインと22mラインを引くので ctx.moveTo と ctx.lineTo のそれぞれの地点の座標を代入したモノを追加します。

rug1

ゴールポストは目立つように黄色にして両端から延長した線を引きます。

rugby

少しは canvas の実戦演習になったかなぁ?? ポストは斜めにして右側のゴールポストを左側と同じ向きにしたら少し立体感がでるかもしれませんよね。

このラグビー場でラグビーボールのアイコンがランダムに転がって、それを私のおじんラガーのアイコンがいつまでも追いかけ続けるようにしたいのですが、完成したころにはレベル2の試験もクリアーしてるんだろうなぁ……






トップページをWordPressで

”gengen33ドットコム” のトップページは、スマホでみれるサイトをとHTML5の勉強を始めて、最初にジェネレーターを使ってメニューバーのついたものを作りました。

12036994_1048710445163614_503483231699536312_n

コンタクトページやプロフィールページがパーツ化して便利なので次に baserCMS というCMS【 Contents Management System 】でつくってみました。これは自分のサイトにあったテーマを見つけて設置したのですがいまいち baserCMS の仕組みをわかっていなかったので細かいカスタマイズができずに物足りない感じがありました。

ならばブログや草ラグビーのサイトで使っている WordPress はどうかと思い立ちました。思い立ったら即実行。早速 WordPress を使ってリニューアルしました。コンタクトページ(お問い合わせ)にもボタンで1発アクセスなのでいい感じになりましたわ。

top

気まぐれなんで XOOPS や baserCMS がこなれてきたら、また突発的にリニューアルしちゃうかも・・・