I made a simple platformer using javascript. To those who know about javascript, you'll know this isn't exactly easy. I used a game engine that my brother and I made to create this. It is basically just a ton of functions all in one place that are supposed to make making games easier. Those of you who know about javascript, HTML, css, etc. will probably know how to run this. To those who do not, here is how:
Open Textedit or Notepad (I'm sure there is other software, but those are the two I use depending on whether I'm on my mac at home or a PC at school). Copy the code below into it, and save it as: "WhatEverNameYouWant.html" (no quotes
). Then close the text editor, and open up WhatEverNameYouWant.html.
------Update 1/4/11
When you're playing it, make sure Caps Lock is off. Sorry about that, should have remembered
------End of Update
I usually open this game in Safari, but it also works on Internet Explorer. I don't know about Firefox.
P.S. The green ")" stand for two )s. So replace them with two of these: )
The Source is:
<HTML>
<HEAD>
<STYLE>
DIV.movable { position:absolute; }
</STYLE>
<SCRIPT type="text/javascript">
var InputArray=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
function Keydown()
{
if (event.keyCode==32)
{
InputArray[37]=1;
}
var kp=String.fromCharCode(event.keyCode);
if (kp=="a")
{
InputArray[1]=1;
}
else if(kp=="b")
{
InputArray[2]=1;
}
else if(kp=="c")
{
InputArray[3]=1;
}
else if(kp=="d")
{
InputArray[4]=1;
}
else if(kp=="e")
{
InputArray[5]=1;
}
else if(kp=="f")
{
InputArray[6]=1;
}
else if(kp=="g")
{
InputArray[7]=1;
}
else if(kp=="h")
{
InputArray[8]=1;
}
else if(kp=="i")
{
InputArray[9]=1;
}
else if(kp=="j")
{
InputArray[10]=1;
}
else if(kp=="k")
{
InputArray[11]=1;
}
else if(kp=="l")
{
InputArray[12]=1;
}
else if(kp=="m")
{
InputArray[13]=1;
}
else if(kp=="n")
{
InputArray[14]=1;
}
else if(kp=="o")
{
InputArray[15]=1;
}
else if(kp=="p")
{
InputArray[16]=1;
}
else if(kp=="q")
{
InputArray[17]=1;
}
else if(kp=="r")
{
InputArray[18]=1;
}
else if(kp=="s")
{
InputArray[19]=1;
}
else if(kp=="t")
{
InputArray[20]=1;
}
else if(kp=="u")
{
InputArray[21]=1;
}
else if(kp=="v")
{
InputArray[22]=1;
}
else if(kp=="w")
{
InputArray[23]=1;
}
else if(kp=="x")
{
InputArray[24]=1;
}
else if(kp=="y")
{
InputArray[25]=1;
}
else if(kp=="z")
{
InputArray[26]=1;
}
else if(kp=="1")
{
InputArray[27]=1;
}
else if(kp=="2")
{
InputArray[28]=1;
}
else if(kp=="3")
{
InputArray[29]=1;
}
else if(kp=="4")
{
InputArray[30]=1;
}
else if(kp=="5")
{
InputArray[31]=1;
}
else if(kp=="6")
{
InputArray[32]=1;
}
else if(kp=="7")
{
InputArray[33]=1;
}
else if(kp=="8")
{
InputArray[34]=1;
}
else if(kp=="9")
{
InputArray[35]=1;
}
else if(kp=="0")
{
InputArray[36]=1;
}
}
function Keyup()
{
if(event.keyCode==32)
{
InputArray[37]=0;
}
var kpu = String.fromCharCode(event.keyCode);
if (kpu=="A")
{
InputArray[1]=0;
}
else if(kpu=="B")
{
InputArray[2]=0;
}
else if(kpu=="C")
{
InputArray[3]=0;
}
else if(kpu=="D")
{
InputArray[4]=0;
}
else if(kpu=="E")
{
InputArray[5]=0;
}
else if(kpu=="F")
{
InputArray[6]=0;
}
else if(kpu=="G")
{
InputArray[7]=0;
}
else if(kpu=="H")
{
InputArray[8]=0;
}
else if(kpu=="I")
{
InputArray[9]=0;
}
else if(kpu=="J")
{
InputArray[10]=0;
}
else if(kpu=="K")
{
InputArray[11]=0;
}
else if(kpu=="L")
{
InputArray[12]=0;
}
else if(kpu=="M")
{
InputArray[13]=0;
}
else if(kpu=="N")
{
InputArray[14]=0;
}
else if(kpu=="O")
{
InputArray[15]=0;
}
else if(kpu=="P")
{
InputArray[16]=0;
}
else if(kpu=="Q")
{
InputArray[17]=0;
}
else if(kpu=="R")
{
InputArray[18]=0;
}
else if(kpu=="S")
{
InputArray[19]=0;
}
else if(kpu=="T")
{
InputArray[20]=0;
}
else if(kpu=="U")
{
InputArray[21]=0;
}
else if(kpu=="V")
{
InputArray[22]=0;
}
else if(kpu=="W")
{
InputArray[23]=0;
}
else if(kpu=="X")
{
InputArray[24]=0;
}
else if(kpu=="Y")
{
InputArray[25]=0;
}
else if(kpu=="Z")
{
InputArray[26]=0;
}
else if(kpu=="1")
{
InputArray[27]=0;
}
else if(kpu=="2")
{
InputArray[28]=0;
}
else if(kpu=="3")
{
InputArray[29]=0;
}
else if(kpu=="4")
{
InputArray[30]=0;
}
else if(kpu=="5")
{
InputArray[31]=0;
}
else if(kpu=="6")
{
InputArray[32]=0;
}
else if(kpu=="7")
{
InputArray[33]=0;
}
else if(kpu=="8")
{
InputArray[34]=0;
}
else if(kpu=="9")
{
InputArray[35]=0;
}
else if(kpu=="0")
{
InputArray[36 ]=0;
}
}
function Input(key)
{
var answer=0;
if(key=="mouse")
{
if(InputArray[0]==1)
{
answer=1;
}
}
else if(key=="a")
{
if(InputArray[1]==1)
{
answer=1;
}
}
else if(key=="b")
{
if(InputArray[2]==1)
{
answer=1;
}
}
else if(key=="c")
{
if(InputArray[3]==1)
{
answer=1;
}
}
else if(key=="d")
{
if(InputArray[4]==1)
{
answer=1;
}
}
else if(key=="e")
{
if(InputArray[5]==1)
{
answer=1;
}
}
else if(key=="f")
{
if(InputArray[6]==1)
{
answer=1;
}
}
else if(key=="g")
{
if(InputArray[7]==1)
{
answer=1;
}
}
else if(key=="h")
{
if(InputArray[8]==1)
{
answer=1;
}
}
else if(key=="i")
{
if(InputArray[9]==1)
{
answer=1;
}
}
else if(key=="j")
{
if(InputArray[10]==1)
{
answer=1;
}
}
else if(key=="k")
{
if(InputArray[11]==1)
{
answer=1;
}
}
else if(key=="l")
{
if(InputArray[12]==1)
{
answer=1;
}
}
else if(key=="m")
{
if(InputArray[13]==1)
{
answer=1;
}
}
else if(key=="n")
{
if(InputArray[14]==1)
{
answer=1;
}
}
else if(key=="o")
{
if(InputArray[15]==1)
{
answer=1;
}
}
else if(key=="p")
{
if(InputArray[16]==1)
{
answer=1;
}
}
else if(key=="q")
{
if(InputArray[17]==1)
{
answer=1;
}
}
else if(key=="r")
{
if(InputArray[18]==1)
{
answer=1;
}
}
else if(key=="s")
{
if(InputArray[19]==1)
{
answer=1;
}
}
else if(key=="t")
{
if(InputArray[20]==1)
{
answer=1;
}
}
else if(key=="u")
{
if(InputArray[21]==1)
{
answer=1;
}
}
else if(key=="v")
{
if(InputArray[22]==1)
{
answer=1;
}
}
else if(key=="w")
{
if(InputArray[23]==1)
{
answer=1;
}
}
else if(key=="x")
{
if(InputArray[24]==1)
{
answer=1;
}
}
else if(key=="y")
{
if(InputArray[25]==1)
{
answer=1;
}
}
else if(key=="z")
{
if(InputArray[26]==1)
{
answer=1;
}
}
else if(key=="1")
{
if(InputArray[27]==1)
{
answer=1;
}
}
else if(key=="2")
{
if(InputArray[28]==1)
{
answer=1;
}
}
else if(key=="3")
{
if(InputArray[29]==1)
{
answer=1;
}
}
else if(key=="4")
{
if(InputArray[30]==1)
{
answer=1;
}
}
else if(key=="5")
{
if(InputArray[31]==1)
{
answer=1;
}
}
else if(key=="6")
{
if(InputArray[32]==1)
{
answer=1;
}
}
else if(key=="7")
{
if(InputArray[33]==1)
{
answer=1;
}
}
else if(key=="8")
{
if(InputArray[34]==1)
{
answer=1;
}
}
else if(key=="9")
{
if(InputArray[35]==1)
{
answer=1;
}
}
else if(key=="0")
{
if(InputArray[36]==1)
{
answer=1;
}
}
else if(key=="space")
{
if(InputArray[37]==1)
{
answer=1;
}
}
if(answer==1)
{
answer=true;
}
else
{
answer=false;
}
return answer;
}
function SearchArray(item,Array)
{
var i;
var num=-1;
for(i=0;i<Array.length;i++)
{
if(Array[i]==item)
{
num=i;
break;
}
}
return num;
}
function Move(object,xMove,yMove)
{
var element=document.getElementById(object);
var x=element.offsetLeft;
var y=element.offsetTop;
document.getElementById(object).style.top=y+yMove+"px";
document.getElementById(object).style.left=x+xMove+"px";
}
function Goto(object,x,y)
{
document.getElementById(object).style.top=y+"px";
document.getElementById(object).style.left=x+"px";
}
function Touching(object,OBJECT)
{
var touch=false;
var element1=document.getElementById(object);
var x=element1.offsetLeft;
var y=element1.offsetTop;
var element2=document.getElementById(OBJECT);
var X=element2.offsetLeft;
var Y=element2.offsetTop;
var width=element1.offsetWidth;
var height=element1.offsetHeight;
var WIDTH=element2.offsetWidth;
var HEIGHT=element2.offsetHeight;
if(x+width>X && X+WIDTH>x && y+height>Y && Y+HEIGHT>y)
{
touch=true;
}
return touch;
}
function SpecialTouching(object,width,height,OBJECT,WIDTH,HEIGHT)
{
var touch=false;
var element1=document.getElementById(object);
var x=element1.offsetLeft;
var y=element1.offsetTop;
var element2=document.getElementById(OBJECT);
var X=element2.offsetLeft;
var Y=element2.offsetTop;
if(x+width>X && X+WIDTH>x && y+height>Y && Y+HEIGHT>y)
{
touch=true;
}
return touch;
}
function ChangeCostume(object,newCostume)
{
document.getElementById(object).innerHTML=newCostume;
}
function SetX(object,x)
{
document.getElementById(object).style.left=x+"px";
}
function SetY(object,y)
{
document.getElementById(object).style.top=y+"px";
}
function Hide(object)
{
document.getElementById(object).style.visibility="hidden";
}
function Show(object)
{
document.getElementById(object).style.visibility="visible";
}
function XPosition(object)
{
var element=document.getElementById(object);
return element.offsetLeft;
}
function YPosition(object)
{
var element=document.getElementById(object);
return element.offsetTop;
}
function Print(text)
{
document.coord.printvalue.value=text;
}
function Create(newName,content)
{
var newdiv=document.createElement("div");
newdiv.setAttribute("id",newName);
newdiv.innerHTML=content;
newdiv.className="movable";
document.body.appendChild(newdiv);
}
function Destroy(object)
{
var DivToRemove=document.getElementById(object);
document.body.removeChild(DivToRemove);
}
function Background(object,color)
{
var element=document.getElementById(object);
element.style.background=color;
}
function SetTransparency(object,opacity)
{
var element=document.getElementById(object);
element.style.opacity=opacity/100;
}
var Stop;
function Pause()
{
clearInterval(Stop);
}
function Forward(object,speed,angle)
{
var element=document.getElementById(object);
var x=element.offsetLeft;
var y=element.offsetTop;
var yMove=speed*Math.cos(3.141592654*angle/180);
var xMove=speed*Math.sin(3.141592654*angle/180);
document.getElementById(object).style.top=y-yMove+"px";
document.getElementById(object).style.left=x+xMove+"px";
}
function Resize(object,width,height)
{
document.getElementById(object).style.width=width+"px";
document.getElementById(object).style.height=height+"px";
}
function CurrentTime()
{
var currentTime=new Date();
var hours=currentTime.getHours();
var minutes=currentTime.getMinutes();
var seconds=currentTime.getSeconds();
var milliseconds=currentTime.getMilliseconds();
var time=3600*hours+60*minutes+seconds+milliseconds/1000;
time=Math.round(time*1000);
return time;
}
var Level;
var StartTime=CurrentTime();
var Frame=0;
var Time=0;
var MYx;
var MYy;
var MYVx=0;
var MYVy=0;
var floor=["bottom","top","floor1","floor2"];
var floorx=[400,400,300,300];
var floory=[10,10,10,10];
var Down;
var Right;
var Left;
var Up;
function obstacle(obname,obx,oby)
{
var floori;
for(floori=0; floori<floor.length; floori++)
{
if (SpecialTouching(floor[floori],floorx[floori],floory[floori],obname,obx,oby))
{
if(obname=="down")
{
Down=0;
}
else if(obname=="left")
{
Left=0;
}
else if(obname=="right")
{
Right=0;
}
else if(obname=="up")
{
Up=0;
}
}
}
}
function Start()
{
document.coord.red[0].checked=true; /*copied*/
Create("goal","");
Resize("goal",15,15);
Background("goal","purple");
Goto("goal",300,140);
Create("you","");
Resize("you",30,30);
Background("you","red");
MYx=384;
MYy=12;
Create("down","");
Resize("down",30,4);
Create("left","");
Resize("left",4,27);
Create("right","");
Resize("right",4,27);
Create("up","");
Create("floor1","");
Resize("floor1",300,10);
Background("floor1","black");
Goto("floor1",114,100);
Create("floor2","");
Resize("floor2",300,10);
Background("floor2","black");
Goto("floor2",12,175);
Create("bottom","");
Resize("bottom",400,10);
Goto("bottom",12,410);
Create("top","");
Resize("top",400,10);
Goto("top",12,2);
}
function Level4()
{
MYx=300;
MYy=300;
Destroy("floor1");
Destroy("floor2");
Destroy("floor3");
Destroy("floor4");
Destroy("floor5");
Destroy("goal");
floor=["bottom","top"];
floorx=[400,400];
floory=[10,10];
}
function Level3()
{
Goto("goal",375,75);
MYx=15;
MYy=350;
Resize("floor2",75,10);
Goto("floor2",12,175);
floorx[3]=75;
floory[3]=10;
Create("floor3","");
Resize("floor3",150,10);
Background("floor3","black");
Goto("floor3",150,325);
floor.push("floor3");
floorx.push(150);
floory.push(10);
Create("floor4","");
Resize("floor4",50,10);
Background("floor4","black");
Goto("floor4",114,250);
floor.push("floor4");
floorx.push(50);
floory.push(10);
Create("floor5","");
Resize("floor5",50,10);
Background("floor5","black");
Goto("floor5",286,250);
floor.push("floor5");
floorx.push(50);
floory.push(10);
}
function Level2()
{
Goto("goal",375,75);
MYx=15;
MYy=100;
}
function Update()
{
var val = 0;
var i;
for(i=0; i<document.coord.red.length;i++)
{
if(document.coord.red[i].checked == true)
{
val = document.coord.red[i].value;
}
}
Background("you",val);
Right=true;
Left=true;
obstacle("left",4,27);
obstacle("right",4,27);
if(Input("d") )
{
MYVx=MYVx+0.05;
}
if(Input("a") )
{
MYVx=MYVx-0.05;
}
if(Left==0 && MYVx<0)
{
MYVx=0;
}
else if(Right==0 && MYVx>0)
{
MYVx=0;
}
if(Input("a") || Input("d") )
{
}
else
{
MYVx=MYVx*0.9
if(Math.abs(MYVx)<0.01)
{
MYVx=0;
}
}
Down=true;
obstacle("down",30,4);
if(Down && MYVy<4)
{
MYVy=MYVy+.05;
}
else if(Down==0)
{
MYVy=0;
if(Input("w"))
{
MYVy=-3;
}
}
if(MYx<12)
{
MYx=12;
if(MYVx<0)
{
MYVx=MYVx*-0.5;
}
}
else if(MYx>384)
{
MYx=384;
if(MYVx>0)
{
MYVx=MYVx*-0.5;
}
}
var Upheight;
if(MYVy<0)
{
Upheight=MYVy*-3;
}
else
{
Upheight=0;
}
Up=true;
Resize("up",30,Upheight);
obstacle("up",30,Upheight);
if(Up==0 && MYVy<0)
{
MYVy=0
}
MYx=MYx+MYVx;
MYy=MYy+MYVy;
Goto("you",MYx, MYy);
Goto("down",MYx,(MYy+27));
Goto("left",MYx-2,MYy);
Goto("right",MYx+28,MYy);
Goto("up",MYx,MYy-(Upheight/2))
if(Input("r") || Input("R"))
{
MYVy=0;
MYVx=0;
if(Level==1)
{
Start();
}
else if(Level==2)
{
Level2();
}
else if(Level==3)
{
Level3();
}
else if(Level==4)
{
Level4();
}
}
if(SpecialTouching("you",30,30,"goal",15,15))
{
MYVy=0;
MYVx=0;
if(Level==1)
{
Level=2;
Level2();
}
else if(Level==2)
{
Level=3;
Level3();
}
else if(Level==3)
{
Level=4;
Level4();
}
}
if(Level==1)
{
Print("Level: 1 A to move left, D to move Right; get to the purple square!");
}
else if(Level==2)
{
Print("Level: 2 Press W to jump and press R to restart");
}
else if(Level==3)
{
Print("Level: 3 And people said you couldn't make games with javascript");
}
else if(Level==4)
{
Print("Level: 4 Errr..... that's all");
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="Start(); Stop=setInterval(Update,20); Level=1; Level1();" onKeypress="Keydown(event);" onKeyup="Keyup(event);">
<Table border="1">
<TR height="400"><TD width="400"></TD></TR>
</TABLE>
</center>
<form name="coord">
<input type="text" name="printvalue" style="width:410px"><BR>
What Color?<BR>
Red:<input type="radio" name="red" value="red"><BR>
Orange:<input type="radio" name="red" value="orange"><BR>
Yellow:<input type="radio" name="red" value="yellow"><BR>
Green:<input type="radio" name="red" value="green"><BR>
Blue:<input type="radio" name="red" value="blue"><BR>
Purple:<input type="radio" name="red" value="purple"><BR>
Black:<input type="radio" name="red" value="black"><BR>
</form>
</BODY>
</HTML>
Last edited by MoreGamesNow (2011-01-04 17:53:19)
Offline
Hmmm.. Well, the the body tag is closed too early... there fixed. But that probably won't fix your problem since it was working for me when the body tag was misplaced anyway
Did you replace the ))s with two )?
Last edited by MoreGamesNow (2011-01-03 17:31:24)
Offline
MoreGamesNow wrote:
Hmmm.. Well, the the body tag is closed too early... there fixed. But that probably won't fix your problem since it was working for me when the body tag was misplaced anyway
![]()
Did you replace the ))s with two )?
Oops! I didn't replace the ))s!
Offline
Holy *! It worked! If you added more levels then I would be like: "Shapazoo!".
Offline
ok, It works fine.
That's way too much code for me to work with. It took me forever just to add the 6 brackets.
Offline
Not all of it is necessary for the game. For instance, a lot of the Input functions can be deleted, since only five keys are needed. I just don't like deleting stuff from the game engine. Plus, keeping the unnecessary script makes it look more impressive
Offline
kimmy123 wrote:
I can't move
![]()
Are you using the WSAD? Also, make sure Caps-lock is off.
Offline
It's great that you are working in Java script and I love the game you make. However, I think this would be better suited to the Miscellaneous section of the forum. Show and Tell is reserved for Scratch projects and galleries only.
Moving
Offline
Ok, thanks for moving it demosthenes
Last edited by MoreGamesNow (2011-01-04 21:01:42)
Offline