제가 올리는 분류 "[JavaScript] 열혈강의"의 자바스크립트 예시코드는
다음 책을 통해 학습 한 내용을 포스트 하였음을 알려드립니다.
"열혈강의 No More Copy & Paste 자바스크립트 - 2012년 8월 25일 초판"
| [JavaScript] 6-1_BrowserControl.js (0) | 2016.12.07 |
|---|---|
| [JavaScript] 6-0_BrowserControl.html (0) | 2016.12.07 |
| [JavaScript] 5-3_simulation.js (0) | 2016.12.07 |
| [JavaScript] 5-3_SimpleOOPinJavaScript.html (0) | 2016.12.07 |
| [JavaScript] 5-2_Function.js (0) | 2016.12.07 |
var Unit = function(hp, name)
{
this.fullHealth = hp;
this.health = hp;
this.name = name;
this.power = 1;
this.speed = 1000;
this.level = 1;
this.target = null;
this.attackID = null;
var self = this;
this.isDead = function()
{
return (self.health <= 0);
};
this.attack = function()
{
if(self.target)
{
self.target.damage(self.power);
self.board.innerHTML = [
self.name, '의 공격대상 : ', self.target.name,
'<br>데미지 : ', self.power, ' 대상의 남은 체력 : ', self.target.hp, '<br>'
].join(' ') + self.board.innerHTML;
if(self.target.isDead())
{
self.board.innerHTML = self.target.name + ' is dead ! ' +
'<br> Winner is ' + self.name + ' !' + self.board.innerHTML;
self.stopAttack();
self.target = null;
self.target.target = null;
}
}
console.log(self.name + " attack " + self.target);
};
this.damage = function(power)
{
self.health -= power;
if(self.isDead())
{
self.stopAttack();
self.board.innerHtml = 'You are dead !<br>' + self.board.innerHTML;
}
};
this.levelUp = function(hp, power, speed)
{
self.level++;
self.fullHealth += hp;
self.hp = self.fullHealth;
self.power +=power;
self.speed -=speed;
self.board.innerHTML = "Level up ! " + (self.level -1) + " => " + self.level + "<br>" + self.board.innerHTML;
};
};
var Human = function(name)
{
Unit.apply(this, [50, name]);
this.board = document.getElementById('fightlog1');
var self = this;
this.expFull = function()
{
self.levelUp(40,2,50);
};
this.startAttack = function(target)
{
self.target = target;
self.attackID = setInterval(self.attack, self.speed);
};
this.stopAttack = function()
{
self.target = null;
clearInterval(self.attackID);
};
console.log("Human is created\n" + self.hp);
};
var Magician = function(name)
{
Unit.apply(this, [40, name]);
this.skillSpeed = 3000;
this.skillID = null;
this.skillPower = 2;
this.board = document.getElementById('fightlog2');
var self = this;
this.skill = function()
{
if(!self.target || self.target.isDead())
{
self.stopAttack();
}
else
{
self.target.damage(self.skillPower);
self.board.innerHTML = [
self.name, '의 공격대상 : ', self.target.name,
'<br>스킬사용 ! 데미지 : ', self.skillPower, ' 대상의 남은 체력 : ', self.target.hp, '<br>'
].join(' ') + self.board.innerHTML;
}
};
this.expFull = function()
{
self.levelUp(30,1,50);
self.skillPower += 2;
self.skillSpeed -= 30;
};
this.startAttack = function(target)
{
self.target = target;
self.attackID = setInterval(self.attack, self.speed);
self.skillID = setInterval(self.skill, self.skillSpeed);
};
this.stopAttack = function()
{
self.target = null;
clearInterval(self.attackID);
clearInterval(self.skillID);
};
console.log("Magician is created\n" + this.name + this.hp );
};
window.onload = function()
{
man = new Human('Man');
woman = new Magician('Woman');
}
function startWar()
{
man.stopAttack();
woman.stopAttack();
man.board.innerHTML = '';
woman.board.innerHTML = '';
man.name = document.getElementById('humanName').value;
woman.name = document.getElementById('magicianName').value;
man.startAttack(woman);
woman.startAttack(man);
}
function stopWar()
{
man.stopAttack();
woman.stopAttack();
man.board.innerHTML = '';
woman.board.innerHTML = '';
man.name = document.getElementById('humanName').value;
woman.name = document.getElementById('magicianName').value;
}
| [JavaScript] 6-0_BrowserControl.html (0) | 2016.12.07 |
|---|---|
| JavaScript 소스코드 (0) | 2016.12.07 |
| [JavaScript] 5-3_SimpleOOPinJavaScript.html (0) | 2016.12.07 |
| [JavaScript] 5-2_Function.js (0) | 2016.12.07 |
| [JavaScript] 5-1_OOPBasic.js (0) | 2016.12.07 |
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Simple OOP in Javasript</title>
<script type ="text/javascript" src = "5-3_simulation.js"></script>
</head>
<body>
<h1>Attack simulation game</h1>
<div id = "ctrlSection">
<input type = "text" id = "humanName"/> Human Name
<button type = "button" onClick = "man.expFull();">Level Up</button>
<br/>
<input type = "text" id = "magicianName"/> Magician Name
<button type = "button" onClick = "woman.expFull();">Level up</button>
<br/>
<button type = "button" onClick = "startWar();" > Start battle </button>
<button type = "button" onClick = "stopWar();" > Stop battle </button>
<button type = "button" onClick = "man.expFull(); woman.expFull();" > Both level up </button>
<br/>
</div>
<div id = "logSection">
<h3>Human battle log</h3>
<div id = "fightlog1" style = "height : 150px; overlow : scroll;"></div>
<h3>Magician battle log</h3>
<div id = "fightlog2" style = "height : 150px; overlow : scroll;"></div>
</div>
</body>
</html>
5-3_SimpleOOPinJavascript.html
| JavaScript 소스코드 (0) | 2016.12.07 |
|---|---|
| [JavaScript] 5-3_simulation.js (0) | 2016.12.07 |
| [JavaScript] 5-2_Function.js (0) | 2016.12.07 |
| [JavaScript] 5-1_OOPBasic.js (0) | 2016.12.07 |
| [JavaScript] 5-0_OOPinJavaScript.html (0) | 2016.12.07 |
5-3_simulation.js