0
我遇到了試圖通過檢查每條線索的前端(移動結束)命中的顏色來實現碰撞檢測系統的問題。我嘗試過數組方法,但失敗慘了 - 我對JavaScript很新。通過顏色在噸遊戲中進行碰撞檢測
我想執行該檢查,如果
grid("cyan",cyan_x,cyan_y)
grid("red",red_x,red_y)
每個幀內
都在觸摸除了灰色(背景顏色)的任何顏色的碰撞檢測方法。如果觸及任何其他顏色,遊戲應調用
if (cyan_x == 0 || cyan_x == 159 || cyan_y == 0 ||cyan_y == 159) {
red_x = 130;
red_y = 80;
cyan_x = 30;
cyan_y = 80;
dx = 1;
dy = 1;
directionr = "l";
directionc = "r";
context.clearRect(0,0,canvas.width,canvas.height);
redscore = redscore + 1;
}
或紅色線索的等價物。 所有我的代碼:
<script>
//variables
var canvas, context;
//current x,y coordinates of each trail within a frame
var red_x, red_y, cyan_x, cyan_y;
//how much coordinates change within each frame
var dx, dy;
//the direction of each trail
var directionr;
var directionc;
//trail scores
var redscore, cyanscore;
//this function is used to draw the individual squares to make a trail
function grid(color,c,u){
context.beginPath();
//note that the 800x800 canvas is broken into 160x160 by multiplying the
//x,y, values of context.rect by 5
context.rect(c*5,u*5,5,5);
context.fillStyle = color;
context.fill();
context.closePath();
}
function start() {
startGame();
}
//this function runs all the other functions and properly starts the game
function startGame(){
setupGame();
setInterval(playGame,45);
context.clearRect(0,0,canvas.width,canvas.height);
redscore = 0;
cyanscore = 0;
};
//when one of the trails score reaches 3 then the game should stop
function stopGame(){
context.clearRect(0,0,canvas.width,canvas.height);
};
//this function sets uo the games by initialising starting positions etc
function setupGame() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
red_x = 130;
red_y = 80;
cyan_x = 30;
cyan_y = 80;
dx = 1;
dy = 1;
directionr = "l";
directionc = "r";
window.addEventListener("keydown", onKeyDown, true);
};
//movement controls
function onKeyDown(e){
if (e.keyCode == 37 && directionr != "r") { directionr = "l";} // left arrow pressed
if (e.keyCode == 38 && directionr != "d") { directionr = "u";} // up arrow pressed
if (e.keyCode == 39 && directionr != "l") { directionr = "r";} // right arrow pressed
if (e.keyCode == 40 && directionr != "u") { directionr = "d";} // down arrow pressed
if (e.keyCode == 65 && directionc != "r") { directionc = "l";} // left arrow pressed
if (e.keyCode == 87 && directionc != "d") { directionc = "u";} // up arrow pressed
if (e.keyCode == 68 && directionc != "l") { directionc = "r";} // right arrow pressed
if (e.keyCode == 83 && directionc != "u") { directionc = "d";} // down arrow pressed
}
function playGame(){
drawCycles();
};
//this function manages each frame - keeping track of score, and ideally would
//check if collisions occur
function drawCycles(){
//draw trails
grid("red",red_x,red_y);
grid("cyan",cyan_x,cyan_y);
//display score
document.getElementById("redscore").innerHTML = "Red's score: " + redscore;
document.getElementById("cyanscore").innerHTML = "Cyan's score: " + cyanscore;
//reset positions when trails hit the edge
if (red_x == 0 || red_x == 159 || red_y == 0 || red_y == 159) {
red_x = 130;
red_y = 80;
cyan_x = 30;
cyan_y = 80;
dx = 1;
dy = 1;
directionr = "l";
directionc = "r";
context.clearRect(0,0,canvas.width,canvas.height);
cyanscore = cyanscore + 1;
}
if (cyan_x == 0 || cyan_x == 159 || cyan_y == 0 ||cyan_y == 159) {
red_x = 130;
red_y = 80;
cyan_x = 30;
cyan_y = 80;
dx = 1;
dy = 1;
directionr = "l";
directionc = "r";
context.clearRect(0,0,canvas.width,canvas.height);
redscore = redscore + 1;
}
//check if its hitting the edges
if (directionr == "l" && red_x != 0) { red_x -= dx; };
if (directionr == "r" && red_x != 159) { red_x += dx; };
if (directionr == "u" && red_y != 0) { red_y -= dy; };
if (directionr == "d" && red_y != 159) { red_y += dy; };
if (directionc == "l" && cyan_x != 0) { cyan_x -= dx; };
if (directionc == "r" && cyan_x != 159) { cyan_x += dx; };
if (directionc == "u" && cyan_y != 0) { cyan_y -= dy; };
if (directionc == "d" && cyan_y != 159) { cyan_y += dy; };
//scoring system
if (cyanscore >= 3) {
document.getElementById("redscore").innerHTML = "Red loses";
document.getElementById("cyanscore").innerHTML = "Cyan wins";
stopGame();
}
if (redscore >= 3) {
document.getElementById("redscore").innerHTML = "Red wins";
document.getElementById("cyanscore").innerHTML = "Cyan loses";
stopGame();
}
};
</script>
感謝