<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Keyboard shortcut class provides ability to bind functions
* to custom key combinations.
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Multiple-key-combinations-using-javascript
**************************************************************/
-->
<html>
<head>
<style type='text/css'>
body
{
overflow: hidden;
}
h1,p
{
text-align: center;
}
#playground
{
position: absolute;
height: 300px;
width: 2000px;
border: 1px solid black;
bottom: 50px;
left: 500px;
}
#squario
{
position: absolute;
height: 90px;
width: 90px;
bottom: 0px;
left: 0px;
}
#red
{
height: 30px;
width: 90px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
#blue
{
height: 30px;
width: 90px;
background-color: blue;
position: absolute;
top: 30px;
left: 0;
}
#black
{
height: 30px;
width: 90px;
background-color: black;
position: absolute;
top: 60px;
left: 0;
}
#tube
{
width: 90px;
height: 90px;
background-color: green;
position: absolute;
top: 0;
left: 910px;
}
</style>
</head>
<body>
<h1>Squario</h1>
<p>A - go left, D - go right, W - jump, Space - shoot</p>
<div id='playground'>
<div id='squario'>
<div id='red'></div>
<div id='blue'></div>
<div id='black'></div>
</div>
<div id='tube'></div>
</div>
<script type="text/javascript" src="./kb_shortcut.packed.js" ></script>
<script type="text/javascript">
var sq = document.getElementById("squario");
sq.style.left = 0;
sq.style.bottom = 0;
var head = document.getElementById("red");
var pl = document.getElementById("playground");
pl.style.left = 500 + "px";
var step = 100;
var side = 1;
var kb = new kb_shortcut();
kb.add("A", function(){
//alert("Left");
side = 0;
if(parseInt(sq.style.left) - step < 0)
{
sq.style.left = 0 + "px";
pl.style.left = 500 + "px";
}
else
{
sq.style.left = (parseInt(sq.style.left) - step) + "px";
pl.style.left = (parseInt(pl.style.left) + step) + "px";
}
}, 500);
kb.add("D", function(){
side = 1;
if(parseInt(sq.style.left) + step > 1910)
{
sq.style.left = 1910 + "px";
pl.style.left = "-1500px";
}
else
{
sq.style.left = (parseInt(sq.style.left) + step) + "px";
pl.style.left = (parseInt(pl.style.left) - step) + "px";
}
}, 500);
var up = true;
var jump = function(){
var max = 200;
var step = 10;
var left = max - parseInt(sq.style.bottom);
var diff = (Math.round(left/100)*step);
if(left <= 0 || diff == 0)
{
up = false;
}
if(up)
{
sq.style.bottom = (parseInt(sq.style.bottom) + Math.round(left/100)*step) + "px";
}
else
{
diff = Math.round(parseInt(sq.style.bottom)/100)*step;
diff = (diff == 0) ? 10 : diff;
sq.style.bottom = (parseInt(sq.style.bottom) - diff) + "px";
}
if(parseInt(sq.style.bottom) < 5)
{
sq.style.bottom = 0;
up = true;
}
else
{
setTimeout(jump, 10);
}
}
kb.add("W", jump);
var fly = function(elem, step){
elem.style.left = parseInt(elem.style.left) + step;
if(Math.abs(parseInt(elem.style.left)) < 2000)
{
setTimeout(function(){fly(elem, step);}, 10);
}
else
{
elem.parentNode.removeChild(elem);
}
}
var shot = function(){
var b = document.createElement("div");
b.style.position = "absolute";
b.style.width = "10px";
b.style.height = "10px";
b.style.top = "10px";
if(side)
{
b.style.left = "80px";
}
else
{
b.style.left = "0px";
}
b.style.backgroundColor = "orange";
head.appendChild(b);
if(side)
{
fly(b, 20);
}
else
{
fly(b, -20);
}
}
kb.add("Space", shot, 500);
</script>
</body>
</html>
|
Download
