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}
回答1件
あなたの回答
tips
プレビュー