JS canvas繪製五子棋的棋盤
阿新 • • 發佈：2018-11-11
本文為大家分享了JS canvas繪製五子棋棋盤的具體程式碼，供大家參考，具體內容如下
box-shadow:給元素塊周邊新增陰影效果。
語法：box-shadow: h-shadow v-shadow blur spread color inset；
h-shadow: （必須）陰影的水平偏移量，如果是正值，則陰影在元素塊右邊；如果是負值，則陰影在元素塊左邊。
v-shadow: （必須）陰影的垂直偏移量，如果是正值，則陰影在元素塊底部；如果是負值，則陰影在元素塊頂部。
blur: （可選）陰影的模糊半徑，其值大於等於0；為0時陰影不具有模糊效果，值越大陰影邊緣越模糊。
spread:
color: （可選）陰影顏色。
insert: （可選）不設值則預設為外部陰影，取insert則投影為內陰影。
前端精品教程：百度網盤下載
程式碼如下
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>五子棋</
title
>
<
style
type
=
"text/css"
>
canvas{
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
}
</
style
>
</
head
>
<
body
>
<
canvas
id
=
"mycanvas"
width
=
"450px"
height
=
"450px"
></
canvas
>
<
script
type
=
"text/javascript"
>
var chess = document.getElementById("mycanvas");
var context = chess.getContext('2d');
var me = true;
var chessBox = [];//用於存放棋盤中落子的情況
for(var i=0;i<
15
;i++){
chessBox[i]=[];
for(var
j
=
0
;j<15;j++){
chessBox[i][j]=0;//初始值為0
}
}
function drawChessBoard(){
for(var
i
=
0
;i<15;i++){
context.strokeStyle
=
"#D6D1D1"
;
context.moveTo(15+i*30,15);//垂直方向畫15根線，相距30px;
context.lineTo(15+i*30,435);
context.stroke();
context.moveTo(15,15+i*30);//水平方向畫15根線，相距30px;棋盤為14*14；
context.lineTo(435,15+i*30);
context.stroke();
}
}
drawChessBoard();//繪製棋盤
function oneStep(i,j,k){
context.beginPath();
context.arc(15+i*30,15+j*30,13,0,2*Math.PI);//繪製棋子
var
g
=
context
.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);//設定漸變
if(k){ //
k
=
true
是黑棋，否則是白棋
g.addColorStop(0,'#0A0A0A');//黑棋
g.addColorStop(1,'#636766');
}else {
g.addColorStop(0,'#D1D1D1');//白棋
g.addColorStop(1,'#F9F9F9');
}
context.fillStyle
=
g
;
context.fill();
context.closePath();
}
chess.onclick
=
function
(e){
var
x
=
e
.offsetX;//相對於棋盤左上角的x座標
var
y
=
e
.offsetY;//相對於棋盤左上角的y座標
var
i
=
Math
.floor(x/30);
var
j
=
Math
.floor(y/30);
if( chessBox[i][j] == 0 ) {
oneStep(i,j,me);
if(me){
chessBox[i][j]=1;
}else{
chessBox[i][j]=2;
}
me=!me;//下一步白棋
}
}
</script>
</
body
>
</
html
>
|
效果圖是這樣的
前端精品教程：百度網盤下載