坦克大战一完成坦克上下左右移动的功能

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>  

<body  onkeydown="getCommand()">

<h1>html5-经典的坦克大战</h1>

<canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">

</canvas>

<script type="text/javascript">

    //定义一个hero类

    //x、y表示初始坐标，direct表示方向

    function  Hero(x,y,direct){

        this.x=x;

        this.y=y;

        this.direct=direct;

        this.speed=5;  

        this.moveUp=function(){

            this.y-=this.speed;

            this.direct=0;

        }

        this.moveDown=function(){

            this.y+=this.speed;

            this.direct=2;

        }

        this.moveRight=function(){

            this.x+=this.speed;

            this.direct=1;

        }

        this.moveLeft=function(){

            this.x-=this.speed;

            this.direct=3;

        }

    }  

    //准备工作

    //得到画布

    var  canvas1=document.getElementById("tankeMap");

    //得到上下文引用对象，你可以理解成画笔

    var cxt=canvas1.getContext("2d");  

    //定义一个坦克

    //数字0表示向上 数字1表示右 数字2表示下 数字3表示左

    var  hero=new Hero(130,30,0);  

    //把创建坦克的方法封装为一个对象

    //该函数可以画自己的坦克，也可以画敌人的坦克

    //tanke就是一个对象

    function  drawTanke(tanke){

        //坦克的方向

        switch(tanke.direct){

            case 0:

            case 2:

            {//上

                //画出自己的坦克设置颜色

                cxt.fillStyle="#00A6BD";

                cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮

                cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮

                cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体  

                //画中间的圆形的炮筒体

                cxt.fillStyle="#00A6BD";

                cxt.beginPath();

                cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);

                cxt.closePath();

                cxt.fill();  

                //画出炮筒

                cxt.strokeStyle="#00A6BD";

                //cxt.fillStyle="#FFD972";

                cxt.lineWidth=1.9;

                cxt.beginPath();

                cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置

                if(tanke.direct==0){

                    cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置

                }else if(tanke.direct==2){

                    cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置

                }

                cxt.closePath();

                cxt.stroke();

            }

            break;

            case 1:

            case 3:

            {//右

                //画出自己的坦克设置颜色

                cxt.fillStyle="#00A6BD";

                cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮

                cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮

                cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体  

                //画中间的圆形的炮筒体

                cxt.fillStyle="#00A6BD";

                cxt.beginPath();

                cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);

                cxt.closePath();

                cxt.fill();  

                //画出炮筒

                cxt.strokeStyle="#00A6BD";

                //cxt.fillStyle="#FFD972";

                cxt.lineWidth=1.9;

                cxt.beginPath();

                cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置

                if(tanke.direct==1){//右

                    cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置

                }else if(tanke.direct==3){//左

                    cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置

                }  

                cxt.closePath();

                cxt.stroke();

            }

            break;

        }

    }  

    drawTanke(hero);  

    function getCommand(){

        var code=event.keyCode;

        cxt.clearRect(0,0,500,500);

        switch(code){

            case 87:

                hero.moveUp();

                break;

            case 68:

                hero.moveRight();

                break;

            case 83:

                hero.moveDown();

                break;

            case 65:

                hero.moveLeft();

                break;

        }

        cxt.clearRect(0,0,500,500);  

        drawTanke(hero);

    }  

</script>

</body>

</html>

也可以将hero的定义，和画坦克的函数抽取出来放到一个文件里面让HTML界面的逻辑更加清晰，如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>  

<body  onkeydown="getCommand()">

<h1>html5-经典的坦克大战</h1>

<canvas id="tankeMap" width="500px"  height="500px"  style="background-color:black">

</canvas>

<script type="text/javascript" src="tankeGame.js"></script>

<script type="text/javascript">

    //准备工作

    //得到画布

    var  canvas1=document.getElementById("tankeMap");

    //得到上下文引用对象，你可以理解成画笔

    var cxt=canvas1.getContext("2d");  

    //定义一个坦克

    //数字0表示向上 数字1表示右 数字2表示下 数字3表示左

    var  hero=new Hero(130,30,0);  

    drawTanke(hero);  

    function getCommand(){

        var code=event.keyCode;

        cxt.clearRect(0,0,500,500);

        switch(code){

            case 87:

                hero.moveUp();

                break;

            case 68:

                hero.moveRight();

                break;

            case 83:

                hero.moveDown();

                break;

            case 65:

                hero.moveLeft();

                break;

        }

        cxt.clearRect(0,0,500,500);  

        drawTanke(hero);

    }  

</script>

</body>

</html>

HTML5-坦克大战一完成坦克上下左右移动的功能（一）的更多相关文章

  1. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  2. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测下

    上篇我们完成了地图的信息获取和碰撞检测,这篇我们整合到程序中. 在这之前我们改造一下Tank类,使它更加模块化,共容易理解: 1.改造后的Tank类声明如下: class Tank : public ...

  3. cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示

    1.先定义坦克的一些属性 class Tank : public CCSprite { public : Tank(); ~Tank(); static Tank* createTankWithTan ...

  4. Java坦克大战 (七) 之图片版

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  5. HTML5坦克大战（韩顺平版本）

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

  6. html5制作坦克大战

    全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...

  7. 《HTML5经典坦克大战》游戏（代码）

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  8. 小强的HTML5移动开发之路（7）——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

  9. 基于HTML5坦克大战游戏简化版

    之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...

随机推荐

  1. 主外键多表查询demo

    https://www.cnblogs.com/DragonFire/p/6949767.html mySQL练习-主外键多表查询 MySQL练习-主外键多表查询 练习: 1.建立表关系: 请创建如下 ...

  2. [C/C++] C/C++中数字与字符串之间的转换

    在C中: 方法: 1.C标准库中的sprintf, sscanf 2.C标准库还提供了 atoi, atof, atol, atoll(C++11标准) 函数将字符串转换成int,double, lo ...

  3. 洛谷 P3084 [USACO13OPEN]照片Photo 解题报告

    [USACO13OPEN]照片Photo 题目描述 农夫约翰决定给站在一条线上的\(N(1 \le N \le 200,000)\)头奶牛制作一张全家福照片,\(N\)头奶牛编号\(1\)到\(N\) ...

  4. 洛谷 P2501 [HAOI2006]数字序列 解题报告

    P2501 [HAOI2006]数字序列 题目描述 现在我们有一个长度为n的整数序列A.但是它太不好看了,于是我们希望把它变成一个单调严格上升的序列.但是不希望改变过多的数,也不希望改变的幅度太大. ...

  5. [SCOI2012]喵星球上的点名——堪称十种方法做的题

    题意: 给你N个串对,M个询问串,对每个询问串求是多少串对的子串(在串对的某一个中作为子串),以及每个串对最终是包含了多少询问串 方法众多.. 可谓字符串家族八仙过海各显神通. 复杂度不尽相同,O(n ...

  6. JavaScript的大括号的语义

    Javascript中大括号"{}"有四种语义作用: 语义1. 组织复合语句,这是最常见的: view source   print? 1 if( condition ) { 2 ...

  7. npm install 权限的问题

    用ctrl+r切换到对象的目录,以管理圆的身份执行 npm cache clean first. If that doesn’t fix things, take a look in %APPDATA ...

  8. C. Annoying Present SB题

    C. Annoying Present time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. P2765 魔术球问题（网络流24题）

    题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2个相邻球的编号之和为完全 ...

  10. php文件上传错误代码

    注意: 1.上传文件的时候,在html里面的form表单一定要标注:enctype='multipart/form-data' 2.有种说法,要求一定要在form表单里面,在file前面加上隐藏域如: ...