はじめに
最近暇だったのでインターネットでよく見るあなたはロボットではありませんを自作したと思いネタで作成した。この本のネタはGoogleが提供しているreCAPTCHAというものである。以下のコードを用いることで誰でもあなたはロボットではありませんということを改造して遊べる。
完成系URL
カスタムする際の変更点
HTML<img src="./photo/photo1.jpeg"~の場所を写真の名前にする。
Javascript
const ans=["1,1","1,2","1,3","2,1","2,2","2,3","3,1"]二次元配列になっているためここを変更することで答えを変更することができる。
コード
HTMLindex.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="sty.css" />
</head>
<body>
<div class="main">
<div class="air"></div>
<div class="title">
<p class="titles">使っているSNSは何でしょう</p>
<p class="contents">の写真をすべて選択してください</p>
</div>
<div class="photo">
<button class="button" id="myButton1" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'1,1')"><img src="./photo/photo1.jpeg" height="122px" width="122px"></button>
<button class="button" id="myButton2" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'1,2')"><img src="./photo/photo2.jpg" height="122px" width="122px"></button>
<button class="button" id="myButton3" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'1,3')"><img src="./photo/photo3.jpeg" height="122px" width="122px"></button>
<button class="button" id="myButton4" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'2,1')"><img src="./photo/photo4.jpeg" height="122px" width="122px"></button>
<button class="button" id="myButton5" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'2,2')"><img src="./photo/photo5.jpeg" height="122px" width="122px"></button>
<button class="button" id="myButton6" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'2,3')"><img src="./photo/photo6.jpeg" height="122px" width="122px"></button>
<button class="button" id="myButton7" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'3,1')"><img src="./photo/photo7.jpeg" height="122px" width="122px"></button>
<button class="button" id="myButton8" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'3,2')"><img src="./photo/photo8.jpeg" height="122px" width="122px"></button>
<button class="button" id="myButton9" style="border:0px;margin-bottom: 3px;margin-top: 3px;" onclick="togglePressed(this,'3,3')"><img src="./photo/photo9.jpeg" height="122px" width="122px"></button>
</div>
<div class="enter_button">
<input class="enter" type="button" value="確認" onclick="enter()"/>
</div>
<div id="congrats-message">おめでとう！</div>
</div>
<script src="script.js"></script>
</body>
</html>
Javascript
script.js
const dict={"1,1":0,"1,2":0,"1,3":0,"2,1":0,"2,2":0,"2,3":0,"3,1":0,"3,2":0,"3,3":0}
const ans=["1,1","1,2","1,3","2,1","2,2","2,3","3,1"]
function togglePressed(button,num) {
button.classList.toggle("pressed");
console.log(num)
dict[num]++;
}
function same(key,ans){
for (var a in ans){
console.log("same func",ans[a],key)
if(ans[a]==key){
return true
}
}
return false
}
function enter(){
var count=0
for (var key in dict){
//console.log("key is",key)
var a=same(key,ans)
console.log("same func is",a)
if(dict[key]>0 & dict[key]%2!=0){
if(a==false){
count=-1
break
}
count++;
}
}
if(count==(ans.length)){
console.log("おめでとう")
showCongrats();
}else{
console.log("ざんねん")
var sample = 'あなたは本当に人間ですか？';
alert(sample);
}
}
function showCongrats() {
document.getElementById("congrats-message").style.display = "flex";
}
css
script.css
body{
background-color: rgb(246, 250, 215);
}
.main {
height: 582px;
width: 400px;
margin: auto;
margin-top:7.5%;
background-color: rgb(253, 253, 253);
}
.air{
border-bottom:solid white;
height: 5px;
}
.title{
width: 386px;
height: 113px;
margin: auto;
margin-bottom:3px ;
background-color:rgb(56, 123, 224);
}
.contents{
margin: 0px;
padding-left: 23px;
color: white;
}
.titles {
padding-top: 15px;
margin-top: 0px;
vertical-align:top;
height: auto;
padding-left: 23px;
font-size: 27px;
color: white;
margin-bottom: 1px;
}
.photo{
height: 394px;
width: 387px;
margin: auto;
border-bottom:solid rgb(229, 229, 229);
}
.button {
display: inline-block;
height: 124.3px;
width: 124.3px;
margin: 0.5px;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
background-color: white;
border: 0px;
margin-bottom: 3px;
margin-top: 3px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
transition: background-color 0.3s, transform 0.3s;
}
.button img {
transition: transform 0.3s;
}
.button.pressed img {
transform: scale(0.9);
}
.button.pressed {
transform: translateY(10px) scale(0.9);
}
.button .checkmark {
position: absolute;
top: 5px;
right: 5px;
font-size: 18px;
color: #ffffff;
background-color: #000000;
padding: 3px 6px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s;
}
.button.pressed .checkmark {
opacity: 1;
}
.button.pressed {
transform: translateY(4px);
}
.enter_button {
height: 62px;
width: 386px;
border-radius: 7px;
margin-right: 10px;
}
.enter{
margin: 8px;
display: block;
margin-left: auto;
width: 100px;
height: 42px;
color:white;
background-color: rgb(56,113,224);
margin-top: 14px;
}
#congrats-message {
font-size: 4em;
font-weight: bold;
text-align: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
align-items: center;
justify-content: center;
background-color: #fff;
z-index: 999;
}