HTML5-坦克大战一完成坦克上下左右移动的功能（一）

坦克大战一完成坦克上下左右移动的功能

复制代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
  
<body  onkeydown="getCommand()">  
<h1>html5-经典的坦克大战</h1>  
<canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">  
</canvas>  
<script type="text/javascript">  
    //定义一个hero类  
    //x、y表示初始坐标，direct表示方向  
    function  Hero(x,y,direct){  
        this.x=x;  
        this.y=y;  
        this.direct=direct;     
        this.speed=5;  
          
        this.moveUp=function(){  
            this.y-=this.speed;  
            this.direct=0;  
        }  
        this.moveDown=function(){  
            this.y+=this.speed;  
            this.direct=2;  
        }  
        this.moveRight=function(){  
            this.x+=this.speed;  
            this.direct=1;  
        }  
        this.moveLeft=function(){  
            this.x-=this.speed;  
            this.direct=3;  
        }  
    }  
  
    //准备工作  
    //得到画布  
    var  canvas1=document.getElementById("tankeMap");  
    //得到上下文引用对象，你可以理解成画笔  
    var cxt=canvas1.getContext("2d");  
      
    //定义一个坦克  
    //数字0表示向上 数字1表示右 数字2表示下 数字3表示左  
    var  hero=new Hero(130,30,0);  
      
    //把创建坦克的方法封装为一个对象  
    //该函数可以画自己的坦克，也可以画敌人的坦克  
    //tanke就是一个对象   
    function  drawTanke(tanke){  
        //坦克的方向  
        switch(tanke.direct){  
            case 0:  
            case 2:  
            {//上  
                //画出自己的坦克设置颜色  
                cxt.fillStyle="#00A6BD";  
                cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮  
                cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮  
                cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体  
                  
                //画中间的圆形的炮筒体  
                cxt.fillStyle="#00A6BD";  
                cxt.beginPath();  
                cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);  
                cxt.closePath();  
                cxt.fill();  
                  
                //画出炮筒  
                cxt.strokeStyle="#00A6BD";  
                //cxt.fillStyle="#FFD972";  
                cxt.lineWidth=1.9;  
                cxt.beginPath();  
                cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置    
                if(tanke.direct==0){  
                    cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置   
                }else if(tanke.direct==2){  
                    cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置  
                }  
                cxt.closePath();      
                cxt.stroke();  
            }  
            break;  
            case 1:  
            case 3:  
            {//右  
                //画出自己的坦克设置颜色  
                cxt.fillStyle="#00A6BD";  
                cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮  
                cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮  
                cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体  
                  
                //画中间的圆形的炮筒体  
                cxt.fillStyle="#00A6BD";  
                cxt.beginPath();  
                cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);  
                cxt.closePath();  
                cxt.fill();  
                  
                //画出炮筒  
                cxt.strokeStyle="#00A6BD";  
                //cxt.fillStyle="#FFD972";  
                cxt.lineWidth=1.9;  
                cxt.beginPath();  
                cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置    
                if(tanke.direct==1){//右  
                    cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置   
                }else if(tanke.direct==3){//左  
                    cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置   
                }  
  
                cxt.closePath();      
                cxt.stroke();  
            }  
            break;  
        }  
    }  
  
    drawTanke(hero);  
      
    function getCommand(){  
        var code=event.keyCode;  
        cxt.clearRect(0,0,500,500);  
        switch(code){  
            case 87:  
                hero.moveUp();  
                break;  
            case 68:  
                hero.moveRight();  
                break;  
            case 83:  
                hero.moveDown();   
                break;  
            case 65:  
                hero.moveLeft();  
                break;  
        }  
        cxt.clearRect(0,0,500,500);  
      
        drawTanke(hero);  
    }  
      
</script>  
</body>  
</html>
复制代码

也可以将hero的定义，和画坦克的函数抽取出来放到一个文件里面让HTML界面的逻辑更加清晰，如下

复制代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8"/>  
</head>  
  
<body  onkeydown="getCommand()">  
<h1>html5-经典的坦克大战</h1>  
<canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">  
</canvas>  
<script type="text/javascript" src="tankeGame.js"></script>  
<script type="text/javascript">  
    //准备工作  
    //得到画布  
    var  canvas1=document.getElementById("tankeMap");  
    //得到上下文引用对象，你可以理解成画笔  
    var cxt=canvas1.getContext("2d");  
      
    //定义一个坦克  
    //数字0表示向上 数字1表示右 数字2表示下 数字3表示左  
    var  hero=new Hero(130,30,0);  
  
    drawTanke(hero);  
      
    function getCommand(){  
        var code=event.keyCode;  
        cxt.clearRect(0,0,500,500);  
        switch(code){  
            case 87:  
                hero.moveUp();  
                break;  
            case 68:  
                hero.moveRight();  
                break;  
            case 83:  
                hero.moveDown();   
                break;  
            case 65:  
                hero.moveLeft();  
                break;  
        }  
        cxt.clearRect(0,0,500,500);  
      
        drawTanke(hero);  
    }  
      
</script>  
</body>  
</html>
复制代码

 

posted @   xh_Blog  阅读(1692)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae