one's way blog

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

JavaScript

【63:WOW.js+Animate.css】WOW.js+Animate.cssで簡単にアニメーションを実装

プロジェクトNo.63: WOW.js+Animate.css - DEMO画面表示されてら(スクロールで表示領域に入ったら)アニメーションが実行されるというライブラリです。 容量も軽量なので、ある程度決まった動きで実装を簡略化したい時とかに使えそうですね。

【43:Facebook SDK for JavaScript】JavaScriptでFacebookログインを実装する

プロジェクトNo.43:Facebook SDK for JavaScript - DEMO Facebookページのタイムライン表示やいいねボタンの実装なんかはソーシャルプラグインを使えば簡単に実装できます。 ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers しかし…

【21:神経衰弱】JavaScriptで神経衰弱

プロジェクトNo.21:神経衰弱ドットインストールのレッスンを参考にJavaScriptで神経衰弱を作ってみた。 改良点はカード画像と3段階のレベルを用意した。 今回の記事では、前から気になっていた「全体をfunctionで括る理由」や「onclickをHTML内で書いては…

【14:Number Tap】小さい順にボタンをタップ

プロジェクトNo.14:Number Tap JavaScriptで簡単なゲームを作りました。 一応スマホでも見れるようにスタイルを設定しましたが、なんか処理が重いのは私だけ? 参考サイト 【旧版】JavaScriptで作る数字タッチゲーム (全10回) - プログラミングならドットイ…

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

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

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

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

【10:Stop watch】ストップウォッチ

プロジェクトNo.10:Stop watch 「スタート/ストップ・リセット」ボタンを用意したシンプルなストップウォッチを作成しました。 シンプルですが、よく使いそうな「時間の計測する」という汎用的な機能をjavascriptで処理しています。

【9:Expansion】マウスオーバーで画像を拡大する

プロジェクトNo.9:Expansion 読み込まれる度に画像がランダムに配置され、任意の画像へマウスオーバーすると画像を拡大するというものを作ってみた。

【8:ProgressBar】画像が読み込まれるまでプログレスバーを表示

プロジェクトNo.8:ProgressBar JavaScriptを使ってプログレスバーを作ってみました。今回のポイントは以下の通り。 画像を読み込む度に関数を呼び出す|ShowProg() 画像を全て読み終わった時にプログレスバーを消す|body onload

【7:Bomb】ランダムでボタンアクションを切り替える

プロジェクトNo.7:Bomb JavaScriptのランダム関数を使用して、複数用意したボタンの中から、毎回異なる1つのボタンだけ違うアクションをするというものを作成した。

【6:One day】時刻によってテキストとスタイルを変更|JavaScript - Date(), DOM

プロジェクトNo.6:One day今回からJavaScriptも使って開発していきます。 JavaScriptを使用して、時刻によって朝昼晩夜の4パターンのテキストとスタイルを変更するというものを作成しました。