====== Steve Wang's Surprising Space: Movement ====== ====== HTML Code ======

====== CSS Code ======


html{
    border: 8px solid green;
  position: absolute;
  width: 100%;
  height: 100%;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000000;
  z-index: 100%;
}

 * {
 cursor: none;
 }

 user-select: none;
 
 -o-user-select: none;

====== Javascript Code ======


//setup
class Point {
  constructor(x, y) {
    this.y = y;
    this.x = x;
  }
  move(xDistance, yDistance) {
    return new Point(this.x + xDistance, this.y + yDistance)
  }
  moveByAngle(angle, distance) {
    let r = angle * Math.PI / 180;
    return new Point(this.x + distance * Math.sin(r), this.y + distance * Math.cos(r))
  }
}

let canvasSize=new Point(window.innerWidth-10,window.innerHeight-10)

var draw = SVG().addTo('body').size(window.innerWidth-20, window.innerHeight-30)
var gaming=false
var roundNumber = 0
var checkForLoss = false
var buttonDrawn = false
var rocketAnimation=[]
var instructionsShown=false
var shockDelay=false
var shockEnergy=5
var hitCounting=0
var stars=[]
var aimCircle = draw.circle(40).fill({
    color: 'green',
    opacity: 0
  }).stroke({
    color: 'green',
    opacity: 1,
    width: 3
  }).move(-100, 0)

var aimLine = buildArray(2, x => draw.rect(10, 3).move(-100, 0).fill("green"))
var topBotaimLine = buildArray(2, x => draw.rect(3, 10).move(-100, 0).fill("green"))

var shooting=true

function buildArray(n, fillFunction) {
  let outputArray = [];
  for (let i = 0; i < n; i++) {
    outputArray.push(fillFunction(i));
  }
  return outputArray;
}

function circlePattern(cSize, cPosition) {
  let angle = 360 / cPosition.length
  return cPosition.map((p, i) => {
    return p.moveByAngle(i * angle, cSize)
  })
}

function randomRange(min, max) {
  return Math.floor(min + (max - min) * (Math.random()));
}

function interleave(array1, array2) {
  let newArray = []
  let timesToRepeat = 0
  if (array1.length > array2.length) {
    timesToRepeat = array1.length
  } else {
    timesToRepeat = array2.length
  }
  for (let i = 0; i < timesToRepeat; i++) {
    if (array1[i] != undefined) {
      newArray.push(array1[i])
    }
    if (array2[i] != undefined) {
      newArray.push(array2[i])
    }
  }
  return newArray
}

function colorSelector(colorArray) {
  return colorArray[randomRange(0, 100) % colorArray.length]
}

function safeSplice(inputArray, amountToRemove,indexToRemove,replaceWith) {
  let array1 = inputArray.slice(0, indexToRemove )
if (replaceWith!=undefined){
array1.push(replaceWith)}
  let array2 = inputArray.slice(indexToRemove + amountToRemove, inputArray.length)
  return array1.concat(array2)
}

function textToPointArray(textToConvert) {
  let parsed = JSON.parse(textToConvert)
  let returnArray = []
  parsed.forEach(x => returnArray.push(new Point(x.x, x.y)))
  return returnArray
}

function polygonStringToPointArray(stringToParse) {
  let stringSplit = stringToParse.split('')
  stringSplit.forEach((x, i) => {
    if (x == ' ') {
      stringSplit = safeSplice(stringSplit,1, i, ',')
    }
  })
  return unsplitStringNumberArray(stringSplit)
}
// An array filled with strings. The strings contain numbers.

function unsplitStringNumberArray(stringNumbers) {
  stringNumbers.push(',')
  let oldComma = 0
  let returnArray = []
  let add = 0
  stringNumbers.forEach((x, i) => {
    if (x == ',') {
      let returnText = '';
      for (let b = 0; b < i - oldComma - add; b++) {
        returnText += stringNumbers[b + oldComma + add]
      }
      returnArray.push(JSON.parse(returnText))
      oldComma = i
      if (oldComma != 0) {
        add = 1
      }
    }
  })
  return returnArray
}

