DRAG AND DROP HTML GAME

Monday, 1 September 2014

DRAG AND DROP HTML GAME

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: Drag and drop</title>

<style>
body {
background:#EDEDEC;
font-family:'Helvetica Neue', Helvetica, sans-serif;
font-size:16px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:20px;
margin:40px 0 0;
padding:0;
}
section, header, footer {
display:block;
}
#wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58AUVh9NxHcshS-s4brbQjRNvislMtBikXt6Z3bYp8_wXQXQRz67kDHeLNRAmjRdIXf1EFf_Hq2OuFWQyeiFzu-kWZxNRBNqD8-9pcnTtSXhCaOD-LrrXMzU3B5PuUkY4Fc2XLxg1_rPP/s1600/ShadeGreen.jpg) 50% 100% repeat-x #FFFFFF;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-color:#FFFFFF;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-top-style:solid;
border-top-width:1px;
margin:0 auto;
padding-bottom:76px;
width:600px;
}
h1 {
padding-top:10px;
}
h2 {
font-size:100%;
font-style:italic;
}
header, article > *, footer > * {
margin:20px;
}
footer > * {
color:#999999;
margin:20px;
}
#status {
background:#CCCCCC;
color:#FFFFFF;
padding:5px;
}
#status.fail {
background:#CC0000;
}
#status.success {
background:#00CC00;
}
#status.offline {
background:#CC0000;
}
#status.online {
background:#00CC00;
}
[contenteditable]:hover:not(:focus) {
outline:#CCCCCC dotted 1px;
}
abbr {
border-bottom-width:0;
}
abbr[title] {
border-bottom-color:#CCCCCC;
border-bottom-style:dotted;
border-bottom-width:1px;
}
li {
margin-bottom:10px;
}
#ffad section {
padding:20px;
}
#ffad p {
margin:10px 10px 10px 100px;
}
#ffad img {
border:0;
display:block;
float:left;
margin:14px 14px 0;
}
#ffad .definition {
font-family:Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-style:italic;
}
#ffad .url {
text-decoration:underline;
}
button, input {
font-size:16px;
margin-left:5px;
padding:3px;
}
#view-source {
display:none;
}
body.view-source {
background:#FFFFFF;
margin:0;
padding:20px;
}
body.view-source > * {
display:none;
}
body.view-source #view-source {
display:block !important;
margin:0;
}
#demos {
border-collapse:collapse;
width:560px;
}
#demos .demo {
padding:5px;
}
#demos a {
color:#0000BB;
font-size:14px;
text-decoration:none;
}
#demos a:hover {
text-decoration:underline;
}
#demos tbody tr {
border-top-color:#DCDCDC;
border-top-style:solid;
border-top-width:1px;
}
#demos .demo p {
margin-bottom:5px;
margin-top:0;
}
#demos .support {
width:126px;
}
#carbonads-container {
margin-left:620px;
margin-top:-2px;
position:fixed;
}
pre {
font-size:14px;
}
.str {
color:#008800;
}
.kwd {
color:#000088;
}
.com {
color:#880000;
}
.typ {
color:#660066;
}
.lit {
color:#006666;
}
.pun {
color:#666600;
}
.pln {
color:#000000;
}
.tag {
color:#000088;
}
.atn {
color:#660066;
}
.atv {
color:#008800;
}
.dec {
color:#660066;
}
</style>

<script type='text/javascript'>

var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
(function () {
var pre = document.createElement('pre');
pre.id = "view-source"
// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
if (event.target.hash == '#view-source') {
// event.preventDefault();
if (!document.getElementById('view-source')) {
// pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]});
var xhr = new XMLHttpRequest();
// original source - rather than rendered source
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
pre.innerHTML = this.responseText.replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]});
prettyPrint();
}
};
document.body.appendChild(pre);
// really need to be sync? - I like to think so
xhr.open("GET", window.location, true);
xhr.send();
}
document.body.className = 'view-source';
var sourceTimer = setInterval(function () {
if (window.location.hash != '#view-source') {
clearInterval(sourceTimer);
document.body.className = '';
}
}, 200);
}
});
})();

</script>

</head>
<body>
<section id="wrapper">
<header>
<h1>Drag and drop</h1>
</header>

<style type="text/css">
li {
list-style:none;
}
li a {
background:#EEEEEE;
border:3px dashed #999999;
color:#000000;
display:block;
margin:10px;
padding:10px;
text-decoration:none;
width:150px;
}
[draggable="true"] {
cursor:move;
}
li a:hover::after {
content:' (drag me)';
}
ul {
margin-left:200px;
min-height:300px;
}
li.over {
background:#CCCCCC;
border-color:#333333;
}
#bin {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bNm1L6GCle8VwqF_cNh21xhz0baiJtSL5oZHaRwM_ZsUVIEhEHcAHfsHz88pdRoenyGjIE_3dtRIzxv3qztwCZ79eXWDPj7jCuf77VVRIN0cqyhMxzauiaov1TRGaUbp2Ui9KbRvI-ol/s1600/bin.jpg) 100% 0 no-repeat;
border:5px solid #000000;
float:left;
height:250px;
margin-top:0;
position:relative;
width:166px;
}
#bin.over {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bNm1L6GCle8VwqF_cNh21xhz0baiJtSL5oZHaRwM_ZsUVIEhEHcAHfsHz88pdRoenyGjIE_3dtRIzxv3qztwCZ79eXWDPj7jCuf77VVRIN0cqyhMxzauiaov1TRGaUbp2Ui9KbRvI-ol/s1600/bin.jpg) 0% 0 no-repeat;
}
#bin p {
bottom:20px;
color:#FFFFFF;
font-size:32px;
font-weight:bold;
position:absolute;
text-align:center;
text-shadow:#000000 2px 2px 2px;
width:166px;
}
</style>
<article>
<p>Drag the list items over the dustbin, and drop them to have the bin eat the item</p>
<div id="bin"></div>
<ul>
<li><a id="one" href="#">one</a></li>
<li><a href="#" id="two">two</a></li>
<li><a href="#" id="three">three</a></li>
<li><a href="#" id="four">four</a></li>
<li><a href="#" id="five">five</a></li>
</ul>
</article>
<script>
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
var yum = document.createElement('p');
var msie = /*@cc_on!@*/0;
yum.style.opacity = 1;
var links = document.querySelectorAll('li > a'), el = null;
for (var i = 0; i < links.length; i++) {
el = links[i];
el.setAttribute('draggable', 'true');
addEvent(el, 'dragstart', function (e) {
e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
});
}
var bin = document.querySelector('#bin');
addEvent(bin, 'dragover', function (e) {
if (e.preventDefault) e.preventDefault(); // allows us to drop
this.className = 'over';
e.dataTransfer.dropEffect = 'copy';
return false;
});
// to get IE to work
addEvent(bin, 'dragenter', function (e) {
this.className = 'over';
return false;
});
addEvent(bin, 'dragleave', function () {
this.className = '';
});
addEvent(bin, 'drop', function (e) {
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
var el = document.getElementById(e.dataTransfer.getData('Text'));
el.parentNode.removeChild(el);
// stupid nom text + fade effect
bin.className = '';
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
var y = yum.cloneNode(true);
bin.appendChild(y);
setTimeout(function () {
var t = setInterval(function () {
if (y.style.opacity <= 0) {
if (msie) { // don't bother with the animation
y.style.display = 'none';
}
clearInterval(t);
} else {
y.style.opacity -= 0.1;
}
}, 50);
}, 250);
return false;
});
</script>
</body>
</html>