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

          学了一些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         <h1>经典坦克大战</h1>
 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        <h1>小球上下左右移动</h1>
 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         <h1>经典坦克大战</h1>
  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()">
        <h1>经典坦克大战</h1>
            <!--画布即作为坦克大战的地图--> 
      <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>

效果图还是一样的

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葬爱家族

H5和微信小游戏 Canvas API 整理前言

这段时间闲下来,系统学习了微信小程序和微信小游戏,发现还是挺有意思的。现在微信小游戏的开发都离不开游戏引擎,用原生小游戏开发工具开发的很少很少。但是毕竟我不是专...

93340
来自专栏Spring相关

使用canvas绘制渐变色矩形和使用按键控制人物移动

15230
来自专栏lonelydawn的前端猿区

canvas星空的2d绘制示例

一切尽在注释里: <!DOCTYPE html> <html> <head>     <meta charset="utf-8"></meta>     <t...

23290
来自专栏HTML5学堂

Canvas 基本绘制(下)

HTML5学堂:在前一篇文章《Canvas 基本绘制(上)》当中,我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘...

38560
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

在html5时,我用JavaScript封装了一个HTML5的canvas库。

40160
来自专栏Guangdong Qi

iOS 连续动画效果(让APP动起来)

27730
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

14410
来自专栏Android知识点总结

Android关于Color你所知道的和不知道的一切

20640
来自专栏葡萄城控件技术团队

三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容。 第2...

53890
来自专栏天天

Canvas高级

20110

扫码关注云+社区

领取腾讯云代金券