- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>五子棋</title>
- <link rel="stylesheet " type="test/CSS" >
- </head>
- <body>
- <canvas id="chess" width="450px" height="450px" ></canvas>
- <script type="text/javascript" src1="js/script.js"></script>
- </body>
- </html>
- canvas {
- display: block;
- margin: 50px auto;
- box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
- }
- var chessBoard = [];
- var me = true;
- for(var i=0; i<15; i++){
- chessBoard[i] =[]
- for(var j=0; j<15; j++){
- chessBoard[i][j]=0;
- }
- }
- var chess = document.getElementById('chess');
- var context =chess.getContext('2d');
- context.strokesstyle = "#BFBFBF";
- var logo = new Image();
- logo.src = "images/logo2.jpg";
- logo.onload = function(){
- context.drawImage(logo,0,0,450,450);
- drawChessBoard();
- }
- var drawChessBoard = function() {
- for (var i = 0; i < 15; i++) {
- context.moveTo(15 + i * 30, 15);
- context.lineTo(15 + i * 30, 435);
- context.stroke();
- context.moveTo(15, 15 + i * 30);
- context.lineTo(435, 15 + i * 30);
- context.stroke();
- }
- }
- var oneStep = function(i, j, me){
- context.beginPath();
- context.arc(15 + i * 30,15 + j * 30, 13, 0, 2 * Math.PI);
- context.closePath();
- var gradient = context.createRadialGradient(15 + i * 30 +2, 15 + j * 30 -2, 13,15 + i * 30 +2, 15 + j * 30 -2, 0);
- if(me) {
- gradient.addColorStop(0, "#0A0A0A");
- gradient.addColorStop(1, "#636766");
- }else {
- gradient.addColorStop(0, "#D1D1D1");
- gradient.addColorStop(1, "#F9F9F9");
- }
- context.fillStyle =gradient;
- context.fill();
- }
- chess.onclick = function(e) {
- var x =e.offsetX;
- var y =e.offsetY;
- var i = Math.floor(x/30);
- var j = Math.floor(y/30);
- if (chessBoard[i][j] == 0) {
- oneStep(i, j, me);
- if(me){
- chessBoard[i][j] = 1;
- }else{
- chessBoard[i][j] = 2;
- }
- me = !me;
- }
- }
- //该片段来自于http://www.codesnippet.cn/detail/1507201614869.html
来源: http://www.codesnippet.cn/detail/1507201614869.html