Local backgammon
Chessboard section
HTML5 canvas painting by the board of painting a square board 15 * 15.
- To a canvas background.
- All horizontal line drawn with a for loop, that same horizontal axis, vertical axis is incremented.
- All painted with vertical circulation for, that is the same ordinate, abscissa increments.
for(var i = 1; i < 16;i++){
ctx.beginPath(); //提笔
ctx.moveTo(20, i * 20);
ctx.lineTo(300, i * 20);
ctx.stroke();
}
for(var i = 1; i < 16; i++){
ctx.beginPath();
ctx.moveTo(20 * i, 20);
ctx.lineTo(20 * i,300);
ctx.stroke();
}
Click Generate pieces
- Adding to the canvas onmousedown mouse click events. Or add a click event listener to canvas.
canvas.addEventListener('click',function(e){}) - Call pawn generator.
- Click to get the position, and the coordinates of the first divided by 20, multiplied by 20 and then rounded off, to ensure that the pieces cross the line at the board.
- arc of circle call canvas.
Set black and white rules
- When finished next Black must be under White.
- Pieces of color on the recording time in order, so that the coordinates of the painted pieces placed in an array.
- If the length of the array is an even number, compared with sunspots, an odd number albino.
Undo processing
- The sub-elements out and clear the canvas (ctx.clearRect (x, y, w, h)) from the array pop.
- Redraw the board.
All codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background-color: burlywood;
}
</style>
</head>
<body>
<canvas width="320px" height="320px" onmousedown="produceChess()"></canvas>
<button onclick="regretChess()">悔棋</button>
</body>
</html>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var aChess = [];
drawLine(16);
// 棋盘格线
function drawLine(num) {
for (var i = 1; i < num; i++) {
ctx.beginPath();
ctx.moveTo(20, i * 20);
ctx.lineTo(300, i * 20);
ctx.stroke();
}
for (var i = 1; i < num; i++) {
ctx.beginPath();
ctx.moveTo(20 * i, 20);
ctx.lineTo(20 * i, 300);
ctx.stroke();
}
}
// 棋子生成器
function produceChess() {
var x, y;
// 棋子放在交叉格上
x = Math.round(event.clientX / 20) * 20;
y = Math.round(event.clientY / 20) * 20;
aChess.push({
x: x,
y: y,
color: aChess.length % 2 ? 'white' : 'black'
});
// 黑白规则
ctx.fillStyle = aChess.length % 2 ? 'black' : 'white';
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fill();
}
// 悔棋，将该子元素从数组pop出去并将canvas清除，并重绘棋盘。
function regretChess() {
aChess.pop();
ctx.clearRect(20,20,300,300);
drawLine(16);
aChess.forEach(function(item){
ctx.beginPath();
ctx.fillStyle = item.color
ctx.arc(item.x, item.y, 10, 0, Math.PI*2);
console.log(item.x, item.y);
ctx.fill();
})
}
</script>
Networking backgammon
-
Websocket use to establish a connection.
-
The use of radio so that all clients can see chess in others people.
