结对-五子棋游戏-开发过程

项目所在地址：https://gitee.com/zixiao520/h5WuZiQi/tree/master

css与js都采用内联式

1.创建canvas :html代码部分

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4     <meta content="text/html; charset=utf-8" /> 
 5     <title></title> 
 6     <style type="text/css"> 
 7         body { 
 8             margin: 10px; 
 9         } 
10    
11 </head> 
12 <body > 
13     <div> 
14         <canvas width="640" id="canvas"  height="640">
15         </canvas> 
16     </div> 
17   
18 </body> 
19 </html>

2.css部分：

<style type="text/css"> 
        body { 
            margin: 10px;
        } 
        div {
            text-align:center;
        }
        canvas{
            background-color:cornflowerblue;
        }
    </style>

3.js部分：利用canvas技术画出棋盘，并导入棋子

 1 <script type="text/javascript"> 
 2         var canvas; 
 3         var context; 
 4         var img_b = new Image(); 
 5         img_b.src = "b.png";
 6         var img_w = new Image(); 
 7         img_w.src = "w.png";
 8         function drawRect() {
 9             canvas = document.getElementById("canvas"); 
10             context = canvas.getContext("2d"); 
11   
12             for (var i = 0; i <= 640; i += 40) {
13                 context.beginPath(); 
14                 context.moveTo(0, i); 
15                 context.lineTo(640, i); 
16                 context.closePath(); 
17                 context.stroke(); 
18   
19                 context.beginPath(); 
20                 context.moveTo(i, 0); 
21                 context.lineTo(i, 640); 
22                 context.closePath(); 
23                 context.stroke(); 
24             } 
25         } 
26         
27     </script>

4.网页效果图：

结对-五子棋游戏-开发过程