LoginSignup
0
0

More than 3 years have passed since last update.

IIT（Iwate Industrial Tecnology）Advent Calendar 2020Day 17
@y20517(y 20517)

Javascriptでハート探しゲームを作ってみた

Posted at

はじめに

下の画像の中にハートが5つ隠れています。
showwindow.png
見つけてクリックすると...
showwindow2.png
...といった(システム的に)簡単なハート探しゲームをJavascriptで作りました。

背景の画像はこちらから使わせていただきました。
https://www.pakutaso.com/20201125311post-31736.html

ソースコード

実はかなり面倒な書き方をしています。
工夫をすればもっと簡潔に書けたと思いますが、
そんな技術は持ち合わせていないもので...。ごめんなさい。

index.html
<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta chrset="utf-8">
        <title>Hart search</title>
        <link rel="stylesheet" href="common.css">
    </head>
<body>
<div id="disp_count">0/5</div>
<img id="title"  src="png/Titles.PNG">
<img id="frame1" src="png/Redcircle.PNG">
<img id="frame2" src="png/Redcircle.PNG">
<img id="frame3" src="png/Redcircle.PNG">
<img id="frame4" src="png/Redcircle.PNG">
<img id="frame5" src="png/Redcircle.PNG">
<img id="background"src="png/010ELA201029A_TP_V4.jpg">
<img id="search1" src="png/Search1.png">
<img id="search2" src="png/Search2.png">
<img id="search3" src="png/Search3.png">
<img id="search4" src="png/Search4.png">
<img id="search5" src="png/Search5.png">
<script type="text/javascript" src="main.js"></script>
    </body>
</html>
common.css
html{
    background-color:#ffffff
}
p{
width:1250px;
}
.header-in{
    width: 960px;
    margin-left:auto;
    margin-right:auto;
}
.farst{
width:100%;
text-align: center;
margin: 0 auto;
}
#background{
position: relative;
display: block;
width: 800px;
height: 750px;
z-index: 5;
}
#title{
position: absolute;
display: block;
width: 100%;
height: 90%;
z-index:100;
}
#frame1{
position: absolute;
display: block;
width: 100px;
height: 100px;
z-index: 50;
top: 325px;
left: 380px;
}
#frame2{
position: absolute;
display: block;
width: 100px;
height: 100px;
z-index: 50;
top: 90px;
left: 290px;
}
#frame3{
position: absolute;
display: block;
width: 100px;
height: 100px;
z-index: 50;
top: 540px;
left: 330px;
}
#frame4{
position: absolute;
display: block;
width: 100px;
height: 100px;
z-index: 50;
top: 590px;
left: 130px;
}
#frame5{
position: absolute;
display: block;
width: 100px;
height: 100px;
z-index: 50;
top: 410px;
left: 680px;
}
#mypic{
position: relative;
display: block;
text-align:center;
margin: 0 auto;
width: 70%;
height: 30%;
}
#search1{
position: absolute;
display: block;
width: 90px;
height: 90px;
top: 325px;
left: 390px;
z-index: 20;
}
#search2{
position: absolute;
display: block;
width: 200px;
height: 200px;
top: 20px;
left: 240px;
z-index: 20;
}
#search3{
position: absolute;
display: block;
width: 100px;
height: 100px;
top: 530px;
left: 330px;
z-index: 20;
}
#search4{
position: absolute;
display: block;
width: 100px;
height: 100px;
top: 570px;
left: 130px;
z-index: 20;
}
#search5{
position: absolute;
display: block;
width: 100px;
height: 100px;
top: 410px;
left: 680px;
z-index: 20;
}
main.js
document.getElementById("frame1").style.display = "none";
document.getElementById("frame2").style.display = "none";
document.getElementById("frame3").style.display = "none";
document.getElementById("frame4").style.display = "none";
document.getElementById("frame5").style.display = "none";

var count_disp = document.getElementById("disp_count");
var count_value = 0;

