今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

JavaScript / jQuery

HTMLとjQueryで障害物よけゲームを作る(完成版)衝突判定とスコア

sudara-bluse.hatenablog.com これの続きです! 今回で完成!^^ 衝突判定とか甘いけど笑 スマホでプレイしてみてください。 もふもふジャンプ http://killertunes.lolipop.jp/mofuGame/ スコアは経過時間にしてます。 衝突判定は、 if(charaTop > blockBotto…

HTMLとjQueryで障害物よけゲームを作る(その2)流れてくる障害物

sudara-bluse.hatenablog.com 前回の続きです。今回は流れてくる障害物を作ります! こんな風にブロックが左から右へと流れていく仕組みを作ります。 まだブロックにぶつかっても何も怒らないけど、スマホで遊んでみてね。 もふもふジャンプ http://killertu…

HTMLとjQueryで障害物よけゲームを作る(その1)

最近HTMLとJsvaScript(jQuery)書いてない。。 ふと思ったので、リハビリに簡単な障害物よけゲームを作ることにした。 スマホのみを対象としてます。 canvasやcreate.jsも使いません。DOMでいきます。 素材はこちら、友人のとりとライオン様から画像を拝借し…

現在、リアルタイムにブログを見ているユーザー数を表示するJS!「Real Time User」コピペ簡単。

このブログでは、現在の閲覧してくれてるユーザー数を表示させています。 グーグルアナリティクスのリアルタイム機能の数を表示させるようなイメージです。 これです〜。これ簡単に実装できます! こちらのReal Time UserというJavaScriptプラグインを使って…

$("[ 属性 ^= '値' ]") 前方一致が便利で好きです。

$("[ 属性 ^= '値' ]") が便利です。 😄 hoge <nav> <ul> <li id="nav_home">ホーム</li> <li id="nav_about">アバウト</li> <li id="nav_contact">コンタクト</li> </ul> </nav> 上記のようなHTMLがあって、id名がnav_で始まるものいずれかをクリックした時に反応して欲しい時とかによく使います。便利です。 あとラジオボタンのグループ選択とかの便利です。…

JavaScriptでデフォルト引数

jsでデフォルト引数使いたい時 yasyoku.js ;(function(){ // 夜食食べる var eatMidnightMeal = function(aMeal){ aMeal = aMeal || 'ラーメン'; console.log(aMeal + '食べる'); }; eatMidnightMeal(); // ラーメン食べる eatMidnightMeal('ポテチ'); // ポ…

JavaScript 即時関数間の行き来

ググっても簡単な説明が出なかったのでメモです。 Dog.jsとGarden.jsを読み込んでそれぞれ即時関数でくくったけど値にアクセスできなくて悩んだ Dog.js ;(function(){ // 犬Class var Dog = function(aName){ this.name = aName; }; Dog.prototype.run = fun…

やっとわかったjsの「巻き上げ」

JavaScriptには「変数の巻き上げ」という変な概念があります。いまいちピンときてなかったのですがわかりました。 まず hoge var pokemon = 'ピカチュー'; function show(){ console.log(pokemon); } show(); // "ピカチュー" これは普通にコンソールに"ピカ…

【WebVR日記2】A-Frameに入門。Hellow Worldしてみた!

先日、WebVRを作ってみたい。 A-Frameというフレームワークが気になるという記事を書きました。 Three.jsをゴリゴリ書く必要なく、HTMLでシーンが作れるそうです。 www.sudara-bluse.tokyo 今回は早速A-Frameを入門してみようと思います。 まずは情報収集 AR…

【WebVR日記1】コード0行。スマホで撮影した写真をブラウザで3Dモデル化して見る方法!

こんな感じになります。 制作方法はこちら プロローグ。WebVRに興味を持った。 先日、ヨドバシカメラでVRゴーグルを購入しました。 (税込1170円にしては、そこそこの装着感でGOODでした。) 購入の理由は、WebVRを作ってみたいと思い立ったからです。 実は以…

JavaScriptでPHPの変数の値を使う方法メモ

WordPressのテーマファイルなどをカスタマイズしていて、Ajax処理を作ったときに、PHPの変数の値をJavaScriptに渡して使いたい! という場面がありました。 方法を調べたところ、こちらで解決しました。 filename <script type="text/javascript"> var hoge = <?php echo json_encode($hoge</script>…

JavaScript 現在のページをリロードしたい

知らなかった....のでメモと共有です。 hoge // 現在表示されているページをリロードする location.reload(); // 例: 5秒に一回リロード setTimeout("location.reload()",5000); ブラウザの[更新]ボタンを押したときと同じ動作です。 location.reload(true)…

jQuery スクロール地点に合わせて画像表示 (eachでらくらく複数一括設定 ver)

画面を下にスクロールしていくと、ちょうど良いところでふわっと要素が表示されるよくあるやつ。 いちいち一つ一つ hoge.js // スクロール値が400超えたらfadeIn if($(window).scrollTop() > 400){ $("#img").fadeIn(); } のように指定するのは大変なので、e…

JavaScript アニメーション管理にどうぞ! 数秒後に実行。 delayedCallメソッド

JavaScriptで数秒後に処理を実行したい時、 hoge.js setTimeout(function(){ console.log("2秒後に実行!"); }, 2000); のようにsetTimeoutを使うと思いますが、ミリ秒が直感的でないし、0を3つ書くのがめんどくさいなと思っていたところ、こんな関数を作っ…

へっぽこコーダーが女子Webデザイナーにモテる為には。

本記事での「モテる」とは、「仕事で重宝される」から「彼女を作る的な下心」まで広い意義で使用します。笑中小の制作会社で数年間、どうにか生き抜いた実体験を元にしています。。 目次 1. PSDファイルは女子デザイナーからのラブレター。2. 「清潔感」が大…

jQueryでブログ記事の一部分を隠して、パスワード入力で表示する方法

なかなかニッチな要望だと思いますが、、、。 私のプロフページ、こんな感じになってます! sudara-bluse.hatenablog.com ライクアローリング?: の後のボックスに答えを入力してボタンを押すと、 ふわっと詳細プロフが表示される仕組みです! (なんだこの…

【はてなブログ無料版】コピペで簡単! スマホ版トップで注目記事を新着記事より上にしたい。

こんにちは! 他人にブログのURLを教えることになって気になる箇所がありました。 PC版はサイドバーに注目記事がでるからいいけど、 「スマホ版はファーストビューで新着記事しか目につかない。。。 新着記事が自信作じゃないときに見せるの嫌だなぁ。。」 …

JavaScript 大量の要素をDOMに追加する際の、createDocumentFragmentの使い方。

大量の要素を挿入するときに、毎回DOMにアクセスするとパフォーマンス的によろしく無いのでcreateDocumentFragment を使おうという教えを頂いたのでまとめです。 聞いた事あるけどよくわからんという方も多いのではと思います。 まず、低速バージョン。 配列…

【無料版で頑張る!はてなブログカスタマイズ】 コピペでOK。ハンバーガーボタンでフルスクリーンメニュー。

↑ 完成図 (追記: 10月12日) このブログは現在はPC、スマホ共に右上にボタンを表示してます! > 実装方法 > パソコン版、レスポンシブにも使用したい。 > ハンバーガーメニューを右下に表示したい 最近よく見かけるハンバーガーボタンを押すと、 フルスクリー…

JavaScript コールバックの作り方

ぐぐっても簡単な説明がなかったのでメモです。JavaScriptでコールバックを作りたい。。 手洗い関数を実行した後にうがい関数を実行したい! そんな時の手引きです。結論としては、 関数の引数として関数(functionオブジェクト)を渡して実装します! 実際の…