본문 바로가기
개발/html,Thymeleaf

자바스크립트 턴제 게임 만들기

by 카앙구운 2016. 12. 15.
728x90
반응형

test2.html

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
 </HEAD>

 <BODY>
  <form id="start-screen">
   <input id="name-input" placeholder="Hero Name!"/>
   <button id="start">Start</button>
  </form>
  <div id="screen">
 <div id="hero-stat">
  <span id="hero-name"></span>
  <span id="hero-level"></span>
  <span id="hero-hp"></span>
  <span id="hero-xp"></span>
  <span id="hero-att"></span>
 </div>
 <form id="game-menu" style="display:none;">
  <div id="menu-1">1. Adventour</div>
  <div id="menu-2">2. Healing</div>
  <div id="menu-3">3. Exit</div>
  <input id="menu-input"/>
  <button id="menu-button">Input</button>
 </form>
 <form id="battle-menu" style="display:none;">
  <div id="battle-1">1. Attack</div>
  <div id="battle-2">2. Healing</div>
  <div id="battle-3">3. escape</div>
  <input id="battle-input"/>
  <button id="battle-button">Input</button>
 </form>
 <div id="message"></div>
  <div id="monster-stat">
    <span id="monster-name"></span>
    <span id="monster-hp"></span>
    <span id="monster-att"></span>
  </div>
  </div>
  <script src="test2Js.js"></script>

 </BODY>
</HTML>

 

test2Js.js

 

