Icontem

File: squario.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Keyboard Shortcut  >  squario.html  >  Download  
File: squario.html
Role: Example script
Content type: text/plain
Description: Some sort of mario parody using key binding
Class: Keyboard Shortcut
Invoke functions when multiple keys are pressed
Author: By
Last change:
Date: 9 years ago
Size: 3,930 bytes
 

Contents

Class file image Download
<!--
/*************************************************************
 * 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>