HTML5坦克大战
在JavaScript中，不要在变量为定义之前去使用，这样很难察觉并且无法运行。
颜色不对。
当我的坦克移动时，敌人坦克消失。
tankGame3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body onkeydown="getCommand()">
<h6>HTML5坦克大战</h6>
<!--这是坦克大战的战场 -->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript" src="tankGame3.js"></script>
<script type="text/javascript">
//定义一个Hero类
//把绘制坦克封装成一个函数，将来可以作为成员函数
//x表示坦克的横坐标，y表示纵坐标,direct方法
//
//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文（你可以理解是画笔）
var cxt=canvas1.getContext("2d");
var hero=new Hero(140,140,0,heroColor);
//定义敌人的坦克（敌人的坦克有多少？单个定义还是放在数组中。
var enemyTanks=new Array();
//先死后活，定3个，后面我们把敌人坦克的数量做成变量
for(var i=0;i<6;i++){
//创建一个坦克
var enemyTank=new EnemyTank((i+1)*50,0,2,enemyColor);
//把这个坦克放入数组
enemyTanks[i]=enemyTank;
//画出这个坦克
//drawTank(enemyTank);
}
flashTankMap();
//专门写一个函数，用于定时刷新我们的作战区，把要在作战区出现的元素
//(自己坦克，敌人坦克，子弹，草坪，障碍物)
function flashTankMap(){
cxt.clearRect(0,0,400,300);
//我的坦克
drawTank(hero);
//敌人的坦克
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]);
}
}
//这是一个接收用户按键函数
function getCommand(){
var code=event.keyCode;
switch(code){
case 87:
hero.moveUp();
break;
case 68:
hero.moveRight();
break;
case 83:
hero.moveDown();
break;
case 65:
hero.moveLeft();
break;
}
//drawTank(hero);
//要触发这个函数flashTankMap
flashTankMap();
//重新绘制所有的敌人坦克，你可以在这里写代码（思想：每隔一段时间来刷新画布。。
//用一个函数，专门用于定时刷新屏幕。
}
</script>
tankGame.js
//为了编程方便，我们定义两个颜色数组
var heroColor=new Array("#BA9658","#FEF26E");
var enemyColor=new Array("#00A2B5","#00FEFE");
//这是一个坦克类
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;
}
}
function Hero(x,y,direct,color){
//下面两句话的作用是通过对象冒充，达到继承的效果
this.tank=Tank;
this.tank(x,y,direct,color);
}
//定义一个EnemyTank类
function EnemyTank(x, y, direct,color){
//也通过对象冒充，来继承Tank
this.tank=Tank;
this.tank(x,y,direct,color);
}
//将来这个函数可以画坦克
//绘制坦克
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,Math.PI*2,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2;
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,Math.PI*2,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2;
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;
}
}
(3)自己的坦克可以发送子弹，只能发送一颗。
1.子弹，不管是敌人的还是我的，都是作战区的一个元素。因此我们可以定义为全局变量。
OOP，所以子弹也是一个对象。
2 去处理用户按下j键时的反应
3.画出自己的子弹->写了一个函数（思想）[自己回去把坦克大战写个n遍]。
4.在哪里调用。刷新作战区的函数调用。
5.考虑子弹位置的编写。
6.子弹是不动的，《让子弹飞一会儿》。
7.子弹坐标怎样自动地变换，思想是我们可以定时去修改子弹的目标。
8.在什么地方去调用这个bullet。
HTML5坦克大战的更多相关文章
- 基于HTML5坦克大战游戏简化版
之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...
- HTML5坦克大战（韩顺平版本）
HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...
- HTML5坦克大战1
在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...
- HTML5坦克大战（1）绘制坦克
坦克尺寸如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- HTML5坦克大战（2）绘制坦克复习
html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- HTML5 坦克大战
代码 点击打开链接
- html5制作坦克大战
全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...
- 《HTML5经典坦克大战》游戏（代码）
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
随机推荐
- HTML5 2D平台游戏开发#7Camera
在庞大的游戏世界中,玩家不能一览地图全貌,而是只能看到其中一部分,并一步步探索,这时就要用到一种技术来显示局部的地图,游戏术语称为摄像机(Camera).下面两张图中的白色矩形框表示了Camera的作 ...
- java中双向链表的增、删、查操作
import java.util.NoSuchElementException; public class DoublyLinkedListImpl<E> { private Node h ...
- 【数据挖掘】关联分析之Apriori（转载）
[数据挖掘]关联分析之Apriori 1.Apriori算法 如果一个事务中有X,则该事务中则很有可能有Y,写成关联规则 {X}→{Y} 将这种找出项目之间联系的方法叫做关联分析.关联分析中最有名的问 ...
- org.hibernate.type.SerializationException: could not deserialize 反序列化失败
1.查看实体类有没有实现Serializable接口 例:public class Student implements Serializable { ***** } 2.看表中的字段有没有在实体中进 ...
- LINQ TO SQL:操作有层次关系的对象
对于关系型数据与对象数据之间最大的隔阂就是由标识列连接起来的行(关系型数据)与由集合保存的对象(对象数据)之间的冲突. 例如某个Subject对象(也就是数据库中的Subject表),从Subject ...
- 详解Linux Top 命令
Linux top命令简介 top 命令是最流行的性能监视工具之一,我们必需了解.它是一个优秀的交互式工具,用于监视性能.它提供系统整体性能,但报告进程信息才是 top 命令的长处.top 命令交互界 ...
- 更改eclipse(myeclipse) author的默认名字(注释的作者)
在eclipse/myeclipse中,当添加注释的作者选项时,@author 后边一般都会默认填充的你登录计算机的用户名.如何去修改呢:第一种方法:修改计算机登录的用户名(一般不实用)第二种方法:修 ...
- Spring框架结构
在processOn思维导图上看的一个程序员写的,挺不错的,分享出来,便于学习和回顾.
- 【BZOJ3661】Hungry Rabbit 贪心
[BZOJ3661]Hungry Rabbit Description 可怕的洪水在夏天不期而至,兔子王国遭遇了前所未有的饥荒,它们不得不去外面的森林里寻找食物.为了简化起见,我们假设兔子王国中有n只 ...
- jvm的字符串池
1 jvm中是有专门的字符串池的内存空间的,这块空间和栈和堆不同. 2 String s = "string constant"; 这个时候,如果string pool中没有&qu ...