view source
JavaScript
document.title = '慣用句の組み合わせ';
$.get('/csv/word-kanyoku.txt', function(data){
let aryOrg = data.split('\n');
//console.log(aryOrg);
let aryOrg2 = [];
let joshiAry = ['を','に','が','で'];
aryOrg.forEach(function(v){
joshiAry.some(function(m,j){
if(v.indexOf(m) !== -1){
let bunsetsuAry = v.split(m);
bunsetsuAry[0] += m;
if(bunsetsuAry.length === 2){
aryOrg2.push(bunsetsuAry);
}
return true;
}
});
});
//console.log(aryOrg2);
$div = $('<div>',{id:'kanyoku'});
$c = $('<h1>').text('正しい慣用句の組み合わせは？線でつなげて！');
$after = $('<div>',{id:'after'});
$btns = $('<div>',{id:'btns'});
$links = $('<div>',{id:'links'});
$canvas = $('<canvas>');
$ul1 = $('<ul>',{id:'a1'});
$ul2 = $('<ul>',{id:'a2'});
$('#demo').append($div);
$div.append($ul1);
$div.append($ul2);
$div.append($canvas);
$div.after($after);
$after.append($btns);
$after.append($c);
$after.append($links);
let clearCount = 0;
let max = 5;
let ctx = $canvas[0].getContext('2d');
ctx.lineWidth = 4;
let ary = [];
let isSelect1 = false;
let isSelect2 = false;
let p1 = {x:0,y:0};
let p2 = {x:0,y:0};
let ele1;
let ele2;
let text1 = '';
let text2 = '';
let c = 0;
let colors = [
'#ff0000',
'#00ff00',
'#0000ff',
'#aaaa00',
'#00aaaa',
];
/*
aryOrg2.forEach(function(v){
$li = $('<li>');
$a1 = $('<a>').text(v[0]);
$a2 = $('<a>').text(v[1]);
$li.append($a1).append($a2);
$ul.append($li);
});
*/
function changePanel(a,b){
let c = $('<li>');
a.before(c);
a.removeClass('select');
b.after(a);
c.after(b);
c.remove();
selectPanels = [];
}
function shufflePanel(){
for(i=0;i<7;i++){
r = Math.floor(Math.random()*max);
r2 = Math.floor(Math.random()*max);
r3 = Math.floor(Math.random()*max);
r4 = Math.floor(Math.random()*max);
changePanel($('.a1').eq(r),$('.a1').eq(r2));
changePanel($('.a2').eq(r3),$('.a2').eq(r4));
}
}
function setStage(){
$ul1.empty();
$ul2.empty();
$links.empty();
c = 0;
ctx.clearRect(0,0,999,999);
ary = _.shuffle(aryOrg2);
ary = ary.splice(1,max);
ary.forEach(function(v){
$li = $('<li>');
$a1 = $('<a>').text(v[0]).addClass('a1');
$a2 = $('<a>').text(v[1]).addClass('a2');
if(v[0].length>5){
$a1.css({fontSize:'14px'});
}
if(v[1].length>5){
$a2.css({fontSize:'14px'});
}
$($a1).add($a2).on('click', function(event){
checkResult(this);
});
$ul1.append($a1);
$ul2.append($a2);
});
$canvas[0].width = $div.width();
$canvas[0].height = $div.height();
shufflePanel();
}
setStage();
function checkResult(ele_){
let ele = ele_;
if($(ele).hasClass('select')){
return;
}
if($(ele).hasClass('a1')){
if(isSelect1){return;}
$(ele).addClass('select');
isSelect1 = true;
ele1 = $(ele);
text1 = $(ele).text();
}
if($(ele).hasClass('a2')){
if(isSelect2){return;}
$(ele).addClass('select');
isSelect2 = true;
ele2 = $(ele);
text2 = $(ele).text();
}
let position = $(ele).parent().parent().position();
let posX = position.left;
let posY = position.top;
//var clickX = event.pageX ;
//var clickY = event.pageY ;
var clientRect = ele.getBoundingClientRect() ;
var positionX = clientRect.left + window.pageXOffset;
var positionY = clientRect.top + window.pageYOffset;
let clientW = clientRect.width
if($(ele).hasClass('a2')){
clientW = 0;
}
//x = clickX - positionX ;
//y = clickY - positionY ;
x = positionX - posX + clientW;
y = positionY - posY + clientRect.height/2;
if($(ele).hasClass('a1')){
p1 = {x:x,y:y};
}
if($(ele).hasClass('a2')){
p2 = {x:x,y:y};
}
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
if(isSelect1 && isSelect2){
var isMatch = false;
isSelect1 = false;
isSelect2 = false;
var text = text1 + text2;
console.log(text);
ary.some(function(v){
console.log( v[0]+v[1]);
if(text === v[0]+v[1]){
isMatch = true;
return true;
}
});
if(!isMatch){
$(ele1).addClass('ng');
$(ele2).addClass('ng');
$('.a1').addClass('select');
$('.a2').addClass('select');
if(clearCount>2){
clearCount--;
}
setNext();
return;
}
$(ele1).addClass('ok');
$(ele2).addClass('ok');
ctx.strokeStyle = colors[c];
ctx.beginPath();
ctx.moveTo(p1['x'], p1['y']);
ctx.lineTo(p2['x'], p2['y']);
ctx.stroke();
c++;
if(c>=max){
clearCount++;
setNext();
}
}
}
function setLinks(){
let h2 = $('<h2>').text('言葉の意味を調べる');
$links.append(h2);
ary.some(function(v){
let t = v[0]+v[1];
let h = '//www.google.com/search?q='+t;
let a = $('<a>',{target:'_blank',href:h}).text(t);
$links.append(a);
});
}
function setNext(){
$btn = $('<button>').text('次の問題へ');
$btn.on('click', function(){
setStage();
$c.text(clearCount);
$(this).remove();
});
$btns.append($btn);
setLinks();
}
});
CSS
#demo{
display:grid;
justify-items: center;
align-items: center;
}
footer,
#code,
pre{
display:none;
}
h1{
font-weight:bold;
}
#kanyoku{
display:flex;
justify-content: space-between;
margin:0 auto;
width:320px;
max-width:100%;
position:relative;
left:0;
top:0;
}
#kanyoku ul{
position:relative;
left:0;
top:0;
z-index:3;
}
#kanyoku canvas{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
#kanyoku a{
display:block;
padding:12px;
margin:4px 0;
line-height:40px;
border:2px solid #000;
font-size:20px;
}
#kanyoku a:hover{
background-color:#ccc;
cursor:pointer;
}
#kanyoku a.select{
background-color:#aaa;
}
#kanyoku a.ng{
background-color:#faa;
}
#kanyoku a.ok{
background-color:#afa;
}
#after{
text-align:center;
}
#links{
height:40px;
padding:4px;
}
#links a{
padding:8px;
}
#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-kanyoku/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。