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

最新推荐文章于 2024-05-16 02:28:14 发布

落花新月

最新推荐文章于 2024-05-16 02:28:14 发布

阅读量3.4k

点赞数 2

分类专栏： Web前端文章标签： Canvas JavaScript事件处理 JavaScript让小球移动 JS几成之对象冒充坦克大战

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50855632

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

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

2.语音识别

3.图像识别

4.HTML5游戏

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

6.Stoke：画线

fill:填充

7.Canvas相关的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图</title>
</head>
<body>
  <canvas id="cav" width="500px" height="500px" style="border:1px solid red">

  </canvas>
  <script type="text/javascript">
      var canvas1=document.getElementById("cav");
      var ctx=canvas1.getContext("2d");

//      画线
      ctx.moveTo(20,20); //设置起始点的位置
      ctx.lineTo(20,100);   //结束点的位置
      ctx.stroke();     //画线

//      三角形--路径
      ctx.beginPath();         //开启一个新的路径
      ctx.moveTo(40,20);    //设置起始点
      ctx.lineTo(40,100);
      ctx.lineTo(80,100);
      ctx.closePath();     //闭合路径
      ctx.fill();           //填充，要把路径闭合以后再填充
      //ctx.stroke();          //空心的三角形，没有内容填充

//      画矩形
      ctx.strokeRect(100,20,100,100);       //画出无填充矩形
      ctx.fillStyle="#fdd";          //改变填充矩形的填充色，要改变填充色的时候就调用画笔的fillStyle属性就可以了
      ctx.fillRect(250,30,50,50);          //画出填充矩形，默认填充色为黑色

//      画圆
      ctx.beginPath();
      ctx.arc(350,80,45,0,360,false);     //注意最后一个参数可以不写或者为false，如果为true的话就会出问题
      ctx.closePath();
      ctx.stroke();        //路径闭合之后再画线

//      绘制填充的圆
      ctx.beginPath();
      ctx.arc(50,200,45,0,360,false);     //注意最后一个参数可以不写或者为false，如果为true的话就会出问题
      ctx.closePath();
      ctx.stroke();        //路径闭合之后再画线
      ctx.fillStyle="yellow";      //注意要先设置颜色再填充，因为已经填充好了的圆是没法修改颜色的
      ctx.fill();

//      画图片
      var img=new Image();    //创建图片对象
      img.src="images/daiyu.jpg";    //给定路径
      //要先加载成功图片再画图片的位置
      img.onload=function(){
          ctx.drawImage(img,100,180,200,150);     //注意此处的img不能忘，忘了就显示不出来
      }
//      在画布上写字
      var text="林黛玉";
      ctx.fillStyle="#330033";      //设置字体颜色
      ctx.font="30px 微软雅黑";      //设置大小和字体
      ctx.fillText(text,350,300);     //填写字体的位置
      
  </script>
</body>
</html>

运行效果：

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

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

清屏

示例代码：（小球移动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件处理机制</title>
</head>
<!--当键盘按下之后，调用test方法-->
<body οnkeydοwn="test()">
  <h1>小球上下左右移动</h1>
  <canvas id="test" width="400px" height="400px" style="background-color: black;"></canvas>
  <script type="text/javascript">
      var canvas=document.getElementById("test");
      var cxt=canvas.getContext("2d");
      var BallX=30;
      var BallY=30;
      drawBall();
      function  drawBall(){
          //      画出红色小球
          cxt.beginPath();
          cxt.fillStyle="red";
          cxt.arc(BallX,BallY,10,0,360);
          cxt.closePath();    //画图时一定要开始和闭合路径，防止出现一些奇怪的问题
          cxt.fill();
      }

//      用键盘上的W,S,A,D这四个键来代表上下左右
      function test(){
          //如何知道用户按下的是哪个键呢？通过event.KeyCode来判断键盘的ASCII值
          var code=event.keyCode;
          switch (code){
              case 87:    //W键
                      BallY--;
//                  alert("向上");
                  break;
              case 68:   //D键
                      BallX++;
//                  alert("向右");
                  break;
              case 83:    //S键
                      BallY++;
//                  alert("向下");
                  break;
              case 65:     //A键
                      BallX--;
//                  alert("向左");
                  break;
          }
          cxt.clearRect(0,0,400,400);     //清空画布
          drawBall();        //画布清空后重新绘制小球的位置
      }
  </script>
</body>
</html>

运行效果：

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

10.OOP：面向对象编程

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>坦克大战游戏</title>
</head>
<body>
  <h1 style="background-color: ">坦克大战练习 </h1>
  <canvas id="tankBackgr" width="400px" height="400px" style="background-color: black;"></canvas>
  <script type="text/javascript">
      //得到画布
      var canvas=document.getElementById("tankBackgr");
      //得到上下文，相当于画笔
      var ctx=canvas.getContext("2d");
//      我的坦克myTank(等所有的横纵坐标给定了以后，再替换成下面的两个参数)
      var myTankX=30;
      var myTankY=30;

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

      ctx.fillRect(myTankX+6,myTankY+5,8,20);
      ctx.fillStyle="#FFFA7E";       //圆的填充颜色
      ctx.arc(myTankX+10,myTankY+15,4,0,360);  //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
      ctx.fill();      //填充圆
//      画出炮筒的线条
      ctx.beginPath();
      ctx.moveTo(myTankX+10,myTankY+15);       //线条的起始位置为圆心的位置
      ctx.lineTo(myTankX+10,myTankY);         //线条的结束位置
      ctx.strokeStyle="#FFFA7E";
      ctx.lineWidth=2;       //设置线条的宽度（粗细）
      ctx.closePath();
      ctx.stroke();


  </script>
</body>
</html>

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

示例代码：（TankBattle.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>坦克大战游戏</title>
</head>
<body οnkeydοwn="getCommand();">
  <h1>坦克大战练习 </h1>
  <canvas id="tankBg" width="400px" height="400px" style="background-color: black;"></canvas>
  <!--把js文件引入-->
  <script type="text/javascript" src="js/TankBattle.js"></script>
  <script type="text/javascript">

      var canvas=document.getElementById("tankBg");    //得到画布
      var ctx=canvas.getContext("2d");    //得到上下文，相当于画笔

      var myTank=new MyTank(30,30,0);  //用0,1,2,3,4分别表示上、右、下、左,此处的0位向上


      drawTank(myTank);




      //接受用户的键盘输入
      function  getCommand(){
          var code=event.keyCode;    //通过event.KeyCode来判断键盘的ASCII值

          switch (code){
              case 87:    //W键
                   myTank.moveUp();
                  break;
              case 68:   //D键
                      myTank.moveRight();
                  break;
              case 83:    //S键
                  myTank.moveDown();
                  break;
              case 65:     //A键
                      myTank.moveLeft();
                  break;
          }
          //注意是ctx,而不是cxt，千万别写错了
          ctx.clearRect(0,0,400,400);     //清空画布,这一步是不能少的
          drawTank(myTank);      //画布清空后重新绘制坦克的位置
      }

  </script>
</body>
</html>

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键后，向右移动的效果

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

落花新月

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一

注：学习视频来自传智播客公开课1.离线存储2.语音识别3.图像识别4.HTML5游戏5.CSS3的强大之处：动画和各种选择器6.Stoke：画线 fill:填充7.Canvas相关的代码：html>lang="en"> charset="UTF-8"> 画图 id="cav" width="500px" height="500p
复制链接

扫一扫

专栏目录