function numberArrayToPointArray(array) {
  let returnArray = []
  if ((array.length % 2) != 0) {
    return 'missing Y axis (array length not even)'
  }
  returnArray.push(new Point(array[0], array[1]))
  for (let i = 0; i < array.length / 2 - 1; i++) {
    returnArray.push(new Point(array[2 * (i + 1)], array[2 * (i + 1) + 1]))
  }
  return returnArray
}

//console.log(asteroids[0].attr('r'))
// aim
 
function aimItems() {
aimCircle.remove()
aimLine.forEach(x=>x.remove())
topBotaimLine.forEach(x=>x.remove())
   aimCircle = draw.circle(40).fill({
    color: 'green',
    opacity: 0
  }).stroke({
    color: 'green',
    opacity: 1,
    width: 3
  }).move(-100, 0)

 aimLine = buildArray(2, x => draw.rect(10, 3).move(-100, 0).fill("green"))
 topBotaimLine = buildArray(2, x => draw.rect(3, 10).move(-100, 0).fill("green"))
}

aimItems()

//mouseX(max:800) and mouseY:(max:630)
let mouseX = 0
let mouseY = 0
/*
draw.on('mousemove', (e) => {

  const {
    x,
    y
  } = draw.point(e.pageX, e.pageY);
  mouseX = e.pageX
  mouseY = e.pageY
  //console.log(mouseX,mouseY)
  aimCircle.move(mouseX - 20, mouseY - 20)
  aimLine[0].move(new Point(mouseX, mouseY).moveByAngle(360 / 4, -20).x, new Point(mouseX, mouseY).moveByAngle(360 / 4, -20).y - 1)
  aimLine[1].move(new Point(mouseX, mouseY).moveByAngle((360 / 4) * 3, -11).x, new Point(mouseX, mouseY).moveByAngle((360 / 4) * 3, -10).y - 2)
  topBotaimLine[0].move(mouseX - 2, mouseY + 10)
  topBotaimLine[1].move(mouseX - 2, mouseY - 20)

})
*/
document.addEventListener('mousemove', ((e)=>{ 
mouseX = e.pageX - 10
mouseY = e.pageY - 8
aimCircle.move(mouseX - 20, mouseY - 20)
  aimLine[0].move(new Point(mouseX, mouseY).moveByAngle(360 / 4, -20).x, new Point(mouseX, mouseY).moveByAngle(360 / 4, -20).y - 1)
  aimLine[1].move(new Point(mouseX, mouseY).moveByAngle((360 / 4) * 3, -11).x, new Point(mouseX, mouseY).moveByAngle((360 / 4) * 3, -10).y - 2)
  topBotaimLine[0].move(mouseX - 2, mouseY + 10)
  topBotaimLine[1].move(mouseX - 2, mouseY - 20)
}))

//Ensure the mouse position fixes itself even when the page is scrolled
document.addEventListener('wheel', ((e)=>{ 
mouseX = e.pageX - 10
mouseY = e.pageY - 8
aimCircle.move(mouseX - 20, mouseY - 20)
  aimLine[0].move(new Point(mouseX, mouseY).moveByAngle(360 / 4, -20).x, new Point(mouseX, mouseY).moveByAngle(360 / 4, -20).y - 1)
  aimLine[1].move(new Point(mouseX, mouseY).moveByAngle((360 / 4) * 3, -11).x, new Point(mouseX, mouseY).moveByAngle((360 / 4) * 3, -10).y - 2)
  topBotaimLine[0].move(mouseX - 2, mouseY + 10)
  topBotaimLine[1].move(mouseX - 2, mouseY - 20)
}))


//Star
//starPoints
var starColor = draw.gradient('linear', function(add) {
  add.stop(0, '#F2FF00')
  add.stop(1, '#FFFFFF')
})


