【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); }
相关文章推荐
- 使用d3.js实现力矩散点图+图例
- JSON--List集合转换成JSON对象详解
- node基础09:第2个node web服务器
- jQuery.Validate表单验证插件的使用示例详解
- js jquery中的延时方法(set/clearTimeout)
- js与(&&)或(||)运算符妙用
- openresty 前端开发入门六之调试篇
- 数据绑定——观察者模式
- angular下载二进制Excel文件
- 学解《Effective java》
- JSP 30:<c:forEach/>的简单实例
- lightbox弹出窗口插件-弹出广告-兼容IE8和Chrome浏览器
- Package.json与Bower.json中的参数备忘
- C# 利用NPOI 实现Excel转html
- JSP往action传值乱码问题解决
- 学习JavaScript笔记
- JavaScript生成GUID的方法
- jsonp实现跨域的方法
- js把日期字符串转换成时间戳
- JS实现HTML中frameset浏览器全屏和退出全屏