iT邦幫忙

第 12 屆 iThome 鐵人賽

1
Modern Web

JavaScript 從零開始系列 第 38

JavaScript 從零開始 - Day38 - Mousemove 滑鼠移動到指定元素事件

JavaScript Note

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

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

練習主題

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

HTML

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

CSS

.box {
  width: 300px;
  height: 300px;
  background-color: #333;
}

這很簡單,就不贅述。

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

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

那就來建立六個方塊:

  <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

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

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

@keyframes boxmove {
  0% {
    top: 0px;
  }
  50% {
    top: 300px;
  }
  100% {
    top: 0px;
  }
}

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

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

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


JavaScript

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

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


上一篇
JavaScript 從零開始 - Day37 - blur 離開焦點
下一篇
JavaScript - 從零開始 - Day39 - 點選清單項目時,刪除清單資料
系列文
JavaScript 從零開始40

尚未有邦友留言

立即登入留言