title.onclick = function(){
    document.getElementById("title").style.display = "none";
}
search1.onclick = function (){
    if(count_value < 4){
    count_value+=1;
    count_disp.innerHTML = count_value + "/5";
    }else{
    count_disp.innerHTML = "conpleted!";
    }
        const frame = document.getElementById("frame1");
        frame.style.display ="block";
}
search2.onclick = function(){
    if(count_value < 4){
    count_value+=1;
    count_disp.innerHTML = count_value + "/5";
    }else{
    count_disp.innerHTML = "conpleted!";
    }
        const frame = document.getElementById("frame2");
        frame.style.display ="block";
}
search3.onclick = function(){
    if(count_value < 4){
    count_value+=1;
    count_disp.innerHTML = count_value + "/5";
    }else{
    count_disp.innerHTML = "conpleted!";
    }
        const frame = document.getElementById("frame3");
        frame.style.display ="block";
}
search4.onclick = function(){
    if(count_value < 4){
    count_value+=1;
    count_disp.innerHTML = count_value + "/5";
    }else{
    count_disp.innerHTML = "conpleted!";
    }
        const frame = document.getElementById("frame4");
        frame.style.display ="block";
}
search5.onclick = function(){
    if(count_value < 4){
    count_value+=1;
    count_disp.innerHTML = count_value + "/5";
    }else{
    count_disp.innerHTML = "conpleted!";
    }
        const frame = document.getElementById("frame5");
        frame.style.display ="block";
}

タイトル画面の重要性

まずHTMLを開くと下の画面が出てきます。
Titles.PNG
ただのタイトル画面ですが、実は重要な役割をしています。
showwindowpart1.png
ハートをクリックすると赤い丸がつくのですが、この赤い丸は
style.display = "none";
で隠していて、クリックイベントによって"none"から"block"に変更しています。

main.js(一部抜粋)
document.getElementById("frame1").style.display = "none";
search1.onclick = function (){
        const frame = document.getElementById("frame1");
        frame.style.display ="block";
}

実はこの方法だとページを読み込んだ時に一瞬だけ表示されてしまうことがあり、ネタバレになってしまいます。それを防ぐためにこのタイトル画面が必要なのです。

カウンター

「ハートを見つけた数/隠れているハートの数」をページ左上に表示しています。
showwindowpart2.png

index.html(一部抜粋)
<div id="disp_count">0/5</div>
main.js(一部抜粋)
var count_disp = document.getElementById("disp_count");
var count_value = 0;
search1.onclick = function (){
    if(count_value < 4){
    count_value+=1;
    count_disp.innerHTML = count_value + "/5";
    }else{
    count_disp.innerHTML = "conpleted!";
    }
}

要素がクリックされると"count_value"が+1されます。
"count_value"が5になると、"conpleted!"と表示されます。
すなわちゲームクリアです。
これ以上の演出は用意できなかったので期待しないように。

ウィンドウの大きさに対応していない。

このページはウィンドウの大きさを変えても背景とハートマークは移動したり大きさが変わらないようになっています。そのわけにはハートマークと赤丸を"position: absolute;"で定義してしまっているのが原因です。

index.html(一部抜粋)
<img id="search1" src="png/Search1.png">
common.css(一部抜粋)
#search1{
position: absolute;
display: block;
width: 90px;
height: 90px;
top: 325px;
left: 390px;
z-index: 20;
}

ウィンドウの大きさによってはハートマークと赤丸が大きくずれてしまったり、大きさが合わなくなったりしてしまうのでわざと対応させていません。本当は対応させたかったのですが、そんな技術は(ry

おわりに

投稿日現在、学校でJavascriptを習っている最中なのですが、授業以外で初めて作ったものになります。ソースコードが面倒な書き方になっていたり、ウィンドウの大きさに対応できなかったりと、課題を多く残したままの投稿になってしまい、後悔しています。また投稿する機会があれば、今回作ったものよりもハイクオリティなものを作りたいと思います。ここまで読んでいただきありがとうございました。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0