Javascript開發(fā)小游戲-五子棋

言

小朋友在學校里，跟同學玩過五子棋，回來想跟我也較量一下，但是家里沒有五子棋，準備用紙做一個，做了半天，做出來的成品，不忍直視，無意看到桌上的平板，想到可以用js開發(fā)一個五子棋游戲，免去安裝

理清思路

需要一個棋盤，n行n列
兩種棋子，白棋黑棋
白棋黑棋交替下子
橫線（—）、豎線（|）、左斜線（/）、右斜線（\），四條線上任意一條，五個棋子連成一條線就贏

思路清楚后，直接擼代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .chessboard {
            border: black solid 2px;
            width: auto;
            display: inline-block;
            margin-left: 100px;
            padding: 20px;
            background: burlywood;
        }

        .chessboard_row {
            display: flex;
        }

        .grid-area {
            width: 30px;
            height: 30px;
            position: relative;
        }

        .grid-area:after {
            content: '';
            position: absolute;
            top: 18px;
            left: 18px;
            width: 22px;
            height: 22px;
            border: 1px dashed black;
            display: none;
        }

        .grid-area:hover:after {
            display: inline-block;
        }

        .grid-area[have-chess] {
            cursor: no-drop;
        }

        .grid {
            border-right: black solid 1px;
            border-bottom: black solid 1px;
        }

        .grid-row-first {
            border-right: black solid 1px;
            border-top: black solid 1px;
            border-bottom: black solid 1px;

        }

        .grid-first-row-col {
            border: black solid 1px;

        }

        .grid-first-col {
            border-right: black solid 1px;
            border-left: black solid 1px;
            border-bottom: black solid 1px;
        }

        .chessman {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            position: absolute;
            z-index: 10;
            top: 19px;
            left: 19px;
        }

        .chessman.black {
            background: black;
        }

        .chessman.white {
            background: white;
        }

        .op-area {
            display: inline-block;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div class="chessboard">
</div>
<div class="op-area">
    <ul>
        <li>
            <button id="restart-btn">重新開始</button>
        </li>
    </ul>

</div>
<script>
    let fir = {
        chessmanType: {
            black: 0,
            white: 1
        },
        lineType: {
            horizontal: 1,//橫線
            vertical: 2,//豎線
            leftSlash: 3,//左斜線
            rightSlash: 4,//右斜線
        },
        direction: {
            positive: 1,//正向
            negative: -1//反向
        },
        black_array: [],//已下黑子數(shù)組
        white_array: [],//已下白子數(shù)組
        currentChessmanType: null,//當前落子方
        init: () => {
            fir.drawChessboard();
            fir.bindEvent();
            //黑棋先下
            fir.currentChessmanType = fir.chessmanType.black
        },
        /**
         * 畫棋盤，默認18行，18列
         * */
        drawChessboard: (col) => {//畫棋盤
            col = col || 18;//列數(shù)，行數(shù)默認等于列數(shù)
            let chessboard_html = [];
            for (let i = 0; i < col; i++) {
                chessboard_html.push('<div class="chessboard_row">');
                for (let j = 0; j < col; j++) {
                    if (i === 0) {
                        if (j === 0) {
                            chessboard_html.push('<div data-r="' + i + '" data-c="' + j + '" class="grid-area grid-first-row-col"></div>');
                        } else {
                            chessboard_html.push('<div data-r="' + i + '" data-c="' + j + '" class="grid-area grid-row-first"></div>');
                        }
                    } else {
                        if (j === 0) {
                            chessboard_html.push('<div data-r="' + i + '" data-c="' + j + '" class="grid-area grid-first-col"></div>');
                        } else {
                            chessboard_html.push('<div data-r="' + i + '" data-c="' + j + '" class="grid-area grid"></div>');
                        }
                    }
                }
                chessboard_html.push('</div>')
            }
            $('.chessboard').append(chessboard_html.join(""));
        },
        bindEvent: () => {
            $('.grid-area').bind('click', function () {
                fir.chess(this);
            });
            $('#restart-btn').bind('click', () => {
                fir.reset();
            });
        },
        victoryCallback: (chessmanType) => {
            let msg = chessmanType === fir.chessmanType.black ? '黑棋勝利' : '白棋勝利';
            alert(msg);
            fir.reset();
        },
        chess: (obj) => {
            let $obj = $(obj);
            if ($obj.attr('have-chess')) {
                alert('不能下在此處');
                return
            }
            let pos = {r: $obj.attr('data-r'), c: $obj.attr('data-c')};
            if (fir.currentChessmanType === fir.chessmanType.black) {
                $obj.append('<div class="chessman black"></div>');
                fir.black_array.push(pos);
            } else {
                $obj.append('<div class="chessman white"></div>');
                fir.white_array.push(pos);
            }
            $obj.attr('have-chess', fir.currentChessmanType);
            fir.victory(fir.currentChessmanType, pos, fir.victoryCallback);
            fir.swap();
        },
        swap: () => {
            if (fir.currentChessmanType === fir.chessmanType.black) {
                fir.currentChessmanType = fir.chessmanType.white;
            } else {
                fir.currentChessmanType = fir.chessmanType.black;
            }
        },
        findInArray: (arr, obj) => {
            for (let ele of arr) {
                if (ele.c === obj.c && ele.r === obj.r) {
                    return ele;
                }
            }
            return null;
        },
        getNearPos: (pos, line, direction) => {
            let n_r = parseInt(pos.r);//行
            let n_c = parseInt(pos.c);//列
            if (line === fir.lineType.horizontal) {
                if (direction === fir.direction.negative) {
                    return {r: n_r + '', c: (n_c - 1) + ''};
                } else if (direction === fir.direction.positive) {
                    return {r: n_r + '', c: (n_c + 1) + ''};
                }
            } else if (line === fir.lineType.vertical) {
                if (direction === fir.direction.negative) {
                    return {r: (n_r + 1) + '', c: n_c + ''};
                } else if (direction === fir.direction.positive) {
                    return {r: (n_r - 1) + '', c: n_c + ''};
                }
            } else if (line === fir.lineType.leftSlash) {
                if (direction === fir.direction.negative) {
                    return {r: (n_r + 1) + '', c: (n_c - 1) + ''};
                } else if (direction === fir.direction.positive) {
                    return {r: (n_r - 1) + '', c: (n_c + 1) + ''};
                }
            } else if (line === fir.lineType.rightSlash) {
                if (direction === fir.direction.negative) {
                    return {r: (n_r + 1) + '', c: (n_c + 1) + ''};
                } else if (direction === fir.direction.positive) {
                    return {r: (n_r - 1) + '', c: (n_c - 1) + ''};
                }
            }
        },
        /***
         * 獲取落子后，連續(xù)棋子的個數(shù)
         * 遞歸查詢
         */
        coiledSize: (arr, pos, line, direction, size) => {
            let nearPos = fir.getNearPos(pos, line, direction);
            let obj = fir.findInArray(arr, nearPos);
            if (obj) {
                size = size + 1;
                size = fir.coiledSize(arr, obj, line, direction, size);
            }
            return size;
        },
        victory: (chessmanType, pos, callback) => {
            let arr;
            if (chessmanType === fir.chessmanType.black) {
                arr = fir.black_array;
            } else {
                arr = fir.white_array;
            }
            for (let lineTypeKey in fir.lineType) {
                let type = fir.lineType[lineTypeKey];
                let size_1 = fir.coiledSize(arr, pos, type, fir.direction.negative, 0);
                if (size_1 >= 4) {
                    callback(chessmanType);
                    return;
                }
                let size_2 = fir.coiledSize(arr, pos, type, fir.direction.positive, 0);
                if (size_2 >= 4) {
                    callback(chessmanType);
                    return;
                }
                if (size_1 + size_2 >= 4) {
                    callback(chessmanType);
                    return;
                }
            }
        },
        reset: () => {
            fir.white_array = [];
            fir.black_array = [];
            $('.chessman').remove();
            $('.grid-area').removeAttr('have-chess');
        }
    }
    fir.init();
</script>
</body>
</html>

在瀏覽器上運行一下，效果還不錯吧

有興趣的可以增加一個后臺服務，實現(xiàn)在線實時對弈

有想看其他的小游戲，可以打在評論區(qū)[呲牙]

為開發(fā)過React/React Native 的工程師，在剛開始接觸Flutter 開發(fā)的時候，一定會遇到這種情況，對于某個功能你能很熟練使用特定Javascript語法去完成，但是對于Flutter 開發(fā)，對應的Dart的語法又是什么？往往要再翻開Dart文檔去尋找對應的語法。在此分享15 個 JavaScript 代碼示例及其 Dart 對應代碼。

1. JSON.stringify 和 JsonEncoder().convert

在 JavaScript 中，如果要將對象轉換為 JSON 字符串，可以使用：

  JSON.stringify（yourObject）

在 Dart 中，只需導入'dart:convert'即可使用：

  import 'dart:convert';
  
  JsonEncoder().convert(yourObject)

2. JSON.parse和JsonDecoder().convert

在 JavaScript 中將 JSON 轉換為對象，會使用以下代碼：

  JSON.parse(yourJson)

在 Dart 中，只需導入'dart:convert'即可使用：

  import 'dart:convert';
  
  JsonDecoder().convert(yourJson)

3. array.push和list.add

在 JavaScript 中，要添加'hello'到數(shù)組中，可以使用

  array.push('hello')

在 Dart 中，這樣使用，

  list.add('hello')

4. array.splice和list.sublist

在 JavaScript 中，數(shù)組刪除第一個元素（索引值為0）

  array.splice(0, 1)

在Dart中，返回索引范圍（1 和 3）內的新列表

  list.sublist(1, 3)

5. array.splice和list.removeAt

array.splice與#4點一樣

在Dart中，刪除索引值為itemIndex的值

  list.removeAt(itemIndex)

6. array.length > 0和list.isNotEmpty

檢查數(shù)組是否為空

  array.length > 0

Dart里，是這樣

  list.isNotEmpty

7. array.length === 0和list.isEmpty

檢查數(shù)組是否為空

  array.length === 0

Dart里，是這樣

  list.isEmpty

8. parseInt和int.parse

在 JavaScript 中將字符串轉換為整數(shù)，可以使用

  parseInt('123')

在Dart里，是這樣

  int.parse('123')

9. parseFloat 和 double.parse

雙精度浮點數(shù)的使用如下：

  parseFloat('1.23')

在Dart里，是這樣

  double.parse('1.23')

10. array.some 和 list.any

在 JavaScript 中，array.some()方法測試數(shù)組中是不是至少有1個元素通過了被提供的函數(shù)測試。它返回的是一個Boolean類型的。
例如，如果想查看數(shù)組[1, 2, 3, 4, 5, 6, 7]是否有任何大于 5 的數(shù)字：

  var some = array.some(x=>x > 5)

在Dart，是這樣的，

  array.any((x)=>x > 5);

11. array.findIndex和list.indexWhere

Javascript的array.findIndex()方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引。若沒有找到對應元素則返回-1。
Dart用的是list.indexWhere,只是用法不一樣

var notes = ['do', 're', 'mi', 're'];
// JavaScript
notes.findIndex(x=>x.indexOf("r") > -1) // 1
// Dart
notes.indexWhere((note) => note.startsWith('r')); // 1

「Tip」 在 Dart 中，還可以在函數(shù)后面?zhèn)鬟f一個參數(shù)來提供起始索引。如下：

notes.indexWhere((note) => note.startsWith('r'), 2 ); // 3

12. array.indexOf() 和 list.indexOf()

在 JavaScript 和 Dart 中，indexOf是一種用于在數(shù)組或列表中查找索引位置的方法。沒有則返回-1

var author = ['Edgar Allen Poe', 'JK Rowling', 'Ernest Hemingway'] 
author.indexOf('JK Rowling') // 1

13. toString

在 JavaScript 中，會使用toString()將另一種數(shù)據(jù)類型的值轉換為字符串。它適用于整數(shù)、浮點數(shù)、布爾值、數(shù)組和對象。對于對象的話會得到以下結果：

var x = {id: 1}
console.log(x.toString())
=> '[object Object]'

但是兩者會有一定的差別，如下：

 // Dart
 String test = 1.toString() // '1'
 // JavaScript
 var x = 1.toString() // 未捕獲的語法錯誤：無效或意外的標記

14. array.every 和 list.every

every() 方法測試一個數(shù)組內的所有元素是否都能通過某個指定函數(shù)的測試。它返回一個布爾值。用法與上面array.some 和 list.any相似

15. map, forEach, filter, find等

除了語法上的一些差異之外，上述所有方法都在 JavaScript 和 Dart 之間共享。當map用于test等于的數(shù)組時，請參見如下[1, 2, 3, 4, 5]。
Javascript:

  // 其他類似
  test.map(x=>x*2)

Dart:

est.map((x)=>x*2)

如果你還有其他需要補充的？在評論中讓我知道哈！

HP文件上傳是很常見的，但是當前后端分離后，前端和后端的框架都是按照開發(fā)人員自己去定的，然單獨寫上傳是很麻煩的, 在插件泛濫的今天，原生的表單上傳很少用戶會去研究, 這里通過親身經(jīng)歷介紹TP的文件上傳類進行結合, 實例方便好用的文件上傳操作。

前端框架datatable,
html.push('<input id="file-upload" type="file" name="pics" >');

2. 后端框架TP5文件上傳類接收

public function upfile(){

$file = $this->request->file('pics')->getInfo();

(這里一定一定要加，不然獲取到的是對象，很坑的對象)

$filename = "";

if($file){

if( !file_exists($path) ){

mkdir($path, 0775, true);//如果創(chuàng)建的多級目錄，第三個參數(shù)設置為true。

}

if ( !file_exists($path) && !mkdir($path, 0775, true)) {

$infos=[];

$infos['code'] =-302;

$infos['errMsg'] ='文件存儲位置創(chuàng)建失敗';

return json_encode($infos);

}

// 獲得文件類型

$file_Extension =strtolower(pathinfo($files['name'])['extension']);

$file_extends = ['bmp', 'jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'xls', 'ppt', 'docx', 'xlsx', 'pptx'];

if (!in_array($file_Extension, $file_extends) ) {

$infos=[];

$infos['code'] =-302;

$infos['errMsg'] ='文件類型不支持';

return json_encode($infos);

}

$paths=$path.'.'.$file_Extension;

$info =move_uploaded_file($files['tmp_name'], $paths);

$info = $file->move(ROOT_PATH . 'public' . DS . 'up');

}

if($info){

$data = array('msg'=>'上傳成功','filename'=>$filename)；

}else{

$data = array('msg'=>'上傳失敗','filename'=>‘’);

}

echo json_encode($data);

}

3展現(xiàn)bug原型的時間到了

決的辦法就是

$file = $this->request->file('pics')->getInfo();

參考文獻

https://blog.csdn.net/hexiaoniao/article/details/85064475

希望能幫到大家

在線咨詢

上一篇：8個精巧的在線網(wǎng)站工具，哪個看起來更強大一點？
下一篇：如何解決HTML頁面白屏問題

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商