【Node.js】socket.ioを使って簡単にチャットを作る方法
Post by @yubais · 2 images
なぜ見つけたかといえば他でもない僕が作ったからなのだが、誰が作ったかはこの際脇に置いて、Twitterで偶然見かけたという設定で以下の話をする。 プレイして頂ければわかると思うが、このブロック崩しには重力が設定されており、いくら飛ばしても玉がブロックに届かずに落ちていく。ネットでは「人生のようだ」といったコメントが寄せられている。 僕も最初にプレイした時はフフッと笑ってしまったが、まあ2秒見れば十分という完全なる出落ちコンテンツだ。いっちょまえにスコアをツイートする機能がついているが、当然ながらスコアは0しか出ないので、検索してみるとなかなか異様な風景が見える。 なお、このゲームのソースコードを見ると、そもそもブロックとの当たり判定が設定されていない事が分かる。JavaScript で作られたゲームは、インターネットで一時代を築いた Flash ゲームとは違い誰でもコードを覗き見ることが出
Node.js＋Socket.IOで作る、通信対戦ができるHTML5ゲームシステムの作り方
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!きっず開発担当です。 昨年Yahoo!きっずにてブラウザオンラインゲーム「おしゃべりリバーシ」をリリースしました。 ※おしゃべりリバーシは2015年10月をもってサービス終了しました。ご利用いただきまして、ありがとうございました。 このゲームは、通信対戦部分の通信プロトコルWebSocketを採用し、サーバミドルウェアにNode.js＋Socket.IOを採用しました。この結果、ブラウザゲームでありながらマルチデバイスでの対戦を実現しました。 今回は、Node.js＋Socket.IOによるWebSocketサーバのシステム構築方法について考慮すべきポイントを、「おしゃべりリバーシ」の実例を紹介しながら説
HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的 | ClockMaker Blog
HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的 先日の記事で紹介したJavaScriptライブラリ「Away3D TypeScript」(WebGLに対応)ですが、燃え盛る炎の表現を作成してみました。 デモは以下から試せますので、ぜひWebGL対応のブラウザ(Chrome, Firefox, IE11)を使ってご覧下さい。 Demo (WebGL対応のブラウザでご覧ください) Source (TypeScript 0.9.5で作成) 移植元のFlash版のデモ マウスで画面をドラッグ＆ドロップするとアングルを動かすことができます。もしかしたら環境によっては動作が重たいかもしれないので、ブラウザのウインドウサイズを小さくしてみると滑らかに再生できるようになるかもしれません。 ▲右クリックするとFlash Playerではない
このJavaScriptフレームワークでHTML5は救われるかもしれない | readwrite.jp
HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。
アプリ開発を外部にお願いする際！とっても重要な動きのディレクション « ブログ｜東京のアプリデザイン制作会社｜株式会社ハラハラ｜harahara Inc.
弊社はアプリの開発を外部に発注することも多いのですがそういった中でスマホ特有のトランジション(動き)やジェスチャーなどユーザーの右脳に訴えかけるような表現も多くあるのでお仕事をお願いする際に気をつけたいことをまとめてみました。 Webとは違う まず当たり前ですがFlashやjavascriptによるリッチなコンテンツの実装をする場合とは根本的に異なることを認識していただくことが前提です。 Flashやjavascriptの実装出来る人は元Webデザイナーをしていたことや志した人も多いですし長年の業務でデザイナーと共に右脳表現を鍛えているはずです。ただ、アプリのエンジニアに関して言えばそういう経緯からの出身者が少ないことをまず知るべきです。 私が出会ったアプリのエンジニアのほとんどは大手のソフトウェア会社のプログラマやSEがほとんどでした。そのプログラムスキルは時にWebプログラマよりも高い
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Flash一切なし！HTML / CSS / javascriptでできた、アニメーション満載の「おしい！広島県」
Flash一切なし！HTML / CSS / javascriptでできた、アニメーション満載の「おしい！広島県」 今回は、広島県が人気タレント有吉弘行さんを観光大使に起用したことで話題になっているウェブサイト「おしい！広島県」のコードを分解します。 このサイトは、広島の知られざる「おしい！」を紹介し、たくさんの人が実際に広島を訪れて「おいしい！」県になることを目指しています。サイトについた「いいね！」は28,000以上、オフィシャル動画の再生回数は、42万回を超えています。 今回のサイトの特徴はなんといっても、リッチな表現です。 具体的には、以下のようになります。 ・FLASHなしのHTMLサイト ・動画再生 ・豊富なアニメーション ・「おしいね」ボタン それぞれの特徴を解説していきます。 ・FLASHなしのHTMLサイト 今までは、このような非常に動的要素の多いWebサイトはFLASH
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webdesignmatome.com/webdesign/js_anim