#はじめに
自分のアウトプットのため、ソーシャルゲームのコンプリートチェッカーを作ることにしました。これはモンストのものになっていますが、画像や名前を差し替えることで他のゲームにも応用が利くと思います。
#起きたエラーについて
Jqueryでクリックイベントを作った際、
$('img').on('click',
function() {
という風に記述しないといけないという点に気づかず結構な時間ハマってしまいました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var cards = [
{
name: 'シュリンガーラ',
img: '1.jpg',
},
{
name: 'カルナ',
img: '2.jpg',
},
{
name: 'ヴィーラ',
img: '3.jpg',
},
{
name: 'ラウドラ',
img: '4.jpg',
},
{
name: 'アドゥブタ',
img: '5.jpg',
},
{
name: 'モラル',
img: '6.jpg',
},
{
name: 'パラドクス',
img: '7.jpg',
},
{
name: 'コンプレックス',
img: '8.jpg',
},
{
name: 'アンチテーゼ',
img: '9.jpg',
},
{
name: 'ラウドラ',
img: '10.jpg',
},
];
var complete_count = 0;
function change_image() {
if ($('#img1').hasClass('click')) {
$('#img1').removeClass('click');
}
else {
$('#img1').addClass('click');
}
}
function initialize() {
// カードの画像を配置
$('#container').append('<ul class="card_list"></ul>');
for (var i = 0; i < cards.length; i ++) {
var card = cards[i];
$('.card_list').append('<li></li>');
$('.card_list li:last-child').append('<img src="' + card.img + '" data-id="' + i + '" id="img' + i + '">');
$('.card_list li:last-child').append('<p>' + card.name + '</p>');
}
// トータル件数を表示
$('#all_count').html(cards.length);
$('#complete_count').html(complete_count);
$('#complete_rate').html(complete_count / cards.length * 100);
}
$(document).ready(
function() {
initialize();
$('img').on('click',
function() {
console.log($(this).data('id'));
if ($('#img'+$(this).data('id')).hasClass('click')) {
$('#img'+$(this).data('id')).removeClass('click');
complete_count --;
} else {
$('#img'+$(this).data('id')).addClass('click');
complete_count ++;
}
$('#complete_count').html(complete_count);
$('#complete_rate').html(complete_count / cards.length * 100);
}
);
})
</script>
<style>
.card_list {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
text-align: center;
}
.card_list li {
width: 150px;
}
.card_list p {
margin: 0;
}
img {
opacity:0.33;
}
.click {
opacity: 1;
}
</style>
</head>
<body>
<p>モンスト 轟絶コンプ率チェッカー</p>
<p id="message">全<span id="all_count"></span>種中<span id="complete_count"></span>種（コンプ率<span id="complete_rate"></span>%）</p>
<div id="container"></div>
</body>
</html>
#おわりに
最初はHTML上にimgを置いてクリックでオン/オフができる機能を作るという構想だったのですが、scriptとして扱うことでこの部分の変更だけで他にも使えるように変更しました。