接下来设定一些基本的设定需求 分别拆成 bullet 跟 ball(细胞)两个class的写法
class Ball{
//制造一个class
constructor(args){
this.r = args.r || 100,//大小
this.p = args.p || createVector(width/2,height/2) //位置
this.a = args.a || createVector(0,0),// 重心
this.v = args.v ||p5.Vector.random2D().mult(5) , //动态
// random2D 是 vector 预设参数限制只有一个方向
this.color = random(['#b90c09','#642c0c','#e4e7e6','#b3ada2'])
this.mode = random(["happy","sad"])
this.rId = random(10000)
}
//把 draw
draw(){
// 绘制细菌
if(this.dead){
return // 判定如果已经死了要消失
}
push()
translate(this.p.x,this.p.y)
fill(this.color)
noStroke()
ellipse(0,0,this.r)
if (this.mode=="happy"){
fill(255)
ellipse(0,0,this.r/2,this.r/2)
fill(0)
ellipse(0,0,this.r/3,this.r/3)
}else{
fill(255)
arc(0,0,this.r/2,this.r/2,0,PI)
fill(0)
arc(0,0,this.r/3,this.r/3,0,PI)
}
stroke(this.color)
strokeWeight(6)
noFill()
for(var o=0;o<8;o++){
rotate(PI/4)
beginShape() // 开始画起始点
for(var i=0;i<30;i+=4){
vertex(this.r/2+i*2,sin(i/5 +-frameCount/5 +this.rId)*10 ) //制作触手
}
endShape() // 终点
}
pop()
}
update(){
this.p.add(this.v) // 座标+动态
this.v.add(this.a) // 动态+地心引力
// let mouseV = createVector(mouseX,mouseY)
// let delta = mouseV.sub(this.p).limit(2) //加上sub(this.p) 会马上对应到滑鼠所在座标 所以加上 limit() 可以让object 不会马上移动到滑鼠
// this.p.add(delta)
if (this.mode=="happy"){
this.p.y+=sin(frameCount/(10+this.rId/100))*5
}
if (this.mode=="crazy"){
this.v.x+=random(-5,5) // 如果变成crazy的 x,y
this.v.y+=random(-5,5)
}
this.v.x*=0.99
this.v.y*=0.99
if (this.p.y>height){
this.v.y = - abs( this.v.y)
}
}
escape(){
this.v.x = random(-10,10)
}
setHappy(){
this.mode = 'happy'
}
setMode(mode){
this.mode=mode
}
isBallInRange(x,y){
let d = dist(x,y,this.p.x,this.p.y)
if (d<this.r){
return true
}else{
return false
}
}
}
判定子弹的class
class Bullet{
//制造一个class
constructor(args){
this.r = args.r || 10,//大小
this.p = args.p ||shipP.copy(), //子弹位置
this.a = args.a || createVector(0,0),// 重心
this.v = args.v || createVector(mouseX-width/2,mouseY-height/2).setMag(5), //动态
this.color = 'white'
// random2D 是 vector 预设参数限制只有一个方向
}
//把 draw
draw(){
// 绘制子弹
if(this.dead){
return
}
push()
translate(this.p.x,this.p.y)
fill(this.color)
noStroke()
ellipse(0,0,this.r)
pop()
}
update(){
this.p.add(this.v) // 座标+动态
this.v.add(this.a) // 动态+地心引力
// this.v.x*=0.99
// this.v.y*=0.99
// if (this.p.y>height){
// this.v.y = - abs( this.v.y)
// }
}
}
判定双方的合作标准
var ball;
var balls =[] //给予阵列
var bullets =[] // 子弹
let shipP
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
for(var i=0;i<10;i++){
let ball = new Ball({
r:random(100),
p: createVector(random(width),random(height))
}); //设定新的ball
balls.push(ball) //放入阵列
}
shipP = createVector(width/2,height/2);
// print(ball);
}
function mousePressed(){
let bullet = new Bullet({}); // 要给空物件不然会报错 新增子弹
bullets.push(bullet)
//点击下去会增加一个细菌
// let ball = new Ball({
// r: random(100),
// p: {x:mouseX, y: mouseY}
// })
// balls.push(ball)
// for(let ball of balls){
// ball.setHappy() // 设定眼睛开心模式
// ball.escape() //逃走设定
// }
}
function draw() {
background(0)
if(keyIsPressed){
if(key =='ArrowLeft'){
shipP.x -=5;
}else if(key =='ArrowRight'){
shipP.x +=5;
}else if(key =='ArrowDown'){
shipP.y +=5;
}else{
shipP.y -=5;
}
}
// 制造球体
for(let ball of balls){
ball.update()
ball.draw()
// 设定滑鼠在细胞附近
// if (ball.isBallInRange()){
// ball.color = "#41f25e" // 设定绿色
// ball.setMode("crazy") // 设定变成别的模式
// }
for(let bullet of bullets){
if(!ball.dead && !bullet.dead){
let hitResult = ball.isBallInRange(bullet.p.x,bullet.p.y);
if(hitResult){
ball.color='green'
ball.dead = true
bullet.dead = true
}
}
}
}
for(let bullet of bullets){
bullet.update();
bullet.draw();
}
//增加一个方框
rectMode(CENTER)
fill('#ffc03a');
rect(shipP.x,shipP.y,50)
}
function keyPressed(){
print(key);
// 按空白键
if(key === ' '){
let bullet = new Bullet({}); // 要给空物件不然会报错 新增子弹
bullets.push(bullet)
}
}
<<: Day22 类别与物件--魔术方法2 及 封装private
>>: Day22 - 错误捕捉、全域 CSS、共用 Layout,就用 _app.tsx 来搞定吧!
上一篇文章分析了 Scrum 团队在估点活动的遭遇的困难,以及滞碍难行之处。今天来分享我时常采用的变...
middleware 在上篇文章介绍routing时有提到Party时有传入一个handler不知道...
前言: 经历了三四天的训练,总算让模型维持在9成以上的准确率? val_accuracy 的部分,我...
今日学习目标 常见的交叉验证方法 K-fold Leave one out cross valida...
Scatter Plots 散布图 呼叫scatter(),参数依序是x轴和y轴 plt.scatt...