如何在Javascript中检查方形画布是否重叠？
我正在创建一个游戏，黄色方块必须穿过所有其他方块才能到达屏幕顶部。我在测试方块是否重叠以重置黄色方块时遇到问题。我尝试过实现这个网站上的其他方法，但似乎没有一个有效，除非我实现了错误的方法 现在，在intersectRect（i）方法中，我正在检查正方形的边与玩家正方形的边 我有另一个错误，这不是最重要的，但值得一提的是，当黄色方块到达屏幕顶部时，分数会增加很多值，而不是仅仅1 谢谢如何在Javascript中检查方形画布是否重叠？,javascript,html,canvas,html5-canvas,intersection,Javascript,Html,Canvas,Html5 Canvas,Intersection,我正在创建一个游戏，黄色方块必须穿过所有其他方块才能到达屏幕顶部。我在测试方块是否重叠以重置黄色方块时遇到问题。我尝试过实现这个网站上的其他方法，但似乎没有一个有效，除非我实现了错误的方法 现在，在intersectRect（i）方法中，我正在检查正方形的边与玩家正方形的边 我有另一个错误，这不是最重要的，但值得一提的是，当黄色方块到达屏幕顶部时，分数会增加很多值，而不是仅仅1 谢谢 <html> <canvas id="gameCanvas" width="800"
<html>
<canvas id="gameCanvas" width="800" height="600">
</canvas>
<script>
var canvas;
var canvasContext;
//square variables
var squares = [];
var squareX = [50, 0, 640, 400, 575, 300, 373];
var squareY = [100, 150,200, 250, 300, 350, 400];
var forward = [true, true, true, true, true, true, true];
var interval = [15, 15, 15, 15, 15, 15];
const SQUARE_SIZE = 50;
//player variables
var player;
var playerX = 0;
var playerY = 0;
var intervalPlayer = 0;
const PLAYER_SIZE = 50;
var score = 0;
window.onload = function(){
canvas=document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
function calcMousePos(evt){
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top - root.scrollTop;
return{
x:mouseX,
y:mouseY
};
}
//get mouse movement
canvas.addEventListener('mousemove', function(evt){
var mousePos = calcMousePos(evt);
playerX = mousePos.x;
playerY = mousePos.y;
});
//update screen
var framesPerSecond = 30;
setInterval(function(){
moveEverything();
drawEverything();
},1000/framesPerSecond);
}
//moves each square based on the interval
function moveEverything(){
for(var i = 0; i < squareX.length; i++){
if(!forward[i]){
forward[i] = false;
if(interval[i] > 0){
interval[i] *= -1;
}
if(squareX[i] < 0){
forward[i] = true;
}
}else if(forward[i]){
if(interval[i] < 0){
interval[i] *= -1;
}
if(squareX[i] > canvas.width - 50)
{
forward[i] = false;
}
}else{
console.log("Error ball " + i);
}
}
}
//draws each square on the background canvas
function drawEverything(){
for(var i = 0; i < squareX.length; i++){
squareX[i] += interval[i];
}
//background
colorRect(0,0,canvas.width,canvas.height, 'salmon');
//score
canvasContext.fillStyle = 'black';
canvasContext.fillText(score, 10, 10);
//red square
squares[0] = colorRect(squareX[0],squareY[0],SQUARE_SIZE,SQUARE_SIZE, 'red');
//blue square
squares[1] = colorRect(squareX[1],squareY[1],SQUARE_SIZE,SQUARE_SIZE, 'blue');
//green square
squares[2] = colorRect(squareX[2],squareY[2],SQUARE_SIZE,SQUARE_SIZE, 'green');
//white square
squares[3] = colorRect(squareX[3],squareY[3],SQUARE_SIZE,SQUARE_SIZE, 'white');
//black square
squares[4] = colorRect(squareX[4],squareY[4],SQUARE_SIZE,SQUARE_SIZE, 'black');
//orange square
squares[5] = colorRect(squareX[5],squareY[5],SQUARE_SIZE,SQUARE_SIZE, 'orange');
//purple square
squares[6] = colorRect(squareX[6],squareY[6],SQUARE_SIZE,SQUARE_SIZE, 'mediumPurple');
//player
player = colorRect(playerX,playerY,PLAYER_SIZE,PLAYER_SIZE,'yellow');
checkContact();
checkWin();
}
//functions to reate rects
function colorRect(leftX, topY, width, height, drawColor){
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX,topY,width,height);
}
function colorCircle(centerX, centerY, radius, color){
//draws ball
canvasContext.fillStyle=color;
canvasContext.beginPath();
canvasContext.arc(centerX,centerY,radius,0,Math.PI * 2, true);
canvasContext.fill();
}
//check for contact between the squares
function checkContact(){
for(var i = 0; i < squareX.length; i++){
if(intersectRect(i))
{
console.log("Overlap");
playerReset();
}
else
{
//none
}
}
//while(playerY < squareY[i] )
}
//check the borders of the squares for contact
function intersectRect(i){
return !(playerX > squareX[i] + 50 ||
playerX + 50 < squareY[i] ||
playerY > squareY[i] + 50 ||
playerY + 50 < squareY[i]);
}
//check if yellow square is at top of square
function checkWin(){
window.setTimeout(function(){
if(playerY < PLAYER_SIZE){
playerReset();
for(var i = 0; i < squareX.length; i++)
{
interval[i] += score/2;
}
score++;
}
},1000);
}
//reset the player to original position
function playerReset(){
playerX = canvas.width/2;
playerY = canvas.height - 50;
}
</script>
var帆布；
var canvasContext；
//平方变量
var平方=[]；
var squareX=[50,0640400575300373]；
var平方=[100150200250300350400]；
var forward=[真，真，真，真，真，真，真]；
var区间=[15,15,15,15,15,15]；
const SQUARE_SIZE=50；
//玩家变量
var播放器；
var-playerX=0；
var-playerY=0；
var intervalPlayer=0；
const PLAYER_SIZE=50；
var得分=0；
window.onload=函数（）{
canvas=document.getElementById（'gameCanvas'）；
canvasContext=canvas.getContext（'2d'）；
功能calcMousePos（evt）{
var rect=canvas.getBoundingClientRect（）；
var root=document.documentElement；
var mouseX=evt.clientX-rect.left-root.scrollLeft；
var mouseY=evt.clientY-rect.top-root.scrollTop；
返回{
x:鼠标，
y:老鼠
};
}
//获取鼠标移动
canvas.addEventListener（'mousemove'，函数（evt）{
var mousePos=calcMousePos（evt）；
playerX=mousePos.x；
playerY=mousePos.y；
});
//更新屏幕
var framesPerSecond=30；
setInterval（函数（）{
移动一切（）；
抽屉物品（）；
}，1000/帧每秒）；
}
//根据间隔移动每个正方形
函数moveEverything（）{
对于（变量i=0；i0）{
区间[i]*=-1；
}
if（平方[i]<0）{
正向[i]=真；
}
}else if（转发[i]）{
if（间隔[i]<0）{
区间[i]*=-1；
}
如果（平方[i]>canvas.width-50）
{
正向[i]=假；
}
}否则{
控制台日志（“错误球”+i）；
}
}
}
//在背景画布上绘制每个正方形
函数drawerything（）{
对于（变量i=0；isquareX[i]+50 | |
playerX+50squareY[i]+50||
playerY+50<平方[i]）；
}
//检查黄色方块是否位于方块顶部
函数checkWin（）{
setTimeout（函数（）{
if（游戏玩家<玩家大小）{
playerReset（）；
对于（变量i=0；i <script>
var canvas;
var canvasContext;
var gamePaused = false;
//square variables
var squares = [];
var squareX = [50, 0, 640, 400, 575, 300, 373];
var squareY = [100, 150,200, 250, 300, 350, 400];
var forward = [true, true, true, true, true, true, true];
var interval = [15, 15, 15, 15, 15, 15, 15];
const SQUARE_SIZE = 50;
//player variables
var player;
var playerX = 0;
var playerY = 0;
var intervalPlayer = 0;
const PLAYER_SIZE = 50;
var score = 0;
//pause game
function unpause() { gamePaused = false } // un pause game
function pauseFor(time = 1000){ // defaults to 1 second
pauseGame = true;
setTimeout(unpause,time);
}
window.onload = function(){
canvas=document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
function calcMousePos(evt){
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top - root.scrollTop;
return{
x:mouseX,
y:mouseY
};
}
//get mouse movement
canvas.addEventListener('mousemove', function(evt){
var mousePos = calcMousePos(evt);
playerX = mousePos.x;
playerY = mousePos.y;
});
//update screen
var framesPerSecond = 30;
function mainLoop(){
moveEverything();
drawEverything();
requestAnimationFrame(mainLoop); // request the next frame
}
requestAnimationFrame(mainLoop);
}
//moves each square based on the interval
function moveEverything(){
for(var i = 0; i < squareX.length; i++){
if(!forward[i]){
forward[i] = false;
if(interval[i] > 0){
interval[i] *= -1;
}
if(squareX[i] < 0){
forward[i] = true;
}
}else if(forward[i]){
if(interval[i] < 0){
interval[i] *= -1;
}
if(squareX[i] > canvas.width - 50)
{
forward[i] = false;
}
}else{
console.log("Error ball " + i);
}
}
}
//draws each square on the background canvas
function drawEverything(){
for(var i = 0; i < squareX.length; i++){
squareX[i] += interval[i];
}
//background
colorRect(0,0,canvas.width,canvas.height, 'salmon');
//score
canvasContext.fillStyle = 'black';
canvasContext.fillText(score, 10, 10);
//red square
squares[0] = colorRect(squareX[0],squareY[0],SQUARE_SIZE,SQUARE_SIZE, 'red');
//blue square
squares[1] = colorRect(squareX[1],squareY[1],SQUARE_SIZE,SQUARE_SIZE, 'blue');
//green square
squares[2] = colorRect(squareX[2],squareY[2],SQUARE_SIZE,SQUARE_SIZE, 'green');
//white square
squares[3] = colorRect(squareX[3],squareY[3],SQUARE_SIZE,SQUARE_SIZE, 'white');
//black square
squares[4] = colorRect(squareX[4],squareY[4],SQUARE_SIZE,SQUARE_SIZE, 'black');
//orange square
squares[5] = colorRect(squareX[5],squareY[5],SQUARE_SIZE,SQUARE_SIZE, 'orange');
//purple square
squares[6] = colorRect(squareX[6],squareY[6],SQUARE_SIZE,SQUARE_SIZE, 'purple');
//player
player = colorRect(playerX,playerY,PLAYER_SIZE,PLAYER_SIZE,'yellow');
if(! gamePaused ) { // if not pause
// do everything that should not be done during paused game
checkContact();
checkWin();
} else {
// you may want to show that you are waiting from the next round
canvasContext.fillStyle = "black";
canvasContext.textAlign = "center";
canvasContext.fillText("Get ready",canvas.width / 2, canvas.height / 4);
}
}
//functions to reate rects
function colorRect(leftX, topY, width, height, drawColor){
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX,topY,width,height);
}
function colorCircle(centerX, centerY, radius, color){
//draws ball
canvasContext.fillStyle=color;
canvasContext.beginPath();
canvasContext.arc(centerX,centerY,radius,0,Math.PI * 2, true);
canvasContext.fill();
}
//check for contact between the squares
function checkContact(){
for(var i = 0; i < squareX.length; i++){
if(intersectRect(i)){
resetPlayer();
pauseFor(); // pause for default 1 second
break; // this breaks out of the for loop
// no point checking for other hits
// once you found one.
}
}
}
//check the borders of the squares for contact
function intersectRect(i){
return !(playerX > squareX[i] + 50 ||
playerX + 50 < squareX[i] ||
playerY > squareY[i] + 50 ||
playerY + 50 < squareY[i]);
}
//check if yellow square is at top of square
function checkWin(){
if(playerY < PLAYER_SIZE){
gamePaused = true;
score += 1;
resetPlayer(); // reset the player
speedUpSquare(); // create a function that speeds up the squares
pauseFor(); // pause for default 1 second
}
}
function speedUpSquare(){
for(var i = 0; i < squareX.length; i++)
{
interval[i] += score/2;
}
}
//reset the player to original position
function resetPlayer(){
playerX = canvas.width/2;
playerY = canvas.height - 50;
pauseFor();
}
</script>
// create a global that pauses the game
// when this is true then you are waiting to start the next play
var gamePaused = false;
function unpause() { gamePaused = false } // un pause game
function pauseFor(time = 1000){ // defaults to 1 second
pauseGame = true;
setTimeout(unpause,time);
}
function checkWin(){
if(playerY < PLAYER_SIZE){
gamePaused = true;
score += 1;
resetPlayer(); // reset the player
speedUpSquare(); // create a function that speeds up the squares
pauseFor(); // pause for default 1 second
}
}
// where you had
setInterval(function(){ ...
// replace that interval function with
// create a mainloop function
function mainLoop(){
moveEverything();
drawEverything();
requestAnimationFrame(mainLoop); // request the next frame
}
requestAnimationFrame(mainLoop); // this will start the me main loop
if(! gamePaused ) { // if not pause
// do everything that should not be done during paused game
checkContact();
checkWin();
} else {
// you may want to show that you are waiting from the next round
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Get ready",c.width / 2, c.height / 4);
}
function intersectRect(i){
return !(playerX > squareX[i] + 50 ||
playerX + 50 < squareY[i] ||
//...................^........ Should be squareX[i]
playerY > squareY[i] + 50 ||
playerY + 50 < squareY[i]);
}
// modify the to pause the game on hit
function checkContact(){
for(var i = 0; i < squareX.length; i++){
if(intersectRect(i)){
playerReset();
pauseFor(500); // pause for default 1/2 second
break; // this breaks out of the for loop
// no point checking for other hits
// once you found one.
}
}
}
// you do this ?? colorRect does not return anything so dont know why
// you do this. Same for the squares
player = colorRect(playerX,playerY,PLAYER_SIZE,PLAYER_SIZE,'yellow');
// would be better as
colorRect(playerX,playerY,PLAYER_SIZE,PLAYER_SIZE,'yellow');
var squareX = [50, 0, 640, 400, 575, 300, 373];
var squareY = [100, 150,200, 250, 300, 350, 400];
var forward = [true, true, true, true, true, true, true];
var interval = [15, 15, 15, 15, 15, 15];
const SQUARE_SIZE = 50;
var squares = [{
x : 50,
y : 100,
forward : true,
interval : 15,
size : 50,
color : "blue"
},{
x : 0,
y : 150,
forward : true,
interval : 15,
size : 50,
color : "Green"
},
// and so on
]
const SQUARE_SPEED = 15 / 2; // frame rate now 60 so half speed
const SQUARE_SIZE = 50;
const squares = [];
// when you create a function with arguments you can set defaults with
// the equal eg function blah(data = 1). If I call blah() without the
// argument it will default to 1. If I call with the argumen blah(2) data
// will be set to the argument 2
const addSquare = (x,y,color,forward = true,interval = SQUARE_SPEED,size = SQUARE_SIZE) => {
squares.push({ x, y, color, forward, interval, size, });
}
addSquare(50, 100, 'red');
addSquare(0, 150, 'blue');
addSquare(640, 200, 'green');
addSquare(400, 250, 'white');
addSquare(575, 300, 'black');
addSquare(300, 350, 'orange');
addSquare(373, 400, 'mediumPurple');
function testForHit(){
var i;
for(i = 0; i < squares.length; i++){
var s = squares[i]; // get a square from the array
if( !(playerX > s.x + s.size || playerX + 50 < s.x ||
playerY > s.y + s.size || playerY + 50 < s.y){
playerReset();
pauseFor(500);
break;
}
}
}
function drawSquares(){
var i;
for(i = 0; i < squares.length; i++){
var s = squares[i]; // get a square from the array
colorRect(s.x,s.y,s.size,s.size,s.color);
}
}