Web プログラミング

【もりけん塾84記事】JavaScriptのすごろくがうまくいかない

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

JavaScriptのすごろくゲームがうまくいかない状況…(´;ω;`)

 

今やっているところで何に詰まっているか書いていきます!

JavaScript|すごろくゲームの現状

今の現状は画像のとおりです!

 

  1. 4人プレイヤーがいて
  2. サイコロボタンをクリックすると
  3. 「何がでるかな」で数字を出す
  4. アレ

ここで書いてて思ったんですが、結果がない…

 

結果が表示できるものも作成しよう!

HTML

今のHTML。

 

 html
<body>
<div class="container">
<div class="box">
<h2><span class="sesami">4人</span>でする<span class="wavy">すごろくゲーム</span></h2>
<form>
<label for="player1">player1</label>
<div id="result1">何が出るかな</div>
<button id="btn1">サイコロ</button><br>
<label for="player2">player2</label>
<div id="result2">何が出るかな</div>
<button id="btn2">サイコロ</button><br>
<label for="player3">player3</label>
<div id="result3">何が出るかな</div>
<button id="btn3">サイコロ</button><br>
<label for="player4">player4</label>
<div id="result4">何が出るかな</div>
<button id="btn4">サイコロ</button><br>
</form>
</div>
</div>
<script src="app.js"></script>
</body>

 

buttonの下に結果がでるように作ろう。

 

CSS

次はcss。

 

 css
body{
padding: 0;
margin: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
background:
repeating-linear-gradient(0deg,rgba(0 0 0 / .2)0px 20px, rgba(0 0 0 / 0)20px 40px),
repeating-linear-gradient(90deg,rgba(0 0 0 / .2)0px 20px, rgba(0 0 0 / 0)20px 40px) #E3BF00;
}
.contaienr, .box{
text-align: center;
width: 500px;
height: 500px;
background: #ffffff;
}
label{
color: hotpink;
}
form button{
margin: 10px;
border-radius: 5px;
border: none;
background: crimson;
color: #ffffff;
font-weight: bold;
width: 100px;
height: 35px;
}
.wavy{
text-decoration: #E3BF00 wavy underline;
-webkit-text-decoration:#E3BF00 wavy underline ;
}
.sesami{
text-emphasis: sesame #E3BF00;
-webkit-text-emphasis: sesame #E3BF00;
}

 

デザインは小林|Webクリエイター(@pulpxstyle)さんのTwitter投稿にあったもので色を変えて作ってみました!!^^

かわええ…グレーなのにこのデザインだと果てしなくかわええ…

 

cssだけでこんなことができるなんてcssは奥が深い…

 

そしてこれを教えてくれる小林さんのやさしさ…(´;ω;`)

 

JavaScript

次は壊滅状態のJavaScript。

 

 JavaScript
// すごろくのルール
// スタートが0、ゴールが30
// 0~30のマスがある
// 3の倍数のマスは1回休憩
// 4の倍数のマスはサイコロが1から6のみで1進み、2~5のマスのは4の倍数に残る
// 30でゲーム終了
// サイコロを振ると出た目を表示
//スタートが0
'use strict';
const btn = document.getElementById([btn1,btn2,btn3,btn4]);
const result = document.getElementById([result1,result2,result3,result4]);
btn.addEventListener('click', () => {
const dice = Math.floor(Math.random() * 6) + 1;
//ボタンをクリックしてサイコロの目が1だったら1マス進む
while(dice === 1 ){
document.getElementById("result1");
function()
}
}

一度写経しましたが、意味がないと思い1から作成中!

 

書けない状態なので、JavaScriptのコードや動画とにらめっこ。

 

ググり方に問題があることや、なぜ?かも分かっていないことなどが問題としてあげられそうなのでこちらを明日克服していきたい。

 

1つ作ったら自信につながって書けそう(スムーズではなく時間は非常にかかるとは思うけれど)なので、すごろくゲームは写経とかでないもので作りたい…

おわりに

冷静に、調べて、考えて、コードを書いていけばできるはず。(´;ω;`)

 

Twitterに潜伏する素晴らしくコードを打てる1軍勢もきっとこんなときがあったはず…

 

自分の中に答えがある、自分の中に答えがある、自分の中に答えがあるってつぶやきながらググってググって理解できる範囲でコードを打ってみる!

 

負けず嫌い発揮ー!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada