diff --git a/game.js b/game.js new file mode 100644 index 0000000..d3f2f76 --- /dev/null +++ b/game.js @@ -0,0 +1,166 @@ +function deadEnd1() { + document.getElementById('room').innerHTML = '行き止まり'; + document.getElementById('image').setAttribute('src', 'clickable4.jpg'); + document.getElementById('door1').removeAttribute('coords'); + document.getElementById('door2').removeAttribute('coords'); + document.getElementById('door3').removeAttribute('coords'); + document.getElementById('back').setAttribute('coords', '231,298,231,330,221,330,241,353,261,331,251,331,251,298'); + document.getElementById('back').setAttribute('onclick', 'back1()'); +} + +function deadEnd2() { + document.getElementById('room').innerHTML = '行き止まり'; + document.getElementById('image').setAttribute('src', 'clickable4.jpg'); + document.getElementById('door1').removeAttribute('coords'); + document.getElementById('door2').removeAttribute('coords'); + document.getElementById('door3').removeAttribute('coords'); + document.getElementById('back').setAttribute('onclick', 'back2()'); +} + +function deadEnd3() { + document.getElementById('room').innerHTML = '行き止まり'; + document.getElementById('image').setAttribute('src', 'clickable4.jpg'); + document.getElementById('door1').removeAttribute('coords'); + document.getElementById('door2').removeAttribute('coords'); + document.getElementById('door3').removeAttribute('coords'); + document.getElementById('back').setAttribute('onclick', 'back3()'); +} + +function deadEndNazo2() { + document.getElementById('room').innerHTML = '行き止まり'; + document.getElementById('image').setAttribute('src', 'nazo-memo1.png'); + document.getElementById('nazo').setAttribute('href', 'nazo1.png'); + document.getElementById('nazo').setAttribute('data-lightbox', 'group'); + document.getElementById('door1').removeAttribute('coords'); + document.getElementById('door2').removeAttribute('coords'); + document.getElementById('door3').removeAttribute('coords'); + document.getElementById('back').setAttribute('onclick', 'back2()'); +} + +function deadEndNazo3() { + document.getElementById('room').innerHTML = '行き止まり'; + document.getElementById('image').setAttribute('src', 'nazo-memo1.png'); + document.getElementById('nazo').setAttribute('href', 'nazo1.png'); + document.getElementById('nazo').setAttribute('data-lightbox', 'group'); + document.getElementById('door1').removeAttribute('coords'); + document.getElementById('door2').removeAttribute('coords'); + document.getElementById('door3').removeAttribute('coords'); + document.getElementById('back').setAttribute('onclick', 'back3()'); +} + +function back1() { + document.getElementById('room').innerHTML = '1つ目の部屋'; + document.getElementById('image').setAttribute('src', 'clickable1.jpg'); + document.getElementById('door1').setAttribute('coords', '104,112,3,60,3,343,103,273'); + document.getElementById('door1').setAttribute('onclick', 'deadEnd1()'); + document.getElementById('door2').setAttribute('coords', '215,135,265,241'); + document.getElementById('door2').setAttribute('onclick', 'deadEnd1()'); + document.getElementById('door3').setAttribute('coords', '375,112,479,57,478,339,375,271'); + document.getElementById('door3').setAttribute('onclick', 'back2()'); + document.getElementById('back').removeAttribute('coords'); +} + +function back2() { + document.getElementById('room').innerHTML = '2つ目の部屋'; + document.getElementById('image').setAttribute('src', 'clickable2.jpg'); + document.getElementById('nazo').removeAttribute('href'); + document.getElementById('nazo').removeAttribute('data-lightbox'); + document.getElementById('door1').setAttribute('coords', '104,112,3,60,3,343,103,273'); + document.getElementById('door1').setAttribute('onclick', 'back3()'); + document.getElementById('door2').setAttribute('coords', '215,135,265,241'); + document.getElementById('door2').setAttribute('onclick', 'deadEndNazo2()'); + document.getElementById('door3').setAttribute('coords', '375,112,479,57,478,339,375,271'); + document.getElementById('door3').setAttribute('onclick', 'deadEnd2()'); + document.getElementById('back').setAttribute('coords', '231,298,231,330,221,330,241,353,261,331,251,331,251,298'); + document.getElementById('back').setAttribute('onclick', 'back1()'); +} + +function back3() { + document.getElementById('room').innerHTML = '3つ目の部屋'; + document.getElementById('image').setAttribute('src', 'clickable3.jpg'); + document.getElementById('nazo').removeAttribute('href'); + document.getElementById('nazo').removeAttribute('data-lightbox'); + document.getElementById('door1').setAttribute('coords', '104,112,3,60,3,343,103,273'); + document.getElementById('door1').setAttribute('onclick', 'success()'); + document.getElementById('door2').setAttribute('coords', '215,135,265,241'); + document.getElementById('door2').setAttribute('onclick', 'deadEnd3()'); + document.getElementById('door3').setAttribute('coords', '375,112,479,57,478,339,375,271'); + document.getElementById('door3').setAttribute('onclick', 'deadEndNazo3()'); + document.getElementById('back').setAttribute('onclick', 'back2()'); +} + +function success() { + document.getElementById('room').innerHTML = '脱出成功!!'; + document.getElementById('room').setAttribute('class', 'success'); + document.getElementById('image').removeAttribute('src'); + document.getElementById('image').removeAttribute('alt'); + document.getElementById('room').setAttribute('class', 'success'); + var replay = document.createElement('a'); + replay.textContent = 'もう一度プレイする'; + replay.setAttribute('class', 'replay'); + replay.setAttribute('href', 'home.html'); + document.getElementById('room').after(replay); + var thank = document.createElement('p'); + thank.textContent = 'Thank you for playing!!'; + thank.setAttribute('class', 'thank'); + document.getElementById('room').after(thank); +} + +$(window).on('keydown', function(e) { + if(e.keyCode === 37) { // ← + focus_prev(); + return false; + } + if(e.keyCode === 39) { // → + focus_next(); + return false; + } +}); + +// フォーカスを前に移動する +function focus_prev() { + // 現在のフォーカスを取得 + var currentFocusIndex = $('area').index($(':focus')); + + if(currentFocusIndex > -1) { + for (var i = 0; i < $('area').length; i++) { + if(i === currentFocusIndex && i > 0) { + $('area').eq(i - 1).focus(); + } + } + } +} + +// フォーカスを次に移動する +function focus_next() { + // 現在のフォーカスを取得 + var currentFocusIndex = $('area').index($(':focus')); + + if(currentFocusIndex > -1) { + for (var i = 0; i < $('area').length; i++) { + if(i === currentFocusIndex && i < $('area').length - 1) { + $('area').eq(i + 1).focus(); + } + } + } else { + $('area').eq(0).focus(); + } +} + +$(document).ready(function() { + $('#door1, #door2').keydown(function(event) { + if (event.which === 13) { + $('#door1, #door2').click(deadEnd1()); + } + }); + $('#door3').keydown(function(event) { + if (event.which === 13) { + $('#door3').click(back2()); + } + }); + $('#back').keyup(function(event) { + if (event.which === 13) { + $('#back').click(back1()); + } + }); +}); \ No newline at end of file