提姆寫程式

0%

JS 筆記 - Mousemove 滑鼠移動到指定元素事件

發表於 更新於 分類於 Disqus：
用滑鼠事件來做個小遊戲

JavaScript Note

mousemove 事件常用於一些小遊戲，因滑鼠移動到指定元素後就會出現效果。

馬利歐如果碰到烏龜就會死掉，或是撞擊磚塊會有蘑菇或是無敵星星。

練習主題

寫一個方塊，滑鼠移動到方塊時，會跳出 alert 視窗。

HTML

1
<div class="box"></div>

CSS

1
2
3
4
5
.box {
  width: 300px;
  height: 300px;
  background-color: #333;
}

這很簡單，就不贅述。

mousemove 是 JS 另一個控制滑鼠的屬性，先綁定 .box，並新增一個監聽事件，在監聽事件中，寫入相關語法。

1
2
3
4
5
6
var box = document.querySelector(".box");
box.addEventListener("mousemove", touch, false);

function touch() {
  alert("滑鼠碰到我了");
}

codepen 試效果 https://codepen.io/hnzxewqw/pen/wvadwMQ

來做一個小遊戲

遊戲任務，滑鼠不可碰到持續上下移動的六個方塊，不然就輸了!

所以有幾個條件:

  • 不可碰到 mousemove
  • 上下移動 CSS 動畫
  • 六個方塊 .box
  • 輸了 alert

HTML

那就來建立六個方塊:

1
2
3
4
5
6
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>

因控制 .box 內容皆相同，只有 .box1~6 為做動畫而分開撰寫。

CSS

1
2
3
4
5
6
7
.box {
  width: 20px;
  height: 20px;
  background-color: firebrick;
  position: absolute;
  /* 為了讓方塊可以都先置頂，等等跑動畫才會有動態 */
}

為了製作這次的遊戲關卡，使用 animation 屬性，@keyframes "變數名稱"，

1
2
3
4
5
6
7
8
9
10
11
@keyframes boxmove {
  0% {
    top: 0px;
  }
  50% {
    top: 300px;
  }
  100% {
    top: 0px;
  }
}

.box1 到 .box6 內容設定相同，只有在秒數的內容不同，from 表示起始，也可以用 0% 表示，to 表示結束，也可以用 100% 表示，因為數值範圍是 0%~100%，所以超過這個範圍的都是錯誤的。

1
2
3
4
5
6
.box1 {
  top: 0;
  /* 使方塊置頂 */
  left: 100px;
  animation: boxmove 5s infinite;
}

參考文章 https://www.oxxostudio.tw/articles/201803/css-animation.html

JavaScript

因為總共有 6 個，使用迴圈套進 box 變數中選取的 .box，去監聽滑鼠事件，只要滑鼠碰到方塊，就會執行 touch 函式。

1
2
3
4
5
6
7
8
9
10
11
var box = document.querySelectorAll(".box");
var boxLen = box.length;
console.log(box);

for (let i = 0; i < boxLen; i++) {
  box[i].addEventListener("mousemove", touch, false);

  function touch() {
    alert("滑鼠碰到我了");
  }
}

完整程式碼可以看 codepen: https://codepen.io/hnzxewqw/pen/LYVyEEP