Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ashworth-zach/04a74fb1be8c87fa4b33b896001c1b12 to your computer and use it in GitHub Desktop.
Save ashworth-zach/04a74fb1be8c87fa4b33b896001c1b12 to your computer and use it in GitHub Desktop.
cpc-spaceship space game
<canvas id="mainCanvas"></canvas>
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment