安安，今日來把練習題做完，今天會做的事情有：
1.滑鼠移動時會顯示座標。
2.做出十字游標。
3.當擊中標靶時會產生標靶痕跡。
4.將產生出的標靶痕跡問題解決（偏移、重疊痕跡再度點擊時分數無法疊加、重新開始把痕跡及移動模式回到初始）。

可以搭配codepen做服用，否則程式碼全貼會太長:)
codepen:https://codepen.io/cinj/pen/NWrWEGE?editors=0110

開始囉GOGO!

1.做一個跟著滑鼠的十字游標。

// html 建立十字滑鼠游標
.mouseSymbol

.mouseSymbol{
  position: absolute;
  &:before,&:after{
    content: "";
    display: block;
    @include size(40px, 8px);
    background-color: #222;
    @include ab_center;
  }
}

2.設置一個隨著滑鼠移動時，可以顯示出滑鼠的X,Y座標。

// html 把滑鼠位置更新在裡面
h3.mouseText

// 當滑鼠移動觸發
$(window).mousemove(function(evt){
  $('.mouseText').text(evt.pageX+","+evt.pageX)
})

3.更新十字游標的位置(註解那段)，更新他的css。

$(window).mousemove(function(evt){
  $('.mouseText').text(evt.pageX+","+evt.pageX)
  // 更新游標的位置
  $('.mouseSymbol')
    .css('left',evt.pageX+'px')
    .css('top',evt.pageY+'px')
})

4.做完上述步驟後十字游標需要其中一條再轉90度，回到css更新。

&:after{
    transform: translate(-50%, -50%) rotate(90deg);}

‼當做完上面步驟後會發現點擊下去特效都不見了，於是要去設定css不接收滑鼠事件。

.mouseSymbol{
  // 設定不接受滑鼠事件--
  pointer-events: none;
  z-index: 10; // 讓他在箭靶前面

5.要來做打擊位置紀錄，定位針對箭靶物件，寫一個.spot圓圈。

.spot{
  position: absolute;
  pointer-events: none; //
  @include size(15px);
  border-radius: 50%;
  background-color: rgba(black,0.4);
  z-index: 50;
}

6.當點擊整個箭靶時，動態的加入一個小圓圈到畫面裡。

$('.target').click(function(evt){
  var spot = $('<div class=spot></div>')
  console.log(spot)
  spot.css('left',evt.pageX+'px')
			.css('top',evt.pageY+'px')
	$(this).append(spot)}

‼會發現點擊出來的黑點偏移了，因為現在這個滑鼠針對畫面左上方的距離，但圓圈指定完是針對target的中心做定位的，所以要用offset減掉偏移的left跟top。

// 會發現出來的點偏移，所以要用offset減掉原本的
spot.css('left',evt.pageX-$(this).offset().left+'px') 
		.css('top',evt.pageY-$(this).offset().top+'px')

7.還有個問題是：當再次點擊打過的黑點位置，他就不會觸發加分事件，所以須在.spot加上pointer-events: none，不會觸發滑鼠事件，這樣就像穿透一樣，不會有影響。

8.再來是當按Ｒ鍵重新開始時，沒有移除箭靶痕跡，所以找到函式的resetGame，抓到.spot做移；也順便把移動模式移除。

function resetGame(){
  score = 0
  // 當按Ｒ重開始，移除箭靶
  $('.spot').remove()
  $('.target').removeClass('moving') //移除移動中模式
  updateGame()
}

那事件觸發的實作題在今天就結束囉！
明日再見OAO~~((努力想還有什麼好寫