1、申 请 I D：Domineering丶
2、个人邮箱：1109079622@qq.com
3、一篇原创技术文章：
先来一句废话：上次没有通过，这次我会加倍努力，我就是这么执着 不要羡慕我！
好了，现在开始正文。
我这次编用html5编写了一个坦克大战的游戏，因为时间关系，我只做了一小部分，现在把它拿出来申请会员用
因为我是一天写一点，所以有的地方可能不太连贯。勿喷....
这次我编写的坦克大战，全部使用绘图技术完成，（都是画出的）+javascript的oop设计.
①首先画出我们的坦克
tankGame1.html有了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>hmtl5-经典的坦克大战</h1>
<!--坦克大战的战场-->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript">
//得到画布
var canvas1=document.getElementById("tankMap");
//得到绘图上下文(你可以理解是画笔)
var cxt=canvas1.getContext("2d");
//我的坦克 hero
var heroX=130;
var heroY=230;
//画出自己的坦克，使用前面的绘图技术
//设置颜色
cxt.fillStyle="#DED284";
//使用 先死--->后活
//先画出左面的矩形
cxt.fillRect(heroX,heroY,5,30);
//画出右边的矩形(这时请大家思路->一定要一个参照点)
cxt.fillRect(heroX+15,heroY,5,30);
//画出中间矩形
cxt.fillRect(heroX+6,heroY+5,8,20);
//画出坦克的盖子
cxt.fillStyle="#FFD972";
cxt.arc(heroX+10,heroY+15,4,0,360,true);
cxt.fill();
//画出炮筒(直线)
cxt.strokeStyle="#FFD972";
//设置线条的宽度
cxt.lineWidth=2;
cxt.beginPath();
cxt.moveTo(heroX+10,heroY+15);
cxt.lineTo(heroX+10,heroY);
cxt.closePath();
cxt.stroke();
</script>
</body>
</html>
② 让坦克可以上下左右移动
关于js 的变量范围
//如果你在函数中，没有定义就直接使用变量，就意味你使用的全局变量
//如果你在函数中， 定义了 才使用该变量，说明使用的局部变量
var a=40;
function test(){
var a=0;
a=89;
}
test();
alert(a);
②让坦克可以任意移动
代码: tankGame2.html
坦克规定
方向 0 表示 上
方向 1 表示 右
方向 2 表示 下
方向 3 表示 左
方向要实时变化
tankGame2.html - 把 这个页面的 类和函数放到单独的js中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<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>
tankGame2.js
//定义一个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;
}
}
③画出三个敌人的坦克
tankGame3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>hmtl5-经典的坦克大战</h1>
<!--坦克大战的战场-->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<!--把tankGames.js引入到本页面-->
<script type="text/javascript" src="tankGame3.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 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=enemyTank;
}
//先调用一次
flashTankMap();
//专门写一个函数，用于定时刷新我们的作战区，把要在作战区出现的元素(自己坦克，敌人坦克，子弹，炸弹，
//障碍物...)->游戏思想
function flashTankMap(){
//把画布清理
cxt.clearRect(0,0,400,300);
//我的坦克
drawTank(hero);
//敌人的坦克
//画出所有敌人坦克
for(var i=0;i<3;i++){
drawTank(enemyTanks);
}
}
//这是一个接受用户按键函数
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;
}
//触发这个函数 flashTankMap();
flashTankMap();
//重新绘制所有的敌人的坦克.你可以在这里写代码(思想,我们干脆些一个函数，专门用于定时刷新我们的画布[作战区])
}
</script>
</body>
</html>
tankGame3.js
//为了编程方便，我们定义两个颜色数组
var heroColor=new Array("#BA9658","#FEF26E");
var enmeyColor=new Array("#00A2B5","#00FEFE");
//其它的敌人坦克，这里的扩展性，还是不错的.
//这是一个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);
}
//定义一个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,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;
}
}
在js中如何通过对象冒充，实现继承的效果
test.html
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script type="text/javascript">
//Animal 类
function Animal (name,age){
this.name=name;
this.age=age;
this.aaa=function(){
alert("yyy");
}
}
function Dog(name,age){
//把Animal 构造函数赋给this.hsp
this.hsp=Animal;
//运行调用!!!
this.hsp(name,age);
}
var dog1=new Dog("小狗",20);
alert(dog1.name);
dog1.aaa();
</script>
</body>
好了，就写这么多，我觉得我加的注释已经很清楚了。（可能有错字，凑合看吧）
希望这次可以通过，没有加图片，慢慢看文字解释把
最后，祝愿吾爱破解越办越好！
|
吾爱游客
发表于 2014-10-22 19:13
发表于 2014-10-22 20:19
