当流星击中太空船=游戏结束时制作太空飞船游戏 . 如何在SVG中进行碰撞检测？
以下是我的代码 . 我有来自不同方向的流星，我希望流星与火箭飞船相撞 . 火箭船坐标我知道代码中的哪一个 . 流星是随机来自屏幕上的不同方向，所以我没有坐标 . 我查看了路径和其他获取坐标的方法 . 但似乎在动画中我无法想到捕获坐标并创建碰撞检测 . 任何帮助表示赞赏 .
"use strict"
let draw = SVG('drawing');
draw.size(800, 650); //Draws the canvas size, I made it this size so the user doesn't have to scroll screen
/* Calling of functions*/
Background(draw, 0, 0);
cloud(draw,80,80);
//starPower(draw, 0,0);
/* Event Listener when screen is click game starts*/
document.addEventListener("click", startGame) //event listener when user clicks on screen
let score = 0;
/*Function start game where items come and title disappears*/
function startGame() {
title.hide(); //title disappears
author.hide(); //Author name disappears
start.hide(); // click anywhere to start disappears
controls.hide(); //controls to move spaceship
shootTLMeteors(); //Meteors start shooting from upper left corner
shootTRMeteors(); //Meteors start shooting from upper right corner
shootBLMeteors(); //Meteors start shooting from lower left corner
shootBRMeteors(); //Meteors start moving from lower right corner
/*Score function as player is still alive, score increases*/
let timer = setInterval(addscore, 1000);
function addscore(){
score= score++
return score;
}
/*When the game is clicked then the score comes up*/
let scoretext = draw.text("Score:" + timer ).move(100, 10).font({
family: 'Helvetica',
size: 30,
anchor: 'middle',
leading: '1.5em'
});
}
/*End of startGame function*/
/*Function to create star powerup**NEED TO CALL AND PUT RANDOM WHEN METEORS START***/
function starPower(){
let star = draw.polygon('100,10 40,180 190,60, 10,60 160,180').fill('red').stroke({ width: 1 }).animate(100000).move(Math.floor((Math.random() * x) + 800), Math.floor((Math.random() * y) + 650)).path('M 10 621 L 766 92 ');//draws red star
}
function Background(draw, x, y) {
let bg = draw.rect(innerWidth, innerHeight).move(50, 0);
//draw background of game
bg.fill("#33F9FF");
//inital blue background for starting
/*switch (score) {
case 10: bg.fill("#33E6FF")
break;
case 15: bg.fill("#33C7FF")
break;
case 20: bg.fill("#33B5FF")
break;
case 25: bg.fill("#3399FF")
break;
case 30: bg.fill("#3364FF")
break;
case 40: bg.fill("#2F5BE9")
break;
case 50: bg.fill("#2951D0")
break;
case 55: bg.fill("#264CC6")
break;
case 60: bg.fill("#2343AC")
break;
case 65: bg.fill("#1F3C99")
break;
case 70: bg.fill("#1C3585")
break;
case 75: bg.fill("#192E75")
break;
case 80: bg.fill("#182B6A")
break;
case 85: bg.fill("#132256")
break;
case 90: bg.fill("#101D49")
break;
case 95: bg.fill("#0D1738")
break;
case 100: bg.fill("#080E23")
break;
default: bg.fill("green")
break;
}
*/
}
/*Meteors shootings from directions function*/
function shootTLMeteors() {
setInterval(function() {
topLeftMeteor(draw, 800, 800);
}, 3000);
}
/*This function makes meteors shoot from the top left side of the canvas to diagnoal opposite in 3 seconds increments*/
function shootTRMeteors() {
setInterval(function() {
topRightMeteor(draw, 800, 800);
}, 3000);
}
/*This function makes meteors shoot from the top right side of the canvas to diagnoal opposite in 3 seconds increments*/
function shootBLMeteors() {
setInterval(function() {
bottomLeftMeteor(draw, 800, 800);
}, 3000);
}
/*This function makes meteors shoot from the bottom left side of the canvas to diagnoal opposite in 3 seconds increments*/
function shootBRMeteors() {
setInterval(function() {
bottomRightMeteor(draw, 800, 800);
}, 3000);
}
/*This function makes meteors shoot from the bottom right side of the canvas to diagnoal opposite in 3 seconds increments*/
/* The creation of the path of the meteors from upper left side*/
function topLeftMeteor(d, x, y) {
let meteor = d.image('https://clip2art.com/images/asteroid-clipart-5.png', 80, 80);
meteor.animate(10000).move(Math.floor((Math.random() * x) + 600), Math.floor((Math.random() * y) + 1000));
//Inserted image of meteor which will be used to avoid, coordinates are always random from 1-800 which is the canvas size
}
function topRightMeteor(d, x, y) {
let meteor = d.image('https://clip2art.com/images/asteroid-clipart-5.png', 80, 80);
meteor.animate(10000).move(Math.floor((Math.random() * x) + 600), Math.floor((Math.random() * y) + 1000));
//Inserted image of meteor which will be used to avoid, coordinates are always random from 1-800 which is the canvas size
}
function bottomRightMeteor(d, x, y) {
let meteor = d.image('https://clip2art.com/images/asteroid-clipart-5.png', 80, 80);
meteor.animate(10000).move(Math.floor((Math.random() * x) + 800), Math.floor((Math.random() * y) + 650));
//Inserted image of meteor which will be used to avoid, coordinates are always random from 1-800 which is the canvas size
}
function bottomLeftMeteor(d, x, y) {
let meteor = d.image('https://clip2art.com/images/asteroid-clipart-5.png', 80, 80).move(-20,0);
meteor.animate(10000).move(Math.floor((Math.random() * x) + 800), s
//Inserted image of meteor which will be used to avoid, coordinates are always random from 1-800 which is the canvas size
}
function meteor(){
let x = randomVal(0,800);
let y =randomVal(0,800);
let meteor = d.image('https://clip2art.com/images/asteroid-clipart-5.png', 80, 80).move(x,y);
}
function radomVal(min,max){
return Math.floor((Math.random() * max) + min);
}
function cloud(d,x,y){
// initialize the loop
let clx = 0;
let cly = 0;
while (x < 50) {
draw.image('https://upload.wikimedia.org/wikipedia/commons/9/95/Cartoon_cloud.svg').fill("red").move(clx * 50, cly * 50);
clx = clx + 1;
}
// now the loop condition and the code block for the pattern
}
//console.log();
/*
if(meteor.attr("x")>=ship.attr("x") && meteor.attr("x")+10<=ship.attr("x")){
console.log("collide");
}
if(meteor.attr("y")>=ship.attr("y") && meteor.attr("y")+10<=ship.attr("y")){
console.log("collide");
}
//}
*/
let moveY = 300;
let moveX = 300;
/* Inital coordinates of X and Y to move ship*/
let ship = draw.image('https://i.pinimg.com/originals/bd/7c/95/bd7c9566f984f16a696a750711fcb8c0.png', 200, 200);
ship.move(moveX, moveY); /*Inserted image of spaceship which will be used to control*/
document.addEventListener("keypress", ShipControl)
function ShipControl() {
if (event.key == "w") {
moveX = moveX;
moveY = moveY - 10;
ship.move(moveX, moveY);
/*W key moves the spaceship towards the top of screen*/
}
if (event.key == "w" && moveY == 0) {
moveX = moveX;
moveY = moveY + 10;
ship.move(moveX, moveY);
/*W key moves the spaceship towards the top of screen when it hits top of screen it stops moving*/
}
if (event.key == "s") {
moveX = moveX;
moveY = moveY + 10;
ship.move(moveX, moveY);
/*S key moves the spaceship towards the bottom of screen*/
}
if (event.key == "s" && moveY == 550) {
moveX = moveX;
moveY = moveY - 10;
ship.move(moveX, moveY);
/*S key moves the spaceship towards the bottom of screen when it hits bottom of the screen it stops moving*/
}
if (event.key == "a") {
moveY = moveY;
moveX = moveX - 10;
ship.move(moveX, moveY);
/*A key moves the spaceship towards the left of screen*/
}
if (event.key == "a" && moveX == 0) {
moveY = moveY;
moveX = moveX + 10;
ship.move(moveX, moveY);
/*A key moves the spaceship towards the left of screen when it hits left of the screen it stops moving*/
}
if (event.key == "d") {
moveY = moveY;
moveX = moveX + 10;
ship.move(moveX, moveY);
/*D key moves the spaceship towards the right of screen*/
}
if (event.key == "d" && moveX == 700) {
moveY = moveY;
moveX = moveX - 10;
ship.move(moveX, moveY);
/*D key moves the spaceship towards the right of screen when it hits right of the screen it stops moving*/
}
}
let title = draw.text("Meteor Rush").move(400, 50).font({
family: 'Helvetica',
size: 100,
anchor: 'middle',
leading: '1.5em'
}); //Creates title of Meteor Rush
let author = draw.text("Created By: Fran").move(400, 200).font({
family: 'Helvetica',
size: 30,
anchor: 'middle',
leading: '1.5em'
}); //Creates line of Creator
let start = draw.text("Click Anywhere To Start").move(400, 600).font({
family: 'Helvetica',
size: 30,
anchor: 'middle',
leading: '1.5em'
}); //Creation of Click Anywhere to Start
let controls = draw.text("Controls: W=Up, S=Down, A=Left, D=Right").move(400, 500).font({
family: 'Helvetica',
size: 30,
anchor: 'middle',
leading: '1.5em'
}); //Controls
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.js"></script>