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

Posted 2020-10-09 薛丁格爱猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了结对编程-五子棋游戏-开发过程相关的知识，希望对你有一定的参考价值。

1.项目所在地址：https://gitee.com/g961231/WuZiQi/commits/master

2.CSS和JS都采用内联式

3.创建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>

4.编写css部分

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

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

<script type="text/javascript"> 
        var canvas; 
        var context; 
        var img_b = new Image(); 
        img_b.src = "b.png";
        var img_w = new Image(); 
        img_w.src = "w.png";
        function drawRect() {
            canvas = document.getElementById("canvas"); 
            context = canvas.getContext("2d"); 
  
            for (var i = 0; i <= 640; i += 40) {
                context.beginPath(); 
                context.moveTo(0, i); 
                context.lineTo(640, i); 
                context.closePath(); 
                context.stroke(); 
  
                context.beginPath(); 
                context.moveTo(i, 0); 
                context.lineTo(i, 640); 
                context.closePath(); 
                context.stroke(); 
            } 
        } 
        
    </script>

6.网页显示的效果

以上是关于结对编程-五子棋游戏-开发过程的主要内容，如果未能解决你的问题，请参考以下文章