G@MeF@Ce
 |  | |
 | ||
 |  |
^,^
5163
1247
2009-10-09
1974-05-28
50
8363
Fire Knight
As demons will fall, the angel must rise!
If you haven't already noticed [PROJECTS] to the right of your screen,
there's a blessed box that will lead you to a holy place. I have been continuously (every now and then) working on a simple (which is not so simple) doodle jump clone. I blessed it with a heavenly theme and simply named it ANGEL JUMP (also known in dark regions of the web as Holy Hop)! Through the powers of HTML5, javascript and this awesome doodle jump example, you now have the entire setup for an HTML5 game!
Though it's a simple game, there are lots of scripting/programming/coding involved.
I've shared the code below so you can see how things work. You can find simple examples of how to write out words based on the value of the score. I might fix the L and R buttons to move the character which will take some time since I'm not the greatest at scripting... I have done the cloud sprites and made the angel (still needs a name) and the lil devils with the GAMEFACE MAKER. Now it just needs a touch of story and a catchy tune and we have ourselves a solid project. Who knows, maybe someday everyone can play no matter the device.
HTML5
- ANGEL JUMP 2021:
- Code:
<link href="https://2img.net/u/3113/12/83/19/album/g101_l21.png" rel="SHORTCUT ICON" />
<title>ANGEL JUMP</title>
<style>
*{box-sizing: border-box;}
body {
background-color: #000;
margin: 0; padding: 0;
}
.container {
background-color: #808080;
height: auto;
width: 486px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
canvas {
height: 552px;
width: 422px;
display: block;
background: url(https://2img.net/u/3113/12/83/19/album/skybac11.png) top left;
margin: 0px;
}
#scoreBoard {
width: 422px;
height: 50px;
background: rgba(80, 80, 80, 0.7);
position: absolute;
top: 0px;
left: 32px;
z-index: -1;
border-image: url() 100 5 round;
}
#scoreBoard p {
color: #fff000;
font-size: 20px;
padding: 0;
line-height: 47px;
margin: 0px 0 0 5px;
}
#floorBoard {
width: 422px;
height: 70px;
background: rgba(80, 80, 80, 0.7);
position: absolute;
bottom: 0px;
left: 32px;
z-index: -1;
border-image: url() 100 5 round;
}
#floorBoard p {
color: #fff000;
font-size: 16px;
padding-left: 70px;
padding-right: 8px;
padding-top: 6px;
line-height: 20px;
margin: 0px 0 0 5px;
text-align: left;
}
img {display: none}
#mainMenu, #gameOverMenu {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#gameOverMenu {
visibility: hidden;
}
h2, h3, h1 {font-weight: normal}
#title {
width: 522px;
height: 100px;
margin-left:-10px;
margin-top:50px;
background: url(https://2img.net/u/3113/12/83/19/album/angel_11.png);
}
h3 a {color: #000}
#start {
width: 96px;
height: 58px;
background-color: #808080;
display: block;
color: #000;
font-size: 12px;
line-height: 31px;
text-decoration: none;
position: absolute;
left: 50%;
bottom: 50px;
margin-left: -50px;
z-index: 300;
background: url(https://2img.net/u/3113/12/83/19/album/start_11.png);
}
#priest {
text-decoration: none;
position: absolute;
left: -8px;
top: -6px;
width: 75px;
height: 75px;
background: url(https://2img.net/u/3113/12/83/19/album/priest11.png);
}
#movebutton {
text-decoration: none;
width:32px;
height:552px;
background-color: #f0f0f0;
}
</style>
<div align="center" class="container">
<div style="float: left; width: 32px;">
<div onmousedown="toLeft()" id="movebutton">
L
</div>
</div>
<canvas style="float: left;" onmousedown="stopMove()" id="canvas"> Your browser doesn't support HTML5? </canvas>
<div style="float: left; width: 32px;">
<div onmousedown="toRight()" id="movebutton">
R
</div>
</div>
<div id="mainMenu">
<div id="title">
www.gameface101.com (2009 - 2021) <br>
</div>
<p align="center" class="info">
TO MOVE: USE LEFT AND RIGHT ARROW KEYS<br> TO START: PRESS SPACEBAR to (re)start<br><br>BOUNCE YOUR WAY UP TO PROVE YOUR FAITH!<br><br> G@MeF@Ce
</p>
<a href="javascript:init()" id="start"></a>
</div>
<div align="center" id="gameOverMenu">
<h1>
TRY AGAIN?
</h1>
<h3 id="go_score">
you scored 0 points
</h3>
<h3 id="go_word">
you are ranked word angel
</h3>
<a href="javascript:reset(),reset_prayers()" class="button">RESTART</a>
</div>
<img src="https://2img.net/u/3113/12/83/19/album/aj_spr19.png" id="sprite" />
<div id="scoreBoard">
<p id="score">
0
</p>
</div>
<div id="floorBoard">
<p id="word">
</p>
<p onclick="pray()" id="priest">
</p>
</div>
</div>
<script>
// high jump by prayers
var prayers = 1;
function pray(){
if(prayers !=0){
prayers = prayers - 1;
//document.getElementById("priest").innerHTML = prayers;
player.jumpHigh();}
else {
}
}
function reset_prayers(){
prayers = 1;
}
</script> <script>
//movement interface
function toLeft() {
dir = "left";
player.isMovingLeft = true;
player.isMovingRight = false;
player.vx = 0.1;
}
function toRight() {
dir = "right";
player.isMovingRight = true;
player.isMovingLeft = false;
}
function stopMove() {
player.isMovingLeft = false;
player.isMovingRight = false;
}
</script> <script src="/42596.js"></script>
GRAPHICS
- ANGEL JUMP GRAPHICS:
who's going to set the highest score?
once you get to 5000 it gets darn right challenging!
PLAY ANGEL JUMP
signature
Administrator
I'm doing around 2000 anyway ahahah. Nice job you did there!
