IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

学习HTML5之塔克大战(详细记录)

作者:龚细军  发布日期:2014-08-16 21:08:11
  • 收藏本文    我要投稿
  •           学了一些HTML5的一些基本知识,开始学习制作......

              介绍一些基本知识:  px(像素)---》1px等于多少? 1cm or 2cm -->no  no no!

              (1).像素是一个密度单位:无法用度量....

             (2)  stoke--->画线    fill--->填充

            (3)再画图形时,一定记得路径闭合...

            (4)在绘制图片时:需要注意的是:先加载图片,在进行绘制

              绘制照片的一些基本步骤:

              (1) 创建image对象   new Image();

              (2)指定图片(或者路径)  src=' '

              (3)先加载,再进行一段绘制  dirawImage();

         代码详细的注释: 

              

     1 <html>
     2     <head>
     3     
     4     </head>
     5     <body>
     6          <!--用canvas画布画一个矩形-->
     7          <canvas id='gxjun'width='500px'height='400px'style='border: 2px solid blue'></canvas>
     8      <script type='text/javascript'>
     9              <!--得到画布-->
    10              var canvas_1=document.getElementById('gxjun');
    11          var cnt=canvas_1.getContext('2d');
    12          //alert(cxt);
    13          //moveto设置点位置
    14          cnt.moveTo(20,20);
    15          //有上面那个点为起点 设置第二个点位置
    16          cnt.lineTo(20,90);
    17          //将两个点连接起来
    18          cnt.stroke();
    19          //画出一个填充的三角形.-->路径
    20          //开始新路径
    21            cnt.beginPath();
    22            cnt.moveTo(40,20);
    23            cnt.lineTo(40,90);
    24            cnt.lineTo(80,90);
    25           //闭合路径,把最后这个点和第一点MoveTO()闭合
    26            cnt.closePath();
    27           //cnt.stroke();
    28                //填充矩形 由于三角形闭合了,所以填充了三角形
    29           //注意的一点是: 只有矩形才会不用路径闭合
    30            cnt.fill();  
    31            cnt.strokeRect(100,20,30,50);  //strokeRect(x,y,weidth,height);
    32              //填充矩形 
    33             cnt.fillStyle='#004DFF';   //填充颜色
    34         cnt.fillRect(140,20,30,50); 
    35         //画其他图形时一定的记得开始和闭合
    36         cnt.beginPath();
    37         //如何话圆形  arc函数
    38         //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
    39          cnt.fillStyle='#FF0000';
    40         cnt.arc(220,40,20,0,360,false);                                                 cnt.closePath();
    41         cnt.stroke();
    42         cnt.fill();
    43              //画图像
    44                var img_1=new Image();
    45            img_1.src='10.jpg';
    46            //加载完毕后再绘图....
    47            img_1.onload=function(){
    48            //(object,x,y,weidth,height)
    49              cnt.drawImage(img_1,20,100,155,220);         
    50                 }       
    51        </script>
    52      </body>
    53 </html>

    效果图:

        \

      有关Javascript写字体:

      代码:

       

    \
     1 <html> 
     2    <head》</head>
     3     <body>
     4          <!--用canvas画布画一个矩形-->
     5          <canvas id='gxjun'width='500px'height='400px'style='border: 2px solid blue'></canvas>
     6      <script type='text/javascript'>
     7              <!--得到画布-->
     8              var canvas_1=document.getElementById('gxjun');
     9          var cnt=canvas_1.getContext('2d');
    10          //alert(cxt);
    11          //moveto设置点位置
    12          cnt.moveTo(20,20);
    13          //有上面那个点为起点 设置第二个点位置
    14          cnt.lineTo(20,90);
    15          //将两个点连接起来
    16          cnt.stroke();
    17          //画出一个填充的三角形.-->路径
    18          //开始新路径
    19            cnt.beginPath();
    20            cnt.moveTo(40,20);
    21            cnt.lineTo(40,90);
    22            cnt.lineTo(80,90);
    23           //闭合路径,把最后这个点和第一点MoveTO()闭合
    24            cnt.closePath();
    25           //cnt.stroke();
    26                //填充矩形 由于三角形闭合了,所以填充了三角形
    27           //注意的一点是: 只有矩形才会不用路径闭合
    28            cnt.fill();  
    29            cnt.strokeRect(100,20,30,50);  //strokeRect(x,y,weidth,height);
    30              //填充矩形 
    31             cnt.fillStyle='#004DFF';   //填充颜色
    32         cnt.fillRect(140,20,30,50); 
    33         //画其他图形时一定的记得开始和闭合
    34         cnt.beginPath();
    35         //如何话圆形  arc函数
    36         //这些参数的含义(x,y,radius,开始度数,结束的度 针还是逆时
    37          cnt.fillStyle='#FF0000';
    38         cnt.arc(220,40,20,0,360,false);                                                 cnt.closePath();
    39         cnt.stroke();
    40         cnt.fill();
    41              //画图像
    42                var img_1=new Image();
    43            img_1.src='10.jpg';
    44          //加载完毕后再绘图....
    45            img_1.onload=function(){
    46          //(object,x,y,weidth,height)
    47                   cnt.drawImage(img_1,20,100,155,220);
    48          //在画布上写字
    49          //设置字体的大小
    50          var text='火影忍着之战国时代'
    51                  cnt.fillStyle='#0000FF';
    52          cnt.font='30px 华文彩云';
    53          cnt.fillText(text,200,200);
    54                 }       
    55        </script>
    56      </body>
    57 </html>>

    效果图:

     \

    1.画坦克的思路:
       以坦克的左上角为参照点,然后画出坦克的其它部分。这样的
    好处是当左上角的坐标变换,坦克就会整体移动。(画出图片时比较耗费cpu)

    画出第一辆坦克..

    代码:


     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <!--meta charset='utf-16'/-->    
     5     </head>
     6     <body>
     7         <h3>经典坦克大战</h3>
     8           <!--画布即作为坦克大战的地图--> 
     9       <canvas id='tankMap' width='600px' height='500px'
    10        style='background-color: black; border: 2px solid red'></canvas>
    11            <script type='text/javascript'>
    12            //得到画布
    13            var canvas1=document.getElementById('tankMap');
    14            //得到绘图上下文(即画笔)
    15            var cxt=canvas1.getContext('2d');
    16            //我的坦克hero
    17            var herox=130;
    18            var heroy=30;
    19            // alert(cxt);
    20            //设置颜色
    21            cxt.fillStyle='#DED284';
    22            //先画出左面的矩形
    23            cxt.fillRect(herox,heroy,5,30);
    24            //平移画出右边的矩形
    25            cxt.fillRect(herox+15,heroy,5,30);
    26                    //画出中间矩形
    27            cxt.fillRect(herox +6,heroy + 5,8,20);
    28            //画出坦克的盖子
    29            cxt.fillStyle='#FFD972';
    30            cxt.arc(herox +10,heroy +15,4,0,360,true);
    31            cxt.fill();
    32            //画出炮筒(直线)
    33            cxt.strokeStyle='#FFD972';
    34            cxt.lineWidth=1.5;
    35            cxt.beginPath();
    36            cxt.moveTo(herox +10,heroy +15);
    37            cxt.lineTo(herox +10,heroy);
    38            cxt.closePath();
    39            cxt.stroke();
    40            cxt.fillStyle='#FFD972';
    41            cxt.arc(herox +10,heroy,1.5,0,360,true);
    42            cxt.fill();
    43            </script>
    44     </body>
    45 </html>

    效果图:\

    附加一个小功能,让小球开始移动....

    代码:


     1 <!DOCTYPE html>
     2 <html>
     3      <head>
     4        //meta charset='utf-8';         
     5       </head>
     6       <!--当按键后去调用test函数-->
     7       <body onkeydown='test()'>
     8        <h3>小球上下左右移动</h3>
     9        <canvas id='test' width='400px' height='300px' 
    10         style='background-color:black; border: 2px solid blue'>
    11     </canvas>
    12     <script type='text/javascript'>
    13          //得到画布
    14      var canvas1=document.getElementById('test');
    15      //得到绘图上下文(画笔)
    16      var cxt= canvas1.getContext('2d');
    17      //画出红色圆球
    18          var ballx=30;
    19      var bally=30;
    20       function drawball()
    21       {
    22          cxt.beginPath();    
    23          cxt.fillStyle='#FF0000';
    24      cxt.arc(ballx,bally,10,0,360,false);
    25      cxt.closePath();
    26      cxt.fill();
    27        }
    28        //alert(cxt);
    29        //现在我摁下wsaf依次表示上下左右-
    30        //说明:当我们按下一个建,实际上触发一个onkeydowm
    31            drawball(); 
    32           function test(){
    33      //我怎么知道,玩家按下的是什么键
    34          //说明当按下键后,事件---》event对象----》事件处理函数()
    35           var code=event.keyCode; 
    36       //键盘上的每一个字母对应的是ascii
    37       switch(code)
    38       {
    39               case 87: bally--; break;
    40           case 68: ballx++; break;
    41               case 83: bally++; break;
    42               case 65: ballx--; break;               
    43       }
    44        cxt.clearRect(0,0,400,300);    
    45       drawball();
    46     }
    47   </script>
    48      </body>
    49 </html>

    效果如图:

    \

    好了,又小球衍生出第一辆坦克....

    代码:


      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4           <!--meta charset='utf-16'/-->    
      5     </head>
      6     <body onkeydown='getCommand()'>
      7         <h3>经典坦克大战</h3>
      8             <!--画布即作为坦克大战的地图--> 
      9       <canvas id='tankMap' width='600px' height='500px'
     10        style='background-color: black; border: 2px solid red'></canvas>
     11        <script type='text/javascript'>
     12            //定义一个HEro类
     13          // x,y表示坐标 direct表示方向
     14          function Hero(x,y,direct){
     15                     this.x=x;
     16             this.y=y;
     17             this.direct=direct;
     18             this.speed=1;
     19             //上移
     20             this.moveUp=function() {
     21                 this.y-=this.speed;
     22                             this.direct=0;
     23             }
     24             this.moveDown=function(){
     25                 this.y+=this.speed; 
     26                 this.direct=2;
     27             }
     28             this.moveRight=function(){
     29                 this.x+=this.speed;
     30                 this.direct=1;
     31             }
     32             this.moveLeft=function() {
     33                 this.x-=this.speed;
     34                 this.direct=3;  //改变方向
     35             }
     36                 }
     37            //得到画布
     38            var canvas1=document.getElementById('tankMap');
     39            //得到绘图上下文(即画笔)
     40            var cxt=canvas1.getContext('2d');
     41           //我的坦克hero
     42           // var herox=130;
     43           //var heroy=30;
     44               // alert(cxt);
     45             //坦克的方向:0表示向上,1表示向右,2表示下,3表示左
     46            var hero = new Hero(40,40,0);
     47              //把绘制坦克封装成为一个函数
     48     function drawTank(tank){       
     49         
     50           switch(tank.direct)
     51             {
     52            case 0:   //塔克
     53            case 2:
     54                     //设置颜色
     55            cxt.fillStyle='#BA9658' ;
     56            //先画出左面的矩形
     57            cxt.fillRect(tank.x,tank.y,5,30);
     58            //平移画出右边的矩形
     59            cxt.fillRect(tank.x+15,tank.y,5,30);
     60                    //画出中间矩形
     61            cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
     62            //画出坦克的盖子
     63            cxt.fillStyle='#FEF26E' ;
     64            cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
     65            cxt.fill();
     66            //画出炮筒(直线)
     67            cxt.strokeStyle='#FEF26E' ;
     68            cxt.lineWidth=1.5;
     69            cxt.beginPath();
     70            cxt.moveTo(tank.x +10,tank.y +15);
     71            var cnt=0;
     72                  if(tank.direct==0) cnt=0;
     73              else  if(tank.direct==2)cnt=30; 
     74                            cxt.lineTo(tank.x +10,tank.y+cnt);
     75            break;
     76            case 1:
     77            case 3:
     78                    //设置颜色
     79            cxt.fillStyle='#BA9658' ;
     80            //先画出左面的矩形
     81            cxt.fillRect(tank.x,tank.y,30,5);
     82            //平移画出右边的矩形
     83            cxt.fillRect(tank.x,tank.y+15,30,5);
     84                    //画出中间矩形
     85            cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
     86            //画出坦克的盖子
     87            cxt.fillStyle='#FEF26E' ;
     88            cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
     89            cxt.fill();
     90            //画出炮筒(直线)
     91            cxt.strokeStyle='#FEF26E' ;
     92            cxt.lineWidth=1.5;
     93            cxt.beginPath();
     94            cxt.moveTo(tank.x +15,tank.y +10);
     95            if(tank.direct==1)
     96                cxt.lineTo(tank.x +30,tank.y+10);
     97                 else if(tank.direct==3)
     98                cxt.lineTo(tank.x,tank.y+10);
     99                       // cxt.fillStyle='#FEF26E' ;
    100              //cxt.beginPath();
    101              //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
    102              //cxt.closePath();
    103              //cxt.fill();
    104 
    105 
    106            break;
    107                  
    108         }   
    109           cxt.closePath();
    110              cxt.stroke();
    111 
    112                    
    113     }    
    114            drawTank(hero);
    115            //这是一个接收按键的函数
    116           function getCommand(){
    117              //alert('汗啊');
    118          var  code = event.keyCode;
    119         // alert(code);
    120          switch(code)
    121          {
    122            // 向上
    123             case 38:
    124         case 87:  hero.moveUp();     break;
    125            //向左
    126         case 37:
    127         case 65:  hero.moveLeft();    break;
    128         //向下          
    129             case 40:
    130         case 83:  hero.moveDown();     break;
    131              //向右
    132         case 39:
    133             case 68:   hero.moveRight();   break;       
    134          }
    135              cxt.clearRect(0,0,600,500);
    136          drawTank(hero);
    137       }
    138             </script>
    139     </body>
    140 </html>

    效果图:

    \

    当然想韩老师所说的我们可以将其分为两个文件。一个js文件和一个html文件:
     

    其实内容没有任何变化,就只是将其拆分为两部分只是为了看起来方便一些》。。。

    1.tankgame2.js文件

     1  // x,y表示坐标 direct表示方向
     2          function Hero(x,y,direct){
     3                     this.x=x;
     4             this.y=y;
     5             this.direct=direct;
     6             this.speed=1;
     7             //上移
     8             this.moveUp=function() {
     9                 this.y-=this.speed;
    10                             this.direct=0;
    11             }
    12             this.moveDown=function(){
    13                 this.y+=this.speed; 
    14                 this.direct=2;
    15             }
    16             this.moveRight=function(){
    17                 this.x+=this.speed;
    18                 this.direct=1;
    19             }
    20             this.moveLeft=function() {
    21                 this.x-=this.speed;
    22                 this.direct=3;  //改变方向
    23             }
    24                 }
    25 
    26      //把绘制坦克封装成为一个函数
    27     function drawTank(tank){       
    28         
    29           switch(tank.direct)
    30             {
    31            case 0:   //塔克
    32            case 2:
    33                     //设置颜色
    34            cxt.fillStyle='#BA9658' ;
    35            //先画出左面的矩形
    36            cxt.fillRect(tank.x,tank.y,5,30);
    37            //平移画出右边的矩形
    38            cxt.fillRect(tank.x+15,tank.y,5,30);
    39                    //画出中间矩形
    40            cxt.fillRect(tank.x +5,tank.y+ 5,10,20);
    41            //画出坦克的盖子
    42            cxt.fillStyle='#FEF26E' ;
    43            cxt.arc(tank.x +10,tank.y +15,4,0,360,false);
    44            cxt.fill();
    45            //画出炮筒(直线)
    46            cxt.strokeStyle='#FEF26E' ;
    47            cxt.lineWidth=1.5;
    48            cxt.beginPath();
    49            cxt.moveTo(tank.x +10,tank.y +15);
    50            var cnt=0;
    51                  if(tank.direct==0) cnt=0;
    52              else  if(tank.direct==2)cnt=30; 
    53                            cxt.lineTo(tank.x +10,tank.y+cnt);
    54            break;
    55            case 1:
    56            case 3:
    57                    //设置颜色
    58            cxt.fillStyle='#BA9658' ;
    59            //先画出左面的矩形
    60            cxt.fillRect(tank.x,tank.y,30,5);
    61            //平移画出右边的矩形
    62            cxt.fillRect(tank.x,tank.y+15,30,5);
    63                    //画出中间矩形
    64            cxt.fillRect(tank.x +6,tank.y+ 5,20,10);
    65            //画出坦克的盖子
    66            cxt.fillStyle='#FEF26E' ;
    67            cxt.arc(tank.x +15,tank.y +10,4,0,360,false);
    68            cxt.fill();
    69            //画出炮筒(直线)
    70            cxt.strokeStyle='#FEF26E' ;
    71            cxt.lineWidth=1.5;
    72            cxt.beginPath();
    73            cxt.moveTo(tank.x +15,tank.y +10);
    74            if(tank.direct==1)
    75                cxt.lineTo(tank.x +30,tank.y+10);
    76                 else if(tank.direct==3)
    77                cxt.lineTo(tank.x,tank.y+10);
    78                       // cxt.fillStyle='#FEF26E' ;
    79              //cxt.beginPath();
    80              //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false);
    81              //cxt.closePath();
    82              //cxt.fill();
    83 
    84 
    85            break;
    86                  
    87         }   
    88           cxt.closePath();
    89              cxt.stroke();
    90 
    91                    
    92     }    

    2.html文件...

    代码:

    <!DOCTYPE html>
    <html>
        <head>
              <!--meta charset='utf-16'/-->    
        </head>
        <body onkeydown='getCommand()'>
            <h3>经典坦克大战</h3>
                <!--画布即作为坦克大战的地图--> 
          <canvas id='tankMap' width='600px' height='500px'
          style='background-color: black; border: 2px solid red'></canvas>
          <script type='text/javascript' src='tankgame2.js'></script>
           <script type='text/javascript'>
               //定义一个HEro类
                       //得到画布
               var canvas1=document.getElementById('tankMap');
               //得到绘图上下文(即画笔)
               var cxt=canvas1.getContext('2d');
              //我的坦克hero
              // var herox=130;
              //var heroy=30;
                  // alert(cxt);
                //坦克的方向:0表示向上,1表示向右,2表示下,3表示左
               var hero = new Hero(40,40,0);
                       drawTank(hero);
               //这是一个接收按键的函数
              function getCommand(){
                 //alert('汗啊');
             var  code = event.keyCode;
            // alert(code);
             switch(code)
             {
               // 向上
                case 38:
            case 87:  hero.moveUp();     break;
               //向左
            case 37:
            case 65:  hero.moveLeft();    break;
            //向下          
                case 40:
            case 83:  hero.moveDown();     break;
                 //向右
            case 39:
                case 68:   hero.moveRight();   break;       
             }
                 cxt.clearRect(0,0,600,500);
             drawTank(hero);
          }
                </script>
        </body>
    </html>

    效果图还是一样的

    \

延伸阅读:

Tag标签:大战  
  • 专题推荐