キーワード Javascript が含まれる動画 ： 1160 件中 289 - 320 件目
種類:
- タグ
- キーワード
対象:
tmlib.jsでゲームを作ってみよう（１）
その１ 自機の表示
今回のポイント
(1)tmlib.jsのインクルード
https://rawgithub.com/phi-jp/tmlib.js/0.1.8/build/tmlib.min.jsをscriptタグで読み込みます。
(2)tm.app.CanvasApp
canvasを使ったアプリケーション。コンストラクタ引数にcanvas要素のidを渡しましょう。
(3)scene
エレメント階層の一番上にいるエレメント。app.currentSceneで取得できます。
(3)tm.app.TriangleShape
三角形のエレメントです。addChildTo()でsceneに追加できます。
(4)update()
毎フレーム呼び出される関数です。
(5)app.keyboard.getKey()
キーボードでキーが押されているかどうかを取得することができます。
次 sm22063641
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう（２）
その２ 敵の出現
今回のポイント
(1)tm.createClass()
クラスを作る関数です。
親クラス(superClass)、コンストラクタ(init)などを定義することが出来ます。
(2)TriangleShapeコンストラクタの第３引数
fillStyleで塗りつぶしに使われる色を指定することが出来ます。
(3)tweener
エレメントにアニメーションを設定するためのプロパティです。
指定したプロパティを絶対量として変化させるtoメソッド、相対量として変化させるbyメソッドなどを持ちます。
(4)Math.rand(a, b)
整数aからbまでの範囲から、ランダムな整数を返します。範囲にはa、bともに含まれます。
前 sm22063606
次 sm22160827
マイリスト mylist/39031781
ネットワークトラフィック可視化ツールcobain
ネットワークトラフィックの可視化。計測地点は東京の某所。ブラウザで閲覧している様子をキャプチャ。音源は次の2曲。てってて～原曲、じゅるP氏作：Gene-Revolutionary
ネットワークトラフィック可視化ツールMap
ネットワークトラフィックの可視化。計測地点は東京の某所。ブラウザで閲覧している様子をキャプチャ。音源は次の2曲。てってて～原曲、じゅるP氏作：Gene-Revolutionary
自作のミニゲーム3本
HTML5+JavaScriptで作ったミニゲーム3本をまとめた動画です。
いずれもブラウザやタブレット、スマートフォンで遊べます。
（タブレットやスマートフォンを持っていないため未確認ですが）
なお、3本目の「トライアングル・トラップ」は、約30年前のMSXのゲームプログラムの本にあった「魔の三角形」というゲームがベースとなっています。
「魔の三角形」は一度マイコンBASICマガジンでVisualBasicへの移植作品がありましたね。
自作ゲームの動画置き場→mylist/56405328
ネットワークトラフィックを可視化してみた
ネットワークトラフィックの可視化。棒が長いほど通信量が多い。計測地点は東京の某所。音源は次の2曲。てってて～原曲、じゅるP氏作：Gene-Revolutionary
東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その6
ライブラリなど使わず0から作っています。
前: sm22039412 次: sm23482639
mylist/38547755
更新点はマイリスト参照。使用素材はその1の親作品参照。
詳細やプレイ(only Chrome)は下記リンク先。
リプレイをサーバに登録することができるのでお試しあれ。
http://d.hatena.ne.jp/takahirox/20130819/1376894048
高速化のためにメモリ管理手法を変えた結果、
メモリの使用量を25%、GCの負荷を99%カットできました。
他にも細かいチューンを行い、高速化は一段落したので、ようやく次のステップに進めそうです。
今回も相変わらず霊夢と魔理沙のリプレイを垂れ流しています。
ブラウザMMDビューア→mylist/49125767
tmlib.jsでゲームを作ってみよう（３）
その３ 自機のショット
今回のポイント
(1)tm.app.CircleShape
円形のエレメントです。tm.app.TriangleShapeの親戚です。
(2)敵とショットの衝突判定
あらかじめenemiesという配列に敵を格納しておき、ショットのupdate関数内で衝突判定をしています。
衝突判定にはisHitElement()関数を使用しています。
(3)配列スキャン中に要素を削除する
concat関数で一旦配列をコピーしてからループ処理を行います。
要素の増減による添字のズレを防ぐことが出来ます。
前 sm22063641
次 sm22206747
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう（４）
その４ 敵弾
今回のポイント
(1)敵弾の移動
弾の向かう方向をdとし、X座標にcos(d)、Y座標にsin(d)を足していくことで任意の方向に弾を動かすことが出来ます。
前 sm22160827
次 sm22256498
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう（５）
その５ 爆発
今回のポイント
(1)爆発
円形（CircleShape）を爆発として使います。
時間とともに拡大し、透明度（alpha）を0に近づけていきます。
前 sm22206747
次 sm22311216
マイリスト mylist/39031781
Leap Motionで野球拳（じゃんけんゲーム）を作ってみた
Leap Motionで、じゃんけんを認識する野球拳ゲームを作ってみました。
leapjsというJavaScriptのライブラリを使用しています。
HTML5対応ブラウザで動作します。ぜひ体験して楽しんでいただければ光栄です。
サイト ⇒ http://azunyan.sitemix.jp/leapmotion/strip.php
前回作った「ゾウさんシコシコゲーム」動画 ⇒ http://www.nicovideo.jp/watch/sm22043764
tmlib.jsでゲームを作ってみよう（６）
その６ ゲームオーバー
今回のポイント
(1)ゲームの終了
app.stop()でアプリケーションが停止します。
前 sm22256498
次 sm22357101
マイリスト mylist/39031781
OSC2013福岡】業務アプリケーションにおけるモダンWeb開発の現状
2013年11月16日（土）開催のOSC2013福岡のセミナーをお送りします。
講師：川田 寛（html5jえんぷら部 部長）・酒巻 瑞穂（スタッフ）・佐川 夫美雄（スタッフ）
担当：html5jえんぷら部
レベル：入門編
対象者：業務アプリケーションのフロントエンジニア
前提知識：特になし
html5の登場により従来JspやServletで開発していた業務アプリケーションがhtml/JavaScript/Cssを重視した開発スタイルに変わりつつあります。
backbonejsやanglarJSといったJavaScriptフレームワークが登場したのも そういったことに関連していると考えられます。
そこで従来の開発スタイルと現在の開発スタイルがどのような変化があるのかを実例を元にご説明したいと思います。
セミナー資料：フルOSSでHTML5-RIAなWeb開発
開発スタイルのこれから for Backbone
開発スタイルのこれから for Angular
Leap Motionで脳トレじゃんけんゲームを作ってみた
Leap Motionで、脳トレ用のじゃんけんゲームを作りました。
leapjsというJavaScriptのライブラリを使用しています。
HTML5対応ブラウザで動作します。ぜひ体験して楽しんでいただければ光栄です。
サイト ⇒ http://azunyan.sitemix.jp/leapmotion/jankenboth.php
前回作った「野球拳ゲーム」動画 ⇒ http://www.nicovideo.jp/watch/sm22260884
tmlib.jsでゲームを作ってみよう（７）
その７ スコアの表示
今回のポイント
(1)tm.app.Label
文字列を表示するエレメントです。
setAlign()で左右寄せの指定、setBaseline()で上下寄せの指定を行います。
前 sm22311216
次 公開未定
マイリスト mylist/39031781
【声入り】ホームページ製作初心者が野球ブラウザゲーム作成part2
part1 sm21785295 前回の後Javascript JQuery JQueryUIを修得してdroppable,draggable機能を生かして野手の采配画面を作ってみました マイリスト mylist/31473114
【tmlib.js】電ちゃんAAを作ろう【JavaScript】
tmlib.jsで画像をAA化してみます。
tm.asset.Textureクラス
画像データをロードするためのクラスです。
getBitmapメソッドでBitmapオブジェクトを取り出す事ができます。
tm.graphics.Bitmapクラス
編集可能な画像データを表現したクラスです。
ピクセルデータを一つ一つ取り出したり、画像にフィルタをかけたりすることができます。
前 sm22357101
次 sm22504751
マイリスト mylist/39031781
【アイマス×GB】千早と『ネバーランドのリンゴ』16
・マーリン出すのをすっかり忘れてました。
・ネバーランドの全体MAPページを作ってみました。【注意】Javascript使ってますー。
→ http://merlinp.web.fc2.com/all_map_view/
・love15製作委員会様、広告ありがとうございます！！
・遅ればせながら、コンテンツツリーに今回お借りしたMMD関連のものを登録しました。ありがとうございます！
※アイマス素材の制作者の皆様、ありがとうございました！
マイリスト(mylist/36842434) / ＜前回(sm22279976) / 次回(sm22550598)＞
★あとがきブログ
・http://merlinp.hatenablog.com/
【MMDドラマ】勝負師弱音ハク
二作目になります。
ほとんど動かない上に文字ばかりで内容もないようなものですが、少しでも楽しんでいただけたら幸いです。
キャラの動きなどは相変わらずJavascriptで制御を行っていて2Dのようになってます。
前回文字が小さいということで、今回は文字サイズを大きくしてみました。
今回登場するゲーム要素のある部分について、需要はないかもしれませんが、致命的なバグを含むシステムの改修やデザインの修正が終わっていつか配布できたらと夢みています。
本編は10秒後くらいから始まります。
補足
ボカロ王国：ミクちゃん、リンちゃん、レンちゃん、ルカちゃん、ネルちゃん、ハクちゃんが住んでる王国
任務：ボカロ王国に他国から来る依頼でミクダヨー様に命じられる仕事
ニコるBB
javascript:void(!function(){var fl = $("#external_nicoru_swf_1 embed")[0];var p = JSON.parse($("#watchAPIDataContainer").html()).videoDetail;for(var i=p.commentCount;i;i--){fl.postNicoru("8:"+p.thread_id+":"+i)}}());
動画ページで実行すると、コメントを全部ニコるBookmarklet
ニコられ通知すっげ～ウザいゾ……
無差別ニコり兄貴ほんときらい
あーすでに一旦この流行が閉じろ
tmlib.jsでゲームを作ってみよう〜横スクアクション編(1)
横スクロールアクション編です。
使用するtmlib.jsはこちら
https://rawgithub.com/daishihmr/tmlib.js/feature/fix-mapsheet/build/tmlib.min.js
tmlib.jsにはTiled Map Editorで作成したマップを表示する機能があるので、これを利用していきます。
前 sm22403990
次 sm22557961
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(2)
自機としてtmlib.jsのマスコットであるひよこちゃんを使用。
tm.geom.Vector2クラスを利用して速度ベクトルを表現していきます。
前 sm22504751
次 sm22561588
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(4)
キャラクターの側面・上面と地形との衝突判定を実装します。
あわせてジャンプも実装していきます。
前 sm22561588
次 sm22562013
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(5)
スクロールの実装。穴に落ちた時のゲームオーバー処理 。
前 sm22561649
次 sm22572354
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(6)
今後敵キャラクターを実装するにあたり、自機クラスと共通となるであろう処理を抽出してスーパークラスを作っておきます。
前 sm22562013
次 sm22573815
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(7)
前回作ったGObjectを継承して敵キャラを実装していきます。
前 sm22572354
次 sm22580851
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(10)
敵に触れると自機がダメージを受けるようにします。
前 sm22587737
次 sm22602367
マイリスト mylist/39031781