javascript canvas 작은 공 충돌 검출
4955 단어 jscanvas작은 공이 부딪치다
canvas 태그 정의
<div class="cnavasInfo">
<canvas
id="canvas"
width="800"
height="500"
></canvas>
</div>
함수 및 관련 논리 처리
export default {
data() {
return {
canvas: null,
ctx: null,
arcObj: {}
};
},
mounted() {
this.canvas = document.getElementById("canvas");
this.ctx = this.canvas.getContext("2d");
// this.move(); //
// this.moveArc(); // ,
this.moveRect()
},
methods: {
move() {
let x = 0;
let y = 0;
let width = 100;
let height = 100;
let speedX = 2;
let speedY = 2;
let ctx = this.ctx;
ctx.fillStyle = "red";
ctx.fillRect(x, y, width, height);
setInterval(() => {
ctx.clearRect(x, y, this.canvas.width, this.canvas.height);
x += speedX;
if (x > this.canvas.width - width) {
speedX *= -1;
} else if (x < 0) {
speedX *= -1;
}
y += speedY;
if (y > this.canvas.height - height) {
speedY *= -1;
} else if (y < 0) {
speedY *= -1;
}
ctx.fillRect(x, y, width, height);
}, 10);
// this.requestmove(x,y,width,height,ctx,speedX,speedY); //
},
requestmove(x, y, width, height, ctx, speedX, speedY) {
ctx.clearRect(x, y, this.canvas.width, this.canvas.height);
x += speedX;
if (x > this.canvas.width - width) {
speedX *= -1;
} else if (x < 0) {
speedX *= -1;
}
y += speedY;
if (y > this.canvas.height - height) {
speedY *= -1;
} else if (y < 0) {
speedY *= -1;
}
ctx.fillRect(x, y, width, height);
window.requestAnimationFrame(
this.requestmove(x, y, width, height, ctx, speedX, speedY)
);
},
moveArc(x, y, r, speedX, speedY) {
this.x = x;
this.y = y;
this.r = r;
this.speedX = speedX;
this.speedY = speedY;
this.moveUpdata = function() {
this.x += this.speedX;
if (this.x > this.canvas.width - this.r) {
this.speedX *= -1;
} else if (this.x < 0) {
this.speedX *= -1;
}
this.y += this.speedY;
if (this.y > this.canvas.height - this.r) {
this.speedY *= -1;
} else if (this.y < 0) {
this.speedY *= -1;
}
};
},
moveRect(){
//
function Rect(x,y,width,height,color,speedX,speedY,ctx,canvas) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color
this.speedX = speedX
this.speedY = speedY
this.ctxRect = ctx
this.canvas = canvas
}
Rect.prototype.draw = function() {
this.ctxRect.beginPath();
this.ctxRect.fillStyle = this.color
this.ctxRect.fillRect(this.x,this.y,this.width,this.height)
this.ctxRect.closePath();
}
Rect.prototype.move = function() {
this.x += this.speedX
if(this.x > this.canvas.width - this.width){
this.speedX *= -1
} else if(this.x < 0){
this.speedX *= -1
}
this.y += this.speedY
if(this.y > this.canvas.height - this.height){
this.speedY *= -1
} else if(this.y < 0){
this.speedY *= -1
}
}
let rect1 = new Rect(0,100,100,100,'red',2,2,this.ctx,this.canvas)
let rect2 = new Rect(300,100,100,100,'blue',-2,-2,this.ctx,this.canvas)
// rect1.draw();
// rect2.draw()
let animate = ()=>{
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
rect1.draw()
rect1.move()
rect2.draw()
rect2.move()
let rect1Min = rect1.x;
let rect1Max = rect1.x + rect1.width
let rect2Min = rect2.x
let rect2Max = rect2.x + rect2.width
let min = Math.max(rect1Min,rect2Min)
let max = Math.min(rect1Max,rect2Max)
if(min < max){
rect1.speedX *= -1;
rect1.speedY *= 1;
rect2.speedX *= -1
rect2.speedY *= 1
}
window.requestAnimationFrame(animate)
}
animate()
}
}
};
스타일 제어
#canvas {
border: 1px solid black;
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.