0
各トレイルのフロントエンド（移動端）が当たる色をチェックして衝突検出システムを実装しようとすると問題が発生します。私は配列メソッドを試しましたが、悲惨に失敗しました - 私はかなりjavascriptに新しいです。色のトンゲームでの衝突検出
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>
おかげ