120 lines
3.8 KiB
HTML
120 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="/css/style.css" />
|
|
<title>小车的运动</title>
|
|
<script src="/p5/p5.min.js"></script>
|
|
<script src="/p5/addons/p5.sound.min.js"></script>
|
|
<script src="/lib/utils.js"></script>
|
|
<script src="/lib/vehicle.js"></script>
|
|
<script>
|
|
let vehicle1;
|
|
let vehicle2;
|
|
let path;
|
|
let time = 0;
|
|
|
|
function setup() {
|
|
createCanvas(600, 600);
|
|
cursor(CROSS);
|
|
frameRate(60);
|
|
vehicle1 = new Vehicle(300, 300, "#CCCCCC");
|
|
vehicle1.velocity = createVector(6, 0);
|
|
vehicle2 = new Vehicle(300, 300, "#CC3333");
|
|
vehicle2.velocity = randomVector(6);
|
|
path = new Path(0, 300, 600, 300, 20);
|
|
}
|
|
|
|
function draw() {
|
|
background(0);
|
|
drawGrid(32);
|
|
let n = Math.floor(frameCount / 300) % 6;
|
|
[追逐鼠标, 逃避鼠标, 小车追逐, 小车巡游, 小车巡线, 道路追逐][
|
|
n
|
|
]();
|
|
let b = [
|
|
"追逐鼠标",
|
|
"逃避鼠标",
|
|
"小车追逐",
|
|
"小车巡游",
|
|
"小车巡线",
|
|
"道路追逐",
|
|
][n];
|
|
textInfo(`小车的运动 - ${b}`, "2022-12-12");
|
|
}
|
|
|
|
function 追逐鼠标() {
|
|
vehicle1.seek(createVector(mouseX, mouseY));
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
vehicle1.drawPath();
|
|
vehicle1.show();
|
|
}
|
|
|
|
function 逃避鼠标() {
|
|
vehicle1.flee(createVector(mouseX, mouseY));
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
vehicle1.drawPath();
|
|
vehicle1.show();
|
|
}
|
|
|
|
function 小车追逐() {
|
|
vehicle1.seek(vehicle2.position, 20);
|
|
vehicle2.move();
|
|
vehicle1.move();
|
|
if (vehicle2.turn())
|
|
vehicle2.velocity = randomVector(random(2, 5));
|
|
vehicle1.turn();
|
|
vehicle1.drawPath();
|
|
vehicle2.show("point");
|
|
vehicle1.show();
|
|
}
|
|
|
|
function 小车巡游() {
|
|
vehicle1.wander();
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
vehicle1.drawPath();
|
|
vehicle1.show();
|
|
}
|
|
|
|
function 小车巡线() {
|
|
path.end.y = mouseY;
|
|
vehicle1.follow(path, 20);
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
path.show();
|
|
vehicle1.drawPath();
|
|
vehicle1.show();
|
|
}
|
|
|
|
/**
|
|
* 未完成
|
|
*/
|
|
function 道路追逐() {
|
|
// path.end.y = mouseY;
|
|
vehicle2.follow(path, 50);
|
|
vehicle1.seek(vehicle2.position, 100);
|
|
vehicle2.flee(vehicle1.position, 100);
|
|
|
|
vehicle2.move();
|
|
vehicle1.move();
|
|
vehicle2.turn();
|
|
vehicle1.turn();
|
|
path.show();
|
|
vehicle2.drawPath();
|
|
vehicle1.drawPath();
|
|
vehicle2.show();
|
|
vehicle1.show();
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body>
|
|
</html>
|