<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="tankGame03-2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onkeydown="getCommand();">
<h1>hmtl5-经典的坦克大战</h1>
<canvas id="tankMap" width="600px" height="300px" style="background-color: black;"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("tankMap");
var ctx = canvas.getContext("2d");
var heroX = 50;
var heroY = 100;
/*需求3:完成画出三个敌人的坦克
* 3.1 自己坦克和敌人坦克都是坦克;=》存在着继承的关系;
* 自己坦克Hero和敌人坦克Enemy继承于Tank这个基类
* 3.1.1 定义一个基类Tank =》 把原来代码的Hero对象改为Tank
* 3.1.2 模仿Animal 与 Dog的继承写法写Hero,测试验证完成继承的实现
* 3.1.3模仿Dog 写 Enemy
* 3.1.4 初始化敌机(先做一个敌机) =>
* 3.1.4.1 模仿hero初始化
* 3.1.4.2模仿hero画敌机 (记住!!!有两处地方需要去画1:页面加载的时候去画;2按了键盘之后也要画);
* ,测试验证完成初始化和画敌机实现
* 发现了一个问题:敌机颜色和hero的颜色一样??
* 3.2 如何定义敌机和hero颜色不同???
* 3.2.1 颜色也是tank的属性=》
* 3.2.1.1 Tank对象上参数列表中多加一个color属性
* 3.2.1.2 所有用到这个对象的地方,都要加一个color参数;
* 3.2.1.3 color在画的哪里体现?ctx.fillStyle = tank.color;(测试一下没有问题再进入下一步)
* 3.2.1.4 问题:因为每个坦克需要用到两种颜色 =》
* 1.把两种颜色放到数组里面;
* 2.把数组分别放到实例化的最后那个参数上 替换
* 3.tank.color =》tank.color[0]; tank.color[1]
* 3.3 如何定义三个坦克?
* 3.3.1 先做一个事情:定义一个刷新函数,然后需要刷新的代码放进来,接着用到这些代码的地方用刷新函数去代替
* 3.3.2 用数组装这三个坦克
* 3.3.2.1 初始画敌机坦克数组enemyTanks
* 3.3.2.2 for循环将一颗颗敌机坦克放入
* 3.3.2.3 刷新函数那里也要用for循环去刷新
*3.4 随机?自学一下随机函数Math.random()
* 3.4.1 每次加载都是随机个数的坦克(1-20);
* 3.4.2 每次加载的敌机坦克位置随机?
* 3.4.3每个敌机坦克的初始化方向随机? (0-3) Math.floor(Math.random()*4)
* 3.4.4 敌机坦克的颜色随机?? 'rgb('+255+','+255+','+255+')' => 255改成0-255 Math.floor(Math.random()*255)
*3.5 坦克移动的速度可以自定义=》加一个速度参数
*/
//console.log(Math.ceil(Math.random()*20));
// /Math.random() 0-1 =>0-20 Math.random()*20 => 1-20 Math.ceil(Math.random()*20)
function flashTankMap(){
drawTank(hero);
for(var i=0; i<enemyTanks.length; i++){
drawTank(enemyTanks[i]);
}
}
// var enemytankNum = Math.ceil(Math.random()*10);
// console.log(enemytankNum);
//2.Hero初始化 3.2.1.4
var hero = new Hero(heroX, heroY, Math.floor(Math.random()*4), heroColor); //3.2.1.2 所有用到这个对象的地方,都要加一个color参数
//var hero1 = new Hero(100, 60); //heroX, heroY实参
var enemyTanks = new Array(); //3.3.2.1
for(var i=0; i< Math.ceil(Math.random()*10); i++){
//3.1.4 初始化敌机(先做一个敌机) => 模仿初始化hero 3.2.1.4
enemyTanks[i] = new Enemy(Math.random()*(canvas.width-50), Math.random()*(canvas.height-50), Math.floor(Math.random()*4), enmeyColor); //3.2.1.2 所有用到这个对象的地方,都要加一个color参数
}
flashTankMap();
//drawTank(hero);//hero实参
// drawTank(hero1);//hero实参
//3.1.4.2模仿hero画敌机
//drawTank(enemy);//hero实参
function getCommand(){
// console.log(event.keyCode);
//上:87 右:68 下:83 左:65
//4.调用对象的方法
switch (event.keyCode){
case 87://上
hero.moveUp();
break;
case 68: //右
hero.moveRight();
break;
case 83: // 下
hero.moveDown();
break;
case 65: //左
hero.moveLeft();
break;
// case 38://hero1上
// hero1.moveUp();
// break;
// case 39: //hero1右
// hero1.moveRight();
// break;
// case 40: // hero1下
// hero1.moveDown();
// break;
// case 37: //hero1左
// hero1.moveLeft();
default:
break;
}
ctx.clearRect(0,0,canvas.width, canvas.height);
flashTankMap();
// drawTank(hero);
// drawTank(enemy);
//drawTank(hero1);
}
</script>
</html>