113 lines
3.7 KiB
HTML
113 lines
3.7 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 time = 0;
|
|
let vehicle1;
|
|
let vehicle2;
|
|
let path;
|
|
|
|
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(8);
|
|
vehicle2.maxVelocity = 8;
|
|
path = new Path(0, 300, 600, 300, 20);
|
|
}
|
|
|
|
function draw() {
|
|
background(0);
|
|
drawGrid(32);
|
|
playdemos([追逐鼠标, 小车追逐, 小车巡游, 小车巡线], 10);
|
|
}
|
|
|
|
function 追逐鼠标() {
|
|
vehicle1.seek(createVector(mouseX, mouseY));
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
vehicle1.drawPath(128);
|
|
vehicle1.show();
|
|
textInfo("小车的运动 - 追逐鼠标", "2022-12-12");
|
|
}
|
|
|
|
function 逃避鼠标() {
|
|
vehicle1.flee(createVector(mouseX, mouseY));
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
vehicle1.drawPath(128);
|
|
vehicle1.show();
|
|
textInfo("小车的运动 - 逃避鼠标", "2022-12-12");
|
|
}
|
|
|
|
function 小车追逐() {
|
|
vehicle1.seek(vehicle2.position, 20);
|
|
vehicle2.move();
|
|
vehicle1.move();
|
|
if (vehicle2.turn()) vehicle2.velocity = randomVector(8);
|
|
vehicle1.turn();
|
|
vehicle1.drawPath(128);
|
|
vehicle2.show();
|
|
vehicle1.show();
|
|
textInfo("小车的运动 - 小车追逐", "2022-12-12");
|
|
}
|
|
|
|
function 小车巡游() {
|
|
vehicle1.wander();
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
vehicle1.drawPath(128);
|
|
vehicle1.show();
|
|
textInfo("小车的运动 - 小车巡游", "2022-12-12");
|
|
}
|
|
|
|
function 小车巡线() {
|
|
path.end.y = mouseY;
|
|
vehicle1.follow(path, 20);
|
|
vehicle1.move();
|
|
vehicle1.turn();
|
|
path.show();
|
|
vehicle1.drawPath(128);
|
|
vehicle1.show();
|
|
textInfo("小车的运动 - 小车巡线", "2022-12-12");
|
|
}
|
|
|
|
/**
|
|
* 未完成
|
|
*/
|
|
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(128);
|
|
vehicle1.drawPath(128);
|
|
vehicle2.show();
|
|
vehicle1.show();
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<main></main>
|
|
</body>
|
|
</html>
|