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

Posted 子箫

tags:

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

项目所在地址: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.网页效果图:

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

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

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

结对-五子棋游戏-开发环境搭建过程

结对-五子棋游戏-测试过程

结对编程项目五子棋-结对项目总结

结对-结对编程项目作业名称-结对项目总结