(p5.dom is now part of p5js, no need to enable if using v0.10+). p5.dom library lets you use video, audio, webcam, input, and text.
Examples: Dom - Video
SocketIO allows you to connect to a socket connection to make multiple sketches speak in realtime. To use OpenProcessing Echo Socket Server, you can use the code below: var socket = io.connect($OP.getEchoServerURL(1145785));Learn moreSee an example
“Jetpack Fighters” by HJ
https://openprocessing.org/sketch/1145785
License CreativeCommons Attribution ShareAlike
https://creativecommons.org/licenses/by-sa/3.0
{{filePath}}
{{width}} x {{height}}
Report Sketch
Oh, that naughty sketch! Please let us know what the issue is below.
Apply Template
Applying this template will reset your sketch and remove all your changes. Are you sure you would like to continue?
Report Sketch
Report Comment
Please confirm that you would like to report the comment below.
We will review your submission and take any actions necessary per our Community Guidelines. In addition to reporting this comment, you can also block the user to prevent any future interactions.
Please report comments only when necessary. Unnecessary or abusive use of this tool may result in your own account being suspended.
Are you sure you want to delete your sketch?
Any files uploaded will be deleted as well.
Delete Comment?
This will also delete all the replies to this comment.
Delete this tab? Any code in it will be deleted as well.
Select a collection to submit your sketch
We Need Your Support
Since 2008, OpenProcessing has provided tools for creative coders to learn, create, and share over a million open source projects in a friendly environment.
Niche websites like ours need your continued support for future development and maintenance, while keeping it an ad-free platform that respects your data and privacy!
Please consider subscribing below to show your support with a "Plus" badge on your profile and get access to many other features!
CC Attribution ShareAlike
Jetpack Fighters
xxxxxxxxxx
var player;
var buttons;
var state;
var nameBox;
var name = "";
var id;
var debugBox;
var frameCounterBox;
//var postProcessingBox;
var showNametag = true;
var showNameTagBox;
var showCrosshair = true;
//var showCrosshairBox;
//var postProcessingEnabled = false;
var frameRaterUpdate = 15;
var showFrames = true;
var frameRater;
var debug = false;
var shoot = false;
var sf = 0;
var qualityDOM;
var quality = 3;
var qualitySpan;
var bannerIMG;
var deadFrames = 10000;
var kills = 0;
var deaths = 0;
var kdr;
var shotLines = [];
var shotSound;
var soundCheckbox;
var soundIsOn = true;
var clickMillis = 90;
var lastClick;
var invulnerable = 0;
var socket = io.connect(":30000?sketch=1145785");
var otherPlayers = [];
var botFirstNames = ["Dangerous", "Big", "Best", "Tasty", "Epic", "Brit", "Super", "Pog", "The", "Curry", "Bread", "Hacker", "Russian"];
var botSecondNames = ["Indian", "Boomer", "Boi", "Dude", "Gamer", "Idiot", "Moron", "NotBot", "Bruh", "Pogger", "Pwner", "Cyka", "Muncher"];
var botLastNames = ["", "", "", "", "", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "69", "420", "_uwu", "_owo", "???"];
function preload() {
bannerIMG = loadImage("BANNER.png");
shotSound = loadSound("sound.wav");
}
function setup() {
createCanvas(1000, 800);
player = new pl(random(50, width - 50), random(50, height - 50));
id = floor(random(100000));
name = prompt("enter name");
buttons = [];
noCursor();
initStart();
socket.emit('newClient');
socket.on('connect', connected);
socket.on('clientUpdate', updateRecieved);
socket.on('shot', recieveShot);
socket.on('hit', recieveHit);
socket.on('kill', recieveKill);
//for (var i = 0; i < 50; i++) {
// console.log(generateBotName());
//}
}
function draw() {
invulnerable--;
kdr = kills / deaths;
if (quality > 4) {
background(220, 220, 220, 150);
} else {
background(220, 220, 220);
}
if (quality > 3) {
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
drawingContext.shadowBlur = 10;
drawingContext.shadowColor = 'red';
} else {
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
drawingContext.shadowBlur = 0;
drawingContext.shadowColor = 'black';
}
if (state == "Start") {
//push();
//textAlign(CENTER);
//textSize(72);
//text("JETPACK FIGHTERS", width / 2, height / 4);
//pop();
push();
imageMode(CENTER);
image(bannerIMG, width / 2, height / 7);
pop();
if (isPressedButton("Play", buttons)) {
initPlay();
}
if (isPressedButton("Options", buttons)) {
initOptions();
}
if (isPressedButton("Controls", buttons)) {
initControls();
}
push();
fill(255, 255, 255);
stroke(0, 0, 0);
translate(width / 2 + 180, height / 3 + 220);
strokeWeight(2);
textSize(25);
textAlign(CENTER);
rotate(sin(frameCount/30)/3);
text("<-- Read this first", 0, 0);
pop();
}
if (state == "Options") {
push();
textAlign(CENTER);
textSize(48);
text("OPTIONS", width / 2, height / 4);
pop();
if (isPressedButton("Back", buttons)) {
initStart();
}
}
if (state == "Play") {
player.update();
sendServer();
for (var inc = 0; inc < otherPlayers.length; inc++) {
if (otherPlayers[inc].id !== 999999) {
otherPlayers[inc].display();
}
}
//leaderboard
if (keyIsDown(SHIFT)) {
push();
rectMode(CENTER);
stroke(0, 0, 0);
fill(100, 100, 100, 100)
rect(width / 2, height / 2, width / 1.2, height / 1.5);
pop();
push();
fill(255, 255, 255);
stroke(0, 0, 0);
textSize(50);
textAlign(CENTER);
text("Feature coming soon", width / 2, height / 2);
pop();
}
}
if (state == "Controls") {
if (isPressedButton("Back", buttons)) {
initStart();
}
push();
textAlign(CENTER);
text("Shoot - Mouse", width / 2, height / 4);
text("Movement - WASD or ARROW KEYS", width / 2, height / 4 + 40);
text("Show leaderboard - SHIFT [COMING SOON]", width / 2, height / 4 + 80);
text("Back to main menu - P", width / 2, height / 4 + 120);
//text("Open chat - SHIFT [COMING SOON]", width/2, height/4 + 160);
pop();
}
for (var b in buttons) {
buttons[b].update();
}
if (frameCounterBox != undefined) {
showFrames = frameCounterBox.checked();
}
//if (postProcessingBox != undefined) {
// postProcessingEnabled = postProcessingBox.checked();
//}
//if(showCrosshairBox != undefined) {
// showCrosshair = showCrosshairBox.checked();
//}
if (nameBox != undefined) {
name = nameBox.value();
}
if (soundCheckbox != undefined) {
soundIsOn = soundCheckbox.value();
}
if (frameCount % frameRaterUpdate == 0) {
frameRater = frameRate();
}
if (showFrames) {
text(floor(frameRater), 20, 20);
}
if (debug) {
text("id: " + id, 20, 80);
}
text("kills: " + kills, 20, 110);
text("deaths: " + deaths, 20, 130);
text("rating: " + kdr, 20, 150);
text("players online: " + getPlayersOnline(), 20, 50);
if (frameRater < 30) {
text("Bad framerate detected! You might want to turn down those graphics settings in options", 40, 20);
}
if (debugBox != undefined) {
debug = debugBox.checked();
}
if (showNameTagBox != undefined) {
showNametag = showNameTagBox.checked();
}
if (qualityDOM != undefined) {
if (qualityDOM.value() == "Fastest") {
quality = 1;
} else if (qualityDOM.value() == "Simple") {
quality = 2;
} else if (qualityDOM.value() == "Good") {
quality = 3;
} else if (qualityDOM.value() == "Very Good") {
quality = 4;
} else if (qualityDOM.value() == "Beautiful") {
quality = 5;
}
}
if (keyIsDown(80)) {
initStart();
}
//if(showCrosshair) {
push();
rectMode(CENTER);
fill(0, 0, 0);
noStroke();
rect(mouseX, mouseY + 4, 1, 5);
rect(mouseX, mouseY - 4, 1, 5);
rect(mouseX + 4, mouseY, 5, 1);
rect(mouseX - 4, mouseY, 5, 1);
pop();
//}
runAllShotlines();
checkIfDead();
}
function qualityChanged() {
if (qualityDOM.value() == "Fastest") {
quality = 1;
} else if (qualityDOM.value() == "Simple") {
quality = 2;
} else if (qualityDOM.value() == "Good") {
quality = 3;
} else if (qualityDOM.value() == "Very Good") {
quality = 4;
} else if (qualityDOM.value() == "Beautiful") {
quality = 5;
}
}
function mousePressed() {
if (millis() - lastClick > clickMillis) {
shoot = true;
testCollision();
}
lastClick = millis();
}
function initStart() {
clearButtons();
state = "Start";
nameBox = createInput(name);
nameBox.position(width / 2 - 75, height / 3 - 20);
nameBox.input(nameBoxUpdate);
buttons.push(new btn(width / 2, height / 3 + 60, 120, 60, "Play"));
buttons.push(new btn(width / 2, height / 3 + 140, 120, 60, "Options"));
buttons.push(new btn(width / 2, height / 3 + 220, 120, 60, "Controls"));
}
function nameBoxUpdate() {
//console.log("Name box says: " + nameBox.value());
}
function initOptions() {
clearButtons();
state = "Options";
buttons.push(new btn(width / 2, height * 0.9, 120, 60, "Back"));
debugBox = createCheckbox("Debug", debug);
debugBox.position(width / 2, height / 2 - 60);
frameCounterBox = createCheckbox("Framerate Counter", showFrames);
frameCounterBox.position(width / 2, height / 2 - 30);
//postProcessingBox = createCheckbox("Post Processing", false);
//postProcessingBox.position(width / 2, height / 2);
showNameTagBox = createCheckbox("Show Nametag", showNametag);
showNameTagBox.position(width / 2, height / 2);
soundCheckbox = createCheckbox("Sound Effects", soundIsOn);
soundCheckbox.position(width / 2, height / 2 + 30);
qualitySpan = createSpan("Quality Settings:");
qualitySpan.position(width / 2, height / 2 + 60);
qualityDOM = createSelect();
qualityDOM.position(width / 2, height / 2 + 90);
//qualityDOM.option("Beautiful");
qualityDOM.option("Very Good");
qualityDOM.option("Good");
qualityDOM.option("Simple");
qualityDOM.option("Fastest");
qualityDOM.changed(qualityChanged);
//document.getElementById("qualityDOM").value = '3'
//showCrosshairBox = createCheckbox("Show Crosshair", true);
//showCrosshairBox.position(width/2, height/2+60);
}
function initControls() {
clearButtons();
state = "Controls";
buttons.push(new btn(width / 2, height * 0.9, 120, 60, "Back"));
}
function initPlay() {
clearButtons();
state = "Play";
}
function isPressedButton(name, array) {
for (var btn in array) {
var c = array[btn];
if (c.t === name) {
if (c.hover) {
if (mouseIsPressed) {
return true;
}
}
}
}
}
function clearButtons() {
buttons = [];
removeElements();
}
var btn = function(x, y, w, h, t) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.t = t;
this.hover = false;
}
btn.prototype.update = function() {
push();
if (mouseX > this.x - this.w / 2 && mouseX < this.x + this.w / 2 && mouseY > this.y - this.h / 2 && mouseY < this.y + this.h / 2) {
this.hover = true;
} else {
this.hover = false;
}
if (!this.hover) {
fill(100, 100, 100);
} else {
fill(255, 0, 0);
}
stroke(0, 0, 0);
rectMode(CENTER);
rect(this.x, this.y, this.w, this.h);
textAlign(CENTER);
textSize(this.h / 2.5);
fill(255, 255, 255);
text(this.t, this.x, this.y);
pop();
}
var pl = function(x, y) {
this.x = x;
this.y = y;
this.xv = 0;
this.yv = 0;
this.mv = 12;
this.w = 13;
this.h = 26;
this.isFlipped = 1;
this.hp = 100;
this.acc = 0.5;
}
pl.prototype.update = function() {
if (this.xv > this.mv) {
this.xv = this.mv;
}
if (this.xv < -this.mv) {
this.xv = -this.mv;
}
if (this.yv > this.mv) {
this.yv = this.mv;
}
if (this.yv < -this.mv) {
this.yv = -this.mv;
}
if (keyIsDown(RIGHT_ARROW)) {
this.xv += this.acc;
this.isFlipped = 1;
}
if (keyIsDown(LEFT_ARROW)) {
this.xv -= this.acc;
this.isFlipped = -1;
}
if (keyIsDown(UP_ARROW)) {
this.yv -= this.acc;
}
if (keyIsDown(DOWN_ARROW)) {
this.yv += this.acc;
}
if (keyIsDown(68)) {
this.xv += this.acc;
this.isFlipped = 1;
}
if (keyIsDown(65)) {
this.xv -= this.acc;
this.isFlipped = -1;
}
if (keyIsDown(87)) {
this.yv -= this.acc;
}
if (keyIsDown(83)) {
this.yv += this.acc;
}
if (quality !== 1) {
if (quality > 1) {
push();
fill(255, 100 + random(0, 50), 0);
noStroke();
ellipse(this.x + random(-2, 2) - (this.w / 3 * this.isFlipped), this.y + random(-2, 2) + this.h / 3, this.w, this.w);
pop();
}
push();
rectMode(CENTER);
textAlign(CENTER);
fill(100, 100, 100);
rect(this.x, this.y, this.w / 2, this.h / 2);
rect(this.x - (this.w / 3 * this.isFlipped), this.y, this.w / 3, this.h / 2);
rect(this.x + (this.w / 3 * this.isFlipped), this.y + this.h / 3, this.w / 3, this.h / 2);
rect(this.x - (this.w / 8 * this.isFlipped), this.y + this.h / 2, this.w / 3, this.h / 2);
rect(this.x + (this.w / 12 * this.isFlipped), this.y - this.h / 3, this.w / 2, this.h / 4);
fill(0, 0, 0);
stroke(0, 0, 0);
point(this.x, this.y);
strokeWeight(0.2);
if (shoot || sf > 0) {
fill(255, 255, 0);
stroke(255, 255, 0);
strokeWeight(5);
line(this.x, this.y - this.w / 6, mouseX, mouseY);
shoot = false;
if (soundIsOn) {
shotSound.play();
}
sf++;
}
if (sf > 1) {
shoot = false;
sf = 0;
}
pop();
push();
var posEndA = createVector(this.x - mouseX, this.y - mouseY);
posEndA.normalize();
posEndA.mult(-12);
stroke(0, 0, 0);
strokeWeight(3);
line(this.x, this.y - this.w / 6, this.x + posEndA.x, this.y + posEndA.y);
pop();
push();
var posEndB = createVector(this.x - mouseX, this.y - mouseY);
posEndB.normalize();
posEndB.rotate(radians(90));
posEndB.mult(-6);
stroke(0, 0, 0);
strokeWeight(5);
line(this.x, this.y - this.w / 6, this.x + posEndB.x, this.y + posEndB.y);
pop();
push();
rectMode(CENTER);
fill(0, 0, 0);
noStroke();
rect(mouseX, mouseY + 4, 1, 5);
rect(mouseX, mouseY - 4, 1, 5);
rect(mouseX + 4, mouseY, 5, 1);
rect(mouseX - 4, mouseY, 5, 1);
pop();
} else {
push();
rectMode(CENTER);
fill(100, 100, 100);
rect(this.x, this.y, this.w, this.h);
pop();
push();
if (shoot || sf > 0) {
fill(255, 255, 0);
stroke(255, 255, 0);
strokeWeight(5);
line(this.x, this.y - this.w / 6, mouseX, mouseY);
shoot = false;
sf++;
}
if (sf > 1) {
shoot = false;
sf = 0;
}
pop();
}
if (showNametag || debug) {
push();
textAlign(CENTER);
text(name, this.x, this.y - this.h / 1.2);
pop();
}
this.x += this.xv;
this.y += this.yv;
this.xv *= 0.95;
this.yv *= 0.95;
if (this.x + this.xv > width || this.x + this.xv < 0) {
this.xv *= -1.5;
}
if (this.y + this.yv > height || this.y + this.yv < 0) {
this.yv *= -1.5;
}
}
function sendServer() {
var updateOBJ = {
'px': player.x,
'py': player.y,
'mx': mouseX,
'my': mouseY,
'iF': player.isFlipped,
'id': id,
'name': name,
'shoot': shoot,
'hp': player.hp,
}
socket.emit('clientUpdate', updateOBJ);
}
function updateRecieved(obj) {
var isFound = false;
for (var c in otherPlayers) {
var p = otherPlayers[c];
if (p.id === obj.id) {
p.px = lerp(p.px, obj.px, 0.9);
p.py = lerp(p.px, obj.py, 0.9);
p.mx = obj.mx;
p.my = obj.my;
p.isFlipped = obj.iF;
p.shoot = obj.shoot;
p.ls = 0;
isFound = true;
p.hp = obj.hp;
}
}
if (!isFound) {
otherPlayers.push(new netClient(obj.px, obj.py, obj.mx, obj.my, obj.iF, obj.id, obj.name));
}
}
function connected() {
//console.log("connected to the server at :30000?sketch=1145785");
}
var netClient = function(px, py, mx, my, iF, id, name) {
this.px = px;
this.py = py;
this.mx = mx;
this.my = my;
this.isFlipped = iF;
this.id = id;
this.name = name;
this.w = player.w;
this.h = player.h;
this.shoot = false;
this.ls = 0;
this.hp = 100;
}
netClient.prototype.display = function() {
this.ls++;
if (this.ls > 30) {
this.id = 999999;
}
if (quality !== 1) {
if (quality > 1) {
push();
fill(255, 100 + random(0, 50), 0);
noStroke();
ellipse(this.px + random(-2, 2) - (this.w / 3 * this.isFlipped), this.py + random(-2, 2) + this.h / 3, this.w, this.w);
pop();
}
push();
rectMode(CENTER);
textAlign(CENTER);
fill(100, 100, 100);
rect(this.px, this.py, this.w / 2, this.h / 2);
rect(this.px - (this.w / 3 * this.isFlipped), this.py, this.w / 3, this.h / 2);
rect(this.px + (this.w / 3 * this.isFlipped), this.py + this.h / 3, this.w / 3, this.h / 2);
rect(this.px - (this.w / 8 * this.isFlipped), this.py + this.h / 2, this.w / 3, this.h / 2);
rect(this.px + (this.w / 12 * this.isFlipped), this.py - this.h / 3, this.w / 2, this.h / 4);
fill(0, 0, 0);
stroke(0, 0, 0);
point(this.px, this.py);
strokeWeight(0.2);
if (this.shoot) {
fill(255, 255, 0);
stroke(255, 255, 0);
strokeWeight(5);
line(this.px, this.py - this.w / 6, this.mx, this.my);
if (soundIsOn) {
shotSound.play();
}
}
pop();
push();
var posEndA = createVector(this.px - this.mx, this.py - this.my);
posEndA.normalize();
posEndA.mult(-12);
stroke(0, 0, 0);
strokeWeight(3);
line(this.px, this.py - this.w / 6, this.px + posEndA.x, this.py + posEndA.y);
pop();
push();
var posEndB = createVector(this.px - this.my, this.py - this.my);
posEndB.normalize();
posEndB.rotate(radians(90));
posEndB.mult(-6);
stroke(0, 0, 0);
strokeWeight(5);
line(this.px, this.py - this.w / 6, this.px + posEndB.x, this.py + posEndB.y);
pop();
} else {
push();
rectMode(CENTER);
fill(100, 100, 100);
rect(this.px, this.py, this.w, this.h);
pop();
push();
if (this.shoot) {
fill(255, 255, 0);
stroke(255, 255, 0);
strokeWeight(5);
line(this.px, this.py - this.w / 6, this.mx, this.my);
if (soundIsOn) {
shotSound.play();
}
}
pop();
}
if (debug) {
push();
textAlign(CENTER);
text("id: " + this.id, this.px, this.py - this.h / 1.2 - 40);
text("last recieved ping: " + this.ls, this.px, this.py - this.h / 1.2 - 60);
pop();
}
if (showNametag || debug) {
push();
textAlign(CENTER);
text(this.name, this.px, this.py - this.h / 1.2);
pop();
}
push();
noStroke();
rectMode(CENTER);
fill(255, 255, 255);
rect(this.px, this.py - this.h / 1.2 - 20, 100, 10);
fill(255, 0, 0);
rect(this.px, this.py - this.h / 1.2 - 20, this.hp, 10);
textAlign(CENTER);
fill(255, 255, 255);
strokeWeight(1);
text(this.hp, this.px, this.py - this.h / 1.2 - 15);
pop();
}
function getPlayersOnline() {
var ret = 0;
for (var i in otherPlayers) {
if (otherPlayers[i].id != 999999) {
ret++;
}
}
return ret;
}
function testCollision() {
var shot = {
'px': player.x,
'py': player.y,
'mx': mouseX,
'my': mouseY,
'id': id,
}
socket.emit('shot', shot);
for (var tgt in otherPlayers) {
if (otherPlayers[tgt].id !== 999999) {
if (dist(otherPlayers[tgt].px, otherPlayers[tgt].py, mouseX, mouseY) < otherPlayers[tgt].h) {
registerHit(floor(random(20)), otherPlayers[tgt].id, id);
}
}
}
}
function registerHit(dmg, ida, idb) {
var hit = {
'dmg': dmg,
'id': ida,
'myid': idb,
// 'myid' : id,
}
socket.emit('hit', hit);
}
function recieveShot(obj) {
shotLines.push(new shotLine(obj.px, obj.py, obj.mx, obj.my));
}
function recieveHit(obj) {
if (id === obj.id) {
player.hp -= obj.dmg;
}
if (player.hp <= 0) {
broadcastKill(obj.id, obj.myid);
}
}
var shotLine = function(x1, y1, x2, y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.id = 2;
}
shotLine.prototype.display = function() {
push();
fill(255, 255, 0);
stroke(255, 255, 0);
strokeWeight(5);
line(this.x1, this.y1 - player.w / 6, this.x2, this.y2);
pop();
this.id = 999999;
}
function runAllShotlines() {
for (var l in shotLines) {
if (shotLines[l].id !== 999999 && state == "Play") {
shotLines[l].display();
}
}
}
function checkIfDead() {
if (player.hp <= 0) {
initStart();
deadFrames = 0;
this.deaths++;
player.hp = 100;
}
if (deadFrames < 150) {
push();
textAlign(CENTER);
rectMode(CENTER);
fill(0);
stroke(0);
rect(width / 2, height / 2, width, height / 2);
textSize(150);
fill(255, 0, 0);
stroke(255, 0, 0);
text("You ded", width / 2, height / 2);
pop();
player.hp = 100;
}
deadFrames++;
if (state == "Play") {
var tx = width * (player.hp / 100);
push();
fill(255, 0, 0);
rect(0, height - 20, tx, 20);
pop();
push();
fill(255, 255, 255);
stroke(0, 0, 0);
textAlign(CENTER);
text(player.hp, tx / 2, height - 5);
pop();
}
}
function broadcastKill(killed, killer) {
var bOBJ = {
'killed': killed,
'killer': killer,
}
socket.emit('kill', bOBJ);
}
function recieveKill(OBJ) {
if (id == OBJ.killer) {
//console.log("oh no it was me");
kills++;
console.log("You killed " + getPlayerByID(OBJ.killed).name);
var pha = createSpan("You killed " + getPlayerByID(OBJ.killed).name);
} else {
console.log(getPlayerByID(OBJ.killer).name + " killed " + getPlayerByID(OBJ.killed).name);
var phb = createSpan(getPlayerByID(OBJ.killer).name + " killed " + getPlayerByID(OBJ.killed).name + " - ");
}
}
function getPlayerByID(tid) {
for (var i = 0; i < otherPlayers.length; i++) {
if (otherPlayers[i].id == tid) {
return otherPlayers[i];
}
}
return null;
}
function randomOfList(list) {
return list[floor(random(list.length))];
}
function generateBotName() {
var ret = "🤖";
ret = ret.concat(randomOfList(botFirstNames));
ret = ret.concat(randomOfList(botSecondNames));
for (var i = 0; i < random(3); i++) {
ret = ret.concat(randomOfList(botLastNames));
}
return ret;
}
Examples: Play - Synthesis - Microphone
p5.dom library lets you use video, audio, webcam, input, and text.
Examples: Dom - Video
var socket = io.connect($OP.getEchoServerURL(1145785));
Learn more See an exampleSee More Shortcuts