view source
JavaScript
document.title = 'あてはめことば あなうめクイズ';
document.oncontextmenu = function () {return false;}
$(function(){
let clearCount = 0;
let aryOrg = [];
let kigouAryOrg = ['●','○','★','☆','◆','◇',];
let textsOrg = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんー';
let $h1 = $('<h1>').text(document.title);
let $p = $('<p>').text('記号で隠された元の言葉をつくろう (濁点とかは無視OK)');
$('#demo').append($h1).append($p);
//console.log(aryOrg);
let items = [];
let charAry = [];
let selectPanels = [];
let $panels = $('<div>',{id:'panels'});
let $btns = $('<div>',{id:'btns'});
$('#demo').append($panels).append($btns);
let key = getURLKEY();
let $texts = $('<ul>',{id:'texts'});
$panels.after($texts);
textsOrg.split('').forEach(function(v,i){
if(i> 0 && i % 15 === 0){
$texts.append($('<br>'));
}
$i = $('<li>').text(v);
$texts.append($i);
$i.on('click', function(){
let ele = $(this);
let isFind = false;
kigouAry.some(function(k){
kk = convKana(k);
if(v===kk){
ele.addClass('ok');
$('.item li[t="'+k+'"]').text(k);
isFind = true;
checkResult();
}
});
if(!isFind){ele.addClass('ng');}
});
});
$hint = $('<li>').text('☆ヒント').addClass('hint');
$texts.append($hint);
$hint.on('click', function(){
$(this).addClass('y');
$('#texts li').each(function(){
let ele = $(this);
let t = ele.text();
kigouAry.forEach(function(k){
kk = convKana(k);
if(t===kk){
ele.addClass('y');
}
});
if(Math.random()*15<2){
ele.addClass('y');
}
})
});
function convKana(t){
t = t.normalize('NFD')[0];
kanaConvAry = [
['っ', 'つ'],
['ゃ', 'や'],
['ゅ', 'ゆ'],
['ょ', 'よ'],
['ぁ', 'あ'],
['ぃ', 'い'],
['ぅ', 'う'],
['ぇ', 'え'],
['ぉ', 'お'],
['ゎ', 'わ'],
];
kanaConvAry.forEach(function(k){
t = t.replace(k[0],k[1]);
});
return t;
}
console.log(convKana('じ'));
function setItems(){
$panels.empty();
$btns.empty();
$texts.find('.y').removeClass('y');
$texts.find('.ok').removeClass('ok');
$texts.find('.ng').removeClass('ng');
$panels.removeClass('clear');
itemAry = _.clone(aryOrg);
if(clearCount<5 && !key){
var itemAry = _.filter(itemAry, function(v){
return v.length < 6;
});
}
itemAry = _.shuffle(itemAry);
items = [];
charAry = [];
kigouAry = [];
let max = 3;
if(aryOrg.length < max){max = aryOrg.length;}
var item = itemAry.pop();
items.push(item);
console.log(item);
charAry = charAry.concat(item.split(''));
console.log(charAry);
kigouAry.push(charAry[0]);
for(let i=0;i<itemAry.length;i++){
item = itemAry.pop();
charAry.some(function(c){
//console.log(c);
reg = new RegExp(c);
if(item.match(reg)){
console.log(item);
items.push(item);
charAry = charAry.concat(item.split(''));
kigouAry.push(c);
return true;
}
});
if(items.length>2){break;}
}
console.log(items);
//charAry = _.shuffle(charAry);
let j = 0;
console.log(kigouAry);
j = 0;
let blkCount = 0;
items.forEach(function(v){
let item = v;
let $item = $('<ul>');
$item.addClass('item')
$panels.append($item);
item.split('').forEach(function(t){
$i = $('<li>').text(t);
kigouAry.forEach(function(k,i){
if(t === k){
$i.text(kigouAryOrg[i]);
$i.attr({t:t});
}
});
if(!$i.is('[t]') && blkCount < 4 && item.length>3){
if(Math.random()*9>6){
$i.addClass('blk');
blkCount++;
}
}
$item.append($i);
$i.on('click', function(){
if($(this).parent().hasClass('ok')){return;}
if(selectPanels.length){
//changePanel(selectPanels[0], $(this));
//checkResult();
} else {
//selectPanels.push($(this));
//$(this).addClass('select');
}
});
j++;
})
});
/*
console.log(charAry);
let len = charAry.length;
$panels.addClass('ready');
for(i=0;i<48;i++){
let r = Math.floor(Math.random()*len);
$('#panels li').eq(r).trigger('click');
}
$panels.removeClass('ready');
*/
let encodeText = '';
$('#panels ul').each(function(){
encodeText += ',' + $(this).text();
});
//console.log(encodeText.substring(1))
}
function changePanel(a,b){
let c = $('<li>');
a.before(c);
a.removeClass('select');
b.after(a);
c.after(b);
c.remove();
selectPanels = [];
}
function checkResult(){
if($panels.hasClass('ready')){return;}
if($panels.hasClass('clear')){return;}
items.forEach(function(n){
$('#panels ul').each(function(){
let m = $(this).text();
if(n===m){
$(this).addClass('ok');
}
});
});
checkClear();
}
function checkClear(){
if($('#panels .ok').length >= items.length){
$btn = $('<button>').text('次の問題へ');
$btn.on('click', function(){clearCount++;setItems();});
$panels.addClass('clear');
$btns.append($btn);
if(clearCount===4){
$b = $('<b>').text('次から長い単語や、ことわざも出てくるぞ！');
$panels.append($b);
}
if(key && clearCount < 3){
$b = $('<b>').text('特別指定問題クリア！もとのページにもどろう！');
$panels.append($b);
aryOrg = aryOrgCsv;
}
}
}
//let itemText = $('#items').text();
//let aryOrg = itemText.split('\n');
//aryOrg.pop();
$.get('/csv/kana.txt', function(data){
aryOrg = data.split('\n');
aryOrg.pop();
aryOrgCsv = aryOrg;
ary = _.shuffle(aryOrg);
let search = location.search.substring(1);
if(search){
aryOrg = decodeURI(search).split(',');
}
if(key){
key = decodeURI(key);
aryOrg = key.split(',');
}
setItems();
});
//setItems();
});
CSS
htbl,body{
overflow:hidden;
}
#demo{
display: grid;
place-content: center;
place-items: center;
user-select:none;
}
#items{
display:none;
}
ul{
display:flex;
margin:8px auto;
max-width:100%;
}
li{
display:inline-block;
width:60px;
height:60px;
line-height:60px;
text-align:center;
border:2px solid #000;
margin:1px;
cursor:pointer;
}
@media screen and ( max-width:640px) {
li{width:32px;}
}
li:hover{
background-color:#eee;
}
li.select{
border:2px solid #f00;
}
li.blk{
background-color:#000;
}
.ok li{
background-color:#afa;
}
b{
display:block;
margin:8px auto;
}
#btns{
height:80px;
}
button{
display:block;
margin:8px auto;
padding:24px;
}
ul#texts{
display:block;
margin:8px 0;
max-width:100%;
}
ul#texts li{
display:inline-block;
width:40px;
height:40px;
line-height:40px;
font-size:13px;
}
ul#texts li.y{
background-color:#ffa;
}
ul#texts li.ok{
background-color:#afa;
}
ul#texts li.ng{
background-color:#faa;
}
ul#texts li.hint{
width:160px;
}
ul#texts li.hint.y{
display:none;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-game-text-kigou/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。