0
각 트레일의 프런트 엔드 (이동 끝)가 충돌하는 색상을 확인하여 충돌 감지 시스템을 구현하는 데 문제가 있습니다. 나는 배열 방법을 시도했지만 비참하게 실패했습니다. 저는 자바 스크립트에 상당히 익숙합니다.색상 톤 게임의 충돌 감지
I는 각 프레임 내의
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>
감사