JavaScript 關於新接龍的製作方法眉角

發表於 2019-07-12 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

最近要研究一下新接龍的一些小眉角作法，其中裡面將會記錄一些方向與提示~

前言

最近要研究一下新接龍的一些小眉角作法，其中裡面將會記錄一些方向與提示~

起手式

首先關於新接龍的製作方式，在製作之前我們可以先簡單想一下主要需要先準備哪些動作

拖曳
隨機排序

關於拖曳的話，由於 JavaScript 有許多種作法，舉凡原生 JavaScript 可以透過 HTML5 所提供的 Web API 拖曳方法，其中 jQuery UI 也有提供相關的 API 拖曳方法。

至於隨機產生排序的話，原理與隨機產生數字雷同，之前我有做過一個小應用是關於火箭發射，其中就有使用到隨機產生數字。

拖曳

一開始先從比較簡單的方向來製作，所以在拖曳這章節將會介紹兩種方式來製作拖曳

第一種使用 jQuery UI

jQuery UI 中就有提供一個 API 讓我們來達到拖曳的效果也就是　draggab()

寫法非常簡單，只需要這樣寫即可

1	$('#box').draggable();

那麼範例就直接提供在這裡~

第二種原生 JavaScript

原生 JavaScript 當然也可以做到拖曳效果，只是會比較麻煩一點，在這邊會使用到 HTML 中的一個 API 方法 dragstart 來監聽拖曳是否開始，但是這邊要注意必須替拖曳 DOM 元素添加一個屬性也就是 draggable="true"，這是在宣告說「我是一個可以拖曳的屬性」

範例就直接提供在這裡

隨機產生數字

在製作隨機排序之前我們必須先了解一個東西，也就是隨機產生數字。

首先一副撲克牌中有 54 張牌，但我這邊只會生出 52 張牌，因為其中 2 張是鬼牌並不會一起加入新接龍中。

這邊我們會使用的是 Math.random() 這個語法，若直接使用 Math.random() 會得到這種結果

亂數小數點

但是在製作接龍的時候，只有整數 1 ~ 13，根本不會有小數，所以就必須搭配另一個函式來解決，也就是 Math.floor()。

Math.floor() 會將所有小數無條件捨去只取最小整數，所以說如果是 0.xxxxxx 那個就會得到一個整數 0

無條件捨去所有小數點

那麼該怎麼樣才能夠取得整數 1 ~ 13 呢？其實只需要這樣寫即可 Math.floor(Math.random() * 13)

取得整數

但是這種寫法其實還有一個問題 Math.floor(Math.random() * 13) 它會回傳 0 ~ 12，所以正確寫法是這樣子 Math.floor(Math.random() * 13) + 1

1	Math.floor(Math.random() * 13) + 1;

正確取得 1 ~ 13 的整數

隨機排序

由於正常形況下新接龍上面會有 8 行是放撲克牌

圖源:網路

由此可知我們會需要 8 個陣列

1	var arr = [[], [], [], [], [], [], [], []];

那麼該如何做到隨機排列並塞入隨機數字呢？其實並不困難，首先先將前面所講的產生隨機數字打包成一個 function，並使用雙迴圈來 push 到各自的陣列中即可。

var arr = [[], [], [], [], [], [], [], []];

function getNumber(x) {
  return Math.floor(Math.random() * x) + 1;
}

var a = 0;
for(var i = 0; i < arr.length; i++){
  var randomNumber = getNumber(13);
  for(var j = 0; j < randomNumber; j++){
    arr[i].push(getNumber(13));
  }
}
console.log(arr);