// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
// Set number of Dots
var count = 500;
var w = 0.9; //Speed
var wz = 0.5; //Speed z
var d = 10; //Distance thar dot zombies see, chanchan!!
// Set maximum and minimum circle size
var maxSize = 10;
var minSize = 5;
//------HERO DOT--------
var xhero = 100;
var yhero = 100;
var lifehero = 255;
//-------------------
// Build float array to store circle properties d
var e = new Array(count);
//bullets! -------
var bcount = 2;
var b = new Array(bcount);
var bc = 0; //num bullets
//-------------------
//Create random dots
for (var j = 0; j < count; j++) {
e[j] = new Array(6);
var xAux = processing.random(20, processing.width - 20);
var yAux = processing.random(20, processing.height - 20);
e[j][0] = xAux; // X circle
e[j][1] = yAux; // Y circle
e[j][2] = processing.random(minSize, maxSize); // Radius
e[j][3] = 1; //alive?
e[j][4] = processing.random(20, processing.width - 20);
e[j][5] = processing.random(20, processing.height - 20);
}
processing.draw = function() {
//ellipse(x, y, width, height)
//curve(x1, y1, x2, y2, x3, y3, x4, y4);
//fill(value1, value2, value3)
function drawDot(j) {
//If zombie
if (e[j][3] == 1) {
processing.fill(153);
processing.noStroke();
processing.ellipse(e[j][0], e[j][1], e[j][2], e[j][2]);
var mindist = 99999999999999; //Integuer.MaxValue exist?
var follow = 0;
var dist = processing.dist(e[j][0], e[j][1], xhero, yhero);
if (dist < 40) { //I see food!
follow = 1;
}
//Follow hero
if (follow == 1) { //Hellyeah!
//x
if (e[j][0] <= processing.width - 10 && e[j][0] >= 10) if (e[j][0] > xhero) {
e[j][0] = e[j][0] - w;
} else if (e[j][0] < xhero) {
e[j][0] = e[j][0] + w;
}
//y
if (e[j][1] <= processing.height - 10 && e[j][1] >= 10) if (e[j][1] > yhero) {
e[j][1] = e[j][1] - w;
} else if (e[j][1] < yhero) {
e[j][1] = e[j][1] + w;
}
if (Math.abs(e[j][0] - xhero) < 5 && Math.abs(e[j][1] - yhero) < 5) {
// wild zombie uses bite
lifehero = lifehero - 1;
}
} else {
//------------------------------
//wild zombie dance moonwalk
if (e[j][0] <= processing.width - 10 && e[j][0] >= 10) if (e[j][0] > e[j][4]) {
e[j][0] = e[j][0] - wz;
} else if (e[j][0] < e[j][4]) {
e[j][0] = e[j][0] + wz;
}
//y
if (e[j][1] <= processing.height - 10 && e[j][1] >= 10) if (e[j][1] > e[j][5]) {
e[j][1] = e[j][1] - wz;
} else if (e[j][1] < e[j][5]) {
e[j][1] = e[j][1] + wz;
}
if (Math.abs(e[j][0] - e[j][4]) < 5 && Math.abs(e[j][1] - e[j][5]) < 5) {
e[j][4] = processing.random(20, processing.width - 20);
e[j][5] = processing.random(20, processing.height - 20);
}
// -------
//-------- Hero hurt
lifehero = lifehero;
if (lifehero < 0) {
alert("estas muerto");
processing.noloop();
}
}
}
//STRIFE-----------
//HERO TIME!!!!!!!!!!!
processing.fill(lifehero, 10, 0);
processing.ellipse(xhero, yhero, 10, 10);
//TIME BULLET!!!!!!!!!
if (bc >= 0) for (var i = 0; i < bc; i++) {
// if (b[i][3] == 0) {
processing.fill(255, 0, 0);
processing.ellipse(b[i][0], b[i][1], 1, 1);
//mov bullet
b[i][0] = b[i][0] + processing.cos(b[i][2]);
b[i][1] = b[i][1] + processing.sin(b[i][2]);
for (var j = 0; j < count; j++)
if (Math.abs(e[j][0] - b[i][0]) < 5 && Math.abs(e[j][1] - b[i][1]) < 5) {
e[j][3] = 0; //Zombie killed
b[i][3] = 1;
}
// }
}
//--------------wdwadsadwwdasdawdadawsadwdssssssaawd----
}
//erase background
processing.background(0);
for (var i = 0; i < count; i++)
drawDot(i);
};
processing.mousePressed = function() {
var i = bc % (bcount - 1);
// alert(i);
if (bc < bcount - 1) {
b[i] = new Array(4);
}
var dx = processing.mouseX - xhero;
var dy = processing.mouseY - yhero;
var angle = processing.atan2(dy, dx);
b[i][0] = xhero - processing.cos(angle);
b[i][1] = yhero - processing.sin(angle);
b[i][2] = angle;
b[i][3] = 0;
bc = i + 1;
//stroke(23, 79, 4, 220);
};
processing.keyPressed = function() {
// alert(processing.key);
if (processing.key == '119' || processing.key == "w") { //arriba
yhero = yhero - 4;
// alert("arriba");
} else {
if (processing.key == 115) { //abajo
yhero = yhero + 4;
}
}
if (processing.key == 97) { //izq
xhero = xhero - 4;
} else {
if (processing.key == 100) { //der
xhero = xhero + 4;
}
}
};
}
var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it*/
<html>
<head>
<script src="processing.js"></script>
</head>
<p><canvas id="canvas1" width="600" height="400"></canvas></p>