HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能（二）
2024-04-10 02:17:06
上一篇博客只画出了，一个坦克，并让其可以上下左右移动，这篇博客将画出敌人的坦克，并让自己的坦克可以发子弹，但是还不是尽善尽美，还有一些问题，将会在下篇博客说明：
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>
<span id="aa">数据</span>
<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,130,0,tankeColor); var heroBullet=null; //定义一个敌人的坦克数组对象 var enemyTankes=new Array(); //生成3个敌方坦克 for(var i=0;i<3;i++){ //创建敌人的坦克对象 var enemyTanke=new EnemyTanke((i+1)*50,30,2,enemyColor); enemyTankes[i]=enemyTanke; } //刚进来先刷新画布，并初始化元素
flashMap(); //刷新画布的函数 function flashMap(){ //清除画布的元素，刷新
cxt.clearRect(0,0,500,500); //画自己的坦克
drawTanke(hero); //画自己的子弹
drawHeroBullet(); //画敌人的坦克 for(var i=0;i<3;i++){ drawTanke(enemyTankes[i]); } } //获取键盘的命令的处理的函数 function getCommand(){ var code=event.keyCode; cxt.clearRect(0,0,500,500); switch(code){ case 87://w键
hero.moveUp(); break; case 68://d键
hero.moveRight(); break; case 83://s键
hero.moveDown(); break; case 65://a键
hero.moveLeft(); break; case 74://j键
hero.shotEnemy(); break; } flashMap();//调用上下左右的同时刷新画布
} //每隔100毫秒刷新画布
window.setInterval("flashMap()",100); </script>
</body>
</html> tankeGame.js代码：
var tankeColor=new Array("#BA9658","#FEF26E");
var enemyColor=new Array("#00A2B5","#00FEFE"); //坦克的父类 function TanK(x,y,direct,color){ this.x=x; this.y=y; this.direct=direct; this.speed=5; this.color=color; 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; } } //子弹类 function Bullet(x,y,direct,speed){ this.x=x; this.y=y; this.direct=direct; this.speed=speed; this.timer=null; this.isLive=true; this.run=function run(){ if(this.x<=0||this.x>=500||this.y<=0||this.y>=500){ window.clearInterval(this.timer); this.isLive=false; }else{ switch(this.direct){ case 0: this.y-=this.speed; break; case 1: this.x+=this.speed; break; case 2: this.y+=this.speed; break; case 3: this.x-=this.speed; break; } } document.getElementById("aa").innerHTML="子弹的x="+this.x+"y="+this.y; } } //定义一个hero类 //x、y表示初始坐标，direct表示方向 function Hero(x,y,direct,color){ this.tanke=TanK; this.tanke(x,y,direct,color); this.shotEnemy=function(){ switch(this.direct){ case 0://上 heroBullet=new Bullet(this.x+9,this.y,this.direct,1); break; case 1://右 heroBullet=new Bullet(this.x+36,this.y+9,this.direct,1); break; case 2://下 heroBullet=new Bullet(this.x+9,this.y+36,this.direct,1); break; case 3://左 heroBullet=new Bullet(this.x-6,this.y+9,this.direct,1); break; } var timer=window.setInterval("heroBullet.run()",50); heroBullet.timer=timer; } } //定义一个hero类 //x、y表示初始坐标，direct表示方向 function EnemyTanke(x,y,direct,color){ this.tanke=TanK; this.tanke(x,y,direct,color); } //画自己的子弹 function drawHeroBullet(){ if(heroBullet!=null&&heroBullet.isLive){ cxt.fillStyle="#FEF26E"; cxt.fillRect(heroBullet.x,heroBullet.y,2,2); } } //把创建坦克的方法封装为一个对象 //该函数可以画自己的坦克，也可以画敌人的坦克 //tanke就是一个对象 function drawTanke(tanke){ //坦克的方向 switch(tanke.direct){ case 0: case 2: {//上 //画出自己的坦克设置颜色 cxt.fillStyle=tanke.color[0]; 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=tanke.color[1]; cxt.beginPath(); cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false); cxt.closePath(); cxt.fill(); //画出炮筒 cxt.strokeStyle=tanke.color[1]; //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=tanke.color[0]; 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=tanke.color[1]; cxt.beginPath(); cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false); cxt.closePath(); cxt.fill(); //画出炮筒 cxt.strokeStyle=tanke.color[1]; //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; } } end；
转载于:https://www.cnblogs.com/YLQBL/p/8426619.html
HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能（二）相关推荐
- 我所知道坦克大战（单机版）之添加多个机器坦克、让机器坦克动起来、让坦克智能起来...
本章目的 添加多个机器坦克 让机器坦克动起来 让坦克智能起来 一.添加多个机器坦克 目前我的坏阵营的坦克只有一个,是我们手动创建出来的 但是我们现在想要玩的过瘾,杀的痛快就要创建多个坦克,也需要使用一 ...
- java小组坦克大战游戏开发文档开发日志_java实现坦克大战游戏
本文实例为大家分享了java实现坦克大战游戏的具体代码,供大家参考,具体内容如下 一.实现的功能 1.游戏玩法介绍 2.自定义游戏(选择游戏难度.关卡等) 3.自定义玩家姓名 4.数据的动态显示 二. ...
- 【Pygame实战】经典的坦克大战游戏，勾起童年无限回忆《坦克大战小霸王版》
导语 哈喽!哈喽--我是木木子 今天来升级下之前写的坦克大战游戏嘛,哈哈哈 其实也不算是修改,就是稍微的调试一下! 因为之前写的界面都是英文的 ,有的小伙伴儿英文一点儿都不会的可能看着别扭,今天来 ...
- html做坦克大战的效果,HTML+CSS+JQ试做经典坦克大战（三）
hallo,everyone,我又来了,第3篇内容主要讲述坦克大战开始菜单的设计和事件绑定. 惯例,先上HTML内容和最终效果 //菜单包裹层 //开始菜单,4个按钮div 开始游戏 游戏说明 选择关 ...
- 100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
- 《HTML5经典坦克大战》游戏（代码）
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
1.离线存储:1)存储到本地,可以离线浏览网页 2)不用cookie(安全性不太高,来回交互的数据量比较大) 2.语音识别 3.图像识别 4.HTML5游戏 5.CSS3的强大之处:动画和各种选择器 ...
- 坦克大战java_清华毕业大佬用一个坦克大战项目讲完了23种设计模式
先给大家讲述一下坦克大战是怎么进行运行的. 坦克大战第一节: new 出一个窗口: 设定标题栏内容: TankFrame从Frame继承+显示: 认识paint方法,重写: 坦克大战第二节 学习gra ...
- Python实现坦克大战(TankWar)游戏
项目所有的代码与材料:代码下载 Features 双人模式 动画与音效 特殊的场景元素:草丛.河面和可以通行的冰面 各种各样的道具 Rules 玩家一 WASD 控制方向.空格键开火,玩家二上下左右控 ...
- java坦克大战（1.0）
坦克大战 后面开始学习怎么使用java制造一个坦克大战游戏 但是不是直接开始做,而是随着这个游戏程序的制造,一边学习新知识融入到游戏中.包括多线程,反射,IO流- Java坐标体系 在几乎所有的坐标中 ...
最新文章
- 图解YARN--大数据平台技术栈17
- Remoting技术使用配置文件示例
- mybatis学习(6)：IntelliJ IDEA 如何创建一个普通的 Java 项目，及创建 Java 文件并运行
- 我忽然发现我写的cve漏洞管理系统简直就是redmine的一个小模块
- 事务并发、事务隔离级别
- 2.3 指数加权平均
- MySQL | MySQL 数据库系统（四）- 数据库的备份与恢复
- 浅谈计算机教学论文,毕业论文--浅谈计算机教学的有效性
- 装饰模式实例+java,java 中设计模式（装饰设计模式）的实例详解
- debian系统离线安装iperf2
- iconfont图标引入方式
- Docker 启动报错 Error starting daemon: SELinux is not supported with the overlay2 ...alse)
- 幻灯片母版的问题-模板制作
- 杭州电子科技大学java刷题_杭州电子科技大学的OJ
- 『天涯杂谈』十大古今名人语录经典（2007版）
- Python日记 -- 百度OCR翻译
- 如何投稿iMeta期刊？ScholarOne投审稿系统作者使用教程
- dp模式是什么意思_DP的完整形式是什么？
- 开源办公OA开发平台使用说明：用车管理应用
- 华为电脑分类四个系列_华为笔记本系列推荐榜单