var TurnGame = (function(){
 var instance;
 var initiate = function(heroName){
  var hero = {
   name : heroName,
   lev  : 1,
   maxHp: 100,
   hp   : 100,
   xp   : 0,
   att  : 10
  };
 var monsters =[{
  name : "Slime",
  hp : 25 + hero.lev *3,
  att : 10 +hero.lev,
  xp : 10 + hero.lev
  },{
  name : 'Skelleton',
  hp : 50 + hero.lev *5,
  att : 15 +hero.lev *2,
  xp : 20 + hero.lev *2
  },{
  name : 'Boss',
  hp : 100 + hero.lev *10,
  att : 25 +hero.lev *5,
  xp : 50+ hero.lev *5
  }];
  var monster =null;
  var turn =true;
 return {
  showLevel : function(){
   document.getElementById('hero-level').innerHTML = hero.lev + 'lev';
   return this;
  },
  showXp : function(){
   var self = this;
   if(hero.xp >15 * hero.lev){
    hero.xp -= 15 * hero.lev;
    hero.maxHp += 10;
    hero.hp = hero.maxHp;
    hero.att += hero.lev;
    hero.lev++;
    window.setTimeout(function(){
     self.setMessage('level up!');
    },1000);
   }
   document.getElementById('hero-xp').innerHTML = 'XP : ' + hero.xp + '/' + 15 * hero.lev;
   document.getElementById('hero-att').innerHTML = 'ATT :' +hero.att;
   return this.showLevel().showHp();

  },
  showHp : function(){
   if(hero.hp < 0){
    return this.gameOver();
   }
   document.getElementById('hero-hp').innerHTML = 'HP : ' + hero.hp + '/'+hero.maxHp;
   return this;
  },
  toggleMenu : function (){
   document.getElementById('hero-name').innerHTML = heroName;
   document.getElementById('start-screen').style.display = 'none';
   if(document.getElementById('game-menu').style.display === 'block'){
    document.getElementById('game-menu').style.display ='none';
    document.getElementById('battle-menu').style.display = 'block';
    document.getElementById('battle-input').focus();

   }else{
    document.getElementById('game-menu').style.display ='block';
    document.getElementById('battle-menu').style.display = 'none';
    document.getElementById('menu-input').focus();
   }
   return this;
  },
  generateMonster : function(){
   monster = JSON.parse(JSON.stringify(monsters[Math.floor(Math.random() * monsters.length)]));
   document.getElementById('monster-name').innerHTML = monster.name;
   document.getElementById('monster-hp').innerHTML ='HP : '+monster.hp;
   document.getElementById('monster-att').innerHTML ='ATT : ' +monster.att;
   this.setMessage(monster.name + 'is(are) Attacked!!');

  },
  menuInput : function(input){
   if(input ==='1'){
    return this.generateMonster();
   }else if (input ==='2'){
    hero.hp = hero.maxHp;
    return this.showHp().setMessage('Your physical strength has been restored.');
   }else if(input ==='3'){
    return this.exit();
   }else {
    alert('Invalid Input');
   }
  },
   battleInput: function(input) {
   if(input ==='1'){
    return this.attackMonster();
   }else if(input ==='2'){
    if(hero.hp + hero.lev *20 <hero.maxHp){
     hero.hp +=hero.lev *20;
    }else {
     hero.hp =hero.maxHp;
    }
    return this.showHp().setMessage('Your physical strength has been restored.').nextTurn();
   }else if(input ==='3'){
    return this.clearMonster().setMessage('escape');
   }else{
    alert('Invalid Input');
   }
  },
   attackMonster: function() {
   monster.hp -=hero.att;
   document.getElementById('monster-hp').innerHTML ='HP : ' +monster.hp;
   if(monster.hp > 0){
    return this.setMessage(hero.att + ' Damage').nextTurn();
   }
   return this.win();
  },
   attackHero: function() {
   hero.hp -=monster.att;
   return this.showHp();
   },
         nextTurn: function() {
   var self =this;
   turn = !turn;
   document.getElementById('battle-button').disabled =true;
   if(!turn){
    window.setTimeout(function(){
     self.setMessage(monster.name + ' turn');
     window.setTimeout(function(){
      document.getElementById('battle-button').disabled=false;
      if(self.attackHero()){
       self.setMessage(monster.att + ' Damage accept');
       window.setTimeout(function(){
        self.setMessage(hero.name +' turn');
       },1000);
      }
     },1000);
    },1000);
    return this.nextTurn();
   }
   return this;
   },
         win: function() {
   this.setMessage(monster.name +'hunting XP' + monster.xp+ 'Get');
   hero.xp+=monster.xp;
   return this.clearMonster().showXp();

   },
         clearMonster: function() {
    monster = null;
   document.getElementById('monster-name').innerHTML='';
   document.getElementById('monster-hp').innerHTML='';
   document.getElementById('monster-att').innerHTML='';
   return this.toggleMenu();

   },

         gameOver: function() {
   document.getElementById('screen').innerHTML= hero.name +'is level' +hero.lev+ ' Die..';
   return false;
   },
   setMessage : function(msg){
   document.getElementById('message').innerHTML=msg;
   return this;
  },
  };
  };
  return {
 getInstance : function(name){
  if(!instance){
   instance = initiate(name);
  }
  return instance;
 }
  };
})();
document.getElementById('start-screen').onsubmit =function(e){
 var name = document.getElementById('name-input').value;
 e.preventDefault();
 if(name && name.trim() && confirm(name +'?')){
  TurnGame.getInstance(name).showXp().toggleMenu();
 }else{
  alert('Please Name insert');
 }
};
document.getElementById('game-menu').onsubmit = function(e){
 var input = document.getElementById('menu-input');
 var option = input.value;
 e.preventDefault();
 input.value ='';
};

document.getElementById('battle-menu').onsubmit = function(e){
 var input = document.getElementById('battle-input');
 var option = input.value;
 e.preventDefault();
 input.value ='';
};

document.getElementById('menu-button').onclick=function(e){
 var input =document.getElementById('menu-input');
 var option = input.value;
 e.preventDefault();
 input.value='';
 if(option ==='1'){
  TurnGame.getInstance().toggleMenu().menuInput(option);
 }else{
  TurnGame.getInstance().menuInput(option);
 }
};

document.getElementById('battle-button').onclick = function(e){
 var input =document.getElementById('battle-input');
 var option = input.value;
 e.preventDefault();
 input.value='';
 TurnGame.getInstance().battleInput(option);
};

 

 

 

 

 

 

728x90
반응형
저작자표시

'개발 > html,Thymeleaf' 카테고리의 다른 글

Thymeleaf 정리-1 [기본적인 표현방법]  (0) 2021.05.06
Jquery Selector 성능에 관한 고찰  (0) 2017.03.08
javascript 테트리스 만들기  (0) 2016.12.13
자바스크립트 이벤트 바인딩  (1) 2016.05.30
javascript 함수-1  (0) 2016.01.14

관련글

댓글

티스토리툴바