りんご みかん めろん すいか いちご さかな さくら からす もみじ まぐろ しゃけ いくら くじら いるか らくだ こあら さんま きつね たぬき ねずみ きりん きのこ てがみ つくえ たまごやき じどうしゃ じてんしゃ ぴーまん じゃがいも さつまいも おんせん ましゅまろ えんぴつ けしごむ じしゃく こくばん しゃしん にんげん ちょこれーと とうもろこし とうがらし かれーらいす ぶろっこりー にんじん おうさま おひめさま すてーき やきにく ありがとう どらごん ものほしざお れいぞうこ そうじき えあこん ぱそこん きーぼーど いんたーねっと だうんろーど しんじつ うそはっぴゃく いちげきひっさつ おにいちゃん せいてんのへきれき ねこふんじゃった さるのこしかけ こーひーぎゅうにゅう てぃっしゅぺーぱー がいどぶっく こたつふとん じかんていし でんしゃ おんどけい ぶたにもしんじゅ いそがばまわれ おににかなぼう さるもきからおちる つきとすっぽん ぜんはいそげ とうだいもとくらし なきっつらにはち ねこにこばん
バラバラことばパズル 並び替えクイズ
バラバラことばパズル 並び替えクイズ | ひまあそび-ミニゲーム hi0a.com
view source
JavaScript
document.title = 'バラバラことばパズル 並び替えクイズ';
/*
アナグラム
*/
//document.oncontextmenu = function () {return false;}
$(function(){
let clearCount = 0;
let aryOrg = [];
let $h1 = $('<h1>').text(document.title);
let $p = $('<p>').text('パネルを入れ替えて３つの言葉をつくろう');
let $p2 = $('<p>').text('ヒント：灰色パネルは固定です');
$('#demo').append($h1).append($p).append($p2);
//console.log(aryOrg);
let items = [];
let charAry = [];
let selectPanels = [];
let $panels = $('<div>',{id:'panels'});
let $btns = $('<div>',{id:'btns'});
$('#demo').append($panels).append($btns);
function setItems(){
$panels.empty();
$btns.empty();
$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 = [];
let fixedIndexes = []; // 単語ごとの固定位置
let max = 3;
if(aryOrg.length < max){max = aryOrg.length;}
/*
for(let i=0;i<max;i++){
let item = itemAry.pop();
items.push(item);
charAry = charAry.concat(item.split(''));
}
*/
console.log(items);
for (let i = 0; i < max; i++) {
let item = itemAry.pop();
items.push(item);
let randIndex = Math.floor(Math.random() * item.length);
if(clearCount < 2){
randIndex = 0;
}
fixedIndexes.push(randIndex);
// 固定位置以外の文字をシャッフル対象に入れる
item.split('').forEach((ch, idx) => {
if (idx !== randIndex) {
charAry.push(ch);
}
});
}
charAry = _.shuffle(charAry);
let j = 0;
items.forEach(function(v, i){
let item = v;
let $item = $('<ul>');
$panels.append($item);
item.split('').forEach(function(t, idx){
if (idx === fixedIndexes[i]) {
$i = $('<li>').text(t).addClass('fixed'); // 固定文字
} else {
$i = $('<li>').text(charAry[j]);
$i.on('click', function(){
if($(this).hasClass('fixed')) return;
if($(this).parent().hasClass('ok')) return;
if(selectPanels.length){
changePanel(selectPanels[0], $(this));
checkResult();
} else {
selectPanels.push($(this));
$(this).addClass('select');
}
});
j++;
}
let maxWidth = (100 / item.length).toFixed(2) + 'vw';
$i.css('max-width', maxWidth);
$item.append($i);
})
});
/*
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($('.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);
itemText = $('#items').text();
aryOrg = itemText.split('\n');
}
}
}
//let itemText = $('#items').text();
//let aryOrg = itemText.split('\n');
//aryOrg.pop();
let search = location.search.substring(1);
if(search){
aryOrg = decodeURI(search).split(',');
}
let key = getURLKEY();
if(key){
key = decodeURI(key);
aryOrg = key.split(',');
}
if(!aryOrg.length){
$.get('/csv/kana.txt', function(data){
aryOrg = data.split('\n');
aryOrg.pop();
ary = _.shuffle(aryOrg);
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:10px 0;
max-width:100%;
}
li{
display:inline-block;
width:80px;
height:80px;
line-height:80px;
font-size:32px;
font-weight:bold;
text-align:center;
border:2px solid #000;
margin:1px;
cursor:pointer;
}
li:hover{
background-color:#eee;
}
li.select{
border:2px solid #f00;
}
.ok li{
background-color:#afa;
}
.fixed{
background-color:#ddd;
}
b{
display:block;
margin:8px auto;
}
#btns{
height:80px;
}
button{
display:block;
margin:8px auto;
padding:24px;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/game/game-text-anagram/
ABOUT
hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
仕様変更、API廃止等、実験途中で動かないページもあります。