HTML5坦克大战（1）绘制坦克
坦克尺寸如下：
<!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）绘制坦克的更多相关文章
- 【 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坦克大战（2）绘制坦克复习
html代码: <!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初学者来说, ...
随机推荐
- 一、Instrument之Core Animation工具
一.Instrument 三个方法: (1).按下Command + I打开Instrument; (2).Xcode->product->profile; (3).Xcode->O ...
- [转]ASP.NET Core 1.0: Using Entity Framework Core 1.0 - Transaction
本文转自:http://blog.csdn.net/alvachien/article/details/51576961 跟Entity Framework之前的版本不同,Class DbContex ...
- python wheel 包命名规则和 abi 兼容
wheel 包的命名规定 wheel 包的命名格式为 {distribution}-{version}(-{build tag})?-{python tag}-{abi tag}-{platform ...
- linux中backticks反引号的作用
This is a backtick. A backtick is not a quotation sign. It has a very special meaning. Everything yo ...
- （转）Vue2.0 推荐环境
Vue2.0 新手完全填坑攻略——从环境搭建到发布 http://www.jianshu.com/p/5ba253651c3b Jinkey原创感谢 showonne.yubang 技术指导Demo ...
- [Algorithm] Find Nth smallest value from Array
Q1: Find the smallest value from array: function findMin(arr) { let min = arr[0]; for (let i = 1; i ...
- 爪哇国新游记之十四----初试JDBC
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- Kolla 4.0.0环境下VIP无法迁移问题排查
VRRP无法切换VIP的问题分析: Keepalived的配置文件:/etc/kolla/keepalived/keepalived.conf当中,nopreempt选项是影响切换的因素之一,另一个因 ...
- iOS key value coding kvc在接收json数据与 model封装中的使用
iOS key value coding kvc在接收json数据与 model封装中的使用 使用 kvc 能够极大的简化代码工作,及以后的接口维护工作: 1:先创建MovieModel类.h和 . ...
- iOS NSFileManager对沙盒文件及目录添加删除操作
iOS 使用 NSFileManager对沙盒里面的文件和目录,增加,修改,删除操作: - (void)viewDidLoad { [super viewDidLoad]; self.title = ...