りんご みかん めろん すいか いちご さかな さくら からす もみじ まぐろ しゃけ いくら くじら いるか らくだ こあら さんま きつね たぬき ねずみ きりん きのこ てがみ つくえ たまごやき じどうしゃ じてんしゃ ぴーまん じゃがいも さつまいも おんせん ましゅまろ えんぴつ けしごむ じしゃく こくばん しゃしん にんげん ちょこれーと とうもろこし とうがらし かれーらいす ぶろっこりー にんじん おうさま おひめさま すてーき やきにく ありがとう どらごん ものほしざお れいぞうこ そうじき えあこん ぱそこん きーぼーど いんたーねっと だうんろーど しんじつ うそはっぴゃく いちげきひっさつ おにいちゃん せいてんのへきれき ねこふんじゃった さるのこしかけ こーひーぎゅうにゅう てぃっしゅぺーぱー がいどぶっく こたつふとん じかんていし でんしゃ おんどけい いぬもあるけばぼうにあたる ぶたにもしんじゅ うまのみみにもねんぶつ あたまかくしてしりかくさず いそがばまわれ おににかなぼう さるもきからおちる つきとすっぽん ぜんはいそげ とうだいもとくらし なきっつらにはち ねこにこばん
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('パネルを入れ替えて元の言葉をつくろう');
$('#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);
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 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);
charAry = _.shuffle(charAry);
let j = 0;
items.forEach(function(v){
let item = v;
let $item = $('<ul>');
$panels.append($item);
item.split('').forEach(function(t){
$i = $('<li>').text(charAry[j]);
$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($('.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:8px 0;
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;
}
.ok li{
background-color:#afa;
}
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/demo/-js/js-game-text-anagram/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。