以前作ったNumber-Place（数独）ゲームを、学習しやすいように作り直したので、改めて講座編をブログに書いておきます。
ちなみに、このブログを元に、kindle電子書籍で書籍販売をして、Podcastで解説などをレクチャー放送したいと思います。
比較的簡単な、ブラウザゲームを作って、ゲーム作りを学習したい人向けの内容にしています。
基本の見た目
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>NumberPlace</title>
<link type='text/css' rel='stylesheet' href='style.css' />
</head>
<body>
<h1>NumberPlace</h1>
<div id='NumberPlace'>
<table>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr>
</table>
</div>
</body>
</html>
style.css
#NumberPlace{
--size-stage : 300px;
--color-border-1 : black;
--color-border-2 : #666;
}
html,body{
width : 100%;
height : 100%;
padding : 0;
margin : 0;
border : 0;
outline : 0;
scroll-behavior : smooth;
}
body{
border : 1px solid transparent;
}
*, *:before, *:after {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
table{
border-collapse:collapse;
}
.no-select{
-webkit-user-select : none;
-moz-user-select : none;
-ms-user-select : none;
user-select : none;
}
ul,ol,li{
list-style : none;
margin : 0;
padding : 0;
}
.hidden{
display : none!important;
}
button{
background : none;
border : none;
outline : none;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
}
.flex{
display : flex;
}
input[type='text'],
input[type='number']{
outline : 0;
}
.right{
text-align : right;
}
table{
border-collapse:collapse;
}
td{
padding:0;
margin:0;
}
#NumberPlace td{
width : calc(var(--size-stage) / 9);
height : calc(var(--size-stage) / 9);
border : 1px solid var(--color-border-2);
cursor : pointer;
text-align : center;
vertical-align : middle;
background-color : white;
font-size : 20px;
font-weight : bold;
}
#NumberPlace td:hover{
background-color : #DDD;
}
#NumberPlace tr:nth-child(1){
border-top : 2px solid #000;
}
#NumberPlace tr:nth-child(3n){
border-bottom : 2px solid #000;
}
#NumberPlace td:nth-child(1){
border-left : 2px solid #000;
}
#NumberPlace td:nth-child(3n){
border-right : 2px solid #000;
}
表示
解説
Number Placeの基本表示である、9 x 9のマス目をtableタグで表示してみました。
3 x 3のブロック単位のマス目も分かりやすいように、borderの幅を太くして一般的な見え方にしています。
cssには、無駄な記述も多いのですが、できるだけシンプルになるように工夫して書いてみました。
