您的位置:首页 > Web前端

【ife】任务二十七:行星与飞船(二)

2017-01-04 14:11 435 查看
function addEventHandler(element, event, hanlder) {
if (element.addEventListener)
element.addEventListener(event, hanlder, false);
else if (element.attachEvent)
element.attachEvent("on" + event, hanlder);
else
element["on" + event] = hanlder;
}

var error = 0.1;
var spaceships = [];

window.onload = function() {
var command = document.getElementById("command");
var order = document.getElementById("order");
var universe = document.getElementById("universe");
addEventHandler(command, "click", function() {
event.target.disable = "true";
Commander.newSpaceship(event.target);
});
addEventHandler(order, "click", function() {
event.target.disable = "true";
switch(event.target.innerHTML) {
case "开始飞行":
Commander.beginToFly(event.target);
break;
case "停止飞行":
Commander.stopToFly(event.target);
break;
case "销毁":
Commander.destroy(event.target);
break;
}
});
}

var Spaceship = function(id, speed, discharge, charge) {
this.id = id,
this.speed = speed,
this.discharge = discharge,
this.charge = charge,
this.state = "stop",
this.deg = 45,
this.energy = 100,
this.interval = null,
this.energy_interval = null
};

Spaceship.prototype.powerSystem = function() {
if (this.state == "fly") {
var that = this;
if (this.interval == null) {
this.interval = setInterval(function() {
that.energy -= that.discharge;
if (that.energy < 0) {
that.state = "stop";
clearInterval(that.interval);
that.interval = null;
}
document.getElementById("spaceship" + that.id).getElementsByTagName("span")[0].innerHTML = that.energy + "%";
that.deg = (that.deg + that.speed) % 360;
document.getElementById("spaceship" + that.id).style.transform = "rotate(" + that.deg + "deg)";
}, 1000);
}
}
else {
clearInterval(this.interval);
this.interval = null;
}
};

Spaceship.prototype.energySystem = function() {
this.energy += this.charge;
if (this.energy > 100)
this.energy = 100;
document.getElementById("spaceship" + this.id).getElementsByTagName("span")[0].innerHTML = this.energy + "%";
};

Spaceship.prototype.distroySystem = function() {
for (var i = 0; i < universe.getElementsByTagName("div").length; i++) {
if (universe.getElementsByTagName("div")[i].innerHTML.toString()[0] == this.id)
universe.removeChild(universe.getElementsByTagName("div")[i]);
}
for (var i = 0; i < spaceships.length; i++) {
if (spaceships[i].id == this.id) {
clearInterval(spaceships[i].interval);
clearInterval(spaceships[i].energy_interval);
spaceships.splice(i, 1);
break;
}
}
};

Spaceship.prototype.signalSystem = function(command) {
var id = parseInt(command.slice(0,4), 2);
var cmd = command.slice(4,8);
if (this.id == id) {
switch(cmd) {
case "0001":
this.state ="fly";
this.powerSystem();
this.energySystem();
console.log(this.id + "号飞船接收到开始飞行命令");
break;
case "0010":
this.state = "stop";
this.powerSystem();
this.energySystem();
console.log(this.id + "号飞船接收到停止飞行命令");
break;
case "1100":
this.distroySystem();
console.log(this.id + "号飞船接收到销毁命令");
break;
}
}
};

var Commander = {
newSpaceship: function() {
var divs = universe.getElementsByTagName("div");
var orders = order.getElementsByTagName("div");
var power, energy;
var speed, charge, discharge;
var radio1 = document.getElementsByName("power");
var radio2 = document.getElementsByName("energy");
for (var i = 0; i < radio1.length; i++) {
if (radio1[i].checked) {
power = radio1[i].value;
break;
}
}
for (var i = 0; i < radio2.length; i++) {
if (radio2[i].checked) {
energy = radio2[i].value;
break;
}
}
switch(power) {
case "forward": speed = 30; discharge = 5; break;
case "rise": speed = 50; discharge = 7; break;
case "exceed": speed = 80; discharge = 9; break;
}
switch(energy) {
case "strength": charge = 2; break;
case "light": charge = 3; break;
case "forever": charge = 4; break;
}
if (orders.length < 4 ) {
var newSpaceship = document.createElement("div");
var newCommand = document.createElement("div");
for (var i = 1; i <= 4; i++) {
if (document.getElementById("spaceship" + i) == undefined)
break;
}
var id = i;
newSpaceship.innerHTML = id + "号-<span>100%</span>";
newSpaceship.className = "spaceship";
universe.appendChild(newSpaceship);
newSpaceship.setAttribute("id", "spaceship" + id);
newSpaceship.style.top = 90 - (id - 1) * 25 + "px";
newSpaceship.style.transformOrigin = "center" + " " + (135 + (id - 1) * 25) + "px";
newCommand.innerHTML = "<span>对" + id + "号飞船下达命令:</span><button>开始飞行</button><button>停止飞行</button><button>销毁</button>";
order.appendChild(newCommand);
var spaceship = new Spaceship(id, speed, discharge, charge);
spaceships.push(spaceship);
spaceship.energy_interval = setInterval(function() {
spaceship.energySystem();
}, 1000);
}
else
alert("创建失败,飞船数量已达上限4");
},
beginToFly: function(e) {
var id = e.parentNode.firstChild.innerHTML.toString()[1];
mediator('{"id":"' + id +'", "command": "fly"}');
},
stopToFly: function(e) {
var id = e.parentNode.firstChild.innerHTML.toString()[1];
mediator('{"id":"' + id +'", "command": "stop"}');
},
destroy: function(e) {
var id = e.parentNode.firstChild.innerHTML.toString()[1];
for (var i = 0; i < order.getElementsByTagName("div").length; i++) {
if (order.getElementsByTagName("span")[i].innerHTML.toString()[1] == id)
order.removeChild(order.getElementsByTagName("div")[i]);
}
mediator('{"id":"' + id +'", "command": "destroy"}');
}
}

function mediator (jsonStr) {
var jsonObj = JSON.parse(jsonStr);
var cmd = "";
switch(jsonObj.id) {
case "1": cmd += "0001"; break;
case "2": cmd += "0010"; break;
case "3": cmd += "0011"; break;
case "4": cmd += "0100"; break;
}
switch(jsonObj.command) {
case "fly": cmd += "0001"; break;
case "stop": cmd += "0010"; break;
case "destroy": cmd += "1100"; break;
}
var errorInterval = setInterval(function() {
if (Math.random() > error) {
clearInterval(errorInterval);
var spaceship = [];
for (var i = 0; i < spaceships.length; i++)
spaceship.push(spaceships[i]);
for (var i = 0; i < spaceship.length; i++) {
if (typeof spaceship[i].signalSystem === "function")
spaceship[i].signalSystem(cmd);
}
}
}, 300);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: