This commit is contained in:
JustAGenericUsername 2024-10-05 13:15:57 -04:00
parent e0d03845f8
commit a3b0c97e42
2 changed files with 296 additions and 47 deletions

View File

@ -106,7 +106,7 @@ elements.frozen_xenon = {
elements.radon = {
color: elements.neon.color,
behavior: behaviors.GAS,
colorOn: ["#d33d7c","#f73273","#c03190"],
colorOn: ["#3dd3cb","#32f7e7","#31c0a8"],
category: "gases",
state: "gas",
conduct: 0.8,
@ -156,7 +156,7 @@ elements.radon = {
elements.liquid_radon = {
color: elements.neon.color,
behavior: behaviors.LIQUID,
colorOn: ["#d33d7c","#f73273","#c03190"],
colorOn: ["#3dd3cb","#32f7e7","#31c0a8"],
category: "states",
state: "liquid",
tempHigh: -58,
@ -170,7 +170,7 @@ elements.liquid_radon = {
elements.frozen_radon = {
color: elements.neon.color,
behavior: behaviors.WALL,
colorOn: ["#d33d7c","#f73273","#c03190"],
colorOn: ["#3dd3cb","#32f7e7","#31c0a8"],
category: "states",
state: "solid",
tempHigh: -68,
@ -182,7 +182,7 @@ elements.frozen_radon = {
elements.oganesson = {
color: elements.neon.color,
behavior: behaviors.GAS,
colorOn: ["#5bdce6","#56a9f7","#56b0e4"],
colorOn: ["#b5e65b","#b9f756","#aee456"],
category: "gases",
state: "gas",
conduct: 0.8,

View File

@ -1,3 +1,11 @@
/*
____ _
| _ \ __ _| |_ __ _
| | | |/ _` | __/ _` |
| |_| | (_| | || (_| |
|____/ \__,_|\__\__,_|
*/
polygonColors = function(sides){
let baseColors = [
/*
@ -33,6 +41,68 @@ polygonColors = function(sides){
return "rgb(0, 0, 0)"
}
}
const usefulMiscColors = {
playerBlue: "rgb(0, 176, 225)",
barrelGray: "rgb(153, 153, 153)",
playerGreen: "rgb(0, 224, 108)",
playerRed: "rgb(240, 79, 84)",
playerPurple: "rgb(216, 43, 207)",
bodyGray: "rgb(95, 103, 108)",
fallenGray: "rgb(192, 192, 192)",
celestialPink: "rgb(237, 110, 222)"
}
const upgrades = {
weapons: {
annihilator: [
{
theta: 0,
damage: 150,
reload: 1,
angle: 0,
spread: 0,
yoffset: 0,
xoffset: 0,
length: 1.9,
width: 1,
type: 0,
bulletHealth: 60
}
],
twin: [
{
theta: 0,
damage: 150,
reload: 1,
angle: 0,
spread: 0,
yoffset: 0,
xoffset: 0.5,
length: 1.8,
width: 0.45,
type: 0,
bulletHealth: 60
},
{
theta: 0,
damage: 150,
reload: 1,
angle: 0,
spread: 0,
yoffset: 0,
xoffset: -0.5,
length: 1.8,
width: 0.45,
type: 0,
bulletHealth: 60
}
]
},
bodies: {
}
}
polygonList = []
zoomLevel = 0.5
isKeyDown = {
w: false,
a: false,
@ -41,6 +111,66 @@ isKeyDown = {
i: false,
o: false
}
let mouseX = 0;
let mouseY = 0;
camera = [0, 0]
scenexeplayer = {
x: 0,
y: 0,
facing: 0,
vx: 0,
vy: 0,
level: 1,
rotation: 0,
radius: 40,
collisionMass: 520,
type: 1,
bodyDamage: 5,
maxHealth: 10000,
health: 10000,
regenDelay: 14,
regenSpeed: 0.0001,
timeSinceHurt: null,
color: usefulMiscColors.playerBlue,
barrels: [
{
theta: 0,
damage: 150,
reload: 1,
angle: 0,
spread: 0,
yoffset: 0,
xoffset: 0.5,
length: 1.8,
width: 0.45,
type: 0,
bulletHealth: 60
},
{
theta: 0,
damage: 150,
reload: 1,
angle: 0,
spread: 0,
yoffset: 0,
xoffset: -0.5,
length: 1.8,
width: 0.45,
type: 0,
bulletHealth: 60
}
]
}
bullets = []
debug = false
/*
_____ _ _
| ___| _ _ __ ___| |_(_) ___ _ __ ___
| |_ | | | | '_ \ / __| __| |/ _ \| '_ \/ __|
| _|| |_| | | | | (__| |_| | (_) | | | \__ \
|_| \__,_|_| |_|\___|\__|_|\___/|_| |_|___/
*/
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (arguments.length === 1) {
@ -112,6 +242,13 @@ function makeVisible(color){
colorObject.b = Math.max(40, colorObject.b)
return objectToColor(colorObject)
}
function darkenPercent(color, percent){
let colorObject = colorToObject(color)
colorObject.r = Math.floor(colorObject.r * percent)
colorObject.g = Math.floor(colorObject.g * percent)
colorObject.b = Math.floor(colorObject.b * percent)
return objectToColor(colorObject)
}
// when wasd keydown, set isKeyDown to true
document.addEventListener("keydown", (event) => {
if (event.key === "w") {
@ -161,6 +298,18 @@ document.addEventListener("keyup", (event) => {
}
}
})
document.addEventListener("mousemove", (event) => {
let rect = canvas.getBoundingClientRect();
mouseX = event.clientX - rect.left;
mouseY = event.clientY - rect.top;
});
let mouseDown = false;
document.addEventListener("mousedown", (event) => {
mouseDown = true;
});
document.addEventListener("mouseup", (event) => {
mouseDown = false;
});
orbitalSpeed = function(sides){
return 1/(1.00672*Math.pow(0.344151, sides) + 0.000002)
}
@ -210,8 +359,6 @@ function polygonCount(random){
}
}
}
polygonList = []
zoomLevel = 0.5
function newPolygon(sides){
polygonList.push({
sides: sides,
@ -236,12 +383,8 @@ function newPolygon(sides){
polygonSize = function(sides){
return 18 * Math.pow(1.47, sides - 3)
}
for (var i = 0; i <= 400; i++){
sides = polygonCount(Math.random())
newPolygon(sides)
}
function drawPolygon(ctx, polygon, index){
if (Math.abs(polygonList[index].x-camera[0]-polygon.radius<canvas.width/zoomLevel) && Math.abs(polygonList[index].y-camera[1])-polygon.radius<canvas.height/zoomLevel){
if (Math.abs(polygonList[index].x-camera[0])-polygonList[index].radius<canvas.width/zoomLevel && Math.abs(polygonList[index].y-camera[1])-polygonList[index].radius<canvas.height/zoomLevel){
let x = polygon.x
let y = polygon.y
let sides = polygon.sides
@ -255,9 +398,9 @@ function drawPolygon(ctx, polygon, index){
ctx.strokeStyle = darkenColor(polygonColors(sides))
ctx.lineWidth = 5*zoomLevel
ctx.beginPath()
ctx.moveTo(Math.sin(rotation)*radius+x, Math.cos(rotation)*radius+y)
ctx.moveTo(Math.cos(rotation)*radius+x, Math.sin(rotation)*radius+y)
for (var i = 0; i <= sides+1; i++){
ctx.lineTo(Math.sin(rotation+2*Math.PI*i/sides)*radius+x, Math.cos(rotation+2*Math.PI*i/sides)*radius+y)
ctx.lineTo(Math.cos(rotation+2*Math.PI*i/sides)*radius+x, Math.sin(rotation+2*Math.PI*i/sides)*radius+y)
}
ctx.fill()
ctx.stroke()
@ -270,10 +413,15 @@ function drawPolygon(ctx, polygon, index){
ctx.moveTo(x-radius, y+radius+(10*zoomLevel))
ctx.lineTo(x+radius, y+radius+(10*zoomLevel))
ctx.stroke()
ctx.strokeStyle = makeVisible(polygonColors(sides))
ctx.strokeStyle = darkenPercent(polygonColors(sides), 0.4)
ctx.lineWidth = 4*zoomLevel
ctx.beginPath()
ctx.moveTo(x-radius, y+radius+(10*zoomLevel))
ctx.lineTo(x+radius, y+radius+(10*zoomLevel))
ctx.stroke()
ctx.strokeStyle = makeVisible(polygonColors(sides))
ctx.beginPath()
ctx.moveTo(x-radius, y+radius+(10*zoomLevel))
ctx.lineTo(x-radius+(radius*2*hppercent), y+radius+(10*zoomLevel))
//console.log(hppercent)
ctx.stroke()
@ -284,7 +432,7 @@ function drawPolygon(ctx, polygon, index){
if(debug){
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(Math.sin(rotation)*2*radius+x, Math.cos(rotation)*2*radius+y)
ctx.lineTo(Math.cos(rotation)*2*radius+x, Math.sin(rotation)*2*radius+y)
ctx.strokeStyle = "rgb(0, 0, 255)"
ctx.stroke()
// draw a line to represent velocity
@ -297,7 +445,6 @@ function drawPolygon(ctx, polygon, index){
ctx.lineWidth = 10*zoomLevel
ctx.fillStyle = "rgb(255, 255, 255)"
ctx.strokeStyle = "rgb(0, 0, 0)"
ctx.font = `bold ${zoomLevel*30}px Helvetica`
//ctx.strokeText(Math.round(polygon.collisionMass), x, y)
//ctx.fillText(Math.round(polygon.collisionMass), x, y)
// draw text on healthbar
@ -308,10 +455,92 @@ function drawPolygon(ctx, polygon, index){
}
}
}
debug = false
function rotatePoint(point, angle) {
let x = point.x;
let y = point.y;
return {
x: Math.cos(angle) * x - Math.sin(angle) * y,
y: Math.sin(angle) * x + Math.cos(angle) * y
};
}
function addPoint(point1, point2){
return {
x: point1.x + point2.x,
y: point1.y + point2.y
}
}
function drawBullet(ctx, bullet){
let x = bullet.x
let y = bullet.y
let radius = bullet.radius
let rotation = bullet.rotation
ctx.fillStyle = scenexeplayer.color
ctx.strokeStyle = darkenColor(usefulMiscColors.playerBlue)
ctx.lineWidth = 5*zoomLevel
ctx.beginPath()
ctx.arc(x, y, radius, 0, 2*Math.PI)
ctx.fill()
ctx.stroke()
}
function drawPlayer(ctx, player){
ctx.fillStyle = "rgb(0, 176, 225)"
ctx.strokeStyle = darkenColor("rgb(0, 176, 225)")
let x = player.x
let y = player.y
let radius = player.radius
// draw barrels
for (barrel of player.barrels){
if (barrel.type == 0){ // rectangular barrel
ctx.fillStyle = usefulMiscColors.barrelGray
ctx.strokeStyle = darkenColor(usefulMiscColors.barrelGray)
ctx.lineWidth = 5*zoomLevel
let playerPoint = {
x: player.x,
y: player.y
}
let barrelPoints = [
{
x: -(barrel.width*player.radius)+(barrel.xoffset*player.radius),
y: barrel.yoffset*player.radius
},
{
x: (barrel.width*player.radius)+(barrel.xoffset*player.radius),
y: barrel.yoffset*player.radius
},
{
x: (barrel.width*player.radius)+(barrel.xoffset*player.radius),
y: barrel.yoffset*player.radius+player.radius*barrel.length
},
{
x: -(barrel.width*player.radius)+(barrel.xoffset*player.radius),
y: barrel.yoffset*player.radius+player.radius*barrel.length
}
]
//console.log(barrelPoints)
let barrelPointsRotated = [
rotatePoint(barrelPoints[0], player.rotation-2*Math.PI/4+barrel.theta+barrel.angle),
rotatePoint(barrelPoints[1], player.rotation-2*Math.PI/4+barrel.theta+barrel.angle),
rotatePoint(barrelPoints[2], player.rotation-2*Math.PI/4+barrel.theta+barrel.angle),
rotatePoint(barrelPoints[3], player.rotation-2*Math.PI/4+barrel.theta+barrel.angle)
]
//console.log(barrelPointsRotated)
let barrelPointsTranslated = [
addPoint(barrelPointsRotated[0], playerPoint),
addPoint(barrelPointsRotated[1], playerPoint),
addPoint(barrelPointsRotated[2], playerPoint),
addPoint(barrelPointsRotated[3], playerPoint)
]
//console.log(barrelPointsTranslated)
ctx.beginPath()
ctx.moveTo(barrelPointsTranslated[0].x, barrelPointsTranslated[0].y)
ctx.lineTo(barrelPointsTranslated[1].x, barrelPointsTranslated[1].y)
ctx.lineTo(barrelPointsTranslated[2].x, barrelPointsTranslated[2].y)
ctx.lineTo(barrelPointsTranslated[3].x, barrelPointsTranslated[3].y)
ctx.lineTo(barrelPointsTranslated[0].x, barrelPointsTranslated[0].y)
ctx.fill()
ctx.stroke()
}
}
ctx.fillStyle = player.color
ctx.strokeStyle = darkenColor(player.color)
ctx.lineWidth = 5*zoomLevel
ctx.beginPath()
ctx.arc(player.x, player.y, player.radius, 0, 2*Math.PI)
@ -326,10 +555,15 @@ function drawPlayer(ctx, player){
ctx.moveTo(player.x-player.radius, player.y+player.radius+(10*zoomLevel))
ctx.lineTo(player.x+player.radius, player.y+player.radius+(10*zoomLevel))
ctx.stroke()
ctx.strokeStyle = makeVisible("rgb(0, 176, 225)")
ctx.strokeStyle = darkenPercent(player.color, 0.4)
ctx.lineWidth = 4*zoomLevel
ctx.beginPath()
ctx.moveTo(player.x-player.radius, player.y+player.radius+(10*zoomLevel))
ctx.lineTo(player.x+player.radius, player.y+player.radius+(10*zoomLevel))
ctx.stroke()
ctx.strokeStyle = makeVisible(player.color)
ctx.beginPath()
ctx.moveTo(player.x-player.radius, player.y+player.radius+(10*zoomLevel))
ctx.lineTo(player.x-player.radius+(player.radius*2*player.health/player.maxHealth), player.y+player.radius+(10*zoomLevel))
ctx.stroke()
}
@ -338,7 +572,7 @@ function drawPlayer(ctx, player){
// draw a line to represent angle
ctx.beginPath()
ctx.moveTo(player.x, player.y)
ctx.lineTo(Math.sin(player.rotation)*2*player.radius+player.x, Math.cos(player.rotation)*2*player.radius+player.y)
ctx.lineTo(Math.cos(player.rotation)*2*player.radius+player.x, Math.sin(player.rotation)*2*player.radius+player.y)
ctx.strokeStyle = "rgb(0, 0, 255)"
ctx.stroke()
// draw a line
@ -352,9 +586,8 @@ function drawPlayer(ctx, player){
ctx.lineWidth = 10*zoomLevel
ctx.fillStyle = "rgb(255, 255, 255)"
ctx.strokeStyle = "rgb(0, 0, 0)"
ctx.font = `bold ${zoomLevel*30}px Helvetica`
ctx.strokeText(Math.round(player.collisionMass), player.x, player.y)
ctx.fillText(Math.round(player.collisionMass), player.x, player.y)
ctx.strokeText(`${Math.round(player.collisionMass)}`, player.x, player.y)
ctx.fillText(`${Math.round(player.collisionMass)}`, player.x, player.y)
// draw text on healthbar
ctx.strokeText(Math.round(player.health)+"/"+Math.round(player.maxHealth), player.x, player.y+player.radius+(10*zoomLevel))
ctx.fillText(Math.round(player.health)+"/"+Math.round(player.maxHealth), player.x, player.y+player.radius+(10*zoomLevel))
@ -382,26 +615,24 @@ function cameraZoom(ctx, object, multiplier, camera){
objectreturn.radius = objectreturn.radius * multiplier
return objectreturn
}
camera = [0, 0]
scenexeplayer = {
x: 0,
y: 0,
vx: 0,
vy: 0,
rotation: 0,
radius: 40,
collisionMass: 520,
type: 1,
bodyDamage: 5,
maxHealth: 10000,
health: 10000,
regenDelay: 14,
regenSpeed: 0.0001,
timeSinceHurt: null
}
keybinds["KeyI"] = function(){}
keybinds["KeyM"] = function(){}
renderPostPixel(function(ctx){
/*
____ ___ _ _ _ _ _ _
/ ___| __ _ _ __ ___ ___ |_ _|_ __ (_) |_ __ _| (_)______ _| |_(_) ___ _ __
| | _ / _` | '_ ` _ \ / _ \ | || '_ \| | __/ _` | | |_ / _` | __| |/ _ \| '_ \
| |_| | (_| | | | | | | __/ | || | | | | || (_| | | |/ / (_| | |_| | (_) | | | |
\____|\__,_|_| |_| |_|\___| |___|_| |_|_|\__\__,_|_|_/___\__,_|\__|_|\___/|_| |_|
*/
for (var i = 0; i <= 400; i++){
sides = polygonCount(Math.random())
newPolygon(sides)
}
setInterval(function(){
if (ctx === null){return}
window.clearInterval(tickInterval)
window.clearInterval(renderInterval)
clearLayers()
if (pixelMap){pixelMap = [], currentPixels = [], paused = true}
ctx.fillStyle = "rgb(205, 205, 205)"
@ -445,8 +676,8 @@ renderPostPixel(function(ctx){
//calculate angle of collision
angle = Math.atan2(polygon2.y - polygon1.y, polygon2.x - polygon1.x)
// update velocity
polygon1.vx -= (Math.cos(angle) * (polygon1.radius + polygon2.radius - distance)/2)/(polygon1.collisionMass/polygon2.collisionMass**(1/2.5))
polygon1.vy -= (Math.sin(angle) * (polygon1.radius + polygon2.radius - distance)/2)/(polygon1.collisionMass/polygon2.collisionMass**(1/2.5))
polygon1.vx -= (Math.cos(angle) * (polygon1.radius + polygon2.radius - distance)/2)/Math.max(polygon1.collisionMass/polygon2.collisionMass**(1/2.5), 1/7)
polygon1.vy -= (Math.sin(angle) * (polygon1.radius + polygon2.radius - distance)/2)/Math.max(polygon1.collisionMass/polygon2.collisionMass**(1/2.5), 1/7)
if (polygon2.type != polygon1.type){
polygon1.health -= polygon2.bodyDamage
polygon1.timeSinceHurt = 0
@ -475,8 +706,8 @@ renderPostPixel(function(ctx){
let polygon = polygonList[poly]
polygon.rotation += 1/orbitalSpeed(polygon.sides)
// add some velocity towards wherever its facing
polygon.vx += Math.sin(polygon.rotation)/orbitalSpeed(polygon.sides)*8
polygon.vy += Math.cos(polygon.rotation)/orbitalSpeed(polygon.sides)*8
polygon.vx += Math.sin(polygon.rotation)/orbitalSpeed(polygon.sides)*8*(polygon.random < 0.5 ? -1 : 1)
polygon.vy += Math.cos(polygon.rotation)/orbitalSpeed(polygon.sides)*8*(polygon.random < 0.5 ? -1 : 1)
if (polygon.health <= 0){
polygonList.splice(poly, 1)
}
@ -514,8 +745,26 @@ renderPostPixel(function(ctx){
}
if (isKeyDown.i){
zoomLevel += 0.02
ctx.font = `bold ${zoomLevel*30}px Helvetica`
}
if (isKeyDown.o){
zoomLevel -= 0.02
if (zoomLevel < 0.02){
zoomLevel = 0.02
}
ctx.font = `bold ${zoomLevel*30}px Helvetica`
}
})
// angle player towards mouse
scenexeplayer.rotation = Math.atan2(mouseY - canvas.height/2, mouseX - canvas.width/2)
// if mouse down make barrels shoot bullets out
if (mouseDown){
for (barrel of scenexeplayer.barrels){
// first, calculate angle of barrel
let angle = Math.atan2(mouseY - canvas.height/2, mouseX - canvas.width/2)
angle += barrel.theta + barrel.angle
// calculate point of origin within barrel and rotate/translate accordingly
}
}
scenexeplayer.radius = (59.99*Math.pow(1.00972, scenexeplayer.level))/2
}, 1000/60)