越野車AI | 程式專案 | 橘蘋學習平台

{"id":294323,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n  \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n  \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\"\u003e\\n  \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n  \u003ctitle\u003eDocument\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n  \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js\\\"\u003e\u003c/script\u003e\\n  \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js\\\"\u003e\u003c/script\u003e\\n  \u003cscript\u003e\\n    let Engine = Matter.Engine,\\n      Render = Matter.Render,\\n      Runner = Matter.Runner,\\n      Bodies = Matter.Bodies,\\n      Body = Matter.Body,\\n      Constraint = Matter.Constraint,\\n      Bounds = Matter.Bounds,\\n      Events = Matter.Events,\\n      MouseConstraint = Matter.MouseConstraint,\\n      Common = Matter.Common,\\n      Composite = Matter.Composite,\\n      Vertices = Matter.Vertices,\\n      World = Matter.World;\\n\\n      Common.setDecomp(decomp)\\n  \u003c/script\u003e\\n  \u003cscript src=\\\"./ground.js\\\"\u003e\u003c/script\u003e\\n  \u003cscript src=\\\"./car.js\\\"\u003e\u003c/script\u003e\\n  \u003cscript src=\\\"./index.js\\\"\u003e\u003c/script\u003e\\n\\n  \u003cbutton onclick=\\\"startGeneration()\\\"\u003enextGeneration\u003c/button\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"let group = Body.nextGroup(true)\\n\\n\\nfunction Car(vectors, wheelsArgs) {\\n\\n  let car = Composite.create({ label: 'Car' })\\n  let instance = {}\\n\\n\\n  const positions = vectors.map((length, index) =\u003e {\\n    const angle = Math.PI * 2 * index / vectors.length\\n    const x = Math.floor(Math.cos(angle) * length)\\n    const y = Math.floor(Math.sin(angle) * length)\\n    return { x, y }\\n  })\\n\\n  const bodyPath = positions.map(({ x, y }) =\u003e x + ' ' + y).join(' ')\\n  const bodyVertices = Vertices.fromPath(bodyPath)\\n\\n  const body = Bodies.fromVertices(300, 300, bodyVertices, {\\n    collisionFilter: {\\n      group: group\\n    }\\n  })\\n  Composite.addBody(car, body)\\n  \\n\\n\\n  // get body vertices\\n  let vertices = []\\n  body.parts.forEach(part =\u003e {\\n    part.vertices.forEach(v =\u003e {\\n      if (vertices.find(a =\u003e a.x == v.x \u0026\u0026 a.y == v.y)) return\\n      vertices.push(v)\\n    })\\n  })\\n\\n  console.log(vertices)\\n\\n\\n  const wheels = []\\n\\n  for (let i = 0; i \u003c wheelsArgs.length; i += 2) {\\n\\n    let index = wheelsArgs[i]\\n    let length = wheelsArgs[i + 1]\\n\\n    let x = vertices[index % vertices.length].x - body.position.x\\n    let y = vertices[index % vertices.length].y - body.position.y\\n\\n    const wheel = Bodies.circle(300, 300, length, {\\n      collisionFilter: {\\n        group: group\\n      },\\n      friction: 0.5\\n    })\\n\\n    const axel = Constraint.create({\\n      bodyB: body,\\n      pointB: { x, y },\\n      bodyA: wheel,\\n      stiffness: 1,\\n      length: 0\\n    })\\n\\n    Composite.addBody(car, wheel)\\n    Composite.addConstraint(car, axel)\\n\\n    wheels.push(wheel)\\n  }\\n\\n\\n  let count = 0\\n  const id = setInterval(() =\u003e {\\n    count++\\n\\n    instance.x = car.bodies[0].position.x\\n    instance.y = car.bodies[0].position.y\\n\\n    if (count % 100 == 0) {\\n      wheels.forEach(w =\u003e Body.setAngularVelocity(w, .5))\\n    }\\n  })\\n\\n  instance.stop = function () {\\n    car.bodies.forEach(b =\u003e {\\n      Body.setStatic(b, true)\\n    })\\n    clearInterval(id)\\n  }\\n\\n  instance.destory = function () {\\n    World.remove(engine.world, car);\\n    clearInterval(id)\\n  }\\n\\n  instance.car = car\\n\\n\\n  Composite.add(engine.world, [ car ])\\n  \\n\\n  return instance\\n}\\n\\nGD_UNIT_W = 100\\nGD_UNIT_H = 20\\n\\n// 長度、變化、坡度最大\\nfunction createGround(length, randomRange, maxRotate) {\\n  var boxs = []\\n\\n  var rotate = 0\\n  var posX = 50\\n  var posY = 600\\n\\n  for (let i = 0; i \u003c length; i++) {\\n    var box = Bodies.rectangle(posX, posY, GD_UNIT_W, GD_UNIT_H, { isStatic: true, angle: rotate });\\n    boxs.push(box)\\n\\n    posX += Math.cos(rotate) * GD_UNIT_W / 2\\n    posY += Math.sin(rotate) * GD_UNIT_W / 2\\n    if (i \u003e 10) {\\n      rotate += randomRange * 2 * Math.random() - randomRange\\n      if (rotate \u003e maxRotate) rotate = maxRotate\\n      if (rotate \u003c -maxRotate) rotate = -maxRotate\\n    }\\n    posX += Math.cos(rotate) * GD_UNIT_W / 2\\n    posY += Math.sin(rotate) * GD_UNIT_W / 2\\n  }\\n  return boxs\\n}\\n\\nconst engine = Engine.create()\\nconst render = Render.create({\\n  element: document.body,\\n  engine: engine,\\n  options: {\\n    hasBounds: true,\\n    showAngleIndicator: true,\\n  }\\n})\\n\\n\\nlet cars = []\\nlet kill = 0\\n\\nfunction startGeneration () {\\n\\n  focusOnCar()\\n\\n\\n  // 第一代\\n  if (cars.length === 0) {\\n    for (let i = 0; i \u003c 10; i++) {\\n      let gens = randomGens()\\n      let arg1 = gens.slice(0, 8)\\n      let arg2 = gens.slice(8, 12)\\n    \\n      let car = new Car(arg1, arg2)\\n      car.life = 100\\n      car.preX = -Infinity\\n      car.gens = gens\\n      car.isDie = false\\n      cars.push(car)\\n    }\\n  } \\n\\n  else {\\n    cars.forEach(car =\u003e car.destory())\\n    kill = 0\\n\\n    cars.sort((a, b) =\u003e b.x - a.x)\\n\\n    let parentA = cars[0]\\n    let parentB = cars[1]\\n\\n    cars.length = 0\\n\\n    for (let i = 0; i \u003c 10; i++) {\\n      let gens = mutation(parentA.gens, parentB.gens)\\n\\n      let arg1 = gens.slice(0, 8)\\n      let arg2 = gens.slice(8, 12)\\n\\n      let car = new Car(arg1, arg2)\\n      car.life = 100\\n      car.preX = -Infinity\\n      car.gens = gens\\n      car.isDie = false\\n      cars.push(car)\\n    }\\n  }\\n  \\n}\\n\\nstartGeneration()\\n\\nsetInterval(() =\u003e {\\n  cars.forEach((car) =\u003e {\\n    if (car.x \u003e car.preX) {\\n      car.life += 1\\n      car.preX = car.x\\n    } else {\\n      car.life -= 1\\n    }\\n\\n    if (car.life \u003e 100) {\\n      car.life = 100\\n    }\\n    if (car.isDie == false \u0026\u0026 car.life \u003c 0) {\\n      kill += 1\\n      car.isDie = true\\n      car.stop()\\n    }\\n  })\\n\\n  if (kill \u003e= 10) {\\n    startGeneration()\\n    kill = 0\\n  }\\n}, 50)\\n\\n\\n\\n\\nlet grounds = createGround(100, 1.5, 0.8)\\nComposite.add(engine.world, [...grounds])\\n\\nRender.run(render)\\nconst runner = Runner.create()\\nRunner.run(runner, engine)\\n\\n\\n\\n\\n\\nlet offsetX = 0\\nlet offsetY = 0\\nEvents.on(render, 'beforeRender', focusOnCar)\\n\\nfunction focusOnCar () {\\n  let arr = cars.filter(car =\u003e !car.isDie).sort((a, b) =\u003e {\\n    return b.car.bodies[0].position.x -a.car.bodies[0].position.x\\n  })\\n  if (arr.length === 0) return \\n  let position = arr[0].car.bodies[0].position\\n  let vx = position.x - offsetX - 400\\n  let vy = position.y - offsetY - 300\\n\\n  if (arr.length === 0) {\\n    vx = -offsetX\\n    vy = -offsetY\\n  }\\n\\n  offsetX += vx\\n  offsetY += vy\\n\\n  Bounds.translate(render.bounds, {\\n    x: vx,\\n    y: vy,\\n  });\\n}\\n\\n\\n\\n\\n\\n// 產生車子基因\\nfunction randomGens() {\\n  const gens = []\\n\\n  for (let i = 0; i \u003c 8; i++) {\\n    gens.push(Math.random() * 76 + 25)\\n  }\\n\\n  for (let i = 0; i \u003c 2; i++) {\\n    gens.push(Math.floor(Math.random() * 8))\\n    gens.push(30 * Math.random() + 10)\\n  }\\n\\n  return gens\\n}\\n\\nfunction mutation (genA, genB) {\\n\\n  const gens = []\\n\\n  const rand = randomGens()\\n\\n  for (let i = 0; i \u003c genA.length; i++) {\\n    if (Math.random() \u003e 0.5) {\\n      gens.push(genA[i])\\n    } else {\\n      gens.push(genB[i])\\n    }\\n\\n    if (Math.random() \u003c 0.1) {\\n      gens[i] = rand[i]\\n    }\\n  }\\n\\n  return gens\\n\\n}\"}","created_at":"2021-09-01T12:58:06.657+08:00","updated_at":"2021-09-23T17:45:46.575+08:00","name":"越野車AI","language":"web","screenshot":{"url":null},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":178,"hashid":"zpesj4ykk","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}