function buildStarPoints(numberOfPoints) {
  let startPosition = new Point(randomRange(10, 1000), randomRange(10, 1000))
  let starSize = randomRange(-5,3)
  let topPoints = buildArray(numberOfPoints / 2, i => new Point(startPosition.x, startPosition.y))
  let amountToRotate = 360 / topPoints.length
  let positionedTopPoints = topPoints.map((x, index) => x.moveByAngle(amountToRotate* index, starSize))
  let indentedPoints = positionedTopPoints.map((x, index) => x.moveByAngle((amountToRotate) * index + 48, starSize + 5))
  let allPoints = interleave(positionedTopPoints, indentedPoints)
  return allPoints
}

//All stars array
let polygons = []

//star class
class Star {
  constructor() {
    this.starPoints = buildStarPoints(10)
    this.newStar = []
    this.newPolygon = 0
    this.starPosition = new Point(canvasSize.x,canvasSize.y)
  }
  draw() {
    this.starPoints.forEach(x => this.newStar.push(x.x, x.y))
    this.newStar = this.newStar.join()
   
    this.newPolygon = draw.polygon(this.newStar).fill(
      starColor).move(this.starPosition.x, this.starPosition.Y);
    polygons.push(this.newPolygon)
  }
}

//Lights
let lightsXY = new Point(0, 10)
let light = draw.circle(10).move(lightsXY.x, lightsXY.y).fill(new SVG.Color({
  h: 61,
  s: 100,
  l: 50
}))

light.animate(1000, 0, 'now').move(810, randomRange(0, 1000))
let warningsArray=[]
//Asteroids (circle for now)
let circleSize = 10
let asteroids = []
let hitAsteroids = []
let asteroidPositions = []
class Asteroid {
  constructor() {
    this.position = new Point(randomRange(10, canvasSize.x), randomRange(10, canvasSize.y))
    asteroidPositions.push(this.position)
    if (randomRange(0, 2) < 1) {
      this.hitOrFly = "fly"
    } else {
      this.hitOrFly = "hit"
    }

    if (this.hitOrFly == "hit") {
    if (randomRange(0,50)==0){
    hitAsteroids.push(draw.circle(circleSize).move(this.position.x, this.position.y).fill("purple"))
    }
    else{
      hitAsteroids.push(draw.circle(circleSize).move(this.position.x, this.position.y).fill("grey"))}
    } else {
        if (randomRange(0,50)==0){
asteroids.push(draw.circle(circleSize).move(this.position.x, this.position.y).fill("purple"))}
else{
      asteroids.push(draw.circle(circleSize).move(this.position.x, this.position.y).fill("grey"))}
    }
  }
}

function drawAsteroids(n) {
let speed=3000-(roundNumber*2)
if (n>30){
n=20
speed-=200*roundNumber
}
  buildArray(n, x => new Asteroid())
  asteroids.forEach(x => x.animate({
    duration: 2000,
    delay: 0
  }).ease('-').size(300).move(-300, randomRange(-100, 800)))

  hitAsteroids.forEach(x => x.animate({
    duration: 6000,
    delay: 400
  }).ease('-').size(300))
}

//Rocket (blue lights for now)

var rocketColor = draw.gradient('linear', function(add) {
  add.stop(0, new SVG.Color({
    h: randomRange(0, 360),
    s: randomRange(0, 100),
    l: randomRange(30, 50)
  }))
  add.stop(1, new SVG.Color({
    h: randomRange(0, 360),
    s: randomRange(0, 100),
    l: randomRange(30, 50)
  }))
})

let rocketPositions = []

draw.on('click', (e) => {
if (shooting==true){
  rocketPositions.push(
    draw.polygon('0, 30, 30, 0').move(0, 800).stroke({
      color: rocketColor,
      width: 5,
      linecap: 'round'
    }).fill("rocketColor"));
  animateRockets()

  detectForHit()
}
})

function animateRockets() {
rocketPositions.forEach((x,i) =>{let rocketAnimation=x.animate({
    duration: 800,
    delay: 1000,
    when: 'ease',
    swing: true,
  }).move(mouseX, mouseY).animate({
    duration: 800,
    delay: 1000,
    when: 'ease',
    swing: true,
    wait: 200
  }).size(0).move(mouseX, mouseY)
  /*  rocketAnimation.after( rocketPositions=safeSplice(rocketPositions,1,i))
    rocketAnimation.after(x.remove()) */
})
}

