HTML5实现经典坦克大战坦克乱走还能发出一个子弹


Posted in HTML / CSS onSeptember 02, 2013

复制代码
代码如下:

<pre name="code" class="html">tank.html</pre><pre name="code" class="html"><!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>
<span id="aa">数据</span>
<!--把tankGames.js引入到本页面-->
<script type="text/javascript" src="tank.js"></script>
<script type="text/javascript">
//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文(你可以理解是画笔)
var cxt=canvas1.getContext("2d");
//我的坦克 hero
//方向
var hero=new Hero(140,140,0,heroColor);
//定义一颗空子弹
var heroBullet=null;
//定义敌人的坦克(敌人的坦克有多少? 思路 : 是单个单个的定义,还是放在数组中?)
var enemyTanks=new Array();
//先死后活 ,定3个,后面我们把敌人坦克的数量,作出变量
//0->上, 1->右, 2->下 3->左
for(var i=0;i<3;i++){
//创建一个坦克
var enemyTank=new EnemyTank((i+1)*50,0,2,enmeyColor);
//把这个坦克放入数组
enemyTanks[i]=enemyTank;
}
//先调用一次
flashTankMap();
//专门写一个函数,用于定时刷新我们的作战区,把要在作战区出现的元素(自己坦克,敌人坦克,子弹,炸弹,
//障碍物...)->游戏思想
function flashTankMap(){
//把画布清理
cxt.clearRect(0,0,400,300);
//我的坦克
drawTank(hero);
//画出自己的子弹
//子弹飞效果是怎么出现的?[答 : 首先我们应该每隔一定时间(setInterval)就去刷新作战区,如果在刷新的时候,子弹坐标变换了,给人的感觉就是子弹在飞!]
drawHeroBullet();
//敌人的坦克
//画出所有敌人坦克
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]);
}
}
//这是一个接受用户按键函数
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;
case 74:
hero.shotEnemy();
break;
}
//触发这个函数 flashTankMap();
flashTankMap();
//重新绘制所有的敌人的坦克.你可以在这里写代码(思想,我们干脆些一个函数,专门用于定时刷新我们的画布[作战区])
}
//每隔100毫秒去刷新一次作战区
window.setInterval("flashTankMap()",100);
</script>
</body>
</html></pre>


tank.js
复制代码
代码如下:

<pre></pre>
<pre name="code" class="html"><pre name="code" class="javascript">//为了编程方便,我们定义两个颜色数组
var heroColor=new Array("#BA9658","#FEF26E");
var enmeyColor=new Array("#00A2B5","#00FEFE");
//其它的敌人坦克,这里的扩展性,还是不错的.
//子弹类
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>=400||this.y<=0||this.y>=300){
//子弹要停止.
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").innerText="子弹x="+this.x+" 子弹y="+this.y;
}
}
//这是一个Tank类
function Tank(x,y,direct,color){
this.x=x;
this.y=y;
this.speed=1;
this.direct=direct;
//一个坦克,需要两个颜色.
this.color=color;
//上移
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;
}
}
//定义一个Hero类
//x 表示坦克的 横坐标, y 表示纵坐标, direct 方向
function Hero(x,y,direct,color){
//下面两句话的作用是通过对象冒充,达到继承的效果
this.tank=Tank;
this.tank(x,y,direct,color);
//增加一个函数,射击敌人坦克.
this.shotEnemy=function(){
//创建子弹, 子弹的位置应该和hero有关系,并且和hero的方向有关.!!!
//this.x 就是当前hero的横坐标,这里我们简单的处理(细化)
switch(this.direct){
case 0:
heroBullet=new Bullet(this.x+9,this.y,this.direct,1);
break;
case 1:
heroBullet=new Bullet(this.x+30,this.y+9,this.direct,1);
break;
case 2:
heroBullet=new Bullet(this.x+9,this.y+30,this.direct,1);
break;
case 3: //右
heroBullet=new Bullet(this.x,this.y+9,this.direct,1);
break;
}
//调用我们的子弹run, 50 是老师多次测试得到的一个结论.
var timer=window.setInterval("heroBullet.run()",50);
//把这个timer赋给这个子弹(js对象是引用传递!)
heroBullet.timer=timer;
}
}
//定义一个EnemyTank类
function EnemyTank (x,y,direct,color){
//也通过对象冒充,来继承Tank
this.tank=Tank;
this.tank(x,y,direct,color);
}
//画出自己的子弹,多说一句,你也可以把该函数封装到Hero类中
function drawHeroBullet(){
//这里,我们加入了一句话,但是要知道这里加,是需要对整个程序有把握
if(heroBullet!=null&&heroBullet.isLive){
cxt.fillStyle="#FEF26E";
cxt.fillRect(heroBullet.x,heroBullet.y,2,2);
}
}
//绘制坦克
function drawTank(tank){
//考虑方向
switch(tank.direct){
case 0: //上
case 2:// 下
//画出自己的坦克,使用前面的绘图技术
//设置颜色
cxt.fillStyle=tank.color[0];
//韩老师使用 先死--->后活 (初学者最好用这个方法)
//先画出左面的矩形
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=tank.color[1];
cxt.arc(tank.x+10,tank.y+15,4,0,360,true);
cxt.fill();
//画出炮筒(直线)
cxt.strokeStyle=tank.color[1];
//设置线条的宽度
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=tank.color[0];
//韩老师使用 先死--->后活 (初学者最好用这个方法)
//先画出左面的矩形
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=tank.color[1];
cxt.arc(tank.x+15,tank.y+10,4,0,360,true);
cxt.fill();
//画出炮筒(直线)
cxt.strokeStyle=tank.color[1];
//设置线条的宽度
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;
}
}
</pre>

<pre></pre>
</pre>

HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 #HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 #HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 #HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 #HTML / CSS
You might like
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python urlopen()函数 示例分享
2014/06/12 Python
Python微信公众号开发平台
2018/01/25 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
LINUX下线程,GDI类的解释
2016/12/14 面试题
远程调用的原理
2014/07/05 面试题
交通事故赔偿协议书范本
2014/04/15 职场文书
求职信模板
2014/05/23 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
实习护士自荐信
2015/03/25 职场文书
围城读书笔记
2015/06/26 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
React实现动效弹窗组件
2021/06/21 Javascript
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js