<!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---坦克动起来的更多相关文章
	

    
								
  1. 坦克大战学习笔记-TankWar
		
    最近学习了马士兵老师直播的单机版坦克大战,模仿的做了一个,整理一下思路记录下来,项目git地址:https://github.com/zhuchangli/TankWar/tree/master 视频 ...
    
		
    2. 
						
  2. 【 java版坦克大战--事件处理】 坦克动起来了
		
    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...
    
		
    3. 
						
  3. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下
		
    上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public  ...
    
		
    4. 
						
  4. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示
		
    1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...
    
		
    5. 
						
  5. HTML坦克大战学习01
		
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
    
		
    6. 
						
  6. C# 坦克大战学习总结
		
    1.学会用Resource管理资源 添加资源 在properties下的Resource.resx添加资源 使用资源 工程名.Properties.Resource.资源名 实际本质,是一个流. 2. ...
    
		
    7. 
						
  7. Java坦克大战 (七) 之图片版
		
    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...
    
		
    8. 
						
  8. HTML5-坦克大战一完成坦克上下左右移动的功能（一）
		
    坦克大战一完成坦克上下左右移动的功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
    
		
    9. 
						
  9. 阶段学习总结-坦克大战（2D）案例
		
    这是前几天学习的案例,这两天学习了NGUI和UGUI,被UI搞得很烦躁,但是今天还是将前几天学习的坦克大战总结以下.这个游戏是小时候的经典红白机游戏的复刻,见截图: 一.游戏物体 游戏中包含地图元素( ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JMeter ----内置函数列表
			
    Jmeter有两种类型的函数: 用户定义的静态值(或变量) 内置函数 用户定义的静态值允许用户定义变量时被替换为静态的值测试树编译并提交运行.需要注意的是,变量目前无法嵌套,即${Var${N}}不起 ...
    
			
    2. 
						
  2. [ASP.NET]HttpCookieCollection to CookieCollection的最简单方法
			
    http://www.cnblogs.com/dudu/archive/2012/12/06/httpcookiecollection-to-cookiecollection.html
    
			
    3. 
						
  3. OGG_GoldenGate数据库配置DDL同步（案例）
			
    2014-03-08 Created By BaoXinjian
    
			
    4. 
						
  4. android侧滑效果，SlidingMenu配置
			
    最近开始做点东西,需要用到android activity侧滑的效果.感觉配置起来还是有点小麻烦,总结一下以便回顾. 需要的东西: 1.SlidingMenu项目:点击打开链接 2.ActionBar ...
    
			
    5. 
						
  5. [转]HSpice仿真
			
    一.HSPICE基础知识Avant! Start-Hspice(现在属于Synopsys公司)是IC设计中最常使用的电路仿真工具,是目前业界使用最为广泛的IC设计工具,甚至可以说是事实上的标准.目前, ...
    
			
    6. 
						
  6. RichTextBox指定全部文字显示不同颜色及部分文字高亮颜色显示
			
    指定全部显示不同颜色: public void SetTextContent(string text, ColorEnum color) { Font font = , FontStyle.Bold) ...
    
			
    7. 
						
  7. java中如何设置下载文件
			
    如果想要设置某一url为下载文件的方法如下 需要设置文件响应类型,使用response.setContentType,比如jpeg格式的图片.如果想要访问该页面时出现下载保存的窗口,使用respons ...
    
			
    8. 
						
  8. unity 在Game视图中显示Gizmos
			
    自己画的Gizmos要想在Game视图中能看到,需要把Game视图窗口右上角的"Gizmos"按钮点下去.如图: 比如,下面代码以角色的capsuleCollider中心为中心画一 ...
    
			
    9. 
						
  9. 《Effective Java》读书笔记六（方法）
			
    No38 检查参数的有效性 对于公有的方法,要用Javadoc的@throws标签(tag)在文档中说明违反参数值时会抛出的异常.这样的异常通常为IllegalArgumentException.In ...
    
			
    10. 
						
  10. 算法练习：最小生成树 (Minimum Spanning Tree)
			
    (注:此贴是为了回答同事提出的一个问题而匆匆写就,算法代码只求得出答案为目的,效率方面还有很大的改进空间) 最小生成树是指对于给定的带权无向图,需要生成一个总权重最小的连通图.其问题描述及算法可以详见 ...
    
			
    11.