坦克大战一完成坦克上下左右移动的功能
<!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>