본문 바로가기
개발/2018 겨울방학 WEB 프로젝트

2019겨울방학 프로젝트#3

dndkdkdk 2019. 3. 8. 04:02

영웅 이미지 + 정보 표시

<실제>

* 배경화면에서 플레이 선택 시 플레이 선택 시

* 플레이 화면에서 원하는 영웅 정보 선택 시 영웅 버튼 선택 시

화면에서 영웅을 클릭하면 전체 이미지와 그에 대한 정보가 출력되도록 하였다

CODE

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>영웅 선택</title>
    <link rel="stylesheet" href="design.css">
    <link rel="stylesheet" href="hero.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body class="selection">
    <img id="output_img">
    <div id="text"></div>
    <div class="select_hero">
      <script>
        var i=0;
        for(i=0;i<29;i++){
          document.write("<button onclick='output()' class='hero' id=a"+i+"></button>")
        }
      </script>
    </div>
  </body>
</html>
전체 이미지와 그에 대한 정보를 표현할 공간을 img와 div 태그를 이용하여 마련하였다. 그 다음 select_hero 클래스인 div로 클릭할 버튼의 공간을 마련하였다. 버튼을 구현할 때 필요한 자바스크립트는 모두 한 문서로 모으려고 했지만 동적인 웹페이지 구현이 필요하여 html 문서에 마련하였다.
+) 자바스크립트를 이용하여 클릭하면 output() 함수가 실행되고, id가 각각 "a"+i인 버튼 29개를 한 번에 구현할 수 있었다

CSS
.selection{/*배경화면*/
  background-image: url("bg2.jpg");
  background-size:cover;
}
#output_img{/*전체 이미지의 크기*/
  position:fixed;
  width:40%; height:auto;
}
#text{ /*텍스트의 위치 및 크기*/
  position:fixed;
  width:40%; height:60%; top:30%; left:50%;
  text-align: center; vertical-align: middle;
  font-family:"koverwatch"; font-size:50px;
}
.select_hero{ /*버튼의 위치*/
  position:fixed;
  top:80%;
}
.hero{ /*버튼의 크기 및 이미지*/
  width:40px; height:40px;
  background-size:cover;
  margin-right:2px;
}
배경화면을 설정하고, 들어갈 전체 이미지, 텍스트와 버튼의 위치,크기 등을 조절하였다

CSS_2
#a0{
  background-image: url("0.png"); border:none;
}
#a1{
  background-image: url("1.png"); border:none;
}
#a2{
  background-image: url("2.png"); border:none;
}
#a3{
  background-image: url("3.png"); border:none;
}
#a4{
  background-image: url("4.png"); border:none;
}
#a5{
  background-image: url("5.png"); border:none;
}
#a6{
  background-image: url("6.png"); border:none;
}
#a7{
  background-image: url("7.png"); border:none;
}
#a8{
  background-image: url("8.png"); border:none;
}
#a9{
  background-image: url("9.png"); border:none;
}
#a10{
  background-image: url("10.png"); border:none;
}
#a11{
  background-image: url("11.png"); border:none;
}
#a12{
  background-image: url("12.png"); border:none;
}
#a13{
  background-image: url("13.png"); border:none;
}
#a14{
  background-image: url("14.png"); border:none;
}
#a15{
  background-image: url("15.png"); border:none;
}
#a16{
  background-image: url("16.png"); border:none;
}
#a17{
  background-image: url("17.png"); border:none;
}
#a18{
  background-image: url("18.png"); border:none;
}
#a19{
  background-image: url("19.png"); border:none;
}#a20{
  background-image: url("20.png"); border:none;
}
#a21{
  background-image: url("21.png"); border:none;
}
#a22{
  background-image: url("22.png"); border:none;
}
#a23{
  background-image: url("23.png"); border:none;
}
#a24{
  background-image: url("24.png"); border:none;
}
#a25{
  background-image: url("25.png"); border:none;
}
#a26{
  background-image: url("26.png"); border:none;
}
#a27{
  background-image: url("27.png"); border:none;
}
#a28{
  background-image: url("28.png"); border:none;
}
#a29{
  background-image: url("29.png"); border:none;
}
css안에 자바스크립트를 삽입하기는 어려운 것 같아서 버튼 이미지를 전부 작성하였다.

