HTML5坦克大战（2）绘制坦克复习
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）绘制坦克复习的更多相关文章
- 【 java版坦克大战--事件处理】 坦克动起来了
折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ① paint ...
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下
上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public ...
- cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示
1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...
- HTML坦克大战学习02---坦克动起来
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- Java坦克大战 (七) 之图片版
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- HTML5-坦克大战一完成坦克上下左右移动的功能（一）
坦克大战一完成坦克上下左右移动的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- HTML5坦克大战（1）绘制坦克
坦克尺寸如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
- HTML5坦克大战（韩顺平版本）
HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...
随机推荐
- Django 工作流程
一.Django 工作流程 在开始具体的代码之旅前,先来宏观地看下Django是如何处理Http Resquest的,如下图: 假设你已经在浏览器输入了 http://127.0.0.1:8000/p ...
- 【Spark】RDD操作具体解释2——值型Transformation算子
处理数据类型为Value型的Transformation算子能够依据RDD变换算子的输入分区与输出分区关系分为下面几种类型: 1)输入分区与输出分区一对一型 2)输入分区与输出分区多对一型 3)输入分 ...
- 常用class 总结
清除浮动 // Clearfix @mixin clearfix { &:before, &:after { content: " "; // 1 display: ...
- Android开发之应用程序更新实现
近期给项目app做升级.对Android应用程序更新稍有研究,分享一下我的心得. 既然是更新,那么一定是要联网和下载的.所以联网和存储訪问权限时一定要有的: <!-- 权限申请 --> ...
- 浅谈Volatile与多线程
标题:浅谈Volatile与多线程 2011-04-19 22:49:17 最近看的比较杂,摘了一些人的笔记!随着多核的日益普及,越来越多的程序将通过多线程并行化的方式来提升性能.然而,编写正 ...
- Excle中range的一些用法
以下是一些range的简单用法 Sub aa() '-=============================================== '给B列设置填充颜色为黄色 Range(" ...
- 如何监控MYSQL消耗服务器资源
http://258xiaolei-sina-com.iteye.com/blog/764665 启动Mysql时加参数--log-slow-queries来记录执行时间超过long_query_ti ...
- iOS 仿支付宝密码支付
代码地址如下:http://www.demodashi.com/demo/11484.html 一.准备工作 xcode 主要实现输入密码的时候不可见 二.程序实现 实现思路怎样 在支付宝输入密码的时 ...
- Js随机生成指定长度字符串
function a(a) { var d, e, b = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&q ...
- Python-PyQt4学习笔记
1.每个应用必须创建一个 QtGui.QApplication(sys.argv), 此时 QtGui.qApp 为此应用的实例 app = QtGui.QApplication(sys.argv) ...