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

weixin_30265103

于 2017-10-05 22:20:00 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/guo961231/p/7630158.html

版权

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.网页显示的效果

转载于:https://www.cnblogs.com/guo961231/p/7630158.html

weixin_30265103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
结对编程-五子棋游戏-开发过程

1.项目所在地址：https://gitee.com/g961231/WuZiQi/commits/master2.CSS和JS都采用内联式3.创建canvas :html代码部分 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="text/h...
复制链接

扫一扫