LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted 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>

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1