readme.md
*以下為引用或修改自其他網站
在查找資料發現到一個利用大家都在使用的chrome瀏覽器簡單製造一個網路伺服器，我覺得很有趣就點進去了解
圖片出處:https://developer.mozilla.org/zh-TW/docs/Learn/Common_questions/What_is_a_web_server
需先下載chrome的擴充套件(https://goo.gl/q1cENI)
將想要的網站改為index的檔名，這個擴充套件可以直接讀取
document.addEventListener('DOMContentLoaded', () => {
const gridDisplay = document.querySelector('.grid')
const scoreDisplay = document.getElementById('score')
const resultDisplay = document.getElementById('result')
let squares = []
const width = 4
let score = 0
//create the playing board
function createBoard() {
for (let i=0; i < width*width; i++) {
square = document.createElement('div')
square.innerHTML = 0
gridDisplay.appendChild(square)
squares.push(square)
}
generate()
generate()
}
createBoard()
//generate a new number
function generate() {
randomNumber = Math.floor(Math.random() * squares.length)
if (squares[randomNumber].innerHTML == 0) {
squares[randomNumber].innerHTML = 2
checkForGameOver()
} else generate()
}
function moveRight() {
for (let i=0; i < 16; i++) {
if (i % 4 === 0) {
let totalOne = squares[i].innerHTML
let totalTwo = squares[i+1].innerHTML
let totalThree = squares[i+2].innerHTML
let totalFour = squares[i+3].innerHTML
let row = [parseInt(totalOne), parseInt(totalTwo), parseInt(totalThree), parseInt(totalFour)]
let filteredRow = row.filter(num => num)
let missing = 4 - filteredRow.length
let zeros = Array(missing).fill(0)
let newRow = zeros.concat(filteredRow)
squares[i].innerHTML = newRow[0]
squares[i +1].innerHTML = newRow[1]
squares[i +2].innerHTML = newRow[2]
squares[i +3].innerHTML = newRow[3]
}
}
}
function moveLeft() {
for (let i=0; i < 16; i++) {
if (i % 4 === 0) {
let totalOne = squares[i].innerHTML
let totalTwo = squares[i+1].innerHTML
let totalThree = squares[i+2].innerHTML
let totalFour = squares[i+3].innerHTML
let row = [parseInt(totalOne), parseInt(totalTwo), parseInt(totalThree), parseInt(totalFour)]
let filteredRow = row.filter(num => num)
let missing = 4 - filteredRow.length
let zeros = Array(missing).fill(0)
let newRow = filteredRow.concat(zeros)
squares[i].innerHTML = newRow[0]
squares[i +1].innerHTML = newRow[1]
squares[i +2].innerHTML = newRow[2]
squares[i +3].innerHTML = newRow[3]
}
}
}
function moveUp() {
for (let i=0; i < 4; i++) {
let totalOne = squares[i].innerHTML
let totalTwo = squares[i+width].innerHTML
let totalThree = squares[i+(width*2)].innerHTML
let totalFour = squares[i+(width*3)].innerHTML
let column = [parseInt(totalOne), parseInt(totalTwo), parseInt(totalThree), parseInt(totalFour)]
let filteredColumn = column.filter(num => num)
let missing = 4 - filteredColumn.length
let zeros = Array(missing).fill(0)
let newColumn = filteredColumn.concat(zeros)
squares[i].innerHTML = newColumn[0]
squares[i +width].innerHTML = newColumn[1]
squares[i+(width*2)].innerHTML = newColumn[2]
squares[i+(width*3)].innerHTML = newColumn[3]
}
}
function moveDown() {
for (let i=0; i < 4; i++) {
let totalOne = squares[i].innerHTML
let totalTwo = squares[i+width].innerHTML
let totalThree = squares[i+(width*2)].innerHTML
let totalFour = squares[i+(width*3)].innerHTML
let column = [parseInt(totalOne), parseInt(totalTwo), parseInt(totalThree), parseInt(totalFour)]
let filteredColumn = column.filter(num => num)
let missing = 4 - filteredColumn.length
let zeros = Array(missing).fill(0)
let newColumn = zeros.concat(filteredColumn)
squares[i].innerHTML = newColumn[0]
squares[i +width].innerHTML = newColumn[1]
squares[i+(width*2)].innerHTML = newColumn[2]
squares[i+(width*3)].innerHTML = newColumn[3]
}
}
function combineRow() {
for (let i =0; i < 15; i++) {
if (squares[i].innerHTML === squares[i +1].innerHTML) {
let combinedTotal = parseInt(squares[i].innerHTML) + parseInt(squares[i +1].innerHTML)
squares[i].innerHTML = combinedTotal
squares[i +1].innerHTML = 0
score += combinedTotal
scoreDisplay.innerHTML = score
}
}
checkForWin()
}
function combineColumn() {
for (let i =0; i < 12; i++) {
if (squares[i].innerHTML === squares[i +width].innerHTML) {
let combinedTotal = parseInt(squares[i].innerHTML) + parseInt(squares[i +width].innerHTML)
squares[i].innerHTML = combinedTotal
squares[i +width].innerHTML = 0
score += combinedTotal
scoreDisplay.innerHTML = score
}
}
checkForWin()
}
//assign functions to keyCodes
function control(e) {
if(e.keyCode === 65) {
keyLeft()
} else if (e.keyCode === 87) {
keyUp()
} else if (e.keyCode === 68) {
keyRight()
} else if (e.keyCode === 83) {
keyDown()
}
}
document.addEventListener('keyup', control)
function keyRight() {
moveRight()
combineRow()
moveRight()
generate()
}
function keyLeft() {
moveLeft()
combineRow()
moveLeft()
generate()
}
function keyUp() {
moveUp()
combineColumn()
moveUp()
generate()
}
function keyDown() {
moveDown()
combineColumn()
moveDown()
generate()
}
//check for the number 2048 in the squares to win
function checkForWin() {
for (let i=0; i < squares.length; i++) {
if (squares[i].innerHTML == 2048) {
resultDisplay.innerHTML = '你贏了'
document.removeEventListener('keyup', control)
setTimeout(() => clear(), 3000)
}
}
}
//check if there are no zeros on the board to lose
function checkForGameOver() {
let zeros = 0
for (let i=0; i < squares.length; i++) {
if (squares[i].innerHTML == 0) {
zeros++
}
}
if (zeros === 0) {
resultDisplay.innerHTML = '你輸了<br>想重新開始請按左上方重置'
document.removeEventListener('keyup', control)
setTimeout(() => clear(), 3000)
}
}
//clear timer
function clear() {
clearInterval(myTimer)
}
//add colours
function addColours() {
for (let i=0; i < squares.length; i++) {
if (squares[i].innerHTML == 0) squares[i].style.backgroundColor = '#afa192'
else if (squares[i].innerHTML == 2) squares[i].style.backgroundColor = '#eee4da'
else if (squares[i].innerHTML == 4) squares[i].style.backgroundColor = '#ede0c8'
else if (squares[i].innerHTML == 8) squares[i].style.backgroundColor = '#f2b179'
else if (squares[i].innerHTML == 16) squares[i].style.backgroundColor = '#ffcea4'
else if (squares[i].innerHTML == 32) squares[i].style.backgroundColor = '#e8c064'
else if (squares[i].innerHTML == 64) squares[i].style.backgroundColor = '#ffab6e'
else if (squares[i].innerHTML == 128) squares[i].style.backgroundColor = '#fd9982'
else if (squares[i].innerHTML == 256) squares[i].style.backgroundColor = '#ead79c'
else if (squares[i].innerHTML == 512) squares[i].style.backgroundColor = '#76daff'
else if (squares[i].innerHTML == 1024) squares[i].style.backgroundColor = '#beeaa5'
else if (squares[i].innerHTML == 2048) squares[i].style.backgroundColor = '#d7d4f0'
}
}
addColours()
var myTimer = setInterval(addColours, 50)
})
.png)
本來還想在用這樣的方式讓手機連上，用這樣的方式讓手機連上(上面的鏈結裡面有教)，但這個擴充套件好像有改版，沒找到可用的