<!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. Python学习笔记014——生成器Generator
			
    1 生成器定义 在Python中,一边循环一边计算的机制,称之为生成器(generator). 生成器是一个迭代器. 含有yield语句的函数是生成器函数,该函数被调用时返回一个生成器对象(yield ...
    
			
    2. 
						
  2. Chrome 错误代码：ERR_UNSAFE_PORT
			
    最近在用Nginx发布多个站点测试,使用了87.88端口, 88端口访问正常,87端口就怎么也访问不了, 点击更多,提示错误代码:ERR_UNSAFE_PORT 不安全的端口?尼玛就只靠端口就能解决不 ...
    
			
    3. 
						
  3. 利用ichart绘制网页图表
			
    首先,最好的教程在这里:ichartjs 有了这个网站,要绘制网页图表简直方便愉快! 接下来说一下使用方法~~~ 进入网站,点击在线设计器 在线设计器的使用方法就不说了,摸索一下就会了!关键在于两个地 ...
    
			
    4. 
						
  4. Ubuntu下python两个版本的切换
			
    最近在Ubuntu16.04安装了python3.5还有系统自带的python2.7.13,总结一下不同版本的切换问题. alias:别名 bashrc:个人配置文件 一.修改Python版本(针对用 ...
    
			
    5. 
						
  5. iptables清空链的规则
			
    建立iptables时,首先需要情况系统默认的规则(如果有),这样能够保证iptables按照自己的想法运行. iptables -F   //清空链规则,但不会情况子链,也不会清空表的默认策略 ip ...
    
			
    6. 
						
  6. 【Android】7.0 第7章 简单适配器和布局--本章示例主界面
			
    分类:C#.Android.VS2015: 创建日期:2016-02-09 修改日期:2016-02-13 一.在AssemblyInfo.cs文件中配置应用程序清单 前面的章节我们说过,除了在And ...
    
			
    7. 
						
  7. StarUML使用说明-指导手册
			
    1.综述 StarUML是一种生成类图和其他类型的统一建模语言(UML)图表的工具.这是一个用Java语言描述的创建类图的简明手册. StarUML(简称SU),是一种创建UML类图,并能够自动生成J ...
    
			
    8. 
						
  8. jquery50个代码段
			
    1. 如何创建嵌套的过滤器 ? 1 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class ...
    
			
    9. 
						
  9. Oracle update 日期
			
    UPDATE Sf_Msg_Monthly SET smm_Closed_Time = to_date('2011-12-30 11:54:30','yyyy-MM-dd HH24:MI:SS') ;
    
			
    10. 
						
  10. eclipse新建tomcat server但是总是报404的解决方法
			
    今天在eclipse中新建了tomcat server,但是由于一些配置出了问题,导致总是出现404报错,具体情况如下 症状: tomcat在eclipse里面能正常启动,而在浏览器中访问http:/ ...
    
			
    11.