はじめに
こんにちは。私は今夏休みなので、たくさん時間を確保できる状況にあります。
そこで、HTML、CSS、JavaScriptをしっかり勉強しようと考えました。
私が勉強する教材として利用したのがドットインストールです。
そして今回、ある程度、理解することができ、オリジナルでゲームを作ることができたので、記事にしました。
久しぶりの投稿になりますが、よろしくお願いします。
視聴したレッスン
- 【旧版】はじめてのHTML
- 【旧版】はじめてのCSS
- 【旧版】JavaScript基礎文法徹底マスター
- 【旧版】JavaScriptでおみくじを作ろう
- 実践！ウェブサイトを作ろう
- 実践！スマートフォンサイトを作ろう
- 詳解HTML 基礎文法編
- 詳解CSS 基礎文法編
- はじめてのJavaScript
- 詳解JavaScript DOM編
- JavaScriptでスライドショーを作ろう
- JavaScriptでスロットマシンを作ろう
- JavaScriptでハイアンドローゲームを作ろう
- JavaScriptでカウントダウンタイマーを作ろう
- JavaScriptで5秒当てゲームを作ろう
- JavaScriptで作る誕生日診断
- JavaScriptで作る王様ゲーム
上記に書いてあるレッスンを視聴しました。
それぞれの文法については、2~3周ほどしました。
JavaScriptに関しては、私は他の言語も触っていましたので、スムーズに理解することができました。
環境
- Windows 10 home
- Google Chrome
「ラストババ抜き」の制作
このゲームはトランプの「ババ抜き」の最後の部分を少し改良して再現したゲームになります。相手のカード枚数が残り2枚で、そこから「JOKER」のカードではなく、「あたり」のカードを選ぶものです。
こちらから遊ぶことができます。→ ラストババ抜き
ソースコード
Githubにもあげてありますが、こちらにもそれぞれ載せておきます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ラストババ抜き</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>dealer</h1>
<div class="dealer">
<ul>
<li>?</li>
<li>?</li>
</ul>
</div>
<div id="resetButton">もう一度！</div>
<div id="result"></div>
<h1>player</h1>
<div class="player">あたりを引け！</div>
</div>
<script src="main.js"></script>
</body>
</html>
styles.css
body{
background-color:#088A4B;
}
.container{
width:500px;
margin:100px auto;
font-weight:bold;
font-size: 24px;
text-align:center;
}
h1{
border:5px solid #fff;
margin:0 0 30px;
}
ul{
display:flex;
justify-content:space-between;
list-style:none;
padding:0;
margin:0;
}
li,.player{
background-color:skyblue;
width:100px;
height:160px;
border:5px solid #fff;
border-radius:5px;
line-height:160px;
user-select:none;
}
li:hover{
opacity:0.8;
cursor:pointer;
user-select:none;
}
.player{
margin:0 auto;
font-size: 12px;
}
#result{
margin:50px 0;
height:70px;
font-size: 48px;
line-height:70px;
}
#resetButton{
width:100px;
height:100px;
line-height:100px;
font-size:18px;
border-radius:50%;
background-color:purple;
border:3px solid #fff;
float:right;
position:relative;
top:30px;
right:60px;
}
#resetButton:hover{
opacity:0.8;
cursor:pointer;
user-select:none;
}
.hidden{
display:none;
}
main.js
"use strict";
{
const d_li=document.querySelectorAll(".dealer li");
const resetButton=document.getElementById("resetButton");
const result=document.getElementById("result");
window.onload=function(){
init();
}
for(let i=0;i<d_li.length;i++){
d_li[i].addEventListener("click",()=>{
if(!resetButton.classList.contains("hidden")){
return;
}
let rdNum=Math.floor(Math.random()*d_li.length)
if(i === rdNum){
gameClear(i);//あたり
}else{
gameOver(i);//はずれ
}
resetButton.classList.remove("hidden");
});
}
resetButton.addEventListener("click",()=>{
init();
});
function init(){ //初期化
for(let i=0;i<d_li.length;i++){
d_li[i].textContent="?";
}
resetButton.classList.add("hidden");
result.textContent="";
}
function gameClear(i){ //ゲームクリア
d_li[i%2].textContent="あたり";
d_li[(i+1)%2].textContent="JOKER";
result.textContent="あたり！"
}
function gameOver(i){ //ゲームオーバ―
d_li[i%2].textContent="JOKER";
d_li[(i+1)%2].textContent="あたり";
result.textContent="ざんねん！"
}
}
以上がソースコードになります。
もしなにかあればコメントをください。できる限り対応します。
終わりに
以上で「ラストババ抜き」の制作は終了です。
時間はかかりましたが、やっとオリジナルで作れたので、嬉しいです。
知識を入れていく際なのですが、ドットインストールでは手を動かしながらできるので、効率よく勉強できると思います。
個人的に、CSSの学習は大変でした。次々に新しいことが出てくるので驚きの連続です。
今後も、HTML、CSS、JavaScriptを使ってオリジナルのものを作っていく予定なので、よろしくお願いします。
ここまで読んでいただき、ありがとうございました。