Jquery事件觸發 - 標靶

My tip

如果看不到 codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

index.html

<h3 class="mouseText"></h3>
<div class="mouseSymbol"></div>
<div class="target">
  <div class="cir1" data-label="5"></div>
  <div class="cir2" data-label="4"></div>
  <div class="cir3" data-label="3"></div>
  <div class="cir4" data-label="2"></div>
  <div class="cir5" data-label="1"></div>
</div>
<div class="infos">
  <h1 class="score">Score: 0</h1>
  <h3 class="explain">重新開始 R , 變換模式 K</h3>
</div>

style.sass

$colorRed: #FE5B45
=size($w,$h:$w)
  width: $w
  height: $h
=ab_center
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%,-50%)
html,body
  background-color: #EAEAEA
  margin: 0
  +size(100%)
.target
  +ab_center
[class^="cir"]
  +size(500px)
  border-radius: 50%
  background-color: #fff
  +ab_center
  transition: 0.5s
  cursor: pointer
  &.cir1
    +size(100px)
    z-index: 5
  &.cir2
    +size(200px)
    z-index: 4
  &.cir3
    +size(300px)
    z-index: 3
  &.cir4
    +size(400px)
    z-index: 2
  &.cir5
    +size(500px)
    z-index: 1
    border: 10px solid white
    box-shadow: 0px 0px 50px rgba(black,0.3)
  &:nth-child(2n+1)
    background-color: $colorRed
  &:active
    transition: 0s
    filter: brightness(80%)
  &:before
    content: attr(data-label)
    +ab_center
    top: 20px
.target.moving
  @keyframes moving
    0%
      transform: translate(-200px,0)
    100%
      transform: translate(200px,0)
  animation: moving 1s infinite alternate
.infos
  position: fixed
  left: 50px
  bottom: 50px
  z-index: 10
  h1,h3
    margin: 0
  h1
    font-size: 50px
  h3
    opacity: 0.4
.mouseSymbol
  position: absolute
  // +size(50px)
  // background-color: black
  pointer-events: none
  z-index: 10
  &:before,&:after
    content: ''
    display: block
    +size(40px,8px)
    background-color: #222
    +ab_center
  &:before
    transform: translate(-50%,-50%)  rotate(0deg)
  &:after
    transform: translate(-50%,-50%) rotate(90deg)
.spot
  position: absolute
  +size(15px)
  border-radius: 50%
  background-color: rgba(black,0.4)
  z-index: 50

script.js

let score = 0;
$("[class^='cir']").click(function () {
  let add = $(this).attr("data-label");
  score += parseInt(add * 10);
  updateGame();
});

$(window).keydown(function (evt) {
  if (evt.key == "r") {
    resetGame();
  }
  if (evt.key == "k") {
    $(".target").toggleClass("moving");
  }
});

function updateGame() {
  $(".score").text("Score: " + score);
}
function resetGame() {
  score = 0;
  updateGame();
  $(".target").removeClass("moving");
  $(".spot").remove();
}
$(window).mousemove(function (evt) {
  $(".mouseText").text(`(${evt.pageX},${evt.pageY})`);
  $(".mouseSymbol")
    .css("left", evt.pageX + "px")
    .css("top", evt.pageY + "px");
});

$(".target").click(function (evt) {
  let spot = $("<div class=spot></div>");
  spot
    .css("left", evt.pageX - $(this).offset().left + "px")
    .css("top", evt.pageY - $(this).offset().top + "px");
  $(this).append(spot);
});

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁特效入門（JS/CANVAS）課程