let canvas, ctx, w, h let obstacles=[] let jumpers=[] let floor={ color:"brown", draw:function(){ ctx.fillStyle=this.color ctx.fillRect(0,h-1,w,1) } } let oldTime=0 let epochTime=0 let generation=0 class Obstacle{ constructor(x){ this.x=x this.y=h-10 this.vx=-w/4 this.color="black" } draw(){ ctx.fillStyle=this.color ctx.fillRect(this.x,this.y,10,10) } update(dt){ this.x+=this.vx*dt this.x=this.x>0?this.x:this.x=Math.random()*w+w } } class Jumper{ constructor(){ this.x=10 this.y=h-10 this.vy=0 this.score=0 this.alive=true this.color=`hsl(${Math.random()*360},100%,50%)` this.genes=[] for(let i=0;i<6;++i){ this.genes.push((Math.random()*2-1)) } } draw(){ if(this.alive){ ctx.fillStyle=this.color ctx.fillRect(this.x,this.y,10,10) } } update(dt){ if(!this.alive) return this.y+=this.vy*dt this.y=this.y>h-10?h-10:this.y this.vy+=h/2*dt for(let o of obstacles){ if(this.x>=o.x-10&&this.x<=o.x+10){ if(this.y>=o.y-10&&this.y<=o.y+10){ this.alive=false } } } this.score+=dt } decision(d1,d2){ let result=this.genes[0]/d1+this.genes[1]/d1/d1+this.genes[2]/d2+this.genes[3]/d2/d2+this.genes[4]/d1/d2+this.genes[5] if(result>0.5&&this.y>=h-10)this.vy=-h/4 } reset(){ this.x=10 this.y=h-10 this.vy=0 this.score=0 this.alive=true } } function shuffle(a){ var j, x, i; for (i = a.length - 1; i > 0; i--){ j = Math.floor(Math.random() * (i + 1)); x = a[i]; a[i] = a[j]; a[j] = x; } return a; } function Offspring(j1,j2){ let baby=new Jumper() baby.genes=[] let sequence=shuffle("000111".split("")) let g=0 for(let s of sequence){ let isMutant=Math.random()<0.9 if(isMutant){ if(s=='0'){ baby.genes.push(j1.genes[g++]+(Math.random()*5-2.5)) }else if(s=='1'){ baby.genes.push(j2.genes[g++]+((Math.random()*5-2.5)) ) } }else{ if(s=='0'){ baby.genes.push(j1.genes[g++]) }else if(s=='1'){ baby.genes.push(j2.genes[g++]) } } } return baby } function init(){ canvas=document.querySelector("canvas") canvas.width=w=innerWidth canvas.height=h=400 ctx=canvas.getContext("2d") for(let i=0;i<50;++i){ jumpers.push(new Jumper()) } for(let i=0;i<2;++i){ let x=Math.random()*w+w obstacles.push(new Obstacle(x)) } requestAnimationFrame(start) } function start(time){ let dt=time/1000-oldTime epochTime +=dt let d1=obstacles[0].x let d2=obstacles[1].x ctx.clearRect(0,0,w,h) ctx.fillStyle="black" ctx.fillText(`generation: ${generation}`,10,20) ctx.fillText(`distance from 1rst: ${d1}`,10,50) ctx.fillText(`distance from 2nd: ${d2}`,10,80) ctx.fillText(`genes: `,10,110) ctx.fillText(`${jumpers[0].genes[0]}`,10,140) ctx.fillText(`${jumpers[0].genes[1]}`,10,170) ctx.fillText(`${jumpers[0].genes[2]}`,10,200) ctx.fillText(`${jumpers[0].genes[3]}`,10,230) ctx.fillText(`${jumpers[0].genes[4]}`,10,260) ctx.fillText(`${jumpers[0].genes[5]}`,10,290) ctx.fillText(`score: ${epochTime.toFixed(1)}`,10,320) floor.draw() for(let jumper of jumpers){ jumper.decision(d1,d2) jumper.update(dt) jumper.draw() } for(let o of obstacles){ o.draw() o.update(dt) } obstacles.sort((a,b)=>{ if(a.xj.alive==false)){ epochTime =0 jumpers.sort((a,b)=>{ if(a.score>b.score) return -1 else return 1 }) jumpers.length=10 for(let j of jumpers){ j.reset() } for(let i=0;i<10;i+=2){ for(let j=0;j<40;++j){ jumpers.push(Offspring(jumpers[i],jumpers[i+1])) } } obstacles=[] for(let i=0;i<2;++i){ let x=Math.random()*w+w obstacles.push(new Obstacle(x)) } generation ++ requestAnimationFrame(start) }else requestAnimationFrame(start) } window.onload=init

Genetic Jumpers