castero

■週1で何か作ってアップするのを、当面やっていきますー

Works

ジャンケンマンフィーバーをCSSとJavaScriptで再現

ゲームセンターにあった、昔なつかしの「ジャンケンマンフィーバー」をCSSとJavaScriptで再現してみました。 グー、チョキ、パーの画像以外は全部CSSで描画しています。 ■ルール ・コイン入れるところ(右下にあるやつ)をクリックしたらゲーム開始 ・負けたらメダルが1枚減る。 ・勝ったらルーレットが回って、止まったところの数字だけメダルゲット。 ■ブラウザ対応状況(7/4更新) Chrome→ベストプラクティス。問題なし。 Safari→音声がほんのちょっとだけ微妙に遅れる。 FIreFox→挙動は問題ないが所々謎の線が見受けられる。 IE10以降→最初だけなんかおかしい気がするがゲームを進めていくといい感じになる。9以前はわからぬ。 Opera→未対応。 スマホ→未対応。 ■内容に関する情報(7/4更新) ・公開。 (今後追加機能も導入していきます。)

  • 4678
  • 5

Canvasでシューティングゲーム・ライブラリなし

■遊び方 ・黒い画面上でマウスを動かすとプレイヤー機は左右に移動出来る。 ・マウスクリック→弾を発射。 ■ゲームの設定条件色々 ・現在の設定はゲーム時間60秒。 ・弾が敵に当たると敵が消えて得点獲得(得られる得点はある条件に基づきそのときによって違う) ・敵の弾が当たるとライフが1減ります。プレイヤー機に3発敵の弾が当たるとゲームオーバー。 ・ライフが0にならずに無事に60秒乗り切るとゲーム終了。 ■注意 ・黒い画面からマウスが外れるとプレイヤー機は動きません。 ・ゲームオーバーになった場合、スコアはランキングに残りません。 ※推奨ブラウザ Chrome Safari Opera (Firefoxはなんかあやしい。あとで時間あるときに詳しく見る。)

  • 3318
  • 1

JavaScript Numeron

■Numeron (フジテレビで放送されていた(今もやってる?)数字当てゲーム) http://ja.wikipedia.org/wiki/Numer0n 先に相手の数字を当てたら勝ち。 ちょっと強引な記述も多いですが… 6ターン以内に当てないとまず負けます。 ※※※ 一応Numeronの基本ルール ※※※ ・eat→数字も位置も一致 ・bite→位置は一致していないが、数字は一致 例:敵の答えが『123』だとすると… 109 →『1』が数字も位置も一致しているがそれ以外は数字も位置も一致していないので1eat0bite。 362 →数字も位置も一致しているものはないが、『2』『3』は数字が一致しているので0eat2bite。 ※同じ番号は2度使用できません。例えば「001」とかはNG。 ■対応ブラウザ Google Chrome、Safari、あとiPhoneでもできました。 ちなみに本物のNumeronにあるようなアイテムは一切ありません。。。

  • 3406
  • 1

UNIQLOCKもどき

■UNIQLOCK ( http://www.uniqlo.jp/uniqlock/)をそれっぽく再現。 ※動画はフリー素材を使用。3種類のみ。 【注意】 js do itの1作品上にファイルをアップ出来る容量の関係でmp4しかあげていないので、 サポートしていないFirefoxでは再現されません。。。

  • 1626
  • 1

SiriをJavaScriptで作る

Web Speech APIを使ってみたくて、「使い物にならないSiri」をテーマにしたやつをJavaScriptで作成。 使い物にならないSiri→何を話しても「私には意味がわかりません・・・」としか返事しないということです。。。 ちゃんとやったら、それなりにSiriを再現できそう。 2014/8/1現在Google Chromeでのみ利用可能。 WebブラウザのChromeのみ。スマホとかタブレットのChromeはダメ。 (can I useのサイトによるとiOS Safariとかも一部サポートしているって書いてあるけど調べた限り日本語音声は対応していないっぽいです) ■使い方 Siriのボタンをクリック。 ↓ マイク使用の許可確認がでるので、許可を押したらPCのマイクに向かって何かしゃべる。 ↓ 認識した場合は、音が出て、結果を表示します。 ※しゃべってる音声はChromeに備わっているものです。 コード自体はいたって簡単です。。。

  • 2784
  • 1

CSS PK

Chrome , Safariのみ対応。 http://jsdo.it/castero/yoZZ/fullscreen/ で見るとちょうどいいと思います。 iphoneのSafariも一応みられますが、横幅設定広めにとってしまったので ちょっとやりずらいのっともっさりするのと… やればやるほど、諸先輩の偉大さを痛感した、作品でした!

  • 3662
  • 1

おみくじアプリもどきをCSSとJavaScriptで作ってみた

7/10記載 ・背景画像以外は全てCSSとJavaScriptで作成。 木の模様は色々なところ見て拝借。 ■閲覧推奨環境 ・スマートフォン!!!(PCでみてもおみくじできない) ・ios6以上しかも縦向きロックした状態。横向きの状態のときはケアしていない。 ■使い方 ・スタートの下にある→ボタンを押すと開始。 ・スマートフォンを振るとおみくじっぽい音がなる。 ・一定の強度以上で塩コショウを食材にふるときみたいにスマートフォントを振るとおみくじが出てきます。 (スマホ上部を床に向ける感じ) ちなみにおみくじっぽい音は、プラスチックのペンケースにペンを大量に入れて、それをシャカシャカ振ったものを録音したやつです。。。

  • 1945
  • 0

スマートフォンで色彩感覚ゲーム!

あえてスマートフォンにしか対応させていません。 PCからはできませんので、PCでご覧の方は、スマートフォンで閲覧をお願い致します。 申し訳ございません!

  • 1242
  • 0

z-indexの罠

  • 715
  • 0

floatをちゃんと理解する

  • 633
  • 0

Skills

  • jQuery
  • HTML5
  • XHTML
  • CSS
  • CSS3
  • JavaScript

Hot tags

Categories

HTML / CSS / JavaScript