[ブラウザゲームの作り方] Number-Place(数独)#1「基本Table」

2023年5月20日

ゲーム プログラミング

eyecatch 以前作った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には、無駄な記述も多いのですが、できるだけシンプルになるように工夫して書いてみました。