More than 5 years have passed since last update.

Jquery初心者がもぐら叩きゲームを作成する

Last updated at 2017-06-16Posted at 2017-05-23

Qiitaお初です。
プログラミングでの転職を目指しており、Jqueryから、まず勉強しております。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>もぐら</title>
</head>
<body>
<!--画面表示部分--------------------------------------------------->
<p>もぐら叩きだお</p>
<p>SCORE:</p>


<!--もぐら表示--->
<!-- <a href="javascript:;" id="mogu1"><img src="./pict/"></a>　-->
<!-- <a href="javascript:;" id="mogu1"><p>もぐら</p></a> -->

<!-- <a href="javascript:;" id="mogu1"><img src="./pict/mogura-illust8.png"></a> -->
<!--　<a href="javascript:;" id = "hit"><img class = "mogu1" src="./pict/mogura-illust8.png"></a>　-->
<!--テスト用コード-->
<a href="javascript:;" id = "hit1"><img class = "mogu1" src="./pict/mogura-illust7.png"></a>
<a href="javascript:;" id = "hit2"><img class = "mogu2" src="./pict/mogura-illust7.png"></a>
<a href="javascript:;" id = "hit3"><img class = "mogu3" src="./pict/mogura-illust7.png"></a>

<div id = "hit1">
  <button>
    <img class = "mogu1" src="./pict/mogura-illust7.png">
  </button>
</div>


<!--Jqueryの読み込み　--------------------------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//TODO　まずはもぐらが表示されることを目標にする

//もぐらが出ている画像をセット
/*
var mogu_img = "./pict/mogura-illust7.png"

console.log(mogu_img);

$('.mogu1').attr({
  'src':mogu_img
});
*/

//もぐらランダム表示処理


//TODO　次にもぐらが叩かれて消えることを目標にする
//もぐらが叩かれている画像をセット
var　moguHit_img = "./pict/mogura-illust10.png"
//もぐらが隠れている画像をセット
var　hole_img = "./pict/mogura-illust8.png"
console.log(hole_img);

$('#hit1').click(function() {
  console.log(1);
  //もぐらが叩かれている画像を表示
  $('.mogu1').attr({
    'src':moguHit_img
  });
  //
  setTimeout(function(){
    $('.mogu1').attr({
      'src':hole_img
  })},500);
});

$('#hit2').click(function() {
  console.log(1);
  //もぐらが叩かれている画像を表示
  $('.mogu2').attr({
    'src':moguHit_img
  });
  //
  setTimeout(function(){
    $('.mogu2').attr({
      'src':hole_img
  })},500);
});

$('#hit3').click(function() {
  console.log(1);
  //もぐらが叩かれている画像を表示
  $('.mogu3').attr({
    'src':moguHit_img
  });
  //
  setTimeout(function(){
    $('.mogu3').attr({
      'src':hole_img
  })},500);
});


</script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up