타카나와 게이트웨이에서 준도 코키요시를 만들어 보자!
2020년 3월 14일
반세기 만에 야마노테 선에 신역 개업!
축하합니다.
그렇기 때문에, 본제에 들어갑니다.
뭐하는거야?
이번에는...
「Javascript로 준도코키요시 같은 타카나와 게이트웨이를 작성!」
입니다!
이 시점에서는 의미를 모르겠다고 생각합니다.
그럼 실제 이미지입니다.
이런 식으로, 「타카나와」 「게이트」 「웨이」가 랜덤하게 배열로부터 꺼내져,
타카나와 게이트웨이가 나오면 성공! 같은 게임입니다!
완전히 준도 코키 요시군요!
실제로 플레이하고 싶은 분은 여기
그럼 소스 코드입니다.
소스 코드
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高輪ゲートウェイ</title>
<link rel="stylesheet" href="style.css">
</style>
</head>
<body>
<div class="takanawa">
<p id="text"></p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.cssbody{
font-family:serif;
background-color:#dddddd;
color:#ffffff;
margin:0;
}
.takanawa {
position: relative;
height: 40vh;
background-color: #008000;
text-align:center;
font-size:20vh;
}
.takanawa p {
width: 100%;
text-align: center;
}
script.js const takanawa=["高輪","ゲート","ウェイ"] ///ズンドコ風配列
for(let i=0;i<3;i++){
let random = Math.floor( Math.random() * takanawa.length );///ランダム
document.getElementById("text").innerHTML+=takanawa[random]///innerHTMLで挿入
}
궁리한 점
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高輪ゲートウェイ</title>
<link rel="stylesheet" href="style.css">
</style>
</head>
<body>
<div class="takanawa">
<p id="text"></p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body{
font-family:serif;
background-color:#dddddd;
color:#ffffff;
margin:0;
}
.takanawa {
position: relative;
height: 40vh;
background-color: #008000;
text-align:center;
font-size:20vh;
}
.takanawa p {
width: 100%;
text-align: center;
}
const takanawa=["高輪","ゲート","ウェイ"] ///ズンドコ風配列
for(let i=0;i<3;i++){
let random = Math.floor( Math.random() * takanawa.length );///ランダム
document.getElementById("text").innerHTML+=takanawa[random]///innerHTMLで挿入
}
Reference
이 문제에 관하여(타카나와 게이트웨이에서 준도 코키요시를 만들어 보자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakano1120/items/03c54fc5a4455fb41a37텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
