fucbillgates
Member
Random code work for the fun of creating something.
I was building a website project using javascript and php, I ended up learning enough to use the new HTML 5 canvas element as a display screen for a little game engine.
Have not done much with javascript so my code at the time I made this
was setup very badly.
I have since seen how to do oop structures in javascript
when I started using it again for rpgmaker mv.
At this point in time I'm good enough to setup a texture atlas, have collision detection, monster Ai random walk and seek and destroy, even a cat that does anti monster seek and destroy.
This is a html javascript game so it plays in the browser. I will upload the source.
To point out a giant flaw with this, I'm just running the movement of objects with out taking into account the time passed since last frame so it runs faster or slower depending on
your computer hardware. I also did alot of crapy array management and just said meh.. screw it and kept going lol.
I'm sure my code is funky but I only do this stuff for personal enjoyment so who cares XD.
Here is a video of me playing the game.
http://sendvid.com/wh02frxv
Image of the game.
This is the html page that's playing host to the canvas element, It's part of the website project I was working on.
as you can see the javascript that is running the game is located up a folder from this file and down into another
folder named scripts. So you can copy the file structure or relocate the script and update its path the html script linking part if your
going to make a copy of this. And btw feel free to make copies of this and do anything with it.
The button on the page is launching the first call to a javascript function that
causes the game to start.
Now for the source!
HTML
Now for the javascript that is the game it's self.
And now a copy of the images folder from the project so you have the graphics.
http://s000.tinyupload.com/?file_id=78761715115048132625
And to describe the project folder structure for linking
MAIN FOLDER
|
V
images->rpggame->splash1.png tilemap.png tilemawp.png
scripts->script14.js
games->games11.html
Next post I will drop some of the landscape engines I made in ogre3d and ogrepy3d
I was building a website project using javascript and php, I ended up learning enough to use the new HTML 5 canvas element as a display screen for a little game engine.
Have not done much with javascript so my code at the time I made this
was setup very badly.
I have since seen how to do oop structures in javascript
when I started using it again for rpgmaker mv.
At this point in time I'm good enough to setup a texture atlas, have collision detection, monster Ai random walk and seek and destroy, even a cat that does anti monster seek and destroy.
This is a html javascript game so it plays in the browser. I will upload the source.
To point out a giant flaw with this, I'm just running the movement of objects with out taking into account the time passed since last frame so it runs faster or slower depending on
your computer hardware. I also did alot of crapy array management and just said meh.. screw it and kept going lol.
I'm sure my code is funky but I only do this stuff for personal enjoyment so who cares XD.
Here is a video of me playing the game.
http://sendvid.com/wh02frxv
Image of the game.
This is the html page that's playing host to the canvas element, It's part of the website project I was working on.
as you can see the javascript that is running the game is located up a folder from this file and down into another
folder named scripts. So you can copy the file structure or relocate the script and update its path the html script linking part if your
going to make a copy of this. And btw feel free to make copies of this and do anything with it.
The button on the page is launching the first call to a javascript function that
causes the game to start.
Now for the source!
HTML
Code:
<!DOCTYPE html>
<html>
<head>
<!-- The meta info -->
<link rel="shortcut icon" href="Page.ico">
<title>Jack's Site</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Free Web tutorials on HTML and CSS">
<meta name="author" content="Hege Refsnes">
<link rel="stylesheet" type="text/css" href="../index.css" >
<script type="text/javascript" src="../scripts/script14.js"></script>
</head>
<!-- RUN THE KEY HANDLER FUNCTION ON KEYPUSH AND WHEN A KEY IS RELEASED ONLY SET ITS INDICATOR TO OFF TO STOP IT FROM FREEZING WHEN 1 KEY IS RELEASED -->
<body onkeydown="keyboardhan(event)" onkeyup="keyboardhan2(event)">
<section class="containerArticle" style="overflow:hidden">
<header>
<hgroup>
<center>
<h1>More of a real game.</h1>
</center>
<h2>This time i'm attempting a more normal rpg type game.</h2>
</hgroup>
<p>Starting with a simple table as the map screen.</p>
</header>
<button onclick="gameloop();return false" style="float:left">TEST</button>
<div class="screendiv">
<script type="text/javascript">
document.write("<canvas width=\"800\" height=\"600\" id=\"rpgscreen\"></canvas>");
</script>
</div>
</section>
</body>
</html>
Now for the javascript that is the game it's self.
Code:
var time=0;
var seconds=0;var minutes=0;var hours=0;
var hp=100;var mp=200;var helpers=0;
var clockinterval=0;
var timesample=[];
var canvasgame;
var contextgame;
var typelist=[];
tilesizex=32;
tilesizey=32;
tilemaptilesizex=32;
tilemaptilesizey=32;
var maplength=64;
var mapxlength=64;
var tilemap = new Image();
tilemap.src = "../images/rpggame/tilemap.png";
var zoomx=32;
var zoomy=32;
var typename=0;
var cameraposx=0;
var cameraposy=0;
var lastone=1;
//THERE NEEDS TO BE A GENERATOR THAT CONSTRUCTS THIS INFORMATION FROM LOCALHOST
//NPCLIST HOLDS TILE-IMAGE X Y COLLSIONABLE? AI-INDICATOR HP MP FOR EACH NPC
var npclistx=[339,512,384,0,999,100,100,0,0,3,1,1];
var npclistx2=[12,-100,-100,2,74,100,100,0,0,3,1,1];
var npclistx3=[12,-100,-100,2,74,100,100,0,0,3,1,1];
var npclistx4=[339,55,200,1,150,100,100,2,2,3,1,1];
var npclistx5=[339,100,260,1,1,100,100,-2,-2,3,1,1];
var npclistx6=[339,60,200,1,1,100,100,-2,0,3,1,1];
var npclist=[npclistx,npclistx2,npclistx3,npclistx4,npclistx5,npclistx6];
var tileimage;
var npcx;
var npcy;
var dnpcx;
var dnpcy;
var mnpcx;
var mnpcy;
var mdnpcx;
var mdnpcy;
var solid;
var aitype;
var hp;
var mp;
var overlapopunit;
var key1=0;
var key2=0;
var key3=0;
var key4=0;
var key5=0;
var key6=0;
var key7=0;
var key8=0;
var key9=0;
var charspeed=3;
var b=[];
var aitime=[];
var aitime2=[];
b[0]=time;
aitime[0]=0;
aitime2[0]=0;
var npclisttemptty;
var newvecx;
var newvecy;
var path1=[500,500,750,1000,1000];
var path2=[750,1000,1500,1000,750];
var tomsfrog=0;
var tomsfrog2=0;
var frogtime=time;
var aimove1time=time;
var map=[];
//A X AND Y LIST FOR TILE CORDS FOR ANIMATED TILES
var celllist=[];
var celllist2=[];
var aitime3=[];
aitime3[0]=0;
var swordtoggle=0;
var swordtoggle2=0;
var swordtoggle3=0;
var swordtoggle4=0;
//THE NPC ANIMATION SET
var animation1=[366,344];
var animation3=[367,345];
var animation4=[365,343];
var animation5=[364,342];
var animation2=[339+66,339+67,339+77,339+78];
var animation6=[375,386];
var animation7=[376,387];
var animation8=[377,388];
var animation9=[378,389];
var animation12=[329,351];
var animation13=[360,382];
var animation10=[327,349];
var animation11=[328,350];
var animationidl1=[415,426];
var animationidl2=[437,448];
var animationidl3=[393,404];
//THE PLAYER CHARACTER ANIMATION
var animationcharidl=[animationidl1,animationidl2,animationidl3];
var characterdirani=[animation5,animation1,animation4,animation3,animation6,animation7,animation8,animation9,animation10,animation11,animation12,animation13];
var startopen=1;
var splash1 = new Image();
var splash2 = new Image();
splash1.src = "../images/rpggame/splash1.png";
splash2.src = "../images/rpggame/splash2.png";
var cycletrack=0;
var cycletrack2=0;
var cycletrackr=0;
var selection=0;
var invlist=[];
function invsystem()
{
for (var i=selection;i<typelist.length;i=i+3)
{
if (invlist[i/3]>0)
{
contextgame.drawImage(tilemap, typelist[i+2], typelist[i+1], 32, 32, typelist[i+2]-selection, typelist[i+1], 32, 32);
}
}
}
function buildinv()
{
for (var i=0;i<typelist.length/3;i++)
{
invlist.push(0);
}
}
function clockbuild()
{
//UPDATE THE CLOCKS SECONDS MIN AND HR
if (time-timesample[0]>=100) { seconds++; timesample[0]=time; }
if (seconds==60) { minutes++; seconds=1; }
if (minutes==60) { hours++; minutes=1; }
}
function clockdisplay()
{
//DRAW THE CLOCK HP MP HELPERS
contextgame.fillStyle = "white";
contextgame.fillRect(724, 0, 300, 100);
contextgame.fillStyle = "black";
contextgame.font = "bold 20px sans-serif";
contextgame.fillText(hours+":"+minutes+":"+seconds+" Time Since Start.", 724, 20);
contextgame.fillText(time+" Total time units.", 724, 40);
contextgame.fillText(hp+" Total Hp.", 724, 60);
contextgame.fillText(mp+" Total Mp.", 724, 80);
contextgame.fillText(helpers+" Total Helpers.", 724, 100);
}
function clock()
{
//RUN THE CLOCK UPDATE AND THEN RESTART
time++;
}
function gamescene01()
{
if (clockinterval==0)
{
//BUILD THE TILES FROM THE TILE IMAGE
clockinterval=1;setInterval(clock,1); timesample[0]=time;
canvasgame = document.getElementById("rpgscreen"); contextgame = canvasgame.getContext("2d");
generatemap();
buildtiles();
buildinv();
}
//CLEAR THE IMAGES FROM LAST FRAME AND RENDER THE MAP
canvasgame.width=canvasgame.width;
//RUN ALL THE NPCS AND RENDER STUFF
updatenpcs();
animatetiles();
//RENDER THE MAP TILES AND THE NPCS
displaymap();
displaynpcs();
//BUILD THE CURRENT TIME IN SECONDS MIN HOURS AND DISPLAY IT
clockbuild();
clockdisplay();
//CHARACTER STAT DISPLAYS
healthbar();
manabar();
if (swordtoggle4==1)
{
invsystem();
}
//RUN THE LOOP AGAIN
setTimeout(gamescene01,5);
b[0]=time;
}
function gamescene02()
{
canvasgame = document.getElementById("rpgscreen"); contextgame = canvasgame.getContext("2d");
contextgame.drawImage(splash1, 0, 0);
}
//THE MAIN GAME LOOP~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function gameloop()
{
gamescene02();
setTimeout(gamescene01,3000);
}
function buildtiles()
{
generatetiles();
placenpcs();
}
function animatetiles()
{
if (aitime3[0]>10)
{
//SCAN MAP
for (var y=0;y<maplength;y++)
{
for (var x=0;x<mapxlength;x++)
{
for (var m=0;m<celllist.length;m++)
{
var tilelistonameo=Math.floor(3 * Math.random()) + 1;
tilelistonameo=tilelistonameo-1;
map[celllist[m]][celllist2[m]]=animation2[tilelistonameo];
}
}
}
}
if (aitime3[0]>10)
{
aitime3[0]=0;
}
aitime3[0]++;
}
function generatemap()
{
//SCAN MAP
for (var y=0;y<maplength;y++)
{
var mapx=[];
for (var x=0;x<mapxlength;x++)
{
var joejohn=Math.floor(100 * Math.random()) + 1;
var joejohn2=Math.floor(100 * Math.random()) + 1;
if (joejohn<=10)
{
mapx.push(339+56);
//CREAT THE LIST OF ANIMATED TILES WITH A 20% CHANCE ONLY ON THIS TILETYPE
if (joejohn2<=20)
{
celllist.push(x);
celllist2.push(y);
}
}
if (joejohn<=30)
{
mapx.push(339+45);
}
else
{
mapx.push(40);
}
}
map.push(mapx);
}
}
function generatetiles()
{
//FIND HOW MANY TILES PER WIDTH AND HEIGHT
tilemaptilesx=tilemap.height/tilemaptilesizex;
tilemaptilesy=tilemap.width/tilemaptilesizey;
//FOR THE WIDTH AND HEIGHT IN TILES PUSH BACK A POSITION IN NORMAL CORDS AND A TYPE
for (var g=0;g<tilemaptilesy;g++)
{
for (var h=0;h<tilemaptilesx;h++)
{
typelist.push(typename);
typelist.push(h*tilemaptilesizex);
typelist.push(g*tilemaptilesizey);
typename++;
}
}
}
function placenpcs()
{
//BUILD NPC LIST
for (var y=0;y<map.length+1;y++)
{
for (var x=0;x<mapxlength+1;x++)
{
//IF THIS IS A BOUNDRY PUSH BACK A NPC
if (x==0||y==0||y==map.length||x==mapxlength)
{
var npclistxtempholder=[39,Math.abs(x*32),Math.abs(y*32),0,1,100,100,0,0,0,1,1];
npclist.push(npclistxtempholder);
}
//ADD NPCS ON LINE X=20
else if (x>2&&y>2&&x<8&&y<8)
{
var tilesettemp=[0,363,365,376,409,453,330,251];
var randomthingtemptemp=Math.floor(7 * Math.random()) + 1;
var randomthingtemptemp2=Math.floor(2 * Math.random()) + 1;
var npclistxtempholder2=[tilesettemp[randomthingtemptemp],x*32,y*32,1,140,100,100,2,-2,randomthingtemptemp2,1,1];
var npclist2=[npclistxtempholder2];
npclist.push(npclist2[0]);
}
}
}
}
function healthbar()
{
contextgame.fillStyle = "red";
contextgame.fillRect(0, 0, hp, 25);
}
function manabar()
{
contextgame.fillStyle = "blue";
contextgame.fillRect(0, 25, mp, 25);
}
function displaymap()
{
//SCAN MAP
for (var y=0;y<maplength;y++)
{
for (var x=0;x<mapxlength;x++)
{
//SCAN ALL TILE TYPES
for (var z=0;z<typelist.length;z=z+3)
{
//IF THE VALUE IN MAP IS THE SAME AS THE CURRENT ITTERATION
if (map[y][x]==typelist[z])
{
if (cameraposx+x*tilesizex>1024 || cameraposy+y*tilesizey>768)
{
}
else if (cameraposy+y*tilesizey>768&&cameraposy+y*tilesizey>768)
{
}
else
{
//THEN DRAW AT POSITION STORED +1 AND +2 FROM THE TYPELIST INDICATOR
contextgame.drawImage(tilemap, typelist[z+2], typelist[z+1], 32, 32, cameraposx+x*tilesizex, cameraposy+y*tilesizey, zoomx, zoomy);
}
break;
}
}
}
}
}
function displaynpcs()
{
for (s=0;s<npclist.length;s++)
{
tileimage=npclist[s][0];
for (var z=0;z<typelist.length;z=z+3)
{
//IF THE VALUE IN MAP IS THE SAME AS THE CURRENT ITTERATION
if (tileimage==typelist[z])
{
//THEN DRAW AT POSITION STORED +1 AND +2 FROM THE TYPELIST INDICATOR
contextgame.drawImage(tilemap, typelist[z+2], typelist[z+1], 32, 32, cameraposx+npclist[s][1], cameraposy+npclist[s][2], zoomx, zoomy);
break;
}
}
}
}
function collsion()
{
for (h=0;h<npclist.length;h++)
{
//IF WE ARE NOT LOOKING AT THE CURRENT NPC AGAIN
npcx=npclist[s][1];
npcy=npclist[s][2];
dnpcx=npclist[s][1]+32;
dnpcy=npclist[s][2]+32;
mnpcx=npclist[h][1];
mnpcy=npclist[h][2];
mdnpcx=npclist[h][1]+32;
mdnpcy=npclist[h][2]+32;
if (npcx>mdnpcx||dnpcx<mnpcx||npcy>mdnpcy||dnpcy<mnpcy)
{
}
else
{
if (npclist[h][0]!=459&&npclist[s][3]==0&&s!=0)
{
//DO COLLSION FOR WALL NPCS
var distanceonx=npclist[h][1]-npclist[s][1];
var distanceony=npclist[h][2]-npclist[s][2];
//FIND THE AMOUNT OF OVERLAP
var distanceonxunit=distanceonx/Math.abs(distanceonx);
var distanceonyunit=distanceony/Math.abs(distanceony);
var overlapdistanceonx=32-Math.abs(distanceonx);
var overlapdistanceony=32-Math.abs(distanceony);
distanceonx=overlapdistanceonx*distanceonxunit;
distanceony=overlapdistanceony*distanceonyunit;
//IF YOUR ON ZERO ON EITHER OF THE AXIS THEN SET IT TO THE LAST DIRECTION YOU WHERE HEADING BEFORE IT WAS ZERO
//FIND THE DOMINATING DIRECTION AND STEP OUT THAT DIRECTION
if (Math.abs(distanceonx)<Math.abs(distanceony))
{
npclist[h][1]=npclist[h][1]+Math.ceil(distanceonx);
npclist[h][7]=npclist[h][7]-npclist[h][7]*2;
}
else if (Math.abs(distanceony)<Math.abs(distanceonx))
{
npclist[h][2]=npclist[h][2]+Math.ceil(distanceony);
npclist[h][8]=npclist[h][8]-npclist[h][8]*2;
}
}
if (s==0&&npclist[h][3]==0)
{
//DO COLLSION FOR WALL NPCS
var distanceonx=npclist[s][1]-npclist[h][1];
var distanceony=npclist[s][2]-npclist[h][2];
//FIND THE AMOUNT OF OVERLAP
var distanceonxunit=distanceonx/Math.abs(distanceonx);
var distanceonyunit=distanceony/Math.abs(distanceony);
var overlapdistanceonx=32-Math.abs(distanceonx);
var overlapdistanceony=32-Math.abs(distanceony);
distanceonx=overlapdistanceonx*distanceonxunit;
distanceony=overlapdistanceony*distanceonyunit;
//IF YOUR ON ZERO ON EITHER OF THE AXIS THEN SET IT TO THE LAST DIRECTION YOU WHERE HEADING BEFORE IT WAS ZERO
//FIND THE DOMINATING DIRECTION AND STEP OUT THAT DIRECTION
if (Math.abs(distanceonx)<Math.abs(distanceony))
{
npclist[s][1]=npclist[s][1]+Math.ceil(distanceonx);
}
else if (Math.abs(distanceony)<Math.abs(distanceonx))
{
npclist[s][2]=npclist[s][2]+Math.ceil(distanceony);
}
if (npclist[s][4]==140 || npclist[s][4]==131)
{
hp--;
}
}
else
{
//IF A BADDIE NPC
if (npclist[s][4]==140 || npclist[s][4]==131)
{
//IF THE SWORD OR A CAT NPC
if (npclist[h][4]==74 || npclist[h][4]==198 || npclist[h][4]==199)
{
//TAKE DAMAGE
npclist[s][5]=npclist[s][5]-100;
}
//DO COLLSION FOR WALL NPCS
var distanceonx=npclist[s][1]-npclist[h][1];
var distanceony=npclist[s][2]-npclist[h][2];
//FIND THE AMOUNT OF OVERLAP
var distanceonxunit=distanceonx/Math.abs(distanceonx);
var distanceonyunit=distanceony/Math.abs(distanceony);
var overlapdistanceonx=32-Math.abs(distanceonx);
var overlapdistanceony=32-Math.abs(distanceony);
distanceonx=overlapdistanceonx*distanceonxunit;
distanceony=overlapdistanceony*distanceonyunit;
//IF YOUR ON ZERO ON EITHER OF THE AXIS THEN SET IT TO THE LAST DIRECTION YOU WHERE HEADING BEFORE IT WAS ZERO
//FIND THE DOMINATING DIRECTION AND STEP OUT THAT DIRECTION
if (Math.abs(distanceonx)<Math.abs(distanceony))
{
npclist[s][1]=npclist[s][1]+Math.ceil(distanceonx);
}
else if (Math.abs(distanceony)<Math.abs(distanceonx))
{
npclist[s][2]=npclist[s][2]+Math.ceil(distanceony);
}
}
//IF A CAT NPC
if (npclist[s][4]==198 || npclist[s][4]==199)
{
//IF A BADDIE
if (npclist[h][4]==140 || npclist[s][h]==131)
{
//TAKE DAMAGE
npclist[s][5]=npclist[s][5]-100;
}
//DO COLLSION FOR WALL NPCS
var distanceonx=npclist[s][1]-npclist[h][1];
var distanceony=npclist[s][2]-npclist[h][2];
//FIND THE AMOUNT OF OVERLAP
var distanceonxunit=distanceonx/Math.abs(distanceonx);
var distanceonyunit=distanceony/Math.abs(distanceony);
var overlapdistanceonx=32-Math.abs(distanceonx);
var overlapdistanceony=32-Math.abs(distanceony);
distanceonx=overlapdistanceonx*distanceonxunit;
distanceony=overlapdistanceony*distanceonyunit;
//IF YOUR ON ZERO ON EITHER OF THE AXIS THEN SET IT TO THE LAST DIRECTION YOU WHERE HEADING BEFORE IT WAS ZERO
if (distanceonx==0)
{
var totakeout=npclist[s][10]/Math.abs(npclist[s][10]);
npclist[s][1]=npclist[s][1]+totakeout;//THIS NEEDS TO HAVE THE PREVIOUS HEADING SO IT CAN SEND THEM BACK THE DIRECTION THEY CAME FROM
}
if (distanceony==0)
{
var totakeout=npclist[s][11]/Math.abs(npclist[s][11]);
npclist[s][2]=npclist[s][2]+totakeout;
}
//FIND THE DOMINATING DIRECTION AND STEP OUT THAT DIRECTION
if (Math.abs(distanceonx)<Math.abs(distanceony))
{
npclist[s][1]=npclist[s][1]+Math.ceil(distanceonx);
}
else if (Math.abs(distanceony)<Math.abs(distanceonx))
{
npclist[s][2]=npclist[s][2]+Math.ceil(distanceony);
}
}
}
}
}
}
function animation()
{
//IF THE TIMER FOR THIS IS UP AND ITS A TYPE 150 ANIMATION
if (aitime[0]>2&&npclist[s][9]!=0&&s!=2)
{
var i=0;
if (npclist[s][9]==1)
{
i=0;
}
else if (npclist[s][9]==2)
{
i=4;
}
else if (npclist[s][9]==3)
{
i=8;
}
//IF THE CHARACTER IS NOT MOVING SWITCH TO ALT IF SET USING DIF LIST
if (npclist[s][7]==0&&npclist[s][8]==0)
{
if (npclist[s][9]==1)
{
i=0;
}
else if (npclist[s][9]==2)
{
i=1;
}
else if (npclist[s][9]==3)
{
i=2;
}
}
//DIR - + LEFT DOWN
if (npclist[s][7]<0 && npclist[s][8]>0)
{
npclist[s][0]=characterdirani[i+1][tomsfrog2];
}
//DIR - - LEFT UP
else if (npclist[s][7]<0 && npclist[s][8]<0)
{
npclist[s][0]=characterdirani[i][tomsfrog2];
}
//DIR + + RIGHT DOWN
else if (npclist[s][7]>0 && npclist[s][8]>0)
{
npclist[s][0]=characterdirani[i+1][tomsfrog2];
}
//DIR + - RIGHT UP
else if (npclist[s][7]>0 && npclist[s][8]<0)
{
npclist[s][0]=characterdirani[i][tomsfrog2];
}
//DIR 0 - UP
else if (npclist[s][7]==0&&npclist[s][8]<0)
{
npclist[s][0]=characterdirani[i][tomsfrog2];
}
//DIR 0 + DOWN
else if (npclist[s][7]==0&&npclist[s][8]>0)
{
npclist[s][0]=characterdirani[i+1][tomsfrog2];
}
//DIR + 0 RIGHT
else if (npclist[s][7]>0&&npclist[s][8]==0)
{
npclist[s][0]=characterdirani[i+2][tomsfrog2];
}
//DIR - 0 LEFT
else if (npclist[s][7]<0&&npclist[s][8]==0)
{
npclist[s][0]=characterdirani[i+3][tomsfrog2];
}
//DIR 0 0 NOT MOVING
else if (npclist[s][7]==0 && npclist[s][8]==0)
{
npclist[s][0]=animationcharidl[i][tomsfrog2];
}
if (time-frogtime>30)
{
tomsfrog2++;
frogtime=time;
}
if (tomsfrog2>=animation1.length)
{
tomsfrog2=0;
}
}
}
function ai001()
{
//AI FOR WHEN NOT NEAR THE PLAYER
if (npclist[s][4]==140)
{
var distancetoplayerx=npclist[0][1]-npclist[s][1];
var distancetoplayery=npclist[0][2]-npclist[s][2];
if (Math.abs(distancetoplayerx)>160&&Math.abs(distancetoplayery)>160)
{
if (cycletrack>100)
{
var speedaddonx=Math.floor(3 * Math.random()) + 1;
var speedaddony=Math.floor(3 * Math.random()) + 1;
var negativeorno=Math.floor(2 * Math.random()) + 1;
if (negativeorno==1)
{
npclist[s][7]=speedaddonx;
npclist[s][8]=speedaddony;
}
else if (negativeorno==2)
{
speedaddonx=speedaddonx-speedaddonx*2;
speedaddony=speedaddony-speedaddony*2;
npclist[s][7]=speedaddonx;
npclist[s][8]=speedaddony;
}
}
}
else
{
npclist[s][4]=131;
}
cycletrack++;
if (cycletrack>100)
{
cycletrack=0;
}
}
//AI FOR WHEN NEAR THE PLAYER
else if(npclist[s][4]==131)
{
if (cycletrackr>60)
{
for (h=0;h<npclist.length;h++)
{
if(npclist[h][4]==198||npclist[h][4]==199||npclist[h][4]==999)
{
var distancetoplayerx=npclist[h][1]-npclist[s][1];
var distancetoplayery=npclist[h][2]-npclist[s][2];
if (Math.abs(distancetoplayerx)<160&&Math.abs(distancetoplayery)<160)
{
if (distancetoplayerx!=0&&distancetoplayery!=0)
{
distancetoplayerx=distancetoplayerx/Math.abs(distancetoplayerx);
distancetoplayery=distancetoplayery/Math.abs(distancetoplayery);
npclist[s][7]=distancetoplayerx;
npclist[s][8]=distancetoplayery;
}
else
{
npclist[s][4]=140;
}
}
else
{
npclist[s][4]=140;
}
}
}
}
cycletrackr++;
if (cycletrackr>100)
{
cycletrackr=0;
}
}
else if(npclist[s][4]==198)
{
var distancetoplayerx=npclist[0][1]-npclist[s][1];
var distancetoplayery=npclist[0][2]-npclist[s][2];
if (Math.abs(distancetoplayerx)>160&&Math.abs(distancetoplayery)>160)
{
if (cycletrack2>100)
{
var speedaddonx=Math.floor(3 * Math.random()) + 1;
var speedaddony=Math.floor(3 * Math.random()) + 1;
var negativeorno=Math.floor(2 * Math.random()) + 1;
if (negativeorno==1)
{
npclist[s][7]=speedaddonx;
npclist[s][8]=speedaddony;
}
else if (negativeorno==2)
{
speedaddonx=speedaddonx-speedaddonx*2;
speedaddony=speedaddony-speedaddony*2;
npclist[s][7]=speedaddonx;
npclist[s][8]=speedaddony;
}
}
}
else
{
npclist[s][4]=199;
}
cycletrack2++;
if (cycletrack2>100)
{
cycletrack2=0;
}
}
else if(npclist[s][4]==199)
{
for (h=0;h<npclist.length;h++)
{
if(npclist[h][4]==140||npclist[h][4]==131)
{
var distancetoplayerx=npclist[h][1]-npclist[s][1];
var distancetoplayery=npclist[h][2]-npclist[s][2];
if (Math.abs(distancetoplayerx)<160&&Math.abs(distancetoplayery)<160)
{
if (distancetoplayerx!=0&&distancetoplayery!=0)
{
distancetoplayerx=distancetoplayerx/Math.abs(distancetoplayerx);
distancetoplayery=distancetoplayery/Math.abs(distancetoplayery);
npclist[s][7]=distancetoplayerx;
npclist[s][8]=distancetoplayery;
}
else
{
npclist[s][4]=198;
}
}
else
{
npclist[s][4]=198;
}
}
}
}
}
function resettimers()
{
//RESET THE TIMER WHEN ITS OVER 100
if (aitime[0]>100)
{
aitime[0]=0;
}
aitime[0]++;
//RESET THE TIMER WHEN ITS OVER 100
if (aitime2[0]>100)
{
aitime2[0]=0;
}
aitime2[0]++;
}
function updatenpcs()
{
for (s=0;s<npclist.length;s++)
{
collsion();
if (s==0)
{
//UPDATE THE CAMERA POSITION AND THE NPCS POSITION
cameraposx=cameraposx-npclist[s][7];
cameraposy=cameraposy-npclist[s][8];
npclist[s][1]=npclist[s][1]+npclist[s][7];
npclist[s][2]=npclist[s][2]+npclist[s][8];
//IF THE SWORD HAS BEEN PULLED OUT
if (swordtoggle==1)
{
//IF THE DIR IS (- +) (LEFT DOWN)
if (npclist[s][7]<0 && npclist[s][8]>0)
{
//SET THE PICTURE OF THE TOOL AND THE POSTION RELATIVE TO THE PLAYER
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]+33;
npclist[1][0]=467;
lastone=1;
}
//DIR - - LEFT UP
else if (npclist[s][7]<0 && npclist[s][8]<0)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]-33;
npclist[1][0]=466;
lastone=2;
}
//DIR + + RIGHT DOWN
else if (npclist[s][7]>0 && npclist[s][8]>0)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]+33;
npclist[1][0]=467;
lastone=3;
}
//DIR + - RIGHT UP
else if (npclist[s][7]>0 && npclist[s][8]<0)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]-33;
npclist[1][0]=466;
lastone=4;
}
//DIR 0 - UP
else if (npclist[s][7]==0&&npclist[s][8]<0)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]-33;
npclist[1][0]=466;
lastone=5;
}
//DIR 0 + DOWN
else if (npclist[s][7]==0&&npclist[s][8]>0)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]+33;
npclist[1][0]=467;
lastone=6;
}
//DIR + 0 RIGHT
else if (npclist[s][7]>0&&npclist[s][8]==0)
{
npclist[1][1]=npclist[s][1]+33;
npclist[1][2]=npclist[s][2];
npclist[1][0]=469;
lastone=7;
}
//DIR - 0 LEFT
else if (npclist[s][7]<0&&npclist[s][8]==0)
{
npclist[1][1]=npclist[s][1]-33;
npclist[1][2]=npclist[s][2];
npclist[1][0]=468;
lastone=8;
}
//DIR 0 0 NOT MOVING DEFAULT TO DOWN NEEDS TO BE SET TO LAST DIRECTION MOVED
else if (npclist[s][7]==0 && npclist[s][8]==0)
{
if (lastone==1)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]+33;
npclist[1][0]=467;
}
else if (lastone==2)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]-33;
npclist[1][0]=466;
}
else if (lastone==3)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]+33;
npclist[1][0]=467;
}
else if (lastone==4)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]-33;
npclist[1][0]=466;
}
else if (lastone==5)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]-33;
npclist[1][0]=466;
}
else if (lastone==6)
{
npclist[1][1]=npclist[s][1];
npclist[1][2]=npclist[s][2]+33;
npclist[1][0]=467;
}
else if (lastone==7)
{
npclist[1][1]=npclist[s][1]+33;
npclist[1][2]=npclist[s][2];
npclist[1][0]=469;
}
else if (lastone==8)
{
npclist[1][1]=npclist[s][1]-33;
npclist[1][2]=npclist[s][2];
npclist[1][0]=468;
}
}
}
//THIS IS THE RAKE TOOL
if (swordtoggle2==1)
{
//DIR - + LEFT DOWN
if (npclist[s][7]<0 && npclist[s][8]>0)
{
//SET THE PICTURE OF THE TOOL AND THE POSTION RELATIVE TO THE PLAYER
//IN THE RAKE YOU ALSO SET THE TILE THE PLAYER IS CURRENTLY ON
npclist[2][1]=npclist[s][1];
npclist[2][2]=npclist[s][2]+33;
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0&&map[tileposy][tileposx]!=51)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=454;
}
//DIR - - LEFT UP
else if (npclist[s][7]<0 && npclist[s][8]<0)
{
npclist[2][1]=npclist[s][1];
npclist[2][2]=npclist[s][2]-33;
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=443;
}
//DIR + + RIGHT DOWN
else if (npclist[s][7]>0 && npclist[s][8]>0)
{
npclist[2][1]=npclist[s][1];
npclist[2][2]=npclist[s][2]+33;
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=454;
}
//DIR + - RIGHT UP
else if (npclist[s][7]>0 && npclist[s][8]<0)
{
npclist[2][1]=npclist[s][1];
npclist[2][2]=npclist[s][2]-33;
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=443;
}
//DIR 0 - UP
else if (npclist[s][7]==0&&npclist[s][8]<0)
{
npclist[2][1]=npclist[s][1];
npclist[2][2]=npclist[s][2]-33;
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=443;
}
//DIR 0 + DOWN
else if (npclist[s][7]==0&&npclist[s][8]>0)
{
npclist[2][1]=npclist[s][1];
npclist[2][2]=npclist[s][2]+33;
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=454;
}
//DIR + 0 RIGHT
else if (npclist[s][7]>0&&npclist[s][8]==0)
{
npclist[2][1]=npclist[s][1]+33;
npclist[2][2]=npclist[s][2];
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=455;
}
//DIR - 0 LEFT
else if (npclist[s][7]<0&&npclist[s][8]==0)
{
npclist[2][1]=npclist[s][1]-33;
npclist[2][2]=npclist[s][2];
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=444;
}
//DIR 0 0 NOT MOVING
else if (npclist[s][7]==0 && npclist[s][8]==0)
{
npclist[2][1]=npclist[s][1];
npclist[2][2]=npclist[s][2]+33;
tileposx=Math.ceil(npclist[2][1]/32);
tileposy=Math.ceil(npclist[2][2]/32);
if (tileposx>0&&tileposy>0)
{
var holditman=map[tileposy][tileposx];
invlist[holditman]++;
map[tileposy][tileposx]=51;
}
npclist[2][0]=454;
}
}
animation();
}
else if (s!=1)
{
animation();
ai001();
npclist[s][1]=npclist[s][1]+(time-b[0])*npclist[s][7];
npclist[s][2]=npclist[s][2]+(time-b[0])*npclist[s][8];
}
//IF NO HP THEN MAKE THE CHAR PASSABLE
if (npclist[s][5]<0&&npclist[s][3]==1)
{
npclist[s][3]=2;
npclist[s][4]=0;
npclist[s][7]=0;
npclist[s][8]=0;
npclist[s][9]=0;
npclist[s][0]=12;
tileposx=Math.ceil(npclist[s][1]/32);
tileposy=Math.ceil(npclist[s][2]/32);
if (tileposx>0&&tileposy>0)
{
map[tileposy][tileposx]=459;
}
}
if (npclist[s][7]!=0)
{
npclist[s][10]=npclist[s][7];
}
if (npclist[s][8]!=0)
{
npclist[s][11]=npclist[s][8];
}
}
resettimers();
}
function keyboardhan(event)
{
if (event.keyCode=="37")
{
if (key1!=1)
{
key1=1;
npclist[0][7]=npclist[0][7]-charspeed;
}
}
if (event.keyCode=="38")
{
if (key2!=1)
{
key2=1;
npclist[0][8]=npclist[0][8]-charspeed;
}
}
if (event.keyCode=="39")
{
if (key3!=1)
{
key3=1;
npclist[0][7]=npclist[0][7]+charspeed;
}
}
if (event.keyCode=="40")
{
if (key4!=1)
{
key4=1;
npclist[0][8]=npclist[0][8]+charspeed;
}
}
if (event.keyCode=="87")
{
if (key5!=1)
{
key5=1;
if (swordtoggle==1)
{
npclist[1][0]=12;
swordtoggle=0;
npclist[1][3]=2;
}
else if (swordtoggle==0)
{
npclist[1][3]=2;
swordtoggle=1;
}
}
}
if (event.keyCode=="81")
{
if (key6!=1)
{
key6=1;
if (swordtoggle2==1)
{
npclist[2][0]=12;
swordtoggle2=0;
npclist[2][3]=2;
}
else if (swordtoggle2==0)
{
npclist[2][3]=2;
swordtoggle2=1;
}
}
}
if (event.keyCode=="16")
{
if (key7!=1)
{
key7=1;
if (npclist[0][7]!=0&&npclist[0][8]!=0)
{
npclist[0][7]=npclist[0][7]/Math.abs(npclist[0][7]);
npclist[0][8]=npclist[0][8]/Math.abs(npclist[0][8]);
npclist[0][7]=npclist[0][7]*5;
npclist[0][8]=npclist[0][8]*5;
}
else if (npclist[0][7]!=0&&npclist[0][8]==0)
{
npclist[0][7]=npclist[0][7]/Math.abs(npclist[0][7]);
npclist[0][7]=npclist[0][7]*5;
}
else if (npclist[0][7]==0&&npclist[0][8]!=0)
{
npclist[0][8]=npclist[0][8]/Math.abs(npclist[0][8]);
npclist[0][8]=npclist[0][8]*5;
}
}
}
if (event.keyCode=="66")
{
selection=selection+3;
}
if (event.keyCode=="86")
{
selection=selection-3;
}
if (event.keyCode=="73")
{
if (key9!=1)
{
key9=1;
if (swordtoggle4==1)
{
swordtoggle4=0;
}
else if (swordtoggle4==0)
{
swordtoggle4=1;
}
}
}
if (event.keyCode=="69")
{
if (npclist[0][7]<0 && npclist[0][8]>0)
{var npclistxtemp=[249,npclist[0][1]-32,npclist[0][2]+32,1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0&&npclist[0][8]<0)
{var npclistxtemp=[249,npclist[0][1],npclist[0][2]-32,1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0&&npclist[0][8]>0)
{var npclistxtemp=[249,npclist[0][1],npclist[0][2]+32,1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0&&npclist[0][8]==0)
{var npclistxtemp=[249,npclist[0][1]+32,npclist[0][2],1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]<0&&npclist[0][8]==0)
{var npclistxtemp=[249,npclist[0][1]-32,npclist[0][2],1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]<0 && npclist[0][8]<0)
{var npclistxtemp=[249,npclist[0][1]-32,npclist[0][2]-32,1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0 && npclist[0][8]>0)
{var npclistxtemp=[249,npclist[0][1]+32,npclist[0][2]+32,1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0 && npclist[0][8]<0)
{var npclistxtemp=[249,npclist[0][1]+32,npclist[0][2]-32,1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0 && npclist[0][8]==0)
{var npclistxtemp=[249,npclist[0][1],npclist[0][2]+32,1,1,100,100,0,0,0];npclist.push(npclistxtemp);}
mp=mp-5;
}
if (event.keyCode=="82")
{
if (npclist[0][7]<0 && npclist[0][8]>0)
{var npclistxtemp=[238,npclist[0][1]-32,npclist[0][2]+32,0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0&&npclist[0][8]<0)
{var npclistxtemp=[238,npclist[0][1],npclist[0][2]-32,0,0,1,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0&&npclist[0][8]>0)
{var npclistxtemp=[238,npclist[0][1],npclist[0][2]+32,0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0&&npclist[0][8]==0)
{var npclistxtemp=[238,npclist[0][1]+32,npclist[0][2],0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]<0&&npclist[0][8]==0)
{var npclistxtemp=[238,npclist[0][1]-32,npclist[0][2],0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]<0 && npclist[0][8]<0)
{var npclistxtemp=[238,npclist[0][1]-32,npclist[0][2]-32,0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0 && npclist[0][8]>0)
{var npclistxtemp=[238,npclist[0][1]+32,npclist[0][2]+32,0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0 && npclist[0][8]<0)
{var npclistxtemp=[238,npclist[0][1]+32,npclist[0][2]-32,0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0 && npclist[0][8]==0)
{var npclistxtemp=[238,npclist[0][1],npclist[0][2]+32,0,0,100,100,0,0,0];npclist.push(npclistxtemp);}
mp=mp-10;
}
if (event.keyCode=="84")
{
if (npclist[0][7]<0 && npclist[0][8]>0)
{var npclistxtemp=[237,npclist[0][1]-32,npclist[0][2]+32,1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0&&npclist[0][8]<0)
{var npclistxtemp=[237,npclist[0][1],npclist[0][2]-32,1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0&&npclist[0][8]>0)
{var npclistxtemp=[237,npclist[0][1],npclist[0][2]+32,1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0&&npclist[0][8]==0)
{var npclistxtemp=[237,npclist[0][1]+32,npclist[0][2],1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]<0&&npclist[0][8]==0)
{var npclistxtemp=[237,npclist[0][1]-32,npclist[0][2],1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]<0 && npclist[0][8]<0)
{var npclistxtemp=[237,npclist[0][1]-32,npclist[0][2]-32,1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0 && npclist[0][8]>0)
{var npclistxtemp=[237,npclist[0][1]+32,npclist[0][2]+32,1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]>0 && npclist[0][8]<0)
{var npclistxtemp=[237,npclist[0][1]+32,npclist[0][2]-32,1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
else if (npclist[0][7]==0 && npclist[0][8]==0)
{var npclistxtemp=[237,npclist[0][1],npclist[0][2]+32,1,198,100,100,1,1,0];npclist.push(npclistxtemp);}
helpers++;
mp=mp-20;
}
}
function keyboardhan2(event)
{
if (event.keyCode=="37")
{
key1=0;
npclist[0][7]=0;
}
if (event.keyCode=="38")
{
key2=0;
npclist[0][8]=0;
}
if (event.keyCode=="39")
{
key3=0;
npclist[0][7]=0;
}
if (event.keyCode=="40")
{
key4=0;
npclist[0][8]=0;
}
if (event.keyCode=="87")
{
key5=0;
}
if (event.keyCode=="81")
{
key6=0;
}
if (event.keyCode=="16")
{
key7=0;
}
if (event.keyCode=="73")
{
key9=0;
}
}
And now a copy of the images folder from the project so you have the graphics.
http://s000.tinyupload.com/?file_id=78761715115048132625
And to describe the project folder structure for linking
MAIN FOLDER
|
V
images->rpggame->splash1.png tilemap.png tilemawp.png
scripts->script14.js
games->games11.html
Next post I will drop some of the landscape engines I made in ogre3d and ogrepy3d