Created for the May 2019 CodePen Challenge
A Pen by Zach Ashworth on CodePen.
Created for the May 2019 CodePen Challenge
A Pen by Zach Ashworth on CodePen.
<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(); |