运用面向对象的思想完成坦克的移动_HTML5网页游戏坦克大战08

2019-02-28 23:36|来源: 领悟书生

虽然在HTML5网页游戏坦克大战07:js事件处理机制及小球移动中小球已经可以移动了。在这一节,我们用面向对象的编程设计,实现让自己的坦克可以通过按键控制 w、d、s、a 键上右下左移动


坦克类

这个类有四个属性,x表示坦克的横坐标, y表示纵坐标, direct方向,speed表示速度,同时有上下左右移动的方法moveUp、moveRight、moveDown、moveLeft。

//定义一个Hero类
//x 表示坦克的 横坐标, y 表示纵坐标, direct 方向   
function Hero(x,y,direct){
 
    this.x=x;
    this.y=y;
    this.speed=1;
    this.direct=direct;
    //上移
    this.moveUp=function(){
        this.y-=this.speed;
        this.direct=0;
    }
    //向右
    this.moveRight=function(){
        this.x+=this.speed;
        this.direct=1;
    }
 
    //下移
    this.moveDown=function(){
        this.y+=this.speed;
        this.direct=2;
    }
    //左
    this.moveLeft=function(){
        this.x-=this.speed;
        this.direct=3;
    }
 
}

绘制坦克的方法

//绘制坦克
function drawTank(tank){
 
    //考虑方向
    switch(tank.direct){
 
    case 0: //上
    case 2:// 下
        //画出自己的坦克,使用前面的绘图技术
        //设置颜色
        cxt.fillStyle="#BA9658";
        //先画出左面的矩形
        cxt.fillRect(tank.x,tank.y,5,30);
        //画出右边的矩形(这时请大家思路->一定要一个参照点)
        cxt.fillRect(tank.x+15,tank.y,5,30);
        //画出中间矩形
        cxt.fillRect(tank.x+6,tank.y+5,8,20);
        //画出坦克的盖子
        cxt.fillStyle="#FEF26E";
        cxt.arc(tank.x+10,tank.y+15,4,0,360,true);
        cxt.fill();
        //画出炮筒(直线)
        cxt.strokeStyle="#FEF26E";
        //设置线条的宽度
        cxt.lineWidth=1.5;
        cxt.beginPath();
        cxt.moveTo(tank.x+10,tank.y+15);
         
        if(tank.direct==0){
            cxt.lineTo(tank.x+10,tank.y);
        }else if(tank.direct==2){
            cxt.lineTo(tank.x+10,tank.y+30);
        }
 
        cxt.closePath();
        cxt.stroke();
        break;
    case 1: //右和左
    case 3:
        //画出自己的坦克,使用前面的绘图技术
        //设置颜色
        cxt.fillStyle="#BA9658";
        //韩老师使用 先死--->后活 (初学者最好用这个方法)
        //先画出左面的矩形
        cxt.fillRect(tank.x,tank.y,30,5);
        //画出右边的矩形(这时请大家思路->一定要一个参照点)
        cxt.fillRect(tank.x,tank.y+15,30,5);
        //画出中间矩形
        cxt.fillRect(tank.x+5,tank.y+6,20,8);
        //画出坦克的盖子
        cxt.fillStyle="#FEF26E";
        cxt.arc(tank.x+15,tank.y+10,4,0,360,true);
        cxt.fill();
        //画出炮筒(直线)
        cxt.strokeStyle="#FEF26E";
        //设置线条的宽度
        cxt.lineWidth=1.5;
        cxt.beginPath();
        cxt.moveTo(tank.x+15,tank.y+10);
        //向右
        if(tank.direct==1){
            cxt.lineTo(tank.x+30,tank.y+10);
        }else if(tank.direct==3){ //向左
            cxt.lineTo(tank.x,tank.y+10);
        }
 
        cxt.closePath();
        cxt.stroke();
        break;
 
    }
}

在html中绘图,先实例化一个坦克类new Hero(140,140,0),然后绘画出一个坦克drawTank(hero),然后加载一个接受用户按键的函数getCommand(),当用户按下不同的键时,重新绘制出不同的坦克,从而实现坦克的移动。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body onkeydown="getCommand();">
<h1>hmtl5-经典的坦克大战</h1>
<!--坦克大战的战场-->
  <canvas id="tankMap" width="400px" height="300px" 
        style="background-color:black"></canvas>
<!--把tankGames.js引入到本页面-->
<script type="text/javascript" src="tankGame2.js"></script>
<script type="text/javascript">
    //得到画布
    var canvas1=document.getElementById("tankMap");
    //得到绘图上下文(你可以理解是画笔)
    var cxt=canvas1.getContext("2d");
     
 
    //我的坦克 hero
    //方向 
    var hero=new Hero(140,140,0);
 
     
    drawTank(hero);
 
    //这是一个接受用户按键函数
    function getCommand(){
         
        //我怎么知道,玩家按下的是什么键
        //说明当按下键后 事件--->event对象----->事件处理函数()
        var code=event.keyCode;//对应字母的ascii码->我们看码表
         
        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,400,300); 
        //重新绘制
        drawTank(hero);
    }
</script>
</body>
</html>


本文链接:HTML5网页游戏坦克大战08:运用面向对象的思想完成坦克的移动,本文由huangyineng原创,转载请注明出处

相关问答

更多
  • 比如说,我们要用程序来描述一个人。如果是以往的结构化编程,我们可能会这样; 例如用C语言的话,可能会建立一个结构体: struct Person{ 姓名; 年龄; 等等;... } 然后用定义的一些函数来描述他的行为。比如void walk(struct p); void eat(struct p);等等。 然后使用 walk(p) 来描述行走,使用eat(p)来描述吃饭等。 这样不利于程序结构的维护。开发效率也不高。 但是用java面向对象方式,这一切就显得自然了。我们建立一个类,表示人: class P ...
  • 我自己找到了 不用你们了
  • Struggle说得对。根本不是一个层次的东西。“面向对象思想”和“面向过程思想”相对,而“针对接口(抽象)编程”和“针对实现编程相对”。首先纠正楼主一个认识误区,任何编程思想都是在试图建立现实世界和计算机世界的“映射”。无论是面向过程还是面向对象或者是其它的什么思想,根本目的都是在计算机中建立现实世界的模型,通过模型的“沙盘推演”,达到解决现实问题的目的。宏观上说,无论是面向对象还是面向过程,都是一种世界观,是一种对世界的认知和划分。只不过面向过程的思想把世界划分为数据结构和函数,而面向对象的思想把世界划 ...
  • public class Hello{ public static void main(String[] args){ for(int i = 1; i <= 9; i++){ for(int j = 1; j <= i; j++){ System.out.print(j+"*"+i+"="+(i*j)+"\t"); } System.out.println(); } } }
  • 如果你要我回答你这个问题 我会首先问你一个问题 你的编程基础有多少? 熟悉或接触过哪些OO语言 java? C#? 对面向对象基础知识理解有多少了 封装 继承 多态等知道多少 它们的通俗意义和根本意义是什么 最后建议你去学习一下设计模式,设计模式是一种学习面向对象编程的很好的工具,只要你耐心啃得下来,OO思想必定有所提高!!! 上面已经问过你了 你是否有java c#基础 如果有,建议直接上 《大话设计模式》 《head first设计模式》 《设计模式之禅》 三本,如果没基础,建议先看《大话设计模式》 最 ...
  • 建议购买一本《设计模式之禅》+多阅读别人的代码,有条件可阅读一下一些小型框架的代码,加深对OO的理解。 这东西需要一定的编码量、一定的代码阅读量、一定项目参与量,加上理论知识的学习,才可能反思出来它的好处的,光说也只是一些基础的父类、子类的概念。
  • 面向对象方法是一种基于对象模型的程序设计方法,包括面向对象分析、面向对象设计、面向对象编程,是目前应用范围最广的设计方法。其中对象模型包括六个要素:封装、抽象、模块化、层次结构、类型、并发发、持久。与传统的结构化设计方法不同的是面向对象强调一组自动化的代理(对象),而不是强调过程的顺序。当今有三种主要设计方法:1.面向对象设计 2.结构化设计 3.数据驱动设计。每种方法都是针对某类问题,没有一种方法是万能的。现在面向对象设计方法在世界各地都已广范使用,但现在我们有许多人连面向对象基本概念都搞不清楚,却能用J ...
  • JS 面向对象[2022-01-02]

    为了能够清楚的解释这一切,我先从对象讲起。从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的。 实际上在JS里并不是如你所想(我开始是这么想的)那样,对象或直接称为object,实际上只是一些映射对的集合,像Map,字典等概念。JS里有大概7种类型(加上Symbol),数字、字符串、null、undefined、布尔、Symbol、对象。除对象以外的其他类型属于原始类型,就是说它们比较单纯,包含的东西比较少,基本上就是字面量所表示的那些(像C语言中 ...
  • 面向对象编程(OOP)具有多方面的吸引力。对管理人员, 它实现了更快和更廉价的开发与维护过程。对分析与设计人员,建模处理变得更加简单,能生成清晰、易于维护的设计方案。对程序员,对象模型显得如此高雅和浅 显。此外,面向对象工具以及库的巨大威力使编程成为一项更使人愉悦的任务。每个人都可从中获益,至少表面如此。 如果说它有缺点,那就是掌握它需付出的代价。思考对象的时候,需要采用形象思维,而不是程序化的思维。与程序化设计相比,对象的设计过程更具挑战性——特别是在尝试创建可重复使用(可再生)的对象时。
  • 下面的代码有点粗略,但应该做你想要的。 在你当前的代码中,敌人在第一帧中沿X方向移动一个像素,然后在下一帧中沿Y方向移动一个像素,这使得移动看起来是对角线。 下面的代码设定了一个短期目标点,让敌人的坦克朝向X或Y方向,在MOVE_BLOCK定义的某个距离处。 敌人将移动直到它通过该目标点,然后重新计算它应该移动的方向。 请注意,每次创建新帧时都会调用enemyMove,因此每秒可能会调用60次。 // The tank will move this distance in x or y before cha ...