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

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

<!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>

转载于:https://www.cnblogs.com/YLQBL/p/8426602.html

HTML5-坦克大战一完成坦克上下左右移动的功能（一）相关推荐

坦克大战_我方坦克发射子弹
Members package com.wxh.tank3;//坦克类,父类 class Tank {// 表示坦克的横坐标int x = 0;// 坦克的纵坐标int y = 0;// 坦克方向// ...
Java基础坦克大战01绘制坦克
java绘图坐标体系坐标体系-像素 1.绘图还必须搞清一个非常重要的概念-像素一个像素等于多少厘米? 2.计算机在屏幕上显示的内容都是由屏幕上的每一个像素组成的.例如,计算机显示器的分辨率是800 ...
坦克大战java_java版坦克大战游戏源码
[java]代码库package tankwar; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; imp ...
坦克大战代码_坦克大战系列文章-坦克大战简介
前言本篇主要对坦克大战Robocode做一个简单的介绍,对java最初的人工智能算法演练工具做一个了解坦克大战简介今天我们要谈的是java 最初的基于人工智能算法的仿真模拟坦克大战,全称Robo ...
Fc坦克大战java_java的坦克大战
一个渣渣写坦克大战的步骤: 1.首先创造好一个坦克和一个GAME框架,并且坦克能够跟着键盘键位移动案例:在我的博客文件中保存,它的名字是:tankwar0100.rar 主要解决了:1.坦克背景框 ...
java 坦克大战暂停_【 java版坦克大战--事件处理】坦克动起来了
折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ① paint ...
android 坦克,Android坦克大战游戏《坦克骑士 Tank Riders》
<坦克骑士 Tank Riders>是一款3D坦克战斗游戏,玩家在游戏当中将操控一个造型非常Q的小坦克在激烈的战斗中寻求出路.与红白机时代的坦克大战玩法完全不同,坦克骑士更具有冒险性质,而 ...
cocos2d-x游戏开发系列教程-坦克大战游戏之坦克的显示
1.先定义坦克的一些属性 class Tank : public CCSprite { public :Tank();~Tank();static Tank* createTankWithTankTy ...
java 坦克大战连发_Java坦克大战（三）
/** 功能: * 1.实现爆炸效果 * 2.敌人坦克可移动,可以连发子弹 * 3.敌人击中我的坦克,我爆炸 * 4.击中第一个坦克爆炸的效果不明显*/ packagecom.fanghua5;imp ...
java版坦克大战_JAVA实现坦克大战1.0版本
1 packagetankGame;2 import java.awt.*;3 import javax.swing.*;4 import java.awt.event.*;5 import java ...

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

HTML5-坦克大战一完成坦克上下左右移动的功能（一）相关推荐

最新文章

热门文章