只需要引入jquery
闲暇时间做的，勿喷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>welcome to the new world!</title>
<style type="text/css">
span {
display: inline-block;
margin: 3px;
width: 35px;
}
button {
margin: 3px;
}
</style>
</head>
<body style="margin-left: 10px;">
<h3 style="text-align: center;">
<p>慎重勇者</p>
</h3>
<div id="" style="height: 30px;">
請輸入姓名並選擇職業:
姓名: <input type="" name="" id="name" value="" style="width: 80px;" />
職業:
<select id="work" name="">
<option value="虛空使"></option>
<option value="神官">神官</option>
<option value="劍士">劍士</option>
<option value="魔法師">魔法師</option>
<option value="守護者">守護者</option>
<option value="魔法劍士">魔法劍士</option>
</select> <button id="confirmButton" type="button" style="margin: 0px;">確認</button>
<br><br>
</div>
<div id="userStatus" style="width: 210px;float:left">
姓名: <div id="confirmName" style="display: inline-block;"></div> <br>
職業: <div id="confirmWork" style="display: inline-block;"></div> <br>
LV: <span id="lv">1</span> <br>
經驗值: <span id="exp1">0</span>/<span id="exp2">0</span> <br>
技能點: <span id="skillPoint">0</span> <br>
生命: <span id="hp">0</span>/<span id="maxhp">0</span><span id="hppoint">0</span><button type="button" class="addSkill">+</button><br>
魔力: <span id="mp">0</span>/<span id="maxmp">0</span><span id="mppoint">0</span><button type="button" class="addSkill">+</button><br>
速度: <span id="speed">0</span>/<span id="maxspeed">0</span><span id="speedpoint">0</span><button type="button" class="addSkill">+</button><br>
物攻: <span id="atk">0</span>/<span id="maxatk">0</span><span id="atkpoint">0</span><button type="button" class="addSkill">+</button><br>
魔攻: <span id="magic">0</span>/<span id="maxmagic">0</span><span id="magicpoint">0</span><button type="button" class="addSkill">+</button><br>
防禦: <span id="defend">0</span>/<span id="maxdefend">0</span><span id="defendpoint">0</span><button type="button" class="addSkill">+</button><br>
</div>
<div id="attackMonster" style="float: left;border: 3px solid black;width: 900px;height: 270px;padding-left: 20px;">
<div id="" style="float: left;text-align: center;margin-right: 20px;">
<p>操作</p>
<button type="button" id="attack">攻擊</button><br>
<button type="button" id="skill">技能</button><br>
<button type="button" id="heal" onclick="heal()">回復</button><br>
<button type="button" id="auto">自動</button><span id="autoStatus">0</span>
</div>
<div style="float: left;text-align: left;width: 500px;">
<textarea id="log" rows="" cols="" style="width: 550px;height: 265px;"></textarea>
</div>
<div id="monster" style="float: right;text-align: left; width: 230px;">
怪物名：<div id="monsterName" style="display: inline-block;"></div><br>
生命: <span id="mhp">0</span><br>
魔力: <span id="mmp">0</span><br>
速度: <span id="mspeed">0</span><br>
物攻: <span id="matk">0</span><br>
魔攻: <span id="mmagic">0</span><br>
防禦: <span id="mdefend">0</span><br>
</div>
</div>
</body>
<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var userLv = $("#lv").html();
$("#name").change(function() {
$("#confirmName").html($("#name").val() == '' ? '無名' : $("#name").val());
});
//init user
$("#work").change(function() {
var work = $("#work").val();
$("#confirmWork").html(work);
addStatus(1);
});
$("#confirmButton").click(function() {
$("#name").prop("disabled", "disabled");
$("#work").prop("disabled", "disabled");
$("#confirmName").html($("#name").val() == '' ? '無名' : $("#name").val());
$("#confirmWork").html($("#work").val());
$("#lv").html(1);
var exp2 = 15 * $("#lv").html();
$("#exp2").html(exp2);
// if($("#work").val() == '虛空使'){
// $("#hp").html(50);
// $("#mp").html(50);
// $("#speed").html(10);
// $("#atk").html(10);
// $("#magic").html(10);
// $("#defend").html(10);
// }
addStatus(1);
$("#confirmButton").prop("style", "display:none");
initMonster();
})
</script>
<script type="text/javascript">
//init monster
function initMonster() {
var special = "普通";
if (Math.random() > 0.7) {
special = "精英";
}
$("#mhp").html(Math.floor(Math.random() * 10 + 50) * userLv);
$("#mmp").html(Math.floor(Math.random() * 10 + 20) * userLv);
$("#mspeed").html(Math.floor(Math.random() * 10 + 10) * userLv);
switch (Math.floor(userLv / 5)) {
case 0:
$("#monsterName").html(special + "·史萊姆");
$("#matk").html(Math.floor(Math.random() * 10) + 5 * userLv);
$("#mmagic").html(Math.floor(Math.random() * 10) + 5 * userLv);
$("#mdefend").html(Math.floor(Math.random() * 10) + 5 * userLv);
break;
case 1:
$("#monsterName").html(special + "·哥布林");
$("#matk").html(Math.floor(Math.random() * 10) + 10 * userLv);
$("#mmagic").html(Math.floor(Math.random() * 10) + 10 * userLv);
$("#mdefend").html(Math.floor(Math.random() * 10) + 10 * userLv);
break;
case 2:
$("#monsterName").html(special + "·牛頭人");
$("#matk").html(Math.floor(Math.random() * 10) + 15 * userLv);
$("#mmagic").html(Math.floor(Math.random() * 10) + 15 * userLv);
$("#mdefend").html(Math.floor(Math.random() * 10) + 15 * userLv);
break;
case 3:
$("#monsterName").html(special + "·蜥蜴人");
$("#matk").html(Math.floor(Math.random() * 10) + 20 * userLv);
$("#mmagic").html(Math.floor(Math.random() * 10) + 20 * userLv);
$("#mdefend").html(Math.floor(Math.random() * 10) + 20 * userLv);
break;
case 4:
$("#monsterName").html(special + "·豬頭人");
$("#matk").html(Math.floor(Math.random() * 10) + 25 * userLv);
$("#mmagic").html(Math.floor(Math.random() * 10) + 25 * userLv);
$("#mdefend").html(Math.floor(Math.random() * 10) + 25 * userLv);
break;
case 5:
$("#monsterName").html(special + "·龍人");
$("#matk").html(Math.floor(Math.random() * 10) + 30 * userLv);
$("#mmagic").html(Math.floor(Math.random() * 10) + 30 * userLv);
$("#mdefend").html(Math.floor(Math.random() * 10) + 30 * userLv);
break;
default:
//boss
$("#monsterName").html("魔王");
$("#matk").html(Math.floor(Math.random() * 10) + 50 * userLv);
$("#mmagic").html(Math.floor(Math.random() * 10) + 50 * userLv);
$("#mdefend").html(Math.floor(Math.random() * 10) + 50 * userLv);
break;
}
}
function addExp() {
var expNow = $("#exp1").html();
var expMax = $("#exp2").html();
var mname = $("#monsterName").html().toString();
if (mname.indexOf('精英') != -1) {
expNow = expNow / 1 + 5 * userLv * 3;
} else if (mname.indexOf('普通') != -1) {
expNow = expNow / 1 + 5 * userLv * 1;
} else if (mname.indexOf('魔王') != -1) {
$("#exp1").html(expMax);
addLog("已打敗魔王，遊戲結束，但你仍然可以虐魔王，可惜不能升級了");
return;
}
if (expNow / 1 >= expMax / 1) {
//lvUp
$("#exp1").html(expNow / 1 - expMax / 1);
userLv = userLv / 1 + 1;
$("#lv").html(userLv);
expMax = 50 * userLv;
$("#exp2").html(expMax);
$("#log").html("");
//addStatus
addStatus(userLv);
var skillPoint = $("#skillPoint").html();
skillPoint = skillPoint * 1 + 4;
$("#skillPoint").html(skillPoint);
addLog("升級提升屬性，獎勵技能點4個");
} else {
$("#exp1").html(expNow);
}
}
function addStatus(lv) {
var hppoint = $("#hppoint").html() / 1;
var mppoint = $("#mppoint").html() / 1;
var speedpoint = $("#speedpoint").html() / 1;
var atkpoint = $("#atkpoint").html() / 1;
var magicpoint = $("#magicpoint").html() / 1;
var defendpoint = $("#defendpoint").html() / 1;
switch ($("#work").val()) {
case "神官":
$("#maxhp").html(50 + 100 * lv + hppoint * 100);
$("#maxmp").html(50 + 100 * lv + mppoint * 100);
$("#maxspeed").html(10 + 10 * lv + speedpoint * 10);
$("#maxatk").html(0 + 10 * lv + atkpoint * 10);
$("#maxmagic").html(20 + 20 * lv + magicpoint * 10);
$("#maxdefend").html(10 + 10 * lv + defendpoint * 10);
break;
case "劍士":
$("#maxhp").html(50 + 150 * lv + hppoint * 150);
$("#maxmp").html(50 + 50 * lv + mppoint * 50);
$("#maxspeed").html(10 + 10 * lv + speedpoint * 10);
$("#maxatk").html(20 + 20 * lv + atkpoint * 10);
$("#maxmagic").html(0 + 10 * lv + magicpoint * 10);
$("#maxdefend").html(10 + 10 * lv + defendpoint * 10);
break;
case "魔法師":
$("#maxhp").html(50 + 50 * lv + hppoint * 50);
$("#maxmp").html(50 + 150 * lv + mppoint * 150);
$("#maxspeed").html(10 + 10 * lv + speedpoint * 10);
$("#maxatk").html(0 + 10 * lv + atkpoint * 10);
$("#maxmagic").html(30 + 30 * lv + magicpoint * 10);
$("#maxdefend").html(0 + 10 * lv + defendpoint * 10);
break;
case "守護者":
$("#maxhp").html(50 + 150 * lv + hppoint * 150);
$("#maxmp").html(50 + 50 * lv + mppoint * 50);
$("#maxspeed").html(10 + 10 * lv + speedpoint * 10);
$("#maxatk").html(0 + 10 * lv + atkpoint * 10);
$("#maxmagic").html(0 + 10 * lv + magicpoint * 10);
$("#maxdefend").html(30 + 50 * lv + defendpoint * 10);
break;
case "魔法劍士":
$("#maxhp").html(50 + 100 * lv + hppoint * 100);
$("#maxmp").html(50 + 50 * lv + mppoint * 50);
$("#maxspeed").html(10 + 20 * lv + speedpoint * 20);
$("#maxatk").html(15 + 15 * lv + atkpoint * 10);
$("#maxmagic").html(15 + 15 * lv + magicpoint * 10);
$("#maxdefend").html(0 + 10 * lv + defendpoint * 10);
break;
case "虛空使者":
$("#maxhp").html(50 + 50 * lv + hppoint * 50);
$("#maxmp").html(50 + 50 * lv + mppoint * 50);
$("#maxspeed").html(10 + 10 * lv + speedpoint * 10);
$("#maxatk").html(10 + 10 * lv + atkpoint * 10);
$("#maxmagic").html(10 + 10 * lv + magicpoint * 10);
$("#maxdefend").html(10 + 10 * lv + defendpoint * 10);
break;
default:
$("#maxhp").html(50 + 150 * lv + hppoint * 150);
$("#maxmp").html(50 + 150 * lv + mppoint * 150);
$("#maxspeed").html(10 + 10 * lv + speedpoint * 10);
$("#maxatk").html(10 + 10 * lv + atkpoint * 10);
$("#maxmagic").html(10 + 10 * lv + magicpoint * 10);
$("#maxdefend").html(10 + 10 * lv + defendpoint * 10);
break;
}
initStatus();
}
function initStatus(){
$("#hp").html($("#maxhp").html());
$("#mp").html($("#maxmp").html());
$("#speed").html($("#maxspeed").html());
$("#atk").html($("#maxatk").html());
$("#magic").html($("#maxmagic").html());
$("#defend").html($("#maxdefend").html());
}
function mdoatk(hp) {
var mdamage = 0;
var matk = $("#matk").html();
var udefend = $("#defend").html();
mdamage = matk - udefend;
if (mdamage < 0) {
mdamage = 1;
}
hp = hp - mdamage;
addLog("你受到" + $("#monsterName").html() + mdamage + "點傷害")
$("#hp").html(hp);
if (hp <= 0) {
addLog("gameOver");
return;
}
}
function udoatk(mhp) {
var udamage = 0;
var uatk = $("#atk").html();
var mdefend = $("#mdefend").html();
udamage = uatk - mdefend;
if (udamage < 0) {
udamage = 1;
}
mhp = mhp - udamage;
addLog("你打掉了" + $("#monsterName").html() + udamage + "點傷害");
$("#mhp").html(mhp);
if (mhp <= 0) {
addExp();
initMonster();
return;
}
}
function attack() {
var hp = $("#hp").html();
var mhp = $("#mhp").html();
if (hp <= 0) {
addLog("gameOver");
return;
}
var uspeed = $("#speed").html();
var mspeed = $("#mspeed").html();
if (mspeed / 1 > uspeed / 1) {
mdoatk(hp);
udoatk(mhp);
} else {
udoatk(mhp);
mdoatk(hp);
}
// $("#hp").html(hp);
// $("#mhp").html(mhp);
return;
}
function addLog(msg) {
$("#log").append(msg + "\n");
document.getElementById("log").scrollTop = document.getElementById("log").scrollHeight;
}
function heal() {
initStatus();
addLog("女神的信仰");
}
</script>
<script type="text/javascript">
$(".addSkill").click(function() {
var skillPoint = $("#skillPoint").html();
var uname = $("#confirmName").html();
if (uname == '' || uname == undefined) {
addLog("請選擇角色！");
return;
}
if (skillPoint <= 0) {
addLog("沒有多餘的技能點！");
return;
}
skillPoint = skillPoint * 1 - 1;
$("#skillPoint").html(skillPoint);
$(this).prev().html($(this).prev().html() / 1 + 1);
addStatus(userLv);
})
//attack
$("#attack").click(function() {
attack();
})
$("#skill").click(function() {
var mhp = $("#mhp").html();
var umagic = $("#magic").html();
var ump = $("#mp").html();
var uspeed = $("#speed").html();
var mspeed = $("#mspeed").html();
if (ump / 1 <= 0) {
addLog("你沒有魔法值了！");
return;
}
mhp = mhp - umagic;
ump = ump - umagic * 1.5;
if (ump < 0) {
ump = 0;
}
$("#mp").html(ump);
if (mhp <= 0) {
addExp();
initMonster();
return;
}
$("#mhp").html(mhp);
return;
})
var auto = 0;
var t;
$("#auto").click(function() {
if ($("#monsterName").html() == '' || $("#monsterName").html() == undefined) {
addLog("請先選擇職業！");
return;
}
if (auto == 0) {
auto = 1;
t = setInterval(function() {
var monsterName = $("#monsterName").html();
var hp = $("#hp").html();
if (hp < 0) {
auto = 0;
clearInterval(t);
addLog("遊戲結束，停止自動");
return;
}
if (monsterName == "魔王") {
auto = 0;
clearInterval(t);
addLog("魔王戰，停止自動");
return;
}
var hp = $("#hp").html();
var matk = $("#matk").html();
if (matk - hp > 0) {
heal();
}
attack();
}, 10);
} else {
auto = 0;
clearInterval(t);
}
$("#autoStatus").html(auto);
})
</script>
</html>
扫一扫
1596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
