文字を入力して英単語を完成させるゲームを作ったコード 『Word Guessing Game』

WS002580
このエントリーをはてなブックマークに追加
PR

Word Guessing Game
By Nate Wiley 

DEMO 表示

これはかなり面白い
表示された上部のアンダーラインの数だけのローマ字が入る文字を予測して完成させていくゲームです

 

スクリーンショット1

WS002577

文字を一文字いれて試すと、間違えると下の方に表示され
正解すると上の方の空欄が埋まっていきます

失敗できるのは10回まで、それまでのあいだに埋まっている文字を予測して答えようというものです

正解した時は、回数に含まれません

 

スクリーンショット2

WS002578

失敗し続けるとこのように、GAME OVER的な画面になります

 

 

スクリーンショット3

WS002579

もうここまでくれば正解は決まっていますね

 

 

スクリーンショット4

WS002580

成功すると、入力した文字数と正解率が表示されてゲーム性があります

また実際には効果音がありよりゲームらしいです

 

 

web制作関連のワードがこのゲームでは使われていますが

これを応用して、英単語の学習するようなゲームにすることも出来る

 

 

ワードの指定する箇所

 var wordList = ["chrome", "firefox", "codepen", "javascript", "jquery", "twitter", "github", "wordpress", "opera", "sass", "layout", "standards", "semantic", "designer", "developer", "module", "component", "website", "creative", "banner", "browser", "screen", "mobile", "footer", "header", "typography", "responsive", "programmer", "css", "border", "compass", "grunt", "pixel", "document", "object", "ruby", "modernizr", "bootstrap", "python", "php", "pattern", "ajax", "node", "element", "android", "application", "adobe", "apple", "google", "microsoft", "bookmark", "internet", "icon", "svg", "background", "property", "syntax", "flash", "html", "font", "blog", "network", "server", "content", "database", "socket", "function", "variable", "link", "apache", "query", "proxy", "backbone", "angular", "email", "underscore", "cloud"];

javascriptのところの後ろのほうに wordList があるのでこのなかに、英単語を入れていくだけでいいので、簡単に作り替えれるかと思います
あとはテキストも入れ替えてやれば即席で作れます

 

 

こちらコードでは以下の音源を利用しているようです

http://soundfxnow.com

http://www.soundjay.com

 

 

コードをダウンロードする

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)