class detectHit {
  constructor() {
    let hit = false
    hitAsteroids.forEach((x, i) => {
      rocketPositions.forEach((b, g) => {
        if (b.inside(x)) {
          return ("found", i, g)
        }
      })
    })


    if (hit == true) {
      hitAsteroids.forEach(x => x.finish)
      asteroids.forEach(x => x.finish)
      rocketPositions.forEach(x => x.finish)
    }
  }
}

function newRound() {
hitAsteroids.forEach(x=>x.timeline().pause())
asteroids.forEach(x=>x.timeline().pause())
shooting=false
hitCounting=0
  warningsArray.forEach(x => x.remove())
warningsArray=[]
  checkForLoss = false
  start.remove()
  blackBox.remove()
  startWord.remove()
  instructionsWord.remove()
  instructionsWord2.remove()
if (instructionsShown==true){
  instructionsWord1.remove()
  instructions.remove()}
  aimCircle.remove()
  explodeAnimation.forEach(x => x.remove())
  explodeAnimation = []
  aimLine.forEach(x => x.remove)
  topBotaimLine.forEach(x => x.remove)
  rocketPositions.forEach(x => x.remove())
  rocketPositions = []
  hitAsteroids.forEach(x => x.remove())
  hitAsteroids = []
  asteroids.forEach(x => x.remove())
  asteroids = []
  roundNumber += 1
  displayRound()
 // screenDraw ()
  drawAsteroids(roundNumber * 2)
  aimItems()
    shooting=true
hitAsteroids.forEach(x=>x.timeline().play())
asteroids.forEach(x=>x.timeline().play)
}

//console.log(hitAsteroids[0].attr("cx"))

//detectForHit(performance.now())
let hits = -1
//console.log(rocketPositions[0].attr())
function detectForHit() {
  if (checkForLoss == false && gaming==true) {
    let oneRocket = rocketPositions[0];
    let pointsToCheck = []
    rocketPositions.forEach((x, a) => {
      hitAsteroids.forEach((b, i) => {      
        let rocketPositionsToCheck = polygonStringToPointArray(x.attr('points'));
        rocketPositionsToCheck = numberArrayToPointArray(rocketPositionsToCheck)
        if (b.inside(rocketPositionsToCheck[0].x, rocketPositionsToCheck[0].y)) {
        b.remove()
          hitAsteroids = safeSplice(hitAsteroids,1, i);
        blowUpAsteroid(new Point(b.attr('cx'),b.attr('cy')))
          console.log('detectHit');
          rocketPositions = safeSplice(rocketPositions,1, a);
          if (b.attr('fill')=="purple"){
				displaHit(5)
          }
          displaHit()
          detectForHit()
        }
        else if (b.inside(rocketPositionsToCheck[1].x, rocketPositionsToCheck[1].y)) {
        b.remove()
          hitAsteroids = safeSplice(hitAsteroids,1, i);
        blowUpAsteroid(new Point(b.attr('cx'),b.attr('cy')))
          console.log('detectHit');
          rocketPositions = safeSplice(rocketPositions,1, a);
          if (b.attr('fill')=="purple"){
				displaHit(5)
          }
          displaHit()
          detectForHit()
        }
      })
    })

    rocketPositions.forEach((x, a) => {
      asteroids.forEach((b, i) => {
        let rocketPositionsToCheck = polygonStringToPointArray(x.attr('points'));
        rocketPositionsToCheck = numberArrayToPointArray(rocketPositionsToCheck)

        if (b.inside(rocketPositionsToCheck[0].x, rocketPositionsToCheck[0].y)) {
          b.remove()
        asteroids = safeSplice(asteroids,1, i);
        blowUpAsteroid(new Point(b.attr('cx'),b.attr('cy')))
          console.log('detectHit');
          b.remove()
          rocketPositions = safeSplice(rocketPositions,1, a);
          if (b.attr('fill')=="purple"){
				displaHit(5)
          }
          displaHit()
          detectForHit()
        }
       else if (b.inside(rocketPositionsToCheck[1].x, rocketPositionsToCheck[1].y)) {
				b.remove()
				asteroids = safeSplice(asteroids,1, i);
        blowUpAsteroid(new Point(b.attr('cx'),b.attr('cy')))
          console.log('detectHit');
          rocketPositions = safeSplice(rocketPositions,1, a);
          if (b.attr('fill')=="purple"){
				displaHit(5)
          }
          displaHit()
          detectForHit()
        }
      })
    })

    //console.log(hitAsteroids.length)
    if (hitAsteroids.length ==0) { 
 
      newRound()
    } else {
      hitAsteroids.forEach(x => {
        if (x.attr('r') == 150) {
          console.log("game end");
          console.log(hitAsteroids.length)
          checkForLoss = true
        }
      })
    }

    SVG.Animator.frame(() => {
      detectForHit(performance.now())
    })
  } else {
  gaming=false
      setTimeout(() => {
    startButton()},300)
  }
}