JavaScript
function output(){
  var id = event.srcElement.id;
  var i=0;
  var arr = ["게임을 하면 이겨야지", "두려워 말게. 내가 그대들의 방패라네", "작은 포유류. 몸이 근질거림.", "로드호그의 시간이다", "저 불 붙었습니다. 긴급 구조대는 부르지 말아주십시오.", "거점에 도착했습니다. 우리 유기적으로 거점을 차지해요", "함께일 때, 우린 강합니다", "류승룡 기모찌", "납작해졌군", "죽어, 죽어, 죽어", "석양이 진다...", "개인적인 감정은 없어요", "우웅↘ 우↗삐↗삑↗ 우➡쀡↗↗↗!", "전원, 내 위치에서 음료수 받아가라!", "항상 백도어는 남겨놔야지", "인류의 진정한 적은 무질서예요", "아무도 내개서 숨진 못해", "이건 좀 짜릿할꺼야!", "일단 만들어! 그리고 부숴!", "안녕, 친구들! 해결사가 왔어!", "하늘에서 정의가 빗발친다", "사케!", "와아, 우리 팀 좀 봐. 진짜 잘할 거야!", "영웅은 죽지 않아요", "내 의지에 굴복하라!", "미정", "연습이 완벽을 만들지...만, 멍이랑 혹도 필수지~", "넌 강해졌다. 돌격해!", "진정한 자아엔 형체가 없는 법"];
  document.getElementById("output_img").src = id+'_full.png';
  for(i=0;i<29;i++){
    if (id == "a"+i){
      document.getElementById("text").innerHTML = arr[i];
    }
  }
}
버튼을 클릭하였을 때 전체 이미지와 텍스트를 출력하는 함수를 만들었다. event.srcElement.id를 이용하여 이벤트가 실행된 id를 받고 그 id의 full version 이미지와 그에 따른 텍스트를 출력하도록 하였다. 자바스크립트로 텍스트 읽어오기  랜덤 이미지 띄우기


#2019.03.08 수정

수정

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>영웅 선택</title>
    <link rel="stylesheet" href="design.css">
    <link rel="stylesheet" href="hero.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body class="selection">
    <img id="output_img">
    <img id="text">
    <div class="select_hero">
      <script>
        var i=0;
        for(i=0;i<29;i++){
          document.write("<button onclick='output()' class='hero' id=a"+i+"></button>")
        }
      </script>
    </div>
  </body>
</html>
텍스트를 이미지로 수정하였다

CSS
#text{/*텍스트의 위치 및 크기*/
  position:fixed;
  width:50%; height:70%; left:40%;
  text-align: center; vertical-align: middle;
  font-family:"koverwatch"; font-size:50px;
}
텍스트 위치 수정

JavaScript
function output(){
  var id = event.srcElement.id;
  document.getElementById("output_img").src = id+'_full.png';
  document.getElementById("text").src = id+"_text.png";
}
전체 이미지를 받은 것처럼 텍스트를 받는 함수로 수정하였다


'개발 > 2018 겨울방학 WEB 프로젝트' 카테고리의 다른 글

2019 겨울방학 프로젝트#결과  (0) 2019.03.08
2019겨울방학 프로젝트#구상  (0) 2019.03.08
2019겨울방학 프로젝트#4  (0) 2019.03.08
2019겨울방학 프로젝트#2  (0) 2019.03.05
2019겨울방학 프로젝트#1  (0) 2019.03.05

'개발/2018 겨울방학 WEB 프로젝트' Related Articles

티스토리툴바