ここまで(さいころ1つver.)
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つめのサイコロ
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);
}
/*
//ifで記述した場合
if(r1==0){
var iro="#f00";
}else{
var iro="#000";
}
*/
$('#d1').append(sainome).css('color','#ccc');
}
});
サイコロを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');
}
});
判定部分を作る
ぞろめだったら○○のぞろ目ですと言う。
合計値 ○○です。
と出力
→
--->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);
}
});