let displaHitTxt = draw.text('hits: ' + hits).move(mouseX + 10, mouseY).font({
  size: 60,
  fill: 'green',
  family: 'Inconsolata'
})

displaHit()

function displaHit(add) {
if (add==undefined){
  hits += 1}
else{hits += add}
  displaHitTxt.remove()
  displaHitTxt = draw.text('Hits: ' + hits).move(10, 50).font({
    size: 60,
    fill: 'green',
    family: 'Inconsolata'

  })
}

let displaRoundTxt = draw.text('Round: ' + roundNumber).move(mouseX + 10, mouseY).font({
  size: 60,
  fill: 'green',
  family: 'Inconsolata'
})

displayRound()

function displayRound() {
  displaRoundTxt.remove()
  displaRoundTxt = draw.text('Round: ' + roundNumber).move(10, 0).font({
    size: 60,
    fill: 'green',
    family: 'Inconsolata'
  })
}

function startButton() {
  if (buttonDrawn == false && gaming==false) {
    if (roundNumber >= 1) {
    }
    blackBox = draw.rect(window.innerWidth, window.innerHeight).move(0, 0).fill('black')
 instructionsWord = draw.text('Instructions:').move(10, -38).font({
      size: 60,
      fill: 'white',
      family: 'Inconsolata'

    })
 instructionsWord2 = draw.text('Instructions2:').move(10, 10).font({
      size: 60,
      fill: 'white',
      family: 'Inconsolata'

    })
resetInstructionsButton()
    start = draw.rect(230, 100).move(window.innerWidth/2+30, window.innerHeight/2).fill('white').stroke('#B7B7B7').stroke({
      width: 2
    });

    startWord = draw.text('Start').move(window.innerWidth/2+40, window.innerHeight/2-40).font({
      size: 100,
      fill: '#000000',
      family: 'Inconsolata'
    });
lastRoundHits= draw.text('Hits Last game:'+JSON.stringify(hits)).move(5, 160).font({
      size: 30,
      fill: 'green',
      family: 'Inconsolata'
    });
lastGameRound= draw.text('Rounds Last game:'+JSON.stringify(roundNumber)).move(5, 120).font({
      size: 30,
      fill: 'green',
      family: 'Inconsolata'
    });

    buttonDrawn = true

    start.on('click', (e) => {
    console.log('start detected')
start.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

    startWord.on('click', (e) => {
        console.log('start detected')
        start.off('click')
        startWord.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

    startWord.on('dblclick', (e) => {
        console.log('start detected')
        start.off('click')
        startWord.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })
    startWord.on('mousedown', (e) => {
        console.log('start detected')
        start.off('click')
        startWord.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

    startWord.on('touchstart', (e) => {
        console.log('start detected')
        start.off('click')
        startWord.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

    startWord.on('dblclick', (e) => {
        console.log('start detected')
        start.off('click')
        startWord.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

start.on('dblclick', (e) => {
        console.log('start detected')
        start.off('click')
        start.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })
    start.on('mousedown', (e) => {
        console.log('start detected')
        start.off('click')
        start.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

    start.on('touchstart', (e) => {
        console.log('start detected')
        start.off('click')
        start.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

    start.on('dblclick', (e) => {
        console.log('start detected')
        start.off('click')
        start.off('click')
      displayRound()
//screenDraw ()
      removeStartItems()
      restartGame()
    })

  }
  
aimItems()
}

startButton()

function removeStartItems() {
lastGameRound.remove()
lastRoundHits.remove()
  blackBox.remove()
  start.remove()
  startWord.remove()
if (instructionsShown==true){
  instructionsWord1.remove()
  instructions.remove()}
  buttonDrawn = false
}

function restartGame() {
 draw.rect(window.innerWidth,window.innerHeight).move(0,0).fill('black')
 stars.forEach(x=>{x.newPolygon.remove()})
  polygons=[]
   stars = buildArray(100, i => new Star())
stars.forEach(x => x.draw())
polygons.forEach(x => x.animate({
  duration: 1000,
  delay: 0
}).ease('-').attr({}).loop())
shockEnergy=5
hitCounting=0
  roundNumber = 0
  hits = 0
  removeStartItems()
  gaming=true
  onGoingGame()
  newRound()
 // screenDraw()
}

var explodeAnimation = [];

function blowUpAsteroid(explodingPosition) {
let parsedPositions= new Point(JSON.parse(explodingPosition.x),JSON.parse(explodingPosition.y))
debris (parsedPositions)
  explodeAnimation.push(draw.circle(100).fill(new SVG.Color({
    h: 57,
    s: 98,
    l: 50,
  })).move(parsedPositions.x, parsedPositions.y))
  let indexToAnimate = explodeAnimation.length - 1
  explodeAnimation[indexToAnimate].animate({
    duration: randomRange(80,120),
    delay: 0
  }).ease('-').size(250).fill(new SVG.Color({
    h: 13,
    s: 100,
    l: 50,
  }))
  explodeAnimation[indexToAnimate].animate({
    duration: randomRange(80,120),
    delay: 0
  }).ease('-').size(500).fill(new SVG.Color({
    h: 35,
    s: 98,
    l: 50,
  }))
testForBoomSize() 
}

function testForBoomSize() {
explodeAnimation.forEach((x,i)=>{if(x.attr('r')==250)
{x.remove()
explodeAnimation=safeSplice(explodeAnimation,1,i)
}})
explodeDebirs.forEach((x,i)=>{
if (x!=undefined){
if (x.attr('r')<=-50){
x.remove();
explodeDebirs=safeSplice(explodeDebirs,1,i)
}}})
if (explodeAnimation.length!=0||explodeDebirs.length!=0){
 SVG.Animator.frame(() => {
testForBoomSize()    })
}
 }
//console.log(rocketPositions[0].attr('points'))

function onGoingGame (){
if (gaming==true){
hitAsteroids.forEach((x,i)=>{if (x.attr('r')>=100){warning(i)}})
displaHitTxt.forward()
displaRoundTxt.forward()
 SVG.Animator.frame(() => {
onGoingGame()    })
}
}

function warning (asteroidNumber){
let randomPick=randomRange(0,2)
let indexAnimate=warningsArray.length
if (randomPick==0){
warningsArray.push(draw.text('!').move(hitAsteroids[asteroidNumber].attr('cx')-20,hitAsteroids[asteroidNumber].attr('cy')-120).font({
  size: 150,
  fill: 'red',
  family: 'Inconsolata'
 }))}
else{
let warningSign=warningsArray.push(draw.text('!').move(hitAsteroids[asteroidNumber].attr('cx')-20,hitAsteroids[asteroidNumber].attr('cy')-120).font({
  size: 150,
  fill: 'grey',
  family: 'Inconsolata'
 }))
}
 setTimeout(() => {
if(warningsArray[indexAnimate]!=undefined){
warningsArray[indexAnimate].remove();
warningsArray=safeSplice(warningsArray,1,indexAnimate)}
},100)
}

onGoingGame()  
var explodeDebirs = [];

function debris (parsedPositions){
for (let i = 0; i < randomRange(3,6); i++) {
explodeDebirs.push(draw.circle(10).fill(new SVG.Color({
    h: 20,
    s: 100,
    l: 50,
  })).move(parsedPositions.x, parsedPositions.y));
  let indexToAnimate=explodeDebirs.length-1
  explodeDebirs[indexToAnimate].animate({
    duration: randomRange(320,400),
    delay: 0
  }).ease('-').size(5).fill(new SVG.Color({
    h: 13,
    s: 100,
    l: 50,
  })).move(parsedPositions.x+randomRange(-100,100),parsedPositions.y-randomRange(-150,300))
    explodeDebirs[explodeDebirs.length-1].animate({
    duration: randomRange(320,400),
    delay: 0
  }).ease('-').size(-100).fill(new SVG.Color({
    h: 35,
    s: 98,
    l: 50,
  }))
  
  }
}


//Pause game

 let pauseGameButton=draw.rect(400,200).move(window.innerWidth/2-10,window.innerHeight/2-10).fill('grey')
let pauseGame=draw.text('OR click to\nrestart game').move(window.innerWidth/2,window.innerHeight/2).font({
  size: 60,
  fill: 'green',
  family: 'Inconsolata'
})
pauseGameButton.remove()
pauseGame.remove()


function pauseGameFunc (){
shooting=false
 pausedAlert=draw.text('Game paused press\nenter to resume game!').move(40,200).font({
  size: 70,
  fill: 'green',
  family: 'Inconsolata'
})
  pauseGameButton=draw.rect(400,200).move(60,400).fill('grey')

pauseGame=draw.text('OR click to\nrestart game').move(100,400).font({
  size: 60,
  fill: 'green',
  family: 'Inconsolata'
})

 pauseGameButton.on('click', (e) => {
 pauseGameButton.remove()
pauseGame.remove()
pausedAlert.remove();
      displayRound()
//screenDraw ()
      removeStartItems()
            resumeGame()
 setTimeout(() => {
 restartGame()},1000    )})
    
pauseGame.on('click', (e) => {
pauseGameButton.remove()
pauseGame.remove()
pausedAlert.remove();
      displayRound()
//screenDraw ()
      removeStartItems()
           resumeGame()
       setTimeout(() => {
 restartGame()},1000
    )})
    
hitAsteroids.forEach(x=>x.timeline().pause())
asteroids.forEach(x=>x.timeline().pause())
shooting=false
}

function resumeGame(){
pauseGameButton.remove()
pauseGame.remove()
pausedAlert.remove();
let countdown=draw.text('Game starts in 3').move(100,300).font({
  size: 80,
  fill: 'green',
  family: 'Inconsolata'
})
setTimeout(() => { 
  countdown.remove();
  countdown=draw.text('Game starts in 2').move(100,300).font({
  size: 80,
  fill: 'green',
  family: 'Inconsolata'
})}, 400);

setTimeout(() => { 
  countdown.remove();
  countdown=draw.text('Game starts in 1').move(100,300).font({
  size: 80,
  fill: 'green',
  family: 'Inconsolata'
})}, 800);

  setTimeout(() => {countdown.remove();
   countdown=draw.text('Game Start').move(100,300).font({
  size: 80,
  fill: 'green',
  family: 'Inconsolata'
});
  shooting=true
hitAsteroids.forEach(x=>x.timeline().play())
asteroids.forEach(x=>x.timeline().play())}, 1000);
setTimeout(() => { 
  countdown.remove();
  shooting=true
 }, 1600);
}

document.addEventListener("keyup", function(event) {
    if (event.keyCode === 27 &&event.keyCode !== 13 ) {
    pauseGameFunc()
    }
});

document.addEventListener("keyup", function(event) {
    if (event.keyCode === 13 && event.keyCode !== 27) {
    if (shooting==false){
    resumeGame()}
    }
});

document.addEventListener("keydown", function(event) {
    if (event.shiftKey == true) {
    if (event.keyCode === 13){
 displayRound()
//screenDraw ()
      removeStartItems()
           resumeGame()
       setTimeout(() => {
 restartGame()},1000
    )}
}});

function showInstructions (){
if (instructionsShown==false){
instructionsWord2.remove()
    instructionsWord1 = draw.text('When the game starts,').move(350, 0).font({
      size: 30,
      fill: 'white',
      family: 'Inconsolata'

    })
    instructions = draw.text('there will be asteroids flying at you. You will have\nto blow up the asteroids before they hit you.\nTo blow them up, click and a laser will fly to\nthat place. There will also be other asteroids\n\n\n\nflying by but they will not hit you so you do\nnot have to hit them. However, they still\ncount as hits. Now that the boring instructions\nare done, click "start" to start the game.').move(10, 30).font({
      size: 36,
      fill: 'white',
      family: 'Inconsolata'

    })
instructionsShown=true    
    }
else{
instructionsWord2 = draw.text('Instructions2:').move(10, 10).font({
      size: 60,
      fill: 'white',
      family: 'Inconsolata'

    })
instructionsWord1.remove()
instructions.remove()
instructionsShown=false  
resetInstructionsButton()
}

}

function showInstructions2 (){
if (instructionsShown==false){
instructionsWord.remove()
    instructionsWord1 = draw.text('When the game starts,').move(360, 50).font({
      size: 30,
      fill: 'white',
      family: 'Inconsolata'

    })
    instructions = draw.text('Press ESC to pause game.\n Press ENTER to resume game.\n\n\n\n Press SHIFT+ENTER to restart game.').move(20, 100).font({
      size: 46,
      fill: 'white',
      family: 'Inconsolata'

    })
instructionsShown=true    
    }
else{
instructionsWord = draw.text('Instructions:').move(10, -38).font({
      size: 60,
      fill: 'white',
      family: 'Inconsolata'

    })
instructionsWord1.remove()
instructions.remove()
instructionsShown=false 
resetInstructionsButton()
}
}
function resetInstructionsButton (){
instructionsWord.on('click', (e) => {
showInstructions()})

instructionsWord2.on('click', (e) => {
showInstructions2()})}

resetInstructionsButton()

document.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
if (shockEnergy>0 && shockDelay==false){
if (shooting==true){
shockWave ()
shockEnergy-=1
shockDelay=true
 setTimeout(() => {shockDelay=false
}, 8000 /*time*/);
}  }}
});

let shock=draw.circle(10).move(500,1200).fill('blue')
shock.remove()
var shockState=false
function detectShock (){
hitAsteroids.forEach((x,i)=>{
if (shock.inside(x.attr('cx'),x.attr('cy')) && x.attr('r')>=100){
console.log('detectHit');
displaHit()
x.remove()
hitAsteroids=safeSplice(hitAsteroids,1,i)
detectShock ()
}
})
asteroids.forEach((x,i)=>{
if (shock.inside(x.attr('cx'),x.attr('cy'))){
console.log('detectHit');
displaHit()
x.remove()
asteroids=safeSplice(asteroids,1,i)
}
})

if (shockState==true){
    SVG.Animator.frame(() => {
    detectShock()
    
})}
}

function shockWave (){
shock=draw.circle(10).move(500,1200).fill('blue')
let shockAnimation=shock.animate({
  duration: 1000,
  delay: 0
}).ease('-').size(3000) 
shockState=true
detectShock()
let shock2=draw.circle(6).move(500,1200).fill('black')
let shockAnimation2=shock2.animate({
  duration: 1010,
  delay: 0
}).ease('-').size(3000) 
shockAnimation.after(() => shockState=false)
shockAnimation.after(() => shock.remove())
shockAnimation2.after(() => shock2.remove())
}

//https://jsfiddle.net/Mrname5/15xfsaoy/1786/