FC2ブログ

java script でキャラ診断

java script でキャラ診断

ドットインストールの
http://dotinstall.com/lessons/shindan_js
を参考にして、キャラ診断の作成

とはいっても、メインでやってみたいのは、後半の twitter で
診断結果を投稿するとこ

いくつかサンプルなどをつくるときに
楽をするためには
ベースとなるファイルをつくり、あとは使いまわすほうが楽

なので、base.html を作成し
ソースは

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<title>タイトル</title>
</head>
<body>

</body>
</html>

あとは、これをコピーして使いまわす

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
はjQuery をつかうのに必須

<input type="text" id="name" value="">
<input type="button" id="shindan" value="診断">

というように診断ボタンを作成

診断ロジックは java script


<body style="text-align:center;">
とすれば、画面中央寄せのものができる

診断結果については
配列で指定する
var types =['勇者','魔法使い','戦士','遊び人','スター',];

診断に使う名前は
var name =$('#name').val();
で取得できる

診断ゲームなので、ランダム要素がほしいということで
var type =types[Math.floor(Math.random() * types.length)];
とする
.length とすることで、最大値を自動取得可能
Math.random() は
java script で乱数を発生させるもの

Math.floor() は小数点四捨五入
これで、配列の数値だけ取得できる


あとは、診断結果を作成
var result = name +'さんは'+ type +'です';

これを表示するので
<p>ここに結果表示</p>
となっているのを
<p id="result">結果表示</p>
としておいて

java script の中で
$('#result').text(result);
とすれば
id="result" になっている部分を
text() の内容で書き換えてくれる

今回は result = 結果の内容なので
結果表示となっている部分が
診断内容に置き換わる

もし、うまく稼働しないときには
chrome で
Ctrl + Shift + i

develper tools を起動して
console タグを開くと
エラーがあればその内容が表示されているので
その部分を修正しやすくなります

次は、診断結果の追加
これは、単純に
var charas =['かっこいい','かわいい','クールな'];
というように
配列を用意して
var chara =charas[Math.floor(Math.random() * charas.length)];
というように
ランダムで要素取得できるようにすればOK

あとは、診断結果を追加するだけ
var result = name +'さんは'+ type +'です';

var result = name +'さんは'+chara+ type +'です';
というようにすれば、いろいろな判定をつけることができる
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック