坦克尺寸如下:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坦克大战</title>
</head>
<body onkeydown="tankMove()">
<canvas id="canvas" width="" height="" style="border:1px solid red; display:block; margin:50px auto;">浏览器不支持</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//构造方法,创建一个坦克类
function Tank(x, y, direct, speed) {
this.x = x;
this.y = y;
this.direct = direct;
this.speed = speed;
this.moveUp = function () {
this.y -= this.speed;
}
this.moveDown = function () {
this.y += this.speed;
}
this.moveLeft = function () {
this.x -= this.speed;
}
this.moveRight = function () {
this.x += this.speed;
}
}
var hero = new Tank(, , , );
function drawTank(tank) {
switch (tank.direct) {
case :
case :
//向左,向右
//清空画布
context.clearRect(, , canvas.width, canvas.height);
//开始画坦克
//上轮
context.fillStyle = "red";
context.fillRect(hero.x, hero.y, , );
context.fill();
//下轮
context.fillRect(hero.x, hero.y + , , );
context.fill();
//中间
context.fillStyle = "green";
context.fillRect(hero.x + , hero.y + , , );
context.fill();
//盖子
context.beginPath()//加个开始,不然炮筒会粘连
context.fillStyle = "blue";
context.arc(hero.x + , hero.y + , , , * Math.PI);
context.fill();
context.closePath();
//炮筒
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = "0.5";
context.moveTo(hero.x + , hero.y + );
if (tank.direct == ) {
context.lineTo(hero.x, hero.y + );
} else if (tank.direct == ) {
context.lineTo(hero.x + , hero.y + );
}
context.stroke();
context.closePath();
break;
case :
case :
//向上,向下
//清空画布
context.clearRect(, , canvas.width, canvas.height);
//开始画坦克
//左轮
context.fillStyle = "red";
context.fillRect(hero.x, hero.y, , );
context.fill();
//右轮
context.fillRect(hero.x + , hero.y, , );
context.fill();
//中间
context.fillStyle = "green";
context.fillRect(hero.x + , hero.y + , , );
context.fill();
//盖子
context.beginPath()//加个开始,不然炮筒会粘连
context.fillStyle = "blue";
context.arc(hero.x + , hero.y + , , , * Math.PI);
context.fill();
//炮筒
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = "0.5";
context.moveTo(hero.x + , hero.y + );
if (tank.direct == ) {
context.lineTo(hero.x + , hero.y);
} else if (tank.direct == ) {
context.lineTo(hero.x + , hero.y + );
}
context.stroke();
break;
default: } }
function tankMove() {
switch (event.keyCode) {
case ://左A
hero.direct = ;
hero.moveLeft();
break;//不要忘记break!
case ://右D
hero.direct = ;
hero.moveRight();
break;
case ://上W
hero.direct = ;
hero.moveUp();
break;
case ://下S
hero.direct = ;
hero.moveDown();
break;
//68 87 83
default:
}
drawTank(hero);
//alert(event.keyCode);
}
drawTank(hero);
</script>
</body>
</html>

HTML5坦克大战(1)绘制坦克的更多相关文章

  1. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  2. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下

    上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public ...

  3. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示

    1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...

  4. HTML坦克大战学习02---坦克动起来

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. Java坦克大战 (七) 之图片版

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  6. HTML5-坦克大战一完成坦克上下左右移动的功能(一)

    坦克大战一完成坦克上下左右移动的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. HTML5坦克大战(2)绘制坦克复习

    html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  8. 小强的HTML5移动开发之路(7)——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

  9. HTML5坦克大战(韩顺平版本)

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

随机推荐

  1. 使用weinre调试手机页面

    阅读目录 介绍Weinre 安装Weinre 通过Weinre调试页面 启动target 介绍Weinre Weinre(Web Inspector Remote),是一种远程调试工具.功能与Fire ...

  2. ylbtech-LanguageSamples-Hello World

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Hello World 1.A,示例(Sample) 返回顶部 “Hello World ...

  3. http://my.oschina.net/China2012/blog/178655

    http://my.oschina.net/China2012/blog/178655 http://git.oschina.net/huangyong/smart-framework

  4. Android面试,简要介绍一下asynctask和handler的优缺点

    1 )AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以 ...

  5. Android-经常涉及到的权限

    Android中配置权限的方法: 在AndroidMainFest.xml中加上以下代码 Android中一些经常涉及到的权限: 添加WiFi以及访问网络的权限: <uses-permissio ...

  6. 微博轻量级RPC框架Motan正式开源:支撑千亿调用

    支撑微博千亿调用的轻量级 RPC 框架 Motan 正式开源了,项目地址为https://github.com/weibocom/motan. 微博轻量级RPC框架Motan正式开源 Motan 是微 ...

  7. MSS与MTU的关系

    MSS与MTU的关系 TU:maximum transmission unit,最大传输单元,由硬件规定,如以太网的MTU为1500字节. MSS:maximum segment size,最大分节大 ...

  8. Android Studio修改项目名和包名

    为了提高开发效率,有时候需要使用现有的一些开源项目,记录一下自己修改项目名和包名的方法. 1.首先,修改包名(清单文件里找), ①展开所有包 ②选中想要修改的包,shift+F6(也可右键Refact ...

  9. python中好用的pip

    1.windows/linux 下安装pip见上篇博客 http://www.cnblogs.com/Edwardzhao/p/5856924.html 2.好用的方法 pip install xxx ...

  10. Python中生成(写入数据到)Excel文件

      转自http://www.crifan.com/export_data_to_excel_file_in_python/ 在Python中,如何将数据,导出为Excel,即把数据写入到新生成的ex ...