one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

HTML5

【61:videoタグで背景動画】HTML5のvideoタグで動画を背景に使う

プロジェクトNo.61:videoタグで背景動画 - DEMO前回はjQueryプラグインを使用しましたが、 HTML5のvideoタグでも実現できました。 またWebサイトで動画を使う際に付けておきたい、サウンドのon/offも実装してみました。

HTML5での最低限のお作法

HTML5で書く時に最低限記述した方が良い事、またそれぞれの意味をまとめてみました。

【35:localStorage】HTML5のlocalStorageでTODOリストを作る

プロジェクトNo.35:localStorage - DEMOHTML5のWeb Storageの一つであるlocalStorageを使ってTODOリストを作ってみましたが、 今回は正直、結構はまりました。 そのバグトラッキングも含めてご紹介したいと思います。 新しく覚えた部分が多かったので少し長…

【20:パズル】HTML5のドラッグ&ドロップAPIを使ったパズル

プロジェクトNo.20:パズルHTML5から利用可能になったドラッグ&ドロップ専用の新しいイベントや新しいメソッド・属性などを使ってみた。 mousedownやmouseupで無理やりできるものもあるが、Googleドライブの様にローカル環境のデータをドラッグでアップロー…

【18:スクラッチくじ】Canvasをレイヤーの様に使う

プロジェクトNo.18:スクラッチくじCanvasを2枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。

【16:Doodle】Canvasでお絵描きアプリを作る

プロジェクトNo.16:Doodle(Canvas)jQueryとHTML5のCanvasを使って描画ツールを作成しました。 線と四角の描画、色の変更、太さの変更、消去、ギャラリーに追加、ギャラリーのデータを保存する事が可能です。

【13:アクションゲーム】enchant.jsを使ったアクションゲーム

プロジェクトNo.13:アクションゲーム 前回に引き続き、enchant.jsというHTML5とJavaScriptベースのゲームエンジンで簡単なゲームを作ってみました。ゲームの仕様は、 画面に表示されている敵を全部倒せばクリアです。 スマホからは画面の十字キーをタップで…

【12:くまげー】enchant.jsを使った落下物回避ゲーム

プロジェクトNo.12:くまげーenchant.jsというHTML5とJavaScriptベースのゲームエンジンで簡単なゲームを作ってみました。 実は私自身、ゲームプログラミングはこれが初めて。 それでも便利な素材やメソッドがたくさん用意されていて、1日で作ることができ…

【11:Ramdom Words(Canvas)】ランダムな位置やスタイルで文字を描画する

プロジェクトNo.11:Ramdom Words(Canvas) HTML5のCanvasを使って文字を描画してみた。 更新する度に位置やスタイルが変わります。 なんかに似てると思ったらビッ○カメラの袋か・・・