JavaScript ランダム関数 Math.random() まとめ + css3
2012.04.20
この記事は最終更新日から1年以上が経過しています。
前回書いた、
ActionScript ランダム関数 Math.random() まとめ
をそっくりそのまま、JavaScriptにしてまとめてみました。
TweenerのアニメーションはCSS3で実装しておりますので、webkit系ブラウザ(safari,GoogleChome)等での確認して頂ければ幸いです。
前回の記事「ActionScript ランダム関数 Math.random() まとめ」を比べながら見て頂ければと。
「Math.random」は、0 以上 1 未満の浮動小数で結果を返します。
では、調べましょう。
ランダム関数「Math.random」はActionScriptとJavaScriptでは同じ使い方となります。
JavaScriptを記述する前にHTML,CSSの用意をしましょう。
HTML
<div class="randomArea"> <h5>乱数表示</h5> <p class="txt" id="randomTxt001"></p> <p class="startBtn" id="startBtn001"><a href="#">start</a></p> </div>
基本はこの形でいきます。
CSS
.randomArea:after{content:'';display:block;clear:both;height:0;visibility:hidden;}
.randomArea h5{
margin-top:10px;
font-weight:normal;
font-size:24px;
}
.randomArea h6{
margin-top:6px;
font-weight:normal;
font-size:20px;
}
.randomArea .txt{
margin-top:10px;
height:36px;
border-bottom:#ccc 1px solid;
font-size:32px;
color:#016699;
}
.randomArea .unseiTxt{
float:left;
margin-top:8px;
font-size:32px;
color:#f00;
}
.randomArea .ball{
background:#f00;
width:50px;
height:50px;
border-radius:25px;
-webkit-border-radius:25px;
margin-top:10px;
}
.randomArea .startBtn{
float:right;
margin-top:20px;
}
.randomArea .startBtn a{
padding:5px 25px;
background:#000000;
color:#ffffff;
text-decoration:none;
}
.randomArea .startBtn a:active{
background:#f00;
}
h5、h6は記事に影響いかないように設定しております。
.ballに関しては、CSS3で円形にしております。
ではJavaScriptの用意。
まず、idを取得するための記述を。
JavaScript id取得
function $(e){ return document.getElementById(e);}
このように記述すると、$(“startBtn001”)のようにjQueryでidを取得するような形で取得が出来ます。
JavaScript ボタンイベント
$("startBtn001").firstChild.onclick = random001;
それぞれのボタンがクリックされた時にイベントを実行します。
今回、001〜008の連番を付けております。
Math.random
JavaScript random001()
function random001(){
ransu = Math.random();
$('randomTxt001').innerHTML = ransu;
return false;
}
まずは、乱数を発生させます。
Math.random Math.floor
このままではとても使うには不便なので、使えるように数字を一桁にしましょう。
その為には、まず生成した乱数に10を掛けます。
function random002(){
ransu = Math.random()*10;
$('randomTxt002').innerHTML = ransu;
return false;
}
10掛けた乱数をMath.floorで整数にします。
これで0~9の整数をランダムに生成することが出来ます。
function random003(){
ransu = Math.floor(Math.random()*10);
$('randomTxt003').innerHTML = ransu;
return false;
}
おみくじ
前回同様、おみくじを作ります。
0〜3の場合、「凶」、4、5の場合「中吉」、6〜9の場合「大吉」にします。
HTML
<div class="randomArea"> <h5>乱数表示</h5> <p class="txt" id="randomTxt004"></p> <h6>今日の運勢</h5> <p class="unseiTxt" id="uranaiTxt"></p> <p class="startBtn" id="startBtn004"><a href="#">start</a></p> </div>
HTMLを少し付け加えます。あとはActionScriptとほぼ同じです。
function random004(){
ransu = Math.floor(Math.random()*10);
$('randomTxt004').innerHTML = ransu;
var uranaiTxt = $('uranaiTxt');
if(ransu<=3){
uranaiTxt.innerHTML = "凶";
}else if(ransu>3 && ransu<6){
uranaiTxt.innerHTML = "中吉";
}else if(ransu>=6){
uranaiTxt.innerHTML = "大吉";
}
return false;
}
ボール移動
前回同様、今度はボールオブジェクトをランダムに移動させましょう。
Startボタンを押すとランダムにX座標を移動します。
HTML
<div class="randomArea"> <h5>X座標</h5> <p class="txt" id="randomTxt005"></p> <p class="ball" id="ball005"></p> <p class="startBtn" id="startBtn005"><a href="#">start</a></p> </div>
JavaScript
function random005(){
ransu = Math.random()*10;
ransu = Math.floor(ransu)/2*100;
$('randomTxt005').innerHTML = ransu;
$('ball005').style.marginLeft = ransu +"px";
return false;
}
$(‘ball005’).style.marginLeft = ransu +”px”;で、マージンレフトの値を変えています。
そのままだと瞬間移動しているので、CSS3のtranslateを使いアニメーションさせます。
JavaScript
$("ball006").style.webkitTransform = "translate(0px,0px)";
$("ball006").style.webkitTransitionProperty = "-webkit-transform";
$("ball006").style.webkitTransitionDuration = "0.4s";
$("ball006").style.webkitTransitionTimingFunction = "ease-in-out";
このようにJavaScriptで設定。マージンレフトの設定部分を
$("ball006").style.webkitTransform = "translate(" +ransu+ "px,0px)";
に変更します。
function random006(){
ransu = Math.random()*10;
ransu = Math.floor(ransu)/2*100;
$('randomTxt006').innerHTML = ransu;
$("ball006").style.webkitTransform = "translate(" +ransu+ "px,0px)";
return false;
}
ランダムに色を変化
前回同様、色を変化させます。
JavaScriptでの色の変化は0xFFFFFFとtoString(16)を使い、16進数の数字に変更し、値を代入することによって対象の色を変更させることができます。
Math.floor(Math.random() * 0xFFFFFF).toString(16);
16進数にするまえに整数にする必要があります。
これらを踏まえ、ボールの色を変化させましょう。
JavaScript
function random007(){
newColor = Math.floor(Math.random() * 0xFFFFFF).toString(16);
$('randomTxt007').innerHTML = newColor;
$("ball007").style.backgroundColor = "#" + newColor;
return false;
}
では、最後に色の変化と共にX座標のボール移動も行います。
random006とrandom007を合体させた形となります。
function random008(){
ransu = Math.random()*10;
ransu = Math.floor(ransu)/2*100;
newColor = Math.floor(Math.random() * 0xFFFFFF).toString(16);
$('randomTxt008').innerHTML = newColor;
$("ball008").style.backgroundColor = "#" + newColor;
$("ball008").style.webkitTransform = "translate(" +ransu+ "px,0px)";
return false;
}
以上になりますー。
