Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
Callback Hell
# Callback Hell *A guide to writing asynchronous JavaScript programs* ### What is "*callback hell*"? Asynchronous JavaScript, or JavaScript that uses callbacks, is hard to get right intuitively. A lot of code ends up looking like this: fs.readdir(source, function (err, files) { if (err) { console.log('Error finding files: ' + err) } else { files.forEach(function (filename, fileIndex) { console.log
JavaScriptでRubyのmethod_missingを実装する - hagino3000's blog
追記: Firefoxの実装で既に有る__noSuchMethod__に名前は合せた方が良い、というコメントを頂いたので名前を変えました。 何の役に立つか不明だけど書いてみた*1。Proxyでプロパティアクセスをフックして、存在しない場合は用意しておいた関数プロキシを返す。 __noSuchMethod__ for Chrome ― Gist https://gist.github.com/2290705 上記の処理が書いてあるのはこの部分。 function enableMethodMissing(obj) { // 関数プロキシの作成 var functionHandler = createBaseHandler({}); functionHandler.get = function(receiver, name) { // プロパティアクセスの場合は何も返さない return fun
並列処理を実現！Web Workersを使いこなそう
連載目次 HTML 4が登場したころは、シングルコアのCPUしかなく、HTMLとJavaScriptで実現できる処理も限定的であったため、処理を逐次実施するシングルスレッドでの処理に不満を抱くことは少なかった。もっとも、HTMLとJavaScriptは同一のUIスレッド上で処理を行うため、JavaScriptで動的にHTMLコードを生成する処理や、高負荷の処理がある場合、HTMLレンダリングが遅延したり、最悪の場合はブラウザがフリーズしたりしてしまうということがあった。 近年では、マルチコアの端末が大多数を占めるという物理的な環境の改善のほか、HTML5の台頭により、HTMLとJavaScriptを高度に活用したWebアプリケーションが増えてきている。そのため、JavaScriptコード自体をマルチスレッドで処理したいという要件も多くなりつつある。 例えばファイルにアクセスする際のI/Oや
Introducing filer.js
Some 1300+ lines of code, 106 tests, and a year after I first started it, I’m happy to officially unleash filer.js (https://github.com/ebidel/filer.js); a wrapper library for the HTML5 Filesystem API. Unlike other libraries [1, 2], filer.js takes a different approach and incorporates some lessons I learned while implementing the Google Docs Python client library. Namely, the library reuses familia
Route9.js: A VP8/WebM decoder in JavaScript
Badass JavaScriptA showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett. The codecs keep being implemented in JS. We saw Broadway.js implement the H.264 codec in JS recently, and now we have a WebM decoder as well. Ben Schwartz was inspired by Broadway and wanted to learn more about the WebM format so he decided to modify Broadway to support VP
pdf.js: Rendering PDF with HTML5 and JavaScript
Andreas Gal Entrepreneur. Technologist. Former CTO Mozilla, CEO Silk Labs. Now Update: I updated the links again. pdf.js has moved to a new location on github. Why? While traveling to the Firefox 4 launch parties in Seoul and Taipei all the way from California, we killed a lot of time by brainstorming cool things to do with the web platform. Like many before us, we were wondering why nobody had
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
[JS]背景画像をアニメーションさせて、サイトの印象をガラッと変えるスクリプト
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
JavaScript の不思議な面白さ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog JavaScript と言うと普段自信をもって膨大なプログラムと格闘している諸氏もコード断片のはり付けに終始してしまうことも多いのではないでしょうか。かくいう私も検索エンジン（を使ってコードを書く）プログラマになっていることが多々あります。 JavaScript にあるこのプログラムの自作を妨げるのは、ブラウザごとに仕様が違ったりとか、正しいはずのコードが動作しなかったりと、プログラミング言語としての特殊性が挙げられると思います。特に目的実現の為に必要となる発想は他の言語と一線を画します。 今回は、 題材は、これです。 誰でも一度は使ったことがあるだろう灰色の説明文付きの入力欄ですね。 簡単な例 さて、作ってみましょう、ということ
エンジニアの勉強法について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。 サービス統括部に所属しております、堀 邦明と申します。 普段はYahoo! JAPANトップページのフロントエンドエンジニアとして、JavaScriptやPHP,Perlといった言語を利用して開発しています。 この度、デベロッパーズサミット2009というイベントにおいてエンジニアの勉強法というテーマでJavaScriptの勉強法についてお話をさせていただきました。 今回は、そのときのお話について発表しきれなかった部分も含めてご紹介できればと思います。 勉強の分類 勉強には大きく分類して2つのステップがあると思います。 1. 情報収集 1つは情報収集です。 技術書やウェブサイト、ブログを読んだり、勉強会やセミナーに参加
Mozilla、ブラウザ上で動くコードエディタ発表 － ＠IT
Mozillaファウンデーションは2月12日、Webブラウザ上で実行できるコード・エディタ「Bespin 0.1」（ベスピン）を発表した。実験的なソフトウェア・サービスの開発を行うMozillaラボのアルファ版として、Mozilla Public Licenseの元にオープンソースで公開している。サーバ上に置いたファイルを直接編集でき、そのままWebブラウザでプレビューも可能。ほかに、複数人による共同編集や、同じくMozillaラボが取り組むコマンドラインツール「Ubiquity」を統合して、プラグインの作成や取り込みを容易にするなど斬新な試みだ。ちなみに、Bespinは映画スターウォーズに登場する巨大ガス惑星の名称。 Bespinのフロントエンドはファイル・ディレクトリを階層状に閲覧する“ダッシュボード”と、コードエディタから成る。フロントエンドはJavaScriptとHTMLで作成され
各種チートシートまとめ - goinger的日記
なんとなく便利そうなのを探してまとめてみた。 リンク切れおそろしい プログラミング関連 C, CPP, C# Cheat Sheets C, CPP, C#のチートシートがたくさんある 249 Prototype Dissected prototype.js チートシート 347 Haskell Cheatsheet Haskell 130 command line ruby cheat sheet ruby commandline チートシート 680 ruby-on-rails-cheat-sheet/ Railsのチートシート 701 google関連 google guide 検索オプションの説明とか 1358 Google Guide Quick Reference Google検索ガイド 9657 google help: cheat sheet google本家から提供 40
tPod - tumblrのダッシュボードに流れる画像を眺めるガジェット - ぼくはまちちゃん！
はい！ こんにちはこんにちは！！ そんなわけでAIRアプリつくってみました！ tPod - tumblrのDashboardに流れる画像を眺めるガジェット こんなやつです！ tumblrの自分のdashboardの画像が次々に流れてきます！ ちょっとかわいいよ！ tumblrなんて知らないよ…！ なんて人もこの機会に、ちょっと試してみたらどうでしょうか！ なんか気に入った画像や言葉を、みんなでどんどんクリップ(引用)していくだけのサービスで楽しいよ！ http://www.tumblr.com/ ここから、メールアドレス入力すれば、すぐ登録できるよ！ 登録したら適当に、ぼくとか以下のような人たちを Follow しておけば、ダッシュボードに画像が流れてくるんじゃないかな！ http://hmcy.tumblr.com/ http://yuiseki.tumblr.com/ http://s
jQueryを使うときに気をつけるべき8のポイント : tech.kayac.com - KAYAC engineers' blog
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 （一部jQueryではなく、DOMの仕様上の制限も含まれています） 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 （たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します） 確認する ちなみに、$().findや$().notはstring以外も渡せるた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FastKat
[JS]jQueryのプラグイン33+1選 -2009年4月 | コリス
Web ページを高速化する
http://www.designwalker.com/2009/02/jquery-dropdown.html
http://e0166nt.com/blog-entry-574.html
