晓夏

北漂的女孩

Good Luck To You!

HTML 5 标签及简单的五子棋制作

浏览量:467

想学习一下html5+css3 ，更想了解一下人机大战的原理，最终我成功了

第一步：htmL编写

五子棋
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>五子棋</title>
        <link href="css/style.css" type="text/css" rel="stylesheet">
        <script src="js/jquery-2.1.3.min.js"></script>
       <style>
            #canvas{
              display: block;
              margin: 50px auto;
              box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
            }
       </style>
        <!--[if lt IE 9]>
            <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">
            </script>
            <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js">
            </script>
        <![endif]-->
    </head>
    <body>
        <canvas id="chess"  width="450px" height="450px"> </canvas>
         <script  type="text/javascript" src="js/script.js"></script>
    </body>
</html>

第二步  js编写 

var chessbox = [];
var me = true;

for (var i = 0; i <15; i++) {
    chessbox[i] = [];
    for (var j = 0 ; j < 15 ; j++ ) {
        chessbox[i][j] = 0;
    }
}
//获取棋盘
var chess = document.getElementById("chess");
var context  = chess.getContext('2d');
//画棋盘的线
context.strokeStyle = "#BFBFBF";

var logo = new Image();
logo.src  = "111.png"; //棋盘的背景图片
//图片加载完在处理
logo.onload = function(){
    //背景图片的大小
    context.drawImage(logo,0,0,450,450);
    //棋盘
    drawChessBoard();
    //oneStep(0,0,true);黑色的棋子
    //oneStep(1,1,false);白色的棋子

}
//画棋盘
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();
    context.stroke();  //描边
    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(chessbox[i][j] ==0){
        oneStep(i,j,me);
        if(me){
            chessbox[i][j] = 1;
            me = false;
        }else{
            chessbox[i][j] = 2;
            me = true;
        }
    }
}

最后展示样式，嘻嘻

QQ图片20160411185626.png





神回复

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。