Javascript 神経衰弱ゲームを作ろう その１（まだ未完成です）
現在のコード
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="palet"></div>
<div id="result">ここに経過時間が読み込まれるようにする</div>
<div id="palet2"></div>
<script src="js/main.js"></script>
</body>
</html>
#palet ,#palet2 {
width: 310px;
height: 490px;
background-color: antiquewhite;
}
.card {
width: 60px;
height: 80px;
background-size: cover;
float: left;
}
.front {
}
.spade1 {
}
.spade2 {
}
.spade3 {
}
.spade4 {
}
.spade5 {
}
.spade6 {
}
.spade7 {
}
.spade8 {
}
.spade9 {
}
.spade10 {
}
.spade11 {
}
.spade12{
}
.spade13{
}
.heart1 {
}
.heart2 {
}
.heart3 {
}
.heart4 {
}
.heart5 {
}
.heart6 {
}
.heart7 {
}
.heart8 {
}
.heart9 {
}
.heart10 {
}
.heart11 {
}
.heart12{
}
.heart13{
}
.finish {
background-image: none;
}
#result{
background-color: lightskyblue;
}
js
// ハートとスペードのトランプをそれぞれ別の関数で配置したもの
window.onload = function(){
let arr =;
function frontList(){
for(i = 0; i < 26; i++){
arr
let tramp = document.createElement('div')
const palet = document.getElementById('palet');
tramp.classList.add('front', 'card');
palet.appendChild(tramp);
}
}
// スペードとハートを並べる処理↓ーーーーーーーーーーーーーーーーーーーーーー
function backList(){
for(i = 1; i < 27; i++){
if(i < 14){
let tramp =document.createElement('div')
const palet2 =document.getElementById('palet2');
tramp.classList.add(`spade${i}`, 'card');
palet2.appendChild(tramp);
}else{
let tramp =document.createElement('div')
const palet2 =document.getElementById('palet2');
tramp.classList.add(`heart${i-13}`, 'card');
palet2.appendChild(tramp);
}
}
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
// 関数の実行処理↓ーーーーーーーーーーーーーーーーーーーーー
setTimeout(frontList, 1000);
//画面をロード後1秒後に読み込まれる
setTimeout(backList, 1500);
// 画面をロード後1.5秒後に読み込まれる
}
今の内容はカード２６枚の裏と表をそれぞれjsで操作し配置しただけ
カードはスペード13枚、ハート13枚を使用想定
スペードとハートを並べる処理は以下のようにスペードとハートで分けたり
// ハートとスペードのトランプをそれぞれ別の関数で配置したもの
window.onload = function(){
let arr =;
function frontList(){
for(i = 0; i < 26; i++){
arr
let tramp = document.createElement('div')
const palet = document.getElementById('palet');
tramp.classList.add('front', 'card');
palet.appendChild(tramp);
}
}
// スペードを並べる処理↓ーーーーーーーーーーーーーーーーーーーーーー
function spadeList(){
for(i = 1; i < 14; i++){
//for文は関数の中に入れないとiが１ずつ増えた値をspadeiに反映できない
let tramp =document.createElement('div')
const palet2 =document.getElementById('palet2');
tramp.classList.add(`spade${i}`, 'card');
palet2.appendChild(tramp);
}
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
// ハートを並べる処理↓ーーーーーーーーーーーーーーーーーーーーーー
function heartList(){
for(i = 14; i < 27; i++){
//for文は関数の中に入れないとiが１ずつ増えた値をspadeiに反映できない
let tramp =document.createElement('div')
const palet2 =document.getElementById('palet2');
tramp.classList.add(`heart${i-13}`, 'card');
palet2.appendChild(tramp);
}
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
// 関数の実行処理↓ーーーーーーーーーーーーーーーーーーーーー
setTimeout(frontList, 1000);
//画面をロード後1秒後に読み込まれる
setTimeout(spadeList, 1500);
// 画面をロード後1.5秒後に読み込まれる
setTimeout(heartList, 2000);
// 画面をロード後2秒後に読み込まれる
}
スペードとハートを分けて記述
スペードとハートを一緒の関数に入れつつifを使用しない書き方
// スペードとハートを同じ関数で配置したもの
window.onload = function(){
let arr =[];
function frontList(){
for(i = 0; i < 26; i++){
let tramp = document.createElement('div')
const palet = document.getElementById('palet');
tramp.classList.add('front', 'card');
palet.appendChild(tramp);
}
}
// スペードとハートを並べる処理↓ーーーーーーーーーーーーーーーーーーーーーー
function backList(){
for(i = 1; i < 14; i++){
//for文は関数の中に入れないとiが１ずつ増えた値をspadeiに反映できない
let spade =document.createElement('div')
const palet2 =document.getElementById('palet2');
spade.classList.add(`spade${i}`, 'card');
palet2.appendChild(spade);
let heart =document.createElement('div')
heart.classList.add(`heart${i}`, 'card');
palet2.appendChild(heart);
}
}
// ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
// 関数の実行処理↓ーーーーーーーーーーーーーーーーーーーーー
setTimeout(frontList, 1000);
//画面をロード後1秒後に読み込まれる
setTimeout(backList, 1500);
// 画面をロード後1.5秒後に読み込まれる
}
ifを使わない書き方
も出来る。
上記３パターンを検討した上で、一番最初の同じ関数でifを使用したものを使うようにした。
理由をしては同じfor文でカードを配置できるため、iが0〜26になる番号がそれぞれのカードにスペード、ハート分けずに使用出来るため
これを次回では配列に入れ、シャッフル可能にする予定
続く
