cpc-spaceship space game

cpc-spaceship-space-game.markdown

cpc-spaceship space game

Created for the May 2019 CodePen Challenge

A Pen by Zach Ashworth on CodePen.

License.

index.html

<canvas id="mainCanvas"></canvas>

script.js

let w = window.innerWidth - 30;
let h = window.innerHeight - 30;

let canvas = document.getElementById("mainCanvas");
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
let bullets = [];
//interval that the main loop runs at in ms
let drawInterval = 5;


var stars = [];
let numberOfStars=20000;

let delta_x = 0;
let delta_y = 0;

let MaxVelocity = 1;

let player = {
  //not sure how many of these i need yet
  facing: 0,
  velX : 0,
  velY : 0,
  x:0,
  y:0,
  gravity : 0,
  friction : .9,
  speed : 1.8,
  mass : 5,
  mouseToVelocity:1000
}

let currentKey;

ctx.fillStyle = "black";
ctx.fillRect(0,0,w,h)
ctx.fillStyle = "white";
let pointerLocation = {};
let mouseX = w/2+1000;
let mouseY = h/2+1000;
//probably wont need this
let background = [0,0,w,h];

let init = () => {
  drawStars();
  // Register event listeners
  window.addEventListener('mousemove', documentMouseMoveHandler, false);
  window.addEventListener('mousedown', documentMouseDownHandler, false);
  window.addEventListener('mouseup', documentMouseUpHandler, false);
  document.addEventListener('touchstart', documentTouchStartHandler, false);
  document.addEventListener('touchmove', documentTouchMoveHandler, false);
  window.addEventListener('resize', windowResizeHandler, false);
  document.addEventListener("keydown", documentKeyDownHandler,false);
  
  setInterval(draw, drawInterval);
}

function drawStars(){
  if(stars.length<1){
    generateStars();
  }
  let topLeft = {
    x:player.x-(w/2),
    y:player.y+(h/2)
  }
  for(let i = 0; i< stars.length;i++){
    if(stars[i].x>topLeft.x && stars[i].x < topLeft.x + w && stars[i].y < topLeft.y && stars[i].y > topLeft.y-h){
      
      let starY=((topLeft.y)-stars[i].y);
      let starX=(stars[i].x-(topLeft.x));

      ctx.beginPath();//
      ctx.fillStyle="white";
      ctx.fillRect(starX,starY,2,2)
      ctx.fill();
      ctx.closePath();  
    }
    
  }
}

function generateStars(){ 
  for(let i = 0; i< numberOfStars; i++){
    let x = getRandomInt(-(w*10),w*10);
    let y = getRandomInt(-(h*10),h*10);
    let dist = Math.sqrt((y-(h)/2)+(x-(w)/2));
    let star ={
      x:x,
      y:y,
      // distance: dist //might not need this
    }
    stars.push(star);
  }
}

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

let movePlayer = () => {
  player.x += (player.velX * player.friction)*5;
  player.y += (player.velY * player.friction)*5;

  
  if (getVelocity() <= 0.31) {
    stop();
  }
  // drawStars();
}


let draw = () => {
    drawPlayer();
    movePlayer();
}

let resetPlayer = () => {
  ctx.fillStyle="black";
  ctx.fillRect(w/2-20,h/2-20,40,40)
  ctx.fillStyle="white";
}


function drawPlayer(){
  
  resetCanvas();

  var cx = canvas.width/2;
  var cy = canvas.height/2;
  
  delta_x = mouseX-cx;
  delta_y = mouseY-cy;
  
  setVelocityX(delta_x/player.mouseToVelocity * player.friction);
  setVelocityY(-delta_y/player.mouseToVelocity * player.friction);
  
  let deg = Math.atan2(delta_y, delta_x);
  player.facing=deg;
  var x = -10;
  var y = -10;
  var wi = 20;
  var he = 20;
  
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(deg);
  ctx.fillRect(x, y, wi, he);
  ctx.restore();
}

function documentMouseMoveHandler(event) {
	mouseX = event.clientX - (window.innerWidth - w) * .5;
	mouseY = event.clientY - (window.innerHeight - h) * .5;
}

let drawBullet = ()=>{
  let bullet = {
    width:4,
    color:"white"
  }
  ctx.beginPath();
  ctx.lineWidth = bullet.width;
  ctx.strokeStyle = bullet.color;
  ctx.moveTo(w/2, h/2);
  ctx.lineTo(mouseX, mouseY);
  ctx.stroke();  
  ctx.closePath();



}
function documentMouseDownHandler(event) { //mousedown event
  drawBullet();
}

function documentMouseUpHandler(event) {
  drawBullet();
}

function documentTouchStartHandler(event) {
	if(event.touches.length == 1) {
		event.preventDefault();
		mouseX = event.touches[0].pageX - (window.innerWidth-w) * .5;
		mouseY = event.touches[0].pageY - (window.innerHeight-h) * .5;
	}
}

function documentTouchMoveHandler(event) {
	if(event.touches.length == 1) {
		event.preventDefault();

		mouseX = event.touches[0].pageX - (window.innerWidth - w) * .5;;
		mouseY = event.touches[0].pageY - (window.innerHeight - h) * .5;
	}
}
function documentKeyDownHandler(event){
}

function windowResizeHandler() {
	w = window.innerWidth;
	h = window.innerHeight;
	
	canvas.width = w;
	canvas.height = h;
  ctx.fillStyle = "black";
  ctx.fillRect(0,0,w,h)
  ctx.fillStyle = "white";
  stars=[];
  generateStars();
  drawStars();
  player = {
  //not sure how many of these i need yet
  facing: 0,
  velX : 0,
  velY : 0,
  x:0,
  y:0,
  gravity : 0,
  friction : .9,
  speed : 1.8,
  mass : 5,
  mouseToVelocity:1000
}
}

function resetCanvas(){
  ctx.fillStyle = "black";
  ctx.fillRect(0,0,w,h)
  ctx.fillStyle = "white";
  drawStars();
}

function setVelocityX(d) {
  if (d >= MaxVelocity) {
    player.velX = MaxVelocity;
  } else if (d <= -MaxVelocity) {
    player.velX = -MaxVelocity;
  } else {
    player.velX = d;
  }
}

function setVelocityY(d) {
  if (d >= MaxVelocity) {
    player.velY = MaxVelocity;
  } else if (d <= -MaxVelocity) {
    player.velY = -MaxVelocity;
  } else {
    player.velY = d;
  }
}

function stop(){
  player.velX=0;
  player.velY=0;
}

function getVelocity(){
  let velo = Math.sqrt((Math.pow(player.velX, 2.0)) + Math.pow(player.velY, 2.0));
  return velo;
}
init();