07-html5游戏坦克大战第三战（坦克移动）

来源：互联网发布：为什么雷姆受欢迎知乎编辑：程序博客网时间：2024/04/20 12:35

<!--让浏览器指到这是一个html网页--><!DOCTYPE HTML><html><head><title>坦克大战</title><!--网页的编码--><meta charset="GBK" /><script type="text/javascript" src="tank.js"></script></head><body onkeydown="getCommand();"><h1>html5经典坦克大战</h1><!--创建一个画布,坦克大战的战场--><canvas id="tankMap" width="400px" height="300px"style="background-color:black"></canvas><script type="text/javascript">//得到画布var canvas1 = document.getElementById("tankMap");//得到画笔var cxt = canvas1.getContext("2d");var hero = new Hero(40, 40, 0);drawTank(hero);///////////////////////////////////////监听按键开始//////////////////////////////////function getCommand() {//当按下键的时候，传来even对象var code = event.keyCode;//ascii码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, 400, 300);drawTank(hero);}///////////////////////////////////////监听按键结束//////////////////////////////////</script></body></html>

tank.js

/////////////////////////////////////////创建Hreo类开始///////////////////////定义一个Hero类function Hero(x, y, direct) {this.x = x;this.y = y;this.speed = 1;this.direct = direct;// 将移动坦克封装为函数this.moveUp = function() {this.y -= this.speed;this.direct = 0;// 向上转};this.moveRight = function() {this.x += this.speed;this.direct = 1;// 向右转};this.moveDown = function() {this.y += this.speed;this.direct = 2;// 向下转};this.moveLeft = function() {this.x -= this.speed;this.direct = 3;// 向左转};}// ///////////////////////////////////////创建Hreo类结束/////////////////////// /////////////////////////////////////画坦克开始//////////////////////////////////// 把绘制坦克封装成一个函数function drawTank(tank) {switch (tank.direct) {case 0:case 2:// 设置齿轮的颜色cxt.fillStyle = "#BA9658";// 画出左边矩形cxt.fillRect(tank.x, tank.y, 5, 30);// 画出右边矩形cxt.fillRect(tank.x + 15, tank.y, 5, 30);// 画出中间矩形cxt.fillRect(tank.x + 6, tank.y + 5, 8, 20);// 画出坦克盖子cxt.fillStyle = "#FEF26E";cxt.arc(tank.x + 10, tank.y + 15, 4, 0, 360, true);cxt.fill();// 画出炮筒// 设置炮筒的颜色cxt.strokeStyle = "#FEF26E";// 设置线条的宽度cxt.lineWidth = 1.5;cxt.beginPath();cxt.moveTo(tank.x + 10, tank.y + 15);// 判断炮筒的方向if (hero.direct == 0) {cxt.lineTo(tank.x + 10, tank.y);} else if (hero.direct == 2) {cxt.lineTo(tank.x + 10, tank.y + 30);}cxt.closePath();cxt.stroke();break;case 1:case 3:// 设置齿轮的颜色cxt.fillStyle = "#BA9658";// 画出左边矩形cxt.fillRect(tank.x, tank.y, 30, 5);// 画出右边矩形cxt.fillRect(tank.x, tank.y + 15, 30, 5);// 画出中间矩形cxt.fillRect(tank.x + 5, tank.y + 6, 20, 8);// 画出坦克盖子cxt.fillStyle = "#FEF26E";cxt.arc(tank.x + 15, tank.y + 10, 4, 0, 360, true);cxt.fill();// 画出炮筒// 设置炮筒的颜色cxt.strokeStyle = "#FEF26E";// 设置线条的宽度cxt.lineWidth = 1.5;cxt.beginPath();cxt.moveTo(tank.x + 15, tank.y + 10);// 判断炮筒的方向if (hero.direct == 1) {cxt.lineTo(tank.x + 30, tank.y + 10);} else if (hero.direct == 3) {cxt.lineTo(tank.x, tank.y + 10);}cxt.closePath();cxt.stroke();break;}}// /////////////////////////////////////画坦克结束//////////////////////////////////