家好，我是你們的章魚貓。

掃雷大家都玩過吧，Windows 里面的經典游戲。我記得上初中那會，上計算機課，都是偷偷玩這個游戲，懷念呀。但是不得不說，掃雷相比紙牌難度還是大一點的，畢竟還要費一點腦子的。

今天要推薦的項目就是重溫經典，只通過 HTML/CSS（沒有任何 JavaScript）來實現的掃雷游戲。

這個游戲另外一個很有趣的地方就是，為了強調沒有使用 JavaScript，掃雷游戲中的雷就是 JS，哈哈哈。

整個項目使用最核心的技術就是 CSS 里面的是 Space Toggle，感興趣的同學可以了解一下哦。

通過如下網站可以試玩上面的掃雷游戲：

https://propjockey.github.io/css-sweeper/

更多項目詳情請查看如下鏈接。

開源項目地址：

https://github.com/propjockey/css-sweeper

前言

CSS 中有這樣一個模塊：Motion Path 運動模塊，它可以使元素按照自定義的路徑進行移動。本文將為你講解這個模塊屬性的使用，并且利用它實現我小時候電腦課經常玩的一個打字游戲：金山打字的《生死時速》。

Motion Path 使用教程

css中有這樣一個模塊：Motion Path ，它可以實現元素按不規則路徑移動。

Motion Path模塊包含 offset 的一系列屬性，包括以下幾個：

• offset-path：設置元素運動路徑；
• offset-distance：控制當前元素基于 offset-path 運動的距離；
• offset-anchor：定義元素在路徑上移動時的錨點。 簡單來說就是，運動元素可能不是一個點，那么就需要指定元素中的哪個點附著在路徑上進行運動
• offset-position：指定運動的初始位置；
• offset-rotate：定義沿 offset-path 運動路徑移動時元素的朝向；

1. offset-path

offset-path 屬性可以取以下幾個值來設置元素的運動路徑：

• ray()函數：ray([<angle> && <size> && contain?])，設置以射線狀路線偏移；
• url()函數：用id選擇器綁定頁面內聯SVG元素中任意圖形元素的路徑；
• <basic-shape>：一些css的基本形狀函數，例如：circle(), ellipse(), inset(), path(), polygon(), rect()等，對于可以設置position位置的circle(), ellipse()，如果沒有設置position的話，就會應用offset-position的值；
• box-edge：設置以相對的父元素的邊緣為運動路徑，例如設置content-box、border-box、fill-box等，可以設置按內容區的邊緣還是邊框邊緣等；

看下面例子就懂了：

下面代碼中ray射線運動是設置元素朝70度方向運動200px； 按svg路徑運動是讓電車以一個五角星的svg的路線運動； shape圖形是讓電車以polygon()繪制的菱形運動； box是在其父盒子邊緣運動；

2. offset-distance

設置運動的距離，可以是值，也可以是百分比，例如設置0%處于初始位置，100%就是移動到路徑的終點。所以一般實現元素按不規則路徑移動，就是通過animation修改offset-distance實現的。

3. offset-anchor

設置元素的哪個點沿著路徑運動，例如設置offset-anchor: center bottom為元素的底部中心點沿路徑移動，其他就不多說了，使用方式和background-position一樣。

4. offset-position

設置運動的起始位置，只能作用于可以設置position的路線.

例如 ray() 射線運動，可以設置起點位置，或者ellipse()、circle()等這些需要設置position的圖形元素。而且如果在定義路徑時已經寫明了position的話，offset-position是不會生效的，例如circle(50% at 25% 25%)

5. offset-rotate

offset-rotate定義元素沿偏移路徑定位時的方向，默認的話是元素角度會一直和運動路徑的水平角度保持一致，當然你也可以自定義固定角度，或者反向顯示元素（reverse）。

看下面例子就明白了：

游戲開發

1. 游戲簡介

游戲開始后，警察在3秒后開始出動，如果警察抓到小偷（位置重合）即游戲失敗。 你需要根據頁面底部的對話正確輸入單詞，即可讓小偷不斷運動，拉開與警察的距離，如果在輸入全部對話前沒有被警察逮到，即闖關成功。

整個游戲其實實現起來很簡單，只需要在設置offset路徑動畫的基礎上加一點點細節就完成了。

2. 利用offset屬性實現運動路徑

找個svg在線編輯網站，設計一個用來當道路等路徑path，然后將兩個位置重合的元素設置相同的運動路徑，即可實現警察和小偷的運動路線。

3. 實現警察追小偷

如何實現警察小偷你追我趕的情景呢？很簡單，警察是一直在運動的，只要小偷不要一直運動，兩者錯開即可。

只需要利用animation-play-state: paused屬性控制小偷運動暫停即可，如果你輸入正確的字符，則設置為animation-play-state: running繼續運動。

如何制作打字控制小偷移動的效果呢？

很簡單，監聽鍵盤輸入即可，如果輸入正確，則將此字符推入答案中，并設置小偷animation-play-state: running讓他繼續運動，延時一小段時間再設置為paused暫停。 答案和題目重合，并且答案設置為了藍色，在答案尾部還利用step逐幀動畫，方便體現打字的進度。因為輸入時，輸入空格也需要光標移動，所以一定要在答案元素上設置white-space: pre以保留空白符的所有空白。另外，為了使要輸入的字符永遠顯示出來，我在推入答案時會使光標調用scrollIntoView()方法使其滾動到可視區。

js復制代碼document.addEventListener('keydown', function (event) {
    const myinput = answer.textContent
    if (event.key === words[myinput.length]) {
        timer && clearTimeout(timer)
        answer.textContent = myinput + event.key
        thief.style.setProperty('--paused', 'running');
        document.querySelector('.show').scrollIntoView(true)
        timer = setTimeout(() => {
            thief.style.setProperty('--paused', 'paused');
        }, 400);
    }
});
setTimeout(() => {
    checkCollision()
    police.style['animation-play-state'] = 'running'
}, 2000);

4. 判斷結果

如果做碰撞檢測呢并顯示結果呢？

碰撞檢測其實很簡單，只需要利用getBoundingClientRect()方法獲取警察和小偷的定位，判斷是否幾乎重合即可。判斷輸贏的方式為：如果你在打完所有文字之前不被逮捕則闖關成功，否則闖關失敗。

js復制代碼// 碰撞檢測
function checkCollision() {
    const policeRect = police.getBoundingClientRect()
    const thiefRect = thief.getBoundingClientRect()
    if (answer.textContent.length >= words.length) {
        showResult(true)
        return
    }
    if (Math.abs(policeRect.x - thiefRect.x) < 2 && Math.abs(policeRect.y - thiefRect.y) < 2) {
        showResult()
        return
    }
    requestAnimationFrame(checkCollision)
}
// 結局判斷
function showResult(flag) {
    if (flag) {
        document.querySelector('.success').style.display = 'grid'
    } else {
        document.querySelector('.fail h1').textContent =
            `你被逮捕了！${document.querySelector(".timing").textContent}`
        document.querySelector('.fail').style.display = 'grid'
    }
}

最后

學如逆水行舟，不進則退～

作者：前端阿彬 鏈接：https://juejin.cn/post/7349752708386553910 來源：稀土掘金 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。