知识点
相关文章
更多最近更新
更多运用面向对象的思想完成坦克的移动_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原创，转载请注明出处
相关问答
更多-
如何理解java的面向对象思想[2021-10-09]
比如说，我们要用程序来描述一个人。如果是以往的结构化编程，我们可能会这样; 例如用C语言的话，可能会建立一个结构体: struct Person{ 姓名; 年龄; 等等;... } 然后用定义的一些函数来描述他的行为。比如void walk(struct p); void eat(struct p);等等。 然后使用 walk(p) 来描述行走，使用eat(p)来描述吃饭等。 这样不利于程序结构的维护。开发效率也不高。 但是用java面向对象方式，这一切就显得自然了。我们建立一个类，表示人: class P ... -
求尚学堂马士兵java坦克大战视频教程[2021-02-21]
我自己找到了 不用你们了 -
关于java面向对象编程和面向接口编程区别[2021-06-26]
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(); } } }
-
as3编程 怎么培养面向对象思想，现在还是过程式的，如果是过程的话，一个小游戏就折腾死了[2021-08-02]
如果你要我回答你这个问题 我会首先问你一个问题 你的编程基础有多少？ 熟悉或接触过哪些OO语言 java? C#? 对面向对象基础知识理解有多少了 封装 继承 多态等知道多少 它们的通俗意义和根本意义是什么 最后建议你去学习一下设计模式，设计模式是一种学习面向对象编程的很好的工具，只要你耐心啃得下来，OO思想必定有所提高！！！ 上面已经问过你了 你是否有java c#基础 如果有，建议直接上 《大话设计模式》 《head first设计模式》 《设计模式之禅》 三本，如果没基础，建议先看《大话设计模式》 最 ... -
c++ 面向对象的编程思想是怎样[2021-01-09]
建议购买一本《设计模式之禅》+多阅读别人的代码，有条件可阅读一下一些小型框架的代码，加深对OO的理解。 这东西需要一定的编码量、一定的代码阅读量、一定项目参与量，加上理论知识的学习，才可能反思出来它的好处的，光说也只是一些基础的父类、子类的概念。 -
面向对象方法包括什么？[2021-05-31]
面向对象方法是一种基于对象模型的程序设计方法,包括面向对象分析、面向对象设计、面向对象编程，是目前应用范围最广的设计方法。其中对象模型包括六个要素：封装、抽象、模块化、层次结构、类型、并发发、持久。与传统的结构化设计方法不同的是面向对象强调一组自动化的代理（对象）,而不是强调过程的顺序。当今有三种主要设计方法：1.面向对象设计 2.结构化设计 3.数据驱动设计。每种方法都是针对某类问题,没有一种方法是万能的。现在面向对象设计方法在世界各地都已广范使用,但现在我们有许多人连面向对象基本概念都搞不清楚,却能用J ... -
JS 面向对象[2022-01-02]
为了能够清楚的解释这一切，我先从对象讲起。从其他面向对象语言（如Java）而来的人可能认为在JS里的对象也是由类来实例化出来的，并且是由属性和方法组成的。 实际上在JS里并不是如你所想（我开始是这么想的）那样，对象或直接称为object，实际上只是一些映射对的集合，像Map，字典等概念。JS里有大概7种类型（加上Symbol），数字、字符串、null、undefined、布尔、Symbol、对象。除对象以外的其他类型属于原始类型，就是说它们比较单纯，包含的东西比较少，基本上就是字面量所表示的那些（像C语言中 ... -
为什么要用面向对象思想编程[2021-08-22]
面向对象编程（OOP）具有多方面的吸引力。对管理人员， 它实现了更快和更廉价的开发与维护过程。对分析与设计人员，建模处理变得更加简单，能生成清晰、易于维护的设计方案。对程序员，对象模型显得如此高雅和浅 显。此外，面向对象工具以及库的巨大威力使编程成为一项更使人愉悦的任务。每个人都可从中获益，至少表面如此。 如果说它有缺点，那就是掌握它需付出的代价。思考对象的时候，需要采用形象思维，而不是程序化的思维。与程序化设计相比，对象的设计过程更具挑战性——特别是在尝试创建可重复使用（可再生）的对象时。 -
坦克游戏运动(Tank game movement)[2021-08-26]
下面的代码有点粗略，但应该做你想要的。 在你当前的代码中，敌人在第一帧中沿X方向移动一个像素，然后在下一帧中沿Y方向移动一个像素，这使得移动看起来是对角线。 下面的代码设定了一个短期目标点，让敌人的坦克朝向X或Y方向，在MOVE_BLOCK定义的某个距离处。 敌人将移动直到它通过该目标点，然后重新计算它应该移动的方向。 请注意，每次创建新帧时都会调用enemyMove，因此每秒可能会调用60次。 // The tank will move this distance in x or y before cha ...