遊び方・ルール
しりとり。ことばあそび。
連想クイズ。脳を活性化させる脳トレ無料ゲーム。
ことばのおしりの文字を取って、その文字から始まることばを考えるゲーム。
絵から連想される言葉をつなげてしりとりをしよう。
濁点（゛）、半濁点（゜）、長音（ー）は無視。
裏読み探しもこめて1ステージ4回までお手つきOK。
ひっかけ問題多数。
正解ルートは複数あるかも。
何回失敗してもOK！
リロードするとSTAGE1にもどるから→でやり直して！
いろんな遊び方
1人プレイ：全部のパネルを開けたら勝ち！
2人プレイ：交互に操作してしりとりバトル！
「ん」で終わる言葉を探そう！
レアな裏読みを見つけ出そう！
ヒント・単語のこだわり
できるだけ一般名詞
ちいさなこどもでもよめるものを多めに
キャラ名・作品名や固有名詞は流行り廃りで全年齢に伝わらないので避ける
デジタル機器はは進化が早く流行り廃りで全年齢に伝わらないので避ける
マイナーな動物名・植物名・食べ物は伝わらないので避ける
ていねいな「お」がつく頭は避ける
形のない概念的な言葉は子供に伝わりにくいので避ける
カタカナ英語読みは普及しているカンタンなのだけ採用
イジワルな裏読みは一般名詞で混ぜる
複数の意味を込めた画像を採用
知人から指摘あれば読み方消したり増やしたり
二手三手先を読んで詰まないようにする
国語辞書
ワギャンランド しりとりバトル
いらすとや
いらすとやのフリー素材を使っています
view source
JavaScript
document.title = '絵柄しりとり (ワギャンしりとり) 絵柄から連想する言葉でしりとりゲーム';
document.oncontextmenu = function(){
return false;
}
//https://w.atwiki.jp/gcmatome/pages/3060.html
//https://www.irasutoya.com/
//https://docs.google.com/spreadsheets/d/10BBd0O8IiTJIS9xLmiclMy17_Cw9mPwnKEf5yq8pZmY/edit#gid=0
//商用じゃないから２１点つかってもだいじょうぶだぞ
const seOK = new Audio('/mp3/ok.mp3');
const seMiss = new Audio('/mp3/miss.mp3');
const seLose = new Audio('/mp3/lose.mp3');
const seClear = new Audio('/mp3/clear.mp3');
function hira2kata(str){
return str.replace(/[\u3041-\u3096]/g,function(match){
var chr=match.charCodeAt(0)+0x60;
return String.fromCharCode(chr);
});
}
function match1char(str,kana){
var char=str.slice(0,1);
switch(true){
case char===kana:
case char===hira2kata(kana):
case char===unescape(escape(kana)+'%u3099').normalize():
case char===unescape(escape(kana)+'%u309a').normalize():
case char===hira2kata(unescape(escape(kana)+'%u3099')).normalize():
case char===hira2kata(unescape(escape(kana)+'%u309a')).normalize():
case char===kana.toUpperCase():
return true;
}
}
$(function(){
$h1 = $('<h1>').text(document.title);
$demo = $('#demo');
$demo.after($h1);
$demo.after($('#rule'));
var wordsText = $('#words').text();
$('#words').hide();
var wordsAryOrg = wordsText.split("\n");
wordsAryOrg.pop();
var wordsAry = [];
var panelAry = [];
var wordEndAry = [];
var wordsHash = {};
var x = 5;
var y = 3;
var max = x*y;
var clickCount = 0;
var clickMax = max+3;
var tMax = 30;
var t = tMax;
var score = 0;
var clearCount = 0;
var correctCount = 0;
var dummyCount = 0;
var timer;
var wordEnd = '';
var lastWord = '';
var $wordEnd = $('<p>',{id:'wordEnd'});
$wordEnd.text(wordEnd);
var $lastWord = $('<p>',{id:'lastWord'});
$lastWord.text(lastWord);
$wordWrap = $('<div>',{id:'wordWrap'});
wordLog = '';
$wordLog = $('<p>',{id:'wordLog'});
correctLog = '';
$correctLog = $('<p>',{id:'correctLog'});
$life = $('<div>',{id:'life'});
$timer = $('<p>',{id:'timer'});
$stage = $('<p>',{id:'stage'});
$under = $('<div>',{id:'under'});
message = '';
$stars = $('<p>',{id:'stars'});
$message = $('<p>',{id:'message'});
$btn = $('<p>',{id:'btn'}).addClass('beat-ani');
$btn.on('click', function(){
reset();
readyStage()
updateMessage();
});
$.get('/csv/img-irasutoya.txt', function(data){
wordsAryOrg = data.split('\n');
reset();
readyStage();
updateMessage();
});
$demo.append($wordWrap);
$wordWrap.append($lastWord);
$wordWrap.append($wordEnd);
$demo.append($timer);
$demo.append($life);
$demo.append($stage);
var $ul = $('<ul>');
$demo.append($ul);
$demo.append($under);
$under.append($stars);
$under.append($message);
$under.append($btn);
$demo.append($wordLog);
$demo.append($correctLog);
function reset(){
life = 5;
updateLife(0);
wordsAry = _.shuffle(wordsAryOrg);
panelAry = [];
wordEndAry = [];
if(clearCount < 2){
max = 5;
} else if(clearCount < 4){
max = 10;
} else {
max = 15;
}
loopCount = 0;
loopMax = 9;
wordLog = '';
correctLog = '';
$stars.empty();
for(i=0;i<wordsAry.length;i++){
var v = wordsAry[i];
var ary = v.split("\t");
var key = ary.shift();
if(panelAry.length >= max){
break;
}
isMatch = false;
ary.some(function(str, j){
if(i===0){
isMatch = true;
}
if(str===''){return;}
if(j>1){return true;}
if(str[str.length-1] === 'ん'){return;}
if (match1char(str, wordEnd)){
isMatch = true;
}
if(isMatch){
updateWord(str);
wordsAry.splice(i,1);
backgroundImage = 'url(img/'+key+')';
alt = ary.join(',');
var hash = {
backgroundImage:backgroundImage,
alt:alt,
str:str,
ary,ary,
}
panelAry.push(hash);
i++;
if(loopCount<loopMax){
wordsAry = _.shuffle(wordsAry);
i=0;
}
return true;
}
});
}
correctCount = panelAry.length;
dummyCount = 0;
panelAry.forEach(function(v,i){
v.i = i;
});
wordEnd = '';
correctLog = wordLog;
wordLog = '';
$wordLog.text(wordLog);
$correctLog.text(correctLog);
panelAry = panelAry.slice(0, max);
var firstIndex = 0 // Math.floor(Math.random()*x * y);
var first = panelAry.shift();
panelAry = _.shuffle(panelAry);
panelAry = [first].concat(panelAry);
//wordsAry = wordsAry.slice(0, x * y);
console.log(panelAry);
t = tMax;
clearInterval(timer);
timer = setInterval(function(){
t--;
$timer.text(t);
if(t<1){
setGameover('じかんぎれ');
}
}, 999);
$('.clear').removeClass('clear');
$('.gameover').removeClass('gameover');
$('.show').removeClass('show');
}
function updateLife(d=-1){
life+=d;
$life.empty();
for(i=0;i<life;i++){
$life.append($('<i>'));
}
if(life<1){
setGameover('しっぱい');
}
}
function setStar(){
var j = 3;
j = Math.floor(score/(panelAry.length/3));
var starMax = 3;
var $star = $('<i>').addClass('star');
var $star0 = $('<i>').addClass('star0');
$stars.empty();
$stars.attr({title:score});
for(let i=0;i<starMax;i++){
if(i<j){
$stars.append($star.clone());
} else {
$stars.append($star0.clone());
}
}
if(j===0){
$message.text('もっとがんばってお！');
} else if(j===1){
$message.text('ざんねんだお…');
} else if(j===2){
$message.text('おしい！あとちょっと！');
}
}
function setGameover(text='げーむおーばー'){
clearInterval(timer);
message = text;
$message.text(message);
$correctLog.addClass('show');
$demo.addClass('gameover');
$ul;
seLose.play();
$btn.addClass('show');
//setStar();
}
var messages = [
'さすがだお！',
'ろんろんだお！',
'でりしゃあす！！',
'ぐれーと！！',
'えくせれんと！',
'やばたん！',
'うふーん♪あはーん♪',
'ほかのげーむもあそんでみてね！',
'しりとりたのしいお！',
'あそんでくれてありがと！',
'そんなよみかたあり！？',
];
function updateMessage(){
if(score >= panelAry.length){
return;
}
if($wordEnd.hasClass('gameover')){
return;
}
if(score < 2){
if(clearCount === 0){
message = 'しりとりするお！';
} else if(clearCount === 1){
message = 'いろんなよみかたがあるお！';
} else if(clearCount === 2){
message = 'ちょっとむずかしくするお！';
} else if(clearCount === 3){
message = 'なかなかやるおね…！';
} else if(clearCount === 4){
message = 'ここからほんきだお！';
} else if(clearCount === 5){
message = messages[Math.floor(Math.random()*messages.length)];
} else if(clearCount === 6){
message = messages[Math.floor(Math.random()*messages.length)];
} else if(clearCount === 7){
message = 'どんどんいくお！';
message = messages[Math.floor(Math.random()*messages.length)];
} else if(clearCount === 8){
message = 'まだまだつづくお！';
message = messages[Math.floor(Math.random()*messages.length)];
} else if(clearCount === 9){
message = 'これでどうだお！';
} else if(clearCount === 10){
message = 'まじかお！？';
} else if(clearCount < 20){
message = messages[Math.floor(Math.random()*messages.length)];
} else if(clearCount === 20){
message = 'ま、まだやるのかお？';
} else if(clearCount === 21){
message = 'しりとりますたーだお！？';
} else {
message = score + ' / ' + clickMax;
}
} else {
message = score + ' / ' + clickMax;
}
$message.text(message);
}
function updateWord(str, ele=null){
lastWord = str;
wordEnd = str[str.length-1];
console.log(str);
if(wordEnd === 'ー'){
wordEnd = str[str.length-2];
}
if(wordEnd === 'っ'){
wordEnd = 'つ';
}
if(wordEnd === 'ゃ'){
wordEnd = 'や';
}
if(wordEnd === 'ゅ'){
wordEnd = 'ゆ';
}
if(wordEnd === 'ょ'){
wordEnd = 'よ';
}
if(wordEnd === 'ん'){
$wordEnd.addClass('gameover');
setGameover('「ん」でおわった！');
}
wordEndAry.push(wordEnd);
wordLog += lastWord + ' → ';
wordEnd = wordEnd.normalize('NFD')[0];//濁点を消す
if(!ele){return;}
ele.addClass('open');
$wordEnd.text(wordEnd);
$lastWord.text(lastWord);
$wordLog.text(wordLog);
$message.text(message);
score = $('.open').length;
t = tMax;
seOK.currentTime = 0;
seOK.play();
$span = $('<span>').addClass('user').text((score-1) +'.'+ lastWord);
ele.find('i').append($span);
if(score >= panelAry.length){
$demo.addClass('clear');
message = 'くりあー！';
$message.text(message);
clearInterval(timer);
seClear.play();
$btn.addClass('show');
clearCount++;
console.log(clearCount);
let key = getURLKEY();
if(key && clearCount === 5){
key = decodeURI(key);
$key = $('<p>',{id:'keyCrypto'}).text(key);
$key.on('dblclick',function(){$(this).remove();});
$('#demo').append($key);
}
//setStar();
}
$('.char').each(function(){
var a = $(this).find('a');
var text = a.attr('data-text');
var href = a.attr('data-href');
text = text.replace('${char}', wordEnd);
href = href.replace('${char}', wordEnd);
a.attr({href:href}).text(text);
})
}
function readyStage(){
$stage.text('STAGE:'+(clearCount+1));
$ul.empty();
panelAry.forEach(function(v, i){
var $li = $('<li>');
$ul.append($li);
$li.css({backgroundImage:v.backgroundImage});
$li.attr({alt:v.alt});
var $span = $('<span>').text(v.i +'.'+ v.str);
var $i = $('<i>');
$li.append($i);
$i.append($span);
$li.on('click', function(){
var ele = $(this);
if(ele.hasClass('open')){return;}
if($ul.hasClass('gameover')){return;}
if(wordEnd === ''){
str = v.ary[0];
updateWord(str, ele);
return;
}
var isFind = false;
v.ary.some(function(str){
if(str===''){return;}
if (match1char(str, wordEnd)){
updateWord(str, ele);
updateMessage();
isFind = true;
return true;
}
});
if(!isFind){
updateLife(-1);
seMiss.play();
}
});
if(i === 0){
$li.trigger('click');
}
});
}
reset();
readyStage()
updateMessage();
});
CSS
*{
box-sizing:border-box;
}
#demo{
width:100vmin;
margin:0 auto;
position:relative;
left:0;
top:0;
user-select:none;
}
ul{
display: flex;
flex-wrap: wrap;
max-width:100%;
overflow:hidden;
user-select:none;
}
li{
width:20vmin;
height:20vmin;
background-size:contain;
background-position:50%;
background-repeat:no-repeat;
cursor:pointer;
}
li i{
display:block;
width:100%;
height:100%;
}
li i{
border:8px solid rgba(0,0,0,0.1);
}
li:hover i{
border:8px solid #00f;
}
li.open i{
border:8px solid #000;
background-color:rgba(0,0,0,0.6);
cursor:crosshair
}
li.select i{
border:8px solid #0f0;
}
li i span{
display:block;
color:transparent;
padding:4px;
font-size:9px;
}
.clear li i span,
.gameover i span{
color:#0f0;
background-color:rgba(0,0,0,0.6);
}
.clear li i span.user,
.gameover li i span.user{
color:#eee;
background-color:rgba(0,0,0,0.6);
}
h1{
font-size:24px;
font-weight:bold;
}
#words{
display:none;
}
#wordWrap{
display: flex;
flex-wrap: wrap;
}
#timer{
color:#666;
position:absolute;
right:0;
top:0;
font-size:48px;
width:20vmin;
height:20vmin;
line-height:20vmin;
font-weight:bold;
text-align:center;
}
#life{
position:absolute;
left:0;
top:15vmin;
}
#life i{
display:inline-block;
width:5vmin;
height:5vmin;
background-image:url(img/life.png);
background-size:contain;
background-position:50%;
background-repeat:no-repeat;
}
#stage{
position:absolute;
left:0;
top:0;
font-size:24px;
font-weight:bold;
}
#wordEnd{
border:8px solid #000;
width:20vmin;
height:20vmin;
font-size:64px;
text-align:center;
line-height:20vmin;
font-weight:bold;
}
#wordEnd.gameover{
border:8px solid #f00;
color:#f00;
}
#lastWord{
width:60vmin;
height:20vmin;
font-size:24px;
line-height:20vmin;
text-align:right;
padding-right:8%;
}
#under{
position:relative;
right:0;
top:0;
}
#stars{
position:absolute;
left:0;
top:0;
text-align:center;
width:100%;
}
#stars i{
display:inline-block;
width:5vmin;
height:5vmin;
background-size:contain;
background-position:50%;
background-repeat:no-repeat;
}
#stars i.star{
background-image:url(img/star.png);
}
#stars i.star0{
display:inline-block;
background-image:url(img/star0.png);
}
#wordLog{
padding:24px;
}
#btn{
position:absolute;
right:0;
top:0;
z-index:5;
width:10vmin;
height:10vmin;
text-align:center;
line-height:10vmin;
margin:5vmin;
border-radius:50%;
font-weight:bold;
font-size:32px;
background-image:url(img/next.png);
background-size:contain;
background-position:50%;
background-repeat:no-repeat;
cursor:pointer;
border-radius:50%;
display:none;
}
#btn:hover{
background-color:rgba(0,255,0,0.2);
}
#btn.show{
display:block;
}
#correctLog{
padding:24px;
color:transparent;
}
#correctLog.show{
color:#0a0;
}
#message{
color:#666;
font-size:32px;
line-height:20vh;
text-align:center;
}
.gameover #message{
color:#f00;
}
.clear #message{
color:#0f0;
}
.beat-ani{
display:inline-block;
animation-name: beat;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: both;
}
@keyframes beat{
0%{transform:scale(1,1);}
5%{transform:scale(0.9,0.9);}
10%{transform:scale(1.4,1.4);}
30%{transform:scale(1.05,1.05);
60%{transform:scale(1,1);}
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-game-shiritori-picture/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。