HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一

1.离线存储：1)存储到本地，可以离线浏览网页  2）不用cookie(安全性不太高，来回交互的数据量比较大)

2.语音识别

3.图像识别

4.HTML5游戏

5.CSS3的强大之处：动画和各种选择器

6.Stoke：画线

  fill:填充

7.Canvas相关的代码：

html>
lang="en">

    charset="UTF-8">
    


  id="cav" width="500px" height="500px" style="border:1px solid red">

  
  

运行效果：

8.画图片是比较耗资源的。

9.JavaScript事件处理机制、事件监听、闭包

清屏

示例代码：（小球移动）

html>
lang="en">

    charset="UTF-8">
    


οnkeydοwn="test()">
  
小球上下左右移动
  id="test" width="400px" height="400px" style="background-color: black;">
  

运行效果：

注意：当按下W.S、A.D这几个键后，小球会随之上下左右移动

10.OOP：面向对象编程

11.最初的坦克大战版本：

html>
lang="en">

    charset="UTF-8">
    


  
style="background-color: ">坦克大战练习 
  id="tankBackgr" width="400px" height="400px" style="background-color: black;">
  

12.坦克版本2之自己的坦克（实现移动、方向转换功能）

示例代码：（TankBattle.html）

html>
lang="en">

    charset="UTF-8">
    

οnkeydοwn="getCommand();">
  
坦克大战练习 
  id="tankBg" width="400px" height="400px" style="background-color: black;">
  
  
  

JS文件（TankBattle.js）

//x表示坦克的横坐标，y表示坦克的纵坐标，dirc表示移动方向
function MyTank(x,y,direc){
    this.x=x;
    this.y=y;
    this.speed=1;
    this.direc=direc;
    //向上移动
    this.moveUp=function(){
        this.y-=this.speed;
              this.direc=0
    }
    //向右移动
    this.moveRight=function(){
        this.x+=this.speed;
              this.direc=1;
    }
    //向下移动
    this.moveDown=function(){
        this.y+=this.speed;
              this.direc=2;
    }
    //向左移动
    this.moveLeft=function(){
        this.x-=this.speed;
              this.direc=3;
    }
}
//      画坦克
function drawTank(tank){
    //考虑方向
    switch (tank.direc){
        case 0:
        case 2:

            ctx.fillStyle="#DED284";   //给定矩形的颜色
            ctx.fillRect(tank.x,tank.y,5,30);        //画出左边的矩形
            ctx.fillRect(tank.x+15,tank.y,5,30);       //画出右侧的矩形
            //画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
            // 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）

            ctx.fillRect(tank.x+6,tank.y+5,8,20);
            ctx.fillStyle="#FFFA7E";       //圆的填充颜色
            ctx.arc(tank.x+10,tank.y+15,4,0,360);  //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
            ctx.fill();      //填充圆
//      画出炮筒的线条
            ctx.beginPath();
            ctx.moveTo(tank.x+10,tank.y+15);       //线条的起始位置为圆心的位置
            if(tank.direc==0){
                ctx.lineTo(tank.x+10,tank.y);         //线条的结束位置
            }else if(tank.direc==2){
                ctx.lineTo(tank.x+10,tank.y+30);
            }

            ctx.strokeStyle="#FFFA7E";
            ctx.lineWidth=2;       //设置线条的宽度（粗细）
            ctx.closePath();
            ctx.stroke();
            break;
        case 1:   //右
        case 3:    //左
            //      画出自己的坦克
            ctx.fillStyle="#DED284";   //给定矩形的颜色
            ctx.fillRect(tank.x,tank.y,30,5);       //画出左边的矩形

            ctx.fillRect(tank.x,tank.y+15,30,5);       //画出右侧的矩形
            //画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
            // 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）

            ctx.fillRect(tank.x+5,tank.y+6,20,8);
            ctx.fillStyle="#FFFA7E";       //圆的填充颜色
            ctx.arc(tank.x+15,tank.y+10,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
            ctx.fill();      //填充圆
//      画出炮筒的线条
            ctx.beginPath();
            ctx.moveTo(tank.x+15,tank.y+10);
            //向右
            if(tank.direc==1){
                ctx.lineTo(tank.x+30,tank.y+10);
            }else if(tank.direc==3){ //向左
                ctx.lineTo(tank.x,tank.y+10);
            }
            ctx.strokeStyle="#FFFA7E";
            ctx.lineWidth=2;       //设置线条的宽度（粗细）
            ctx.closePath();
            ctx.stroke();
            break;
    }

}

运行效果：

                            当按下键盘上的D键后，向右移动的效果

注：学习视频来自传智播客公开课