互動遊戲 | Programming Project | OrangeApple Learning Platform

{"id":933158,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n  \u003chead\u003e\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js\\\"\u003e\u003c/script\u003e\\n    \u003c!-- \u003clink rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"style.css\\\"\u003e --\u003e\\n    \u003cmeta charset=\\\"utf-8\\\" /\u003e\\n\\n  \u003c/head\u003e\\n  \u003cbody\u003e\\n    \u003cmain\u003e\\n    \u003c/main\u003e\\n    \u003cscript src=\\\"https://unpkg.com/ml5@1/dist/ml5.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript \u003e\\n        let bodyPose;\\nlet video;\\nlet bodies = [];\\nlet balls = [];\\nlet particles = [];\\nlet scores = {};\\n\\nlet colors = [\\n  '#FFCD4B',\\n  '#FF7676',\\n  '#FF4B91',\\n  '#B1D690',\\n  '#7E8EF1',\\n  '#615EFC',\\n]\\n\\nfunction preload() {\\n  bodyPose = ml5.bodyPose({ flipped: true });\\n}\\n\\nfunction setup() {\\n  createCanvas(800, 600);\\n  video = createCapture(VIDEO, { flipped: true });\\n  video.size(800, 600);\\n  video.hide();\\n  bodyPose.detectStart(video, (f) =\u003e (bodies = f));\\n}\\n\\nfunction draw() {\\n  noStroke()\\n  blendMode(BLEND)\\n  image(video, 0, 0)\\n  background(0, 0, 0, 100)\\n  blendMode(ADD)\\n  bodies.forEach(updateBody)\\n  particles.forEach(updateParticle)\\n  particles = particles.filter(p =\u003e p.size \u003e 0)\\n  balls.forEach(updateBall)\\n  balls = balls.filter(p =\u003e p.active)\\n  if (frameCount % 300 == 1) createBall()\\n}\\n\\nfunction updateBody(body) {\\n  let { x, y } = body.nose;\\n  if (frameCount % 30 == 0) {\\n    if (scores[body.id]) scores[body.id] += 1;\\n    else scores[body.id] = 1;\\n  }\\n  createParticle(x, y, 0, 0, 50, '#ff2222')\\n  balls.forEach(b =\u003e {\\n    if (dist(b.x, b.y, x, y) \u003c 30) {\\n      scores[body.id] = 0\\n      for (let i = 0; i \u003c 30; i++) {\\n        createParticle(x, y, random(-10, 10), random(-10, 10), 30, b.color)\\n      }\\n      b.active = false\\n    }\\n  })\\n  fill('white')\\n  textSize(18)\\n  text(scores[body.id], x, y - 40)\\n}\\n\\nfunction createParticle(x, y, vx = 0, vy = 0, size = 30, color = '#ffffff') {\\n  particles.push({ x, y, vx, vy, size, color })\\n}\\n\\nfunction updateParticle(p) {\\n  p.x += p.vx;\\n  p.y += p.vy;\\n  p.size -= 1;\\n  fill(p.color || \\\"#ff1010\\\");\\n  circle(p.x, p.y, p.size);\\n}\\n\\nfunction createBall() {\\n  balls.push({\\n    x: 0,\\n    y: 0,\\n    vx: random(1, 5),\\n    vy: random(1, 5),\\n    active: true,\\n    color: random(colors),\\n  })\\n}\\n\\nfunction updateBall(p) {\\n  p.x += p.vx;\\n  p.y += p.vy;\\n  if (p.x \u003c 0 || p.x \u003e width) p.vx = -p.vx;\\n  if (p.y \u003c 0 || p.y \u003e height) p.vy = -p.vy;\\n  if (random() \u003c 0.3) createParticle(p.x, p.y, 0, 0, 30, p.color)\\n  blendMode(BLEND)\\n  fill(p.color)\\n  circle(p.x, p.y, 30)\\n}\\n    \u003c/script\u003e\\n  \u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"html, body {\\n  margin: 0;\\n  padding: 0;\\n}\\ncanvas {\\n  display: block;\\n}\\n\",\"js\":\"\"}","created_at":"2025-01-15T10:39:44.555+08:00","updated_at":"2025-01-15T10:57:35.194+08:00","name":"互動遊戲","language":"web","screenshot":{"url":"/uploads/project/screenshot/933158/03862e7f942ffb002c09bc8e30ae2fbb.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":297,"hashid":"meysvmm46","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}