忍者ブログ

からすまる日誌

(今日の最後のコード サイコロ2つをふる)

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

(今日の最後のコード サイコロ2つをふる)

test2.html 
 
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title>JavaScript</title>
  <link rel="stylesheet" href="test2.css">
  <script src="../jquery-3.4.1.min.js"></script>
 </head>
 <body>
  <div id="wrap">
   <div id="d1"></div>
   <div id="d2"></div>
  </div>
  <p id="msg"></p>
  
  <script src="test2.js"></script>  
 </body>
</html>
 


test2.css
  
body{
 background: #cfffe5;
 background-image: url(../img/fish_kue2.png);
 background-repeat: no-repeat;
}
#wrap{/*包みもの*/
 display: flex;/*サイコロを横に並べる*/
 flex-wrap: wrap;
}
#d1,#d2{
 display: flex;
 flex-wrap: wrap;
 width: 120px;
 height: 120px;
 border: solid 1px #ccc;
 border-radius: 5px;
 background: rgba(255,255,255,0.8); 
 padding: 5px;
 margin: 10px;
}
#d1 div, #d2 div{/*サイコロの目の丸い部分*/
 width: 30px;
 height: 30px;
 background: #FFF;
 margin: 5px;
 border-radius: 15px;
}
 

test2.js 
  
$(function(){
console.log('foo');
//サイコロの目を配列で管理
var sai = ['000010000',//1の目
'001000100',
'001010100',
'101000101',
'101010101',//5の目
'101101101'];
var r1 = Math.floor(Math.random()*6);//randomで0-5の数を作る
var r2 = Math.floor(Math.random()*6);//2つめのサイコロ
//--------------------------
//1つめのサイコロに関して
//--------------------------
for(var i=0; i<9; i++){//白い丸をひとつずつ9つ作る
var sainome = $('<div>').text(i);
//sai[1].charAt(i);//文字列の中のi番目の文字を抜き出す
console.log('sai is'+sai[1].charAt(i));
if(sai[r1].charAt(i) == 1){//配列の中身に1があったら黒く塗る
//三項演算子で記述
var iro = r1==0? '#f00' : '#000';//r1が0なら真部分実行、それ以外なら偽部分実行
sainome.css('background',iro);
}
$('#d1').append(sainome).css('color','#ccc');
}
//--------------------------
//2つめのサイコロに関して
//--------------------------
for(var i=0; i<9; i++){//白い丸をひとつずつ9つ作る
var sainome = $('<div>').text(i);
//sai[1].charAt(i);//文字列の中のi番目の文字を抜き出す
console.log('sai is'+sai[1].charAt(i));
if(sai[r2].charAt(i) == 1){//配列の中身に1があったら黒く塗る
//三項演算子で記述
var iro = r2==0? '#f00' : '#000';
sainome.css('background',iro);
}
$('#d2').append(sainome).css('color','#ccc');
}
hantei();
//判定
function hantei(){
if(r1 == r2){//ぞろめ
var ele = $('<p>').text('おめでとう'+(r1 +1)+'のぞろ目です');
}
$('#msg').append(ele);
var ele2 = $('<p>').text('合計点は'+(r1+r2+2));
$('#msg').append(ele2);
}
});
PR

コメント

ブログ内検索

カレンダー

03 2025/04 05
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30