コードをうまく短くしたい

jQueryにおいて、下のコードをうまく短くしたいです。
何かいい方法はありますか？
functionをそれぞれ定数で置いて$(this).を使えればよいのですが、そのthisを取得してそれに応じて定数を呼び出すやり方が分からないです。

html
1<!DOCTYPE HTML>
2
3<html lang="jp" dir="ltr">
4  <head>
5
6    <meta charset="utf-8">
7    <title>test</title>
8    <link rel="stylesheet" href="style.css">
9    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
10  </head>
11  <body>
12    <div id = "soft"></div>
13    <div class="title">
14    TEST GAME
15    </div>
16
17    <div id="player"></div>
18    <div>
19      <ul class="menu">
20        <li id = "Attack" class="Attack">攻撃</li>
21        <li id = "Magic" class="Magic">魔法</li>
22      </ul>
23      <ul class="magicMenu">
24        <li id ="Fspell">炎魔法</li>
25        <li id ="Ispell">氷魔法</li>
26        <li id ="Lspell">雷魔法</li>
27        <li id ="Hspell">回復魔法</li>
28        <li id ="return">戻る</li>
29
30      </ul>
31
32      <ul class="Pstatus">
33        <li class="PHitPoint">Pl.HP</li>
34        <li class="PMagicPoint">Pl.MP</li>
35      </ul>
36    </div>
37
38    <div id="enemy">
39      <ul class="Estatus">
40        <li class="EHitPoint">En.HP</li>
41        <li class="EMagicPoint">En.MP</li>
42      </ul>
43    </div>
44
45
46
47<script type="text/javascript">
48
49//画面処理
50var soft1 = document.getElementById("soft");
51var input1 = document.createElement("input");
52var div1 = document.createElement("div");
53
54input1.setAttribute("value" , "START");
55input1.setAttribute("id", "input");
56input1.setAttribute("type", "button");
57
58
59div1.appendChild(input1);
60soft1.appendChild(div1);
61
62//ゲーム処理
63
64var Attack = document.getElementById("Attack");
65var Magic = document.getElementById("Magic");
66
67class Player {
68  constructor(HP,MP){
69  this.HP =HP;
70  this.MP =MP;
71}
72}
73class Enemy {
74  constructor(HP,MP){
75  this.HP =HP;
76  this.MP =MP;
77}
78}
79
80const Pl = new Player(100,50);
81const En = new Enemy(200,50);
82
83function statusShow() {
84
85$(".PHitPoint").html("HP:"+Pl.HP);
86$(".PMagicPoint").html("MP:"+Pl.MP);
87
88$(".EHitPoint").html("HP:"+En.HP);
89$(".EMagicPoint").html("MP:"+En.MP);
90}
91
92statusShow () ;
93
94</script>
95<script src="script.js"></script>
96
97  </body>
98</html>
99

jQuery
1//炎魔法を唱える
2$("#Fspell").on("click", function(){
3  En.HP=En.HP-30;　//敵のHPが減る
4  Pl.MP=Pl.MP-20;　//プレイヤーのMPが減る
5  statusShow ();　//ステータスを更新
6  $(".magicMenu").hide();　//メニューを隠す
7});
8//氷魔法を唱える
9$("#Ispell").on("click", function(){
10  En.HP=En.HP-20;
11  Pl.MP=Pl.MP-10;
12  statusShow ();
13  $(".magicMenu").hide();
14});
15//雷魔法を唱える
16$("#Lspell").on("click", function(){
17  En.HP=En.HP-15;
18  Pl.MP=Pl.MP-5;
19  statusShow ();
20  $(".magicMenu").hide();
21});
22//回復魔法を唱える
23$("#Hspell").on("click", function(){
24  Pl.HP=Pl.HP+20;
25  Pl.MP=Pl.MP-10;
26  statusShow ();
27  $(".magicMenu").hide();
28});

css
1#input {
2  position:absolute;
3  top:0px;
4  bottom:0px;
5  left:0px;
6  right:0px;
7  margin: auto;
8  width:80px;
9  height:30px;
10}
11
12.title {
13  width:300px;
14  height:100px;
15  font-size:50px;
16  position:absolute;
17  top:0px;
18  bottom:150px;
19  left:0px;
20  right:0px;
21  margin: auto;
22}
23
24#player {
25  //display:none;
26  width:100px;
27  height:100px;
28  background-color:black;
29  position:absolute;
30  top:350px;
31}
32
33#enemy {
34  //display:none;
35  width:100px;
36  height:100px;
37  background-color:red;
38  position:absolute;
39  top:350px;
40  right:50px;
41}
42.menu {
43  //display:none;
44  border: 2px solid black;
45  width:130px;
46  height:100px;
47  position:absolute;
48  top:200px;
49  left:200px;
50}
51
52.Pstatus{
53  //display:none;
54  border: 2px solid black;
55  width:130px;
56  height:100px;
57  position:absolute;
58  top:200px;
59  left:10px;
60}
61.Estatus{
62  //display:none;
63  border: 2px solid black;
64  width:130px;
65  height:100px;
66  position:absolute;
67  bottom:110px;
68  right:10px;
69}
70
71.magicMenu{
72 display:none;
73 border: 2px solid black;
74 background-color: white;
75 width:130px;
76 height:130px;
77 position:absolute;
78 top:200px;
79 left:200px;
80}

m.ts10806

2019/03/22 05:18

処理をほぼ完全に再現確認できるようにコード全体（HTMLも含めて）後提示いただけますか？リファクタリングになるとは思いますが、仕様や意図まで汲んだ上で対応する必要がありますし、そもそも作業依頼になっていないかは一考してください。

行動規範の内容に同意します

回答1件

ベストアンサー

共通処理を関数として定義し、違う部分は引数でコントロールすれば、
繰り返しのコードが削減できます。

関数名や、受け取った引数で引き算するのか足し算するのかなどは、
お好みで変えてください。

function handleMagic(enemyHpDiff, playerMpDiff) {
　// 敵のHPが減る
  En.HP = En.HP + enemyHpDiff;

  // プレイヤーのMPが減る
  Pl.MP = Pl.MP + playerMpDiff;　

  // ステータスを更新
  statusShow ();　

  // メニューを隠す
  $(".magicMenu").hide();　
}

// 炎魔法を唱える
$("#Fspell").on("click", function(){
  handleMagic(-30, -20);
});

// 氷魔法を唱える
$("#Ispell").on("click", function(){
  handleMagic(-20, -10);
});

// 雷魔法を唱える
$("#Lspell").on("click", function(){
  handleMagic(-15, -5);
});

// 回復魔法を唱える
$("#Hspell").on("click", function(){
  handleMagic(20, -10);
});

投稿2019/03/22 05:24