整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言
小朋友在學校里，跟同學玩過五子棋，回來想跟我也較量一下，但是家里沒有五子棋，準備用紙做一個，做了半天，做出來的成品，不忍直視，無意看到桌上的平板，想到可以用js開發一個五子棋游戲，免去安裝
理清思路
思路清楚后，直接擼代碼
<!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: [],//已下黑子數組
white_array: [],//已下白子數組
currentChessmanType: null,//當前落子方
init: () => {
fir.drawChessboard();
fir.bindEvent();
//黑棋先下
fir.currentChessmanType = fir.chessmanType.black
},
/**
* 畫棋盤，默認18行，18列
* */
drawChessboard: (col) => {//畫棋盤
col = col || 18;//列數，行數默認等于列數
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) + ''};
}
}
},
/***
* 獲取落子后，連續棋子的個數
* 遞歸查詢
*/
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>在瀏覽器上運行一下，效果還不錯吧
有興趣的可以增加一個后臺服務，實現在線實時對弈
有想看其他的小游戲，可以打在評論區[呲牙]
為 開發過React/React Native 的工程師，在剛開始接觸Flutter 開發的時候，一定會遇到這種情況，對于某個功能你能很熟練使用特定Javascript語法去完成，但是對于Flutter 開發，對應的Dart的語法又是什么？往往要再翻開Dart文檔去尋找對應的語法。在此分享15 個 JavaScript 代碼示例及其 Dart 對應代碼。
在 JavaScript 中，如果要將對象轉換為 JSON 字符串，可以使用：
JSON.stringify（yourObject）
在 Dart 中，只需導入'dart:convert'即可使用：
import 'dart:convert';
JsonEncoder().convert(yourObject)
在 JavaScript 中將 JSON 轉換為對象，會使用以下代碼：
JSON.parse(yourJson)
在 Dart 中，只需導入'dart:convert'即可使用：
import 'dart:convert';
JsonDecoder().convert(yourJson)
在 JavaScript 中，要添加'hello'到數組中，可以使用
array.push('hello')
在 Dart 中，這樣使用，
list.add('hello')
在 JavaScript 中，數組刪除第一個元素（索引值為0）
array.splice(0, 1)
在Dart中， 返回索引范圍（1 和 3）內的新列表
list.sublist(1, 3)
array.splice與#4點一樣
在Dart中， 刪除索引值為itemIndex的值
list.removeAt(itemIndex)
檢查數組是否為空
array.length > 0
Dart里，是這樣
list.isNotEmpty
檢查數組是否為空
array.length === 0
Dart里，是這樣
list.isEmpty
在 JavaScript 中將字符串轉換為整數，可以使用
parseInt('123')
在Dart里，是這樣
int.parse('123')
雙精度浮點數的使用如下：
parseFloat('1.23')
在Dart里，是這樣
double.parse('1.23')
在 JavaScript 中，array.some()方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個Boolean類型的。
例如，如果想查看數組[1, 2, 3, 4, 5, 6, 7]是否有任何大于 5 的數字：
var some = array.some(x=>x > 5)
在Dart，是這樣的，
array.any((x)=>x > 5);
Javascript的array.findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。若沒有找到對應元素則返回-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 中，還可以在函數后面傳遞一個參數來提供起始索引。如下：
notes.indexWhere((note) => note.startsWith('r'), 2 ); // 3
在 JavaScript 和 Dart 中，indexOf是一種用于在數組或列表中查找索引位置的方法。沒有則返回-1
var author = ['Edgar Allen Poe', 'JK Rowling', 'Ernest Hemingway']
author.indexOf('JK Rowling') // 1
在 JavaScript 中，會使用toString()將另一種數據類型的值轉換為字符串。它適用于整數、浮點數、布爾值、數組和對象。對于對象的話會得到以下結果：
var x = {id: 1}
console.log(x.toString())
=> '[object Object]'
但是兩者會有一定的差別，如下：
// Dart
String test = 1.toString() // '1'
// JavaScript
var x = 1.toString() // 未捕獲的語法錯誤：無效或意外的標記
every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。用法與上面array.some 和 list.any相似
除了語法上的一些差異之外，上述所有方法都在 JavaScript 和 Dart 之間共享。當map用于test等于的數組時，請參見如下[1, 2, 3, 4, 5]。
Javascript:
// 其他類似
test.map(x=>x*2)
Dart:
est.map((x)=>x*2)
如果你還有其他需要補充的？在評論中讓我知道哈！
HP文件上傳是很常見的，但是當前后端分離后，前端和后端的框架都是按照開發人員自己去定的， 然單獨寫上傳是很麻煩的, 在插件泛濫的今天，原生的表單上傳很少用戶會去研究, 這里通過親身經歷介紹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);//如果創建的多級目錄，第三個參數設置為true。
}
if ( !file_exists($path) && !mkdir($path, 0775, true)) {
$infos=[];
$infos['code'] =-302;
$infos['errMsg'] ='文件存儲位置創建失敗';
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展現bug原型的時間到了
決的辦法就是
$file = $this->request->file('pics')->getInfo();
參考文獻
https://blog.csdn.net/hexiaoniao/article/details/85064475
希望能幫到大家
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
