JSFiddle - React, Tailwind, and code Playground
by apaichon
HTML
<script>
var car = { // Properties
color:"green",wheelType:"spinning", roof:"shad",numOfGear:4
,gearType:"auto", maxSpeed:150,currentSpeed:0,currentGear:0,status:"stop"
// Function
,start:function(key){
if (key != '1234' && this.status =="running"){
return false;
}
this.status ="running";
this.driveId = setInterval(function(){car.drive()},1000);
console.log( "driveId:" +this.driveId);
return true;
}
,stop:function(key){
if (key != "1234" && this.status !="running"){
return false;
}
this.currentGear =0;
this.currentSpeed =0;
this.status ="stop";
clearInterval(this.driveId);
document.getElementById('gear').innerText = "Gear:" + car.getCurrentGear();
document.getElementById('speed').innerText = "Speed:" +car.getSpeed();
document.getElementById('status').innerText= "Status:" +car.status;
return true;
}
,drive:function(){
if (this.status =="running"){
if (this.currentGear >=0 && this.currentGear < this.numOfGear){
this.currentGear ++;
this.currentSpeed = this.currentGear * (this.maxSpeed / this.numOfGear);
//console.log("current Speed :" +this.currentSpeed);
document.getElementById('gear').innerText = "Gear:" + car.getCurrentGear();
document.getElementById('speed').innerText = "Speed:" +car.getSpeed();
document.getElementById('status').innerText= "Status:" +car.status;
}
return true;
}
return false;
}
,isRunning:function(){
if (this.status=="running"){
return true;
}
return false;
}
,getCurrentGear:function(){
return this.currentGear;
}
,getSpeed:function(){
return this.currentSpeed;
}
,turn:function(turnType){
if (turnType =="direct" || turnType =="left" || turnType =="right"){
this.turnType = turnType;
return true;
}
return false;
}
,breakCar:function(){
if (this.status!="stop"){
if (this.currentGear !=0 && this.currentGear <= this.numOfGear){
this.currentGear --;
this.currentSpeed =...