AI 設計越野車（試玩版）副本 | 程式專案

{"id":679298,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\\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  \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\"\u003e\\n  \u003cscript src=\\\"https://code.jquery.com/jquery-3.6.0.slim.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\\n\u003cbody\u003e\\n  \u003cdiv class=\\\"container pt-4\\\"\u003e\\n    \u003cdiv class=\\\"row\\\"\u003e\\n      \u003cdiv class=\\\"col-lg-7\\\"\u003e\\n        \u003cdiv id=\\\"canvas-box\\\"\u003e\u003c/div\u003e\\n        \u003cbutton class=\\\"btn btn-primary\\\" onclick=\\\"nextGeneration()\\\"\u003enextGeneration\u003c/button\u003e\\n      \u003c/div\u003e\\n      \\n      \u003cdiv class=\\\"col-lg-5\\\"\u003e\\n        \u003ctable class=\\\"table table-striped\\\"\u003e\\n          \u003cthead\u003e\\n            \u003ctr\u003e\\n              \u003cth scope=\\\"col\\\"\u003e#\u003c/th\u003e\\n              \u003cth scope=\\\"col\\\"\u003e活躍程度(active)\u003c/th\u003e\\n              \u003cth scope=\\\"col\\\"\u003e是否存活\u003c/th\u003e\\n              \u003cth scope=\\\"col\\\"\u003e前進進度條\u003c/th\u003e\\n              \u003cth scope=\\\"col\\\"\u003e前進距離(x)\u003c/th\u003e\\n            \u003c/tr\u003e\\n          \u003c/thead\u003e\\n          \u003ctbody\u003e\\n          \u003c/tbody\u003e\\n        \u003c/table\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n  \u003c/div\u003e\\n\\n  \u003cstyle\u003e\\n    #canvas-box {\\n      width: 100%;\\n    }\\n\\n    #canvas-box \u003e canvas {\\n      width: 100%;\\n    }\\n\\n    canvas {\\n      border: 2px solid #999;\\n    }\\n  \u003c/style\u003e\\n    \\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\u003c/body\u003e\\n\\n\u003c/html\u003e\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"var generation = 20; // 一個世代的個數\\nvar rate = 0.15; // 變異機率\\nvar current = 0; //當前是第幾世代\\nvar cars = []; //存放車子角色\\n\\nsetInterval(gameloop, 100);\\n\\nvar arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\\nfor (var i = 0; i \u003c 100; i++) {\\n    arr.push(2 * Math.random() - 1);\\n}\\nvar endX = createGround(arr, 0.6, -0.6); // 產生地形\\n\\n\\n// // 產生下一個世代\\nfunction nextGeneration() {\\n\\n    current += 1;\\n    \\n    console.log('第' + current + '世代');\\n    \\n    cars.sort(function (a, b) {\\n        return b.x - a.x\\n    })\\n\\n    if (cars.length \u003e 0) {\\n        var parentA = cars[0].genes;\\n        var parentB = cars[1].genes;\\n        var parentC = cars[2].genes;\\n        var parentD = cars[3].genes;\\n        cars.forEach(car =\u003e car.destory());\\n        cars.length = 0;\\n    }\\n\\n    for (var i = 0; i \u003c generation; i++) {\\n        if (current \u003e 1) {\\n            var genes = crossover(parentA, parentB, parentC, parentD);\\n        } else {\\n            var genes = randomGenes();\\n        }\\n        var a = genes.slice(0, 8);\\n        var b = genes.slice(8, 12);\\n        var car = createCar(a, b);\\n        focusOnCar(car);\\n        cars.push(car);\\n        car.genes = genes\\n    }\\n}\\n\\n// // 遊戲迴圈\\nfunction gameloop() {\\n    var best = cars[0];\\n    var count = 0;\\n\\n    for (var i = 0; i \u003c cars.length; i++) {\\n        var car = cars[i];\\n        if (car.x \u003e best.x) {\\n            best = car;\\n        }\\n        if (car.isDie) {\\n            count += 1;\\n        }\\n    }\\n    focusOnCar(best);\\n    if (count \u003e= generation) {\\n        nextGeneration();\\n    }\\n\\n    cars.sort(function (a, b) {\\n        return b.x - a.x\\n    })\\n    updateTable(cars);\\n}\\n\\n\\n// // 產生車子基因\\nfunction randomGenes() {\\n    const genes = []\\n    for (var i = 0; i \u003c 8; i++) {\\n        genes.push(Math.random() * 70 + 30)\\n    }\\n    for (var i = 0; i \u003c 2; i++) {\\n        genes.push(Math.floor(Math.random() * 8)); //隨機位置\\n        genes.push(30 * Math.random() + 10); //隨機大小\\n    }\\n    return genes\\n}\\n\\n\\n// 傳入父母基因產生新的子基因\\nfunction crossover(genA, genB, genC, genD) {\\n    const genes = []\\n    for (var i = 0; i \u003c 12; i++) {\\n        var rand = Math.random()\\n        if (rand \u003c 0.25) {\\n            genes.push(genA[i])\\n        } else if (rand \u003c 0.5) {\\n            genes.push(genB[i])\\n        } else if (rand \u003c 0.75) {\\n            genes.push(genC[i])\\n        } else {\\n            genes.push(genD[i])\\n        }\\n    }\\n    const randgenes = randomGenes()\\n    for (var i = 0; i \u003c 12; i++) {\\n        if (Math.random() \u003c rate) {\\n            genes[i] = randgenes[i]\\n        }\\n    }\\n    return genes\\n}\\n\\n\\n// 更新狀態表格\\nfunction updateTable(cars) {\\n    $('tbody').empty()\\n    cars.forEach(function (car, idx) {\\n        var distance = Math.floor(car.x - 300)\\n        $('tbody').append(`\\n            \u003ctr\u003e\\n            \u003ctd scope=\\\"col\\\"\u003e${idx + 1}\u003c/td\u003e\\n            \u003ctd scope=\\\"col\\\"\u003e\\n            \u003cdiv class=\\\"progress\\\"\u003e\\n            \u003cdiv class=\\\"progress-bar progress-bar-striped\\\" style=\\\"width: ${car.active}%\\\"\u003e\u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003c/td\u003e\\n            \u003ctd scope=\\\"col\\\"\u003e${car.isDie}\u003c/td\u003e\\n            \u003ctd scope=\\\"col\\\"\u003e\\n            \u003cdiv class=\\\"progress\\\"\u003e\\n            \u003cdiv class=\\\"progress-bar progress-bar-striped bg-warning\\\" style=\\\"width: ${ distance * 100 / endX}%\\\"\u003e\u003c/div\u003e\\n            \u003c/div\u003e\\n            \u003c/td\u003e\\n            \u003ctd scope=\\\"col\\\"\u003e\\n            ${distance}m\\n            \u003c/td\u003e\\n            \u003c/tr\u003e\\n            `)\\n    })\\n}\\n\\nnextGeneration()\"}","created_at":"2024-01-15T23:07:29.885+08:00","updated_at":"2024-01-15T23:08:06.803+08:00","name":"AI 設計越野車（試玩版） 副本","language":"web","screenshot":{"url":"https://cdn0.koding.school/uploads/project/screenshot/679298/6972e6ebf28633fc40a56de4aa1d1c3b.jpg"},"parent_id":303204,"plugin":"var 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\n    var engine = Engine.create()\n    var render = Render.create({\n      element: document.getElementById('canvas-box'),\n      engine: engine,\n      options: {\n        hasBounds: true,\n        showAngleIndicator: true,\n        // showInternalEdges: true,\n        background: 'white',\n        wireframes: false,\n      }\n    })\n    \nvar GD_UNIT_W = 100\nvar GD_UNIT_H = 20\n\n// 長度、變化、坡度最大\nfunction createGround(diffs, max = 1, min = -1) {\n  var boxs = []\n\n  var rotate = 0\n  var posX = -100\n  var posY = 500\n\n  for (let i = 0; i \u003c diffs.length; i++) {\n    var box = Bodies.rectangle(posX, posY, GD_UNIT_W, GD_UNIT_H, {\n      label: 'ground',\n      isStatic: true,\n      angle: rotate,\n      render: {\n        fillStyle: '#000000AA',\n        strokeStyle: 'black',\n        lineWidth: 4\n      },\n    });\n    boxs.push(box)\n\n    posX += Math.cos(rotate) * GD_UNIT_W / 2\n    posY += Math.sin(rotate) * GD_UNIT_W / 2\n    \n    rotate += diffs[i]\n    if (rotate \u003e max) rotate = max\n    if (rotate \u003c min) rotate = min\n    \n    posX += Math.cos(rotate) * GD_UNIT_W / 2\n    posY += Math.sin(rotate) * GD_UNIT_W / 2\n  }\n  Composite.add(engine.world, [...boxs])\n  return posX\n}\n\nconst LINE_WIDTH = 4 // 線框寬度\nconst STROKE_STYPE = 'black' // 線框顏色\n\nconst WHEEL_STROKE_STYPE = 'black' // 輪子線框顏色\nconst WHEEL_LINE_WIDTH = 4 // 輪子線框寬度\nconst WHEEL_FILL_COLOR = '#000000aa' // 輪子填充顏色\nconst WHEEL_FRICTION = 2 // 摩擦力\nconst WHEEL_POWER = 1 // 馬力\n\nconst BODY_DENSITY = 0.003\n\n\nconst group = Body.nextGroup(true)\n\nfunction createCar(vectors, wheelsArgs) {\n\n  let car = Composite.create({ label: 'Car' })\n  let instance = {}\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    label: 'car_body',\n    collisionFilter: {\n      group: group\n    },\n    render: {\n      strokeStyle: STROKE_STYPE,\n      lineWidth: LINE_WIDTH\n    },\n    friction: 100000,\n    density: BODY_DENSITY\n  })\n  Composite.addBody(car, body)\n\n  body.instance = instance\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\n  const wheels = []\n\n  for (let i = 0; i \u003c wheelsArgs.length; i += 2) {\n    let index = wheelsArgs[i]\n    let length = wheelsArgs[i + 1]\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        label: 'wheel',\n      // density: BODY_DENSITY,\n      collisionFilter: {\n        group: group\n      },\n      friction: WHEEL_FRICTION,\n      render: {\n        fillStyle: WHEEL_FILL_COLOR,\n        strokeStyle: STROKE_STYPE,\n        lineWidth: LINE_WIDTH\n      },\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  \n  instance.preX = 0\n  instance.active = 100\n  instance.isDie = false\n  instance.speed = 0\n\n  const id = setInterval(() =\u003e {\n    \n    count++\n    \n    instance.x = car.bodies[0].position.x\n    instance.y = car.bodies[0].position.y\n    instance.angle = car.bodies[0].angle\n\n    if (count % 100 == 0) {\n      wheels.forEach(w =\u003e Body.setAngularVelocity(w, WHEEL_POWER))\n\n      instance.speed = instance.x - instance.preX\n      instance.preX = instance.x\n\n      if (instance.speed \u003e 50) {\n        instance.active += 1\n      } else {\n        instance.active -= 5\n      }\n\n      if (instance.active \u003e 100) instance.active = 100\n\n      if (instance.isDie == false) {\n        if (instance.angle \u003e 3 || instance.angle \u003c -3 || instance.active \u003c= 0) {\n          instance.isDie = true\n          instance.active = 0\n          instance.stop()\n        }\n      }\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\n  return instance\n}\n\n\nEvents.on(engine, 'collisionStart', function(event) {\n  var pairs = event.pairs\n  for (let i = 0; i \u003c pairs.length; i++) {\n    var a = pairs[i].bodyA\n    var b = pairs[i].bodyB\n    if (a.label === 'car_body') {\n      a.render.fillStyle = 'black'\n      a.parent.instance.isDie = true\n      a.parent.instance.active = 0\n      a.parent.instance.stop()\n    }\n    if (b.label === 'car_body') {\n      b.render.fillStyle = 'black'\n      b.parent.instance.isDie = true\n      b.parent.instance.active = 0\n      b.parent.instance.stop()\n    }\n  }\n});\n\n\nRender.run(render)\nconst runner = Runner.create()\nRunner.run(runner, engine)\n\n\nvar offsetX = 0\nvar offsetY = 0\nEvents.on(render, 'beforeRender', updateView);\n\n\nvar targetCar = undefined\n\nfunction focusOnCar(car) {\n    targetCar = car\n}\n\nfunction updateView() {\n    if (targetCar == undefined) return\n    var position = targetCar.car.bodies[0].position\n    var vx = position.x - offsetX - 400\n    var vy = position.y - offsetY - 300\n    offsetX += vx\n    offsetY += vy\n    Bounds.translate(render.bounds, {\n        x: vx,\n        y: vy,\n    });\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":71,"hashid":"9ygs53gg8","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}