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