Я пытаюсь создать простую головоломку с вращающейся шестеренкой (всего с одной шестеренкой). Шестеренка поворачивается на 90 градусов при каждом щелчке. Есть отдельная кнопка для ввода этого ответа и проверки правильности. Если шестеренка повернута в неправильное положение и нажата кнопка, пользователь возвращается к предыдущему URL-адресу. Если шестеренка повернута в правильное положение, то при нажатии кнопки положение меняется на второй URL-адрес.

Я пытаюсь объединить функцию clickCount с кодом, чтобы вращать винтики при каждом щелчке. Таким образом, он будет вращать шестеренку, а также добавлять / подсчитывать клики (начиная со значения 2), поэтому при нажатии кнопки выполняется либо вариант 1 (если количество нажатий кратно 4), либо случай 2 (если количество кликов не кратно 4). Но я даже не могу заставить винтик повернуться хоть раз. По какой-то причине он создает второй винтик, а не позволяет мне щелкать / вращать основной.

Если кто-нибудь может помочь мне только с вращающейся частью, я создам новый вопрос для бита clickCount, поскольку каждая часть сама по себе является отдельной проблемой. Но я включил его сюда для справки.

$('input').click(function() { //* When user clicks on first image //
  var img = document.getElementById("innercog"); // *select second img which is id "innercog" //
  if (img.hasClass('north')) { //* if second image has class "north", rotate... and so on *//
    img.attr('class', 'west');
  } else if (img.hasClass('west')) {
    img.attr('class', 'south');
  } else if (img.hasClass('south')) {
    img.attr('class', 'east');
  } else if (img.hasClass('east')) {
    img.attr('class', 'north');
  }
});

// Counts the number of times cog is clicked and stores it as n 
var clickCount = 2;

function clickHandler() {
  clickCount + 1; /* start with value of 2 and add 1 each time cog is rotated/clicked */
  missing code here /* Store clickCount value as n */
}

// When tryunlock button is clicked, checks if stored clicks value is a multiple of 4 and navigates to one of the two urls depending if correct 
jQuery(document).ready(function() {
  $('#multiclick').click(function() {
    multiclick();
  });
});

var clickedCount = n; /* pull this value from the above function */

function multiclick() {
  if (clickedCount == multiple of 4) {
    window.location.href = "entranceroom.html";
  } else {
    window.location.href = "maindoor.html"; /* go to next page */
  }
}
.north {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  /* Safari / Chrome */
}

.west {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
}

.south {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  /* Safari and Chrome */
}

.east {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  /* Safari and Chrome */
}
<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<div id="wrapper" div class="toshow" style="display:none;">
  <!-- div class added for fade in content -->
  <div style="position:relative;top:0px;left:0px;">
    <img src="doorpuzzle1b.png" style="position:absolute" width="980" height="650" alt="Maindoor" />
  </div>

  <!-- Button to return to main door -->
  <div id="enterbutton" style="position:relative;top:260px;left:20px">
    <a href="maindoor.html"><img src="cogarrowleft.png" alt="Courtyard" width=97 height=97 border=0></a>
  </div>

  <!-- Button to rotate cog -->
  <div style="position:relative;top:41px;left:311px">
    <img class="north" id="innercog" src="innercog.png" onclick="clickHandler()" width=370 height=370 border=0><input type="image" src="innercog.png">
  </div>

  <!-- Button to try unlocking door cog -->
  <div id="tryunlock" style="position:relative;top:41px;left:311px">
    <button type=button onclick="multiclick()" alt="" style="width:97px; height:97px; border:0; background-color:red;" /> </button>
  </div>
0
Sudoku 25 Ноя 2018 в 06:03

1 ответ

Лучший ответ

Я постараюсь понять, понял ли я

  1. if (clickedCount%4===0) кратно 4

  2. Будьте последовательны - у вас есть встроенный щелчок и обработчик щелчка, но у вас слишком общий щелчок по любому входу

  3. Ваш HTML был недействительным, тег кнопки был закрыт слишком рано, и все это отображалось: нет

var directions = ["north", "west", "south", "east"],
  clickedCount = 0;
$(function() { // on page load
  $('#innercog').click(function() { //* When user clicks on first image //
    $(this).removeClass(directions[clickedCount % 4]);
    clickedCount++; // we do not reset, just keep adding
    $(this).addClass(directions[clickedCount % 4]);
    console.log(clickedCount,directions[clickedCount % 4]);
  });

  // When tryunlock button is clicked, checks if stored clicks value is a multiple of 4 and navigates to one of the two urls depending if correct 
  $("#tryunlock").on("click", function() {
    if (clickedCount % 4 === 0) {
      console.log(clickedCount,"Entrance"); // remove the next comment when happy
      // window.location.href = "entranceroom.html";
    } else {
      console.log(clickedCount,"maindoor"); // remove the next comment when happy
      // window.location.href = "maindoor.html"; /* go to next page */
    }
  });
});
.north {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  /* Safari / Chrome */
}

.west {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
}

.south {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  /* Safari and Chrome */
}

.east {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  /* Safari and Chrome */
}
<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<div id="wrapper" class="toshow">
  <!-- div class added for fade in content -->
  <div style="position:relative;top:0px;left:0px;">
    <img src="doorpuzzle1b.png" style="position:absolute" width="980" height="650" alt="Maindoor" />
  </div>

  <!-- Button to return to main door -->
  <div id="enterbutton" style="position:relative;top:260px;left:20px">
    <a href="maindoor.html"><img src="cogarrowleft.png" alt="Courtyard" width=97 height=97 border=0></a>
  </div>

  <!-- Button to rotate cog -->
  <div style="position:relative;top:41px;left:311px">
    <img class="north" id="innercog" src="innercog.png" width=370 height=370 border=0><input type="image" src="innercog.png">
  </div>

  <!-- Button to try unlocking door cog -->
  <div style="position:relative;top:41px;left:311px">
    <button id="tryunlock" type="button" style="width:97px; height:97px; border:0; background-color:red;">Open</button>
  </div>
</div>
1
mplungjan 25 Ноя 2018 в 06:30