HTML坦克大战学习02---坦克动起来
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title> </head>
<body onkeydown="getCommand()">
<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");
//定义一个Hero类
//x表示横坐标,主表示纵坐标
function Hero(x, y, direct, speed) {
this.x = x;
this.y = y;
this.speed = speed;
this.direct = direct; //向上
this.moveUp = function () {
this.y -= this.speed;
}
//向右
this.moveRight = function () {
this.x += this.speed;
}
//向下
this.moveDown = function () {
this.y += this.speed;
}
//向左移
this.moveLeft = function () {
this.x -= this.speed;
} }
//我的坦克 w表示向上,d表示向右 s表示向下 a表示向左 var hero = new Hero(, , , );
//先画出坦克
darwTank(hero); //绘制坦克对象
function darwTank(hero) {
//画出坦克
cxt.fillStyle = "#DED284";
//画出左面
cxt.fillRect(hero.x, hero.y, , );
//画出右边
cxt.fillRect(hero.x + , hero.y, , );
//中间矩形
cxt.fillRect(hero.x + , hero.y + , , );
//画出坦克的盖子
cxt.fillStyle = "#FFD972";
cxt.arc(hero.x + , hero.y + , , , , true);
cxt.fill();
//车出炮线
cxt.strokeStyle = "#FFD972";
cxt.lineWidth = 1.5;
cxt.beginPath(); cxt.moveTo(hero.x + , hero.y + );
cxt.lineTo(hero.x + , hero.y);
cxt.closePath();
cxt.stroke();
} //接收键盘命令
function getCommand() { var code = event.keyCode;
//alert(code);
switch (code) {
case :
hero.moveUp();
break;
case :
hero.moveRight();
break;
case :
hero.moveDown();
break;
case :
hero.moveLeft();
break;
}
cxt.clearRect(, , , );
darwTank(hero);
}
</script>
</body>
</html>
HTML坦克大战学习02---坦克动起来的更多相关文章
- 坦克大战学习笔记-TankWar
最近学习了马士兵老师直播的单机版坦克大战,模仿的做了一个,整理一下思路记录下来,项目git地址:https://github.com/zhuchangli/TankWar/tree/master 视频 ...
- 【 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坦克大战学习01
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- C# 坦克大战学习总结
1.学会用Resource管理资源 添加资源 在properties下的Resource.resx添加资源 使用资源 工程名.Properties.Resource.资源名 实际本质,是一个流. 2. ...
- Java坦克大战 (七) 之图片版
本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
- HTML5-坦克大战一完成坦克上下左右移动的功能(一)
坦克大战一完成坦克上下左右移动的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 阶段学习总结-坦克大战(2D)案例
这是前几天学习的案例,这两天学习了NGUI和UGUI,被UI搞得很烦躁,但是今天还是将前几天学习的坦克大战总结以下.这个游戏是小时候的经典红白机游戏的复刻,见截图: 一.游戏物体 游戏中包含地图元素( ...
随机推荐
- pythonl学习笔记——爬虫的基本常识
1 robots协议 Robots协议(也称为爬虫协议.机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可 ...
- PLSQL_性能优化效能跟踪工具DBMS_PROFILER分析(案例)
2014-06-01 Created By BaoXinjian
- JS高级心法——作用域链
首先我们来看两个js中的代码: <script type="text/javascript"> var c=5; function t1(){ var d=6 f ...
- tp表单的提交与验证
一.控制器如下 引用use app\index\model\User; //注意模型类名不能和控制器类名相同 public function index(){ return $this->fet ...
- C#的MD5哈希值计算
MD5哈希值计算:(仅仅是记录一下) /// <summary> /// 获取字符串的MD5值 /// </summary> /// <param name=" ...
- [Jobdu] 题目1545:奇怪的连通图
题目描述: 已知一个无向带权图,求最小整数k.使仅使用权值小于等于k的边,节点1可以与节点n连通. 输入: 输入包含多组测试用例,每组测试用例的开头为一个整数n(1 <= n <= 100 ...
- e到底是什么?
e到底是什么? 今天看到一个下面这么一个简单的求极限问题- 一时恍惚了,为什么结果是e^m. 这个e是什么呢? 然后就百度了下,发现不少文章介绍这个e. 有几篇写得很赞 - An Intuitive ...
- 【Android】6.1 Toast(信息提示框)
分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 Toast用于向用户显示一些帮助或者提示信息.前面我们已经多次用到它,这里只是系统地将其总结一下,并演示它的各种基 ...
- cocos2d-x 数据存储
这一章中,我们从一个小小的金币数入手,讨论了数据持久化的话题.我们尽量使用引擎提供的数据存储方法,以最大可能地适应跨平台需求.这里介绍的存储方法本质上都是基于 XML 的,对于 1 MB 以下的存储规 ...
- iOS Emoji
iOS Emoji 前言:我比较喜欢有趣的东西,有一些有趣的小东西,可能不是多么多么牛逼,也可能不需要多高深的技巧,也不会为其他什么强大的功能而服务,但是有时候将很多有趣的小东西组合起来运用,比如在你 ...