html代码:

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坦克大战</title>
<script src="tank.js"></script>
</head>
<body onkeydown="moveTank(hero)">
<canvas id="canvas" width="" height="" style="border:1px solid red; display:block; margin: 50px auto; background-color:black;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var hero = new Tank(, , , ); //创建hero对象
var hero = new Tank(, , , ); function moveTank(tank) {
//上下左右移动坦克
switch (event.keyCode) {
case ://左
tank.direct = ;
tank.moveLeft();
break;
case ://右
tank.direct = ;
tank.moveRight();
break;
case ://上
tank.direct = ;
tank.moveUp();
break;
case ://下
tank.direct = ;
tank.moveDown();
break;
default:
}
drawTank(hero);
} drawTank(hero);
</script>
</body>
</html>

JavaScript代码:

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;
}
}
function drawTank(tank) {
//画坦克
switch (tank.direct) {
case :
case :
//向上,向下
//清屏
context.clearRect(, , canvas.width, canvas.height);
//画坦克
//画轮子和身体
context.beginPath();
context.fillStyle = "red";
context.fillRect(tank.x, tank.y, , );//左轮
context.fillRect(tank.x + , tank.y + , , );//身体
context.fillRect(tank.x + , tank.y, , );//右轮
context.fill();
context.closePath();
//画脑袋
context.beginPath();
context.fillStyle = "blue";
context.arc(tank.x + , tank.y + , , , * Math.PI);
context.fill();
context.closePath();
//画炮筒
context.beginPath();
context.strokeStyle = "yellow";
context.lineWidth = ;
context.moveTo(tank.x + , tank.y + );
if (tank.direct == ) {
context.lineTo(tank.x + , tank.y);
} else if (tank.direct == ) {
context.lineTo(tank.x + , tank.y + );
}
context.stroke();
context.fill();
context.closePath();
break;
case :
case :
//向左,向右
//清屏
context.clearRect(, , canvas.width, canvas.height);
//画坦克
//画轮子和身体
context.beginPath();
context.fillStyle = "red";
context.fillRect(tank.x, tank.y, , );//左轮
context.fillRect(tank.x + , tank.y + , , );//身体
context.fillRect(tank.x, tank.y + , , );//右轮
context.fill();
context.closePath();
//画脑袋
context.beginPath();
context.fillStyle = "blue";
context.arc(tank.x + , tank.y + , , , * Math.PI);
context.fill();
context.closePath();
//画炮筒
context.beginPath();
context.strokeStyle = "yellow";
context.lineWidth = ;
context.moveTo(tank.x + , tank.y + );
if (tank.direct == ) {
context.lineTo(tank.x + , tank.y + );
} else if (tank.direct == ) {
context.lineTo(tank.x, tank.y + );
}
context.stroke();
context.fill();
context.closePath();
break;
default:
}
}

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

  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坦克大战(1)绘制坦克

    坦克尺寸如下: <!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. OSG立体模式下动态修改相机远近裁剪面的实现

    1. 非立体模式下动态修改相机远近裁剪面 class GLB_DLLCLASS_EXPORT CGlbGlobeClipHandler : public osg::NodeCallback    { ...

  2. Flex的 Event中属性currentTarget与target的差别

    Flex的 Event中属性currentTarget与target的差别 1.差别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  3. OO软件设计说明书结构

    1 概述   系统简述.软件设计目标.参考资料.修订版本记录   这部分论述整个系统的设计目标,明确地说明哪些功能是系统决定实现而哪些时不准备实现的.同时,对于非功能性的需求例如性能.可用性等,亦需提 ...

  4. 【实践】关于p 标签内嵌 p标签的bug

    项目中遇到了一点小问题: 是这样的,在输入框包裹元素 p标签中想内嵌一个p 标签用作显示提示字符,谁知发生了一下一幕: 页面结构: <p class="modify-info-wrap ...

  5. 转: 学ppt的网址与素材

    转:http://www.jianshu.com/p/89b261e0b8f6 你说你要学ppt,可你知道这些吗?   之前身边的同学总说做PPT很难,每次做ppt都头疼,我都对此很不屑,直到前一段开 ...

  6. DevExpress 编译成功的 dll

    DevExpress 编译成功的 dll 附注册方法 其它的有些文件没有,如: DevExpress.EasyTest 这个程序集找不到 希望有的朋友可以分享一下, 安装程序集 通常,将程序集安装到G ...

  7. Node.js meitulu图片批量下载爬虫1.051

    原有1.05版程序没有断点续传模式,现在在最近程序基础上改写一版1.051. //====================================================== // m ...

  8. Python工作日类库Busines Holiday介绍

    引言: 在日常工作中.常常会碰到相似的场景.须要计算在某个时间段内的工作日以及确定某天是否为工作日,这里的介绍的工具包将很好的解决问题. 1. 工具包Business Holiday介绍 其提供了很e ...

  9. AngularJS监听DOM加载完毕

    直接上代码: Module.directive('renderFinish', function ($timeout) { //renderFinish自定义指令 return { restrict: ...

  10. 解决ios7.0 以后自己定义导航栏左边button靠右的问题

    1.自己定义button //左button UIButton *leftBtn = [[UIButton , , , )]; [leftBtn addTarget:self action:@sele ...