javascript - How do i make an automated traffic light? -
this question has answer here:
var red = "#ff0000"; var yellow = "#ffff00"; var green = "#00ff00"; var dark_red = "#380000"; var dark_yellow = "#383800"; var dark_green = "#003800"; var x_all = 150; var y_red = 100; var y_yellow = y_red + 150; var y_green = y_yellow + 150; var trafficlightsstatemachine; function trafficlightsstatemachine() { this.state = 0; this.statemachine = new array(); this.statemachine[0] = function () { drawcircles(dark_red, yellow, dark_green); }; this.statemachine[1] = function () { drawcircles(red, dark_yellow, dark_green); }; this.statemachine[2] = function () { drawcircles(red, yellow, dark_green); }; this.statemachine[3] = function () { drawcircles(dark_red, dark_yellow, green); }; this.process = function() { this.statemachine[this.state](); this.state = (this.state + 1) % this.statemachine.length; }; this.drawcircle = function(canvas, color, x, y) { var context = canvas.getcontext('2d'); context.strokestyle = "#000000"; context.fillstyle = color; context.beginpath(); context.arc(x, y, 50, 0, math.pi * 2, true); context.closepath(); context.stroke(); context.fill(); }; } function drawcircles(first, second, third) { var id = 'canvas'; var canvas = document.getelementbyid(id); if (canvas.getcontext) { trafficlightsstatemachine.drawcircle(canvas, first, x_all, y_red); trafficlightsstatemachine.drawcircle(canvas, second, x_all, y_yellow); trafficlightsstatemachine.drawcircle(canvas, third, x_all, y_green); } } function init() { trafficlightsstatemachine = new trafficlightsstatemachine(); drawcircles(dark_red, dark_yellow, green); }#page { width: 300px; height: 500px; margin: auto; } #canvas:hover { cursor: crosshair; background-color: #191919; } #canvas { background-color: #252525; } body { background: #222222; color: white; }<body onload="init()"> <div id="page" onclick="trafficlightsstatemachine.process()" title="please, press button."> <canvas id="canvas" height="500px" width="300px"> </canvas> </div> </body>i able change code when run traffic light changes automatically. know need add in setinterval(trafficlightsstatemachine.process,1000) not know where. please advise.
- remove init body onload
- remove onclick div
- add onload event handler this:
window.onload=function() { init(); setinterval( trafficlightsstatemachine.process.bind(trafficlightsstatemachine), 1000); // syntax necessary able use "this" in statemachine } result:
var red = "#ff0000"; var yellow = "#ffff00"; var green = "#00ff00"; var dark_red = "#380000"; var dark_yellow = "#383800"; var dark_green = "#003800"; var x_all = 150; var y_red = 100; var y_yellow = y_red + 150; var y_green = y_yellow + 150; var trafficlightsstatemachine; function trafficlightsstatemachine() { this.state = 0; this.statemachine = new array(); this.statemachine[0] = function () { drawcircles(dark_red, yellow, dark_green); }; this.statemachine[1] = function () { drawcircles(red, dark_yellow, dark_green); }; this.statemachine[2] = function () { drawcircles(red, yellow, dark_green); }; this.statemachine[3] = function () { drawcircles(dark_red, dark_yellow, green); }; this.process = function() { this.statemachine[this.state](); this.state = (this.state + 1) % this.statemachine.length; }; this.drawcircle = function(canvas, color, x, y) { var context = canvas.getcontext('2d'); context.strokestyle = "#000000"; context.fillstyle = color; context.beginpath(); context.arc(x, y, 50, 0, math.pi * 2, true); context.closepath(); context.stroke(); context.fill(); }; } function drawcircles(first, second, third) { var id = 'canvas'; var canvas = document.getelementbyid(id); if (canvas.getcontext) { trafficlightsstatemachine.drawcircle(canvas, first, x_all, y_red); trafficlightsstatemachine.drawcircle(canvas, second, x_all, y_yellow); trafficlightsstatemachine.drawcircle(canvas, third, x_all, y_green); } } function init() { trafficlightsstatemachine = new trafficlightsstatemachine(); drawcircles(dark_red, dark_yellow, green); } window.onload=function() { init(); setinterval(trafficlightsstatemachine.process.bind(trafficlightsstatemachine),1000); }#page { width: 300px; height: 500px; margin: auto; } #canvas:hover { cursor: crosshair; background-color: #191919; } #canvas { background-color: #252525; } body { background: #222222; color: white; } <canvas id="canvas" height="500px" width="300px"></canvas>
Comments
Post a Comment