zoukankan html css js c++ java

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

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

查看全文

相关阅读:
学习minix 3(未完成)
排序
 分析nat穿越(未完成)
固定增量感知器
 分析7zip(未完成)
分析easyVM 未完成)
分析wrk,crk
分析vczh的东东(未完成)
标题: 三维游戏里面的自动寻路的算法可能是什么样的？
几个googlecode

原文地址：https://www.cnblogs.com/guo961231/p/7630158.html