Play Mario Game Online: Simple HTML Game
<!DOCTYPE html>
<html>
<head>
<title>Play Mario Game Online: Simple HTML Game</title>
<style>
#mario {
background-image: url('https://raw.githubusercontent.com/spriters-resource/mariowiki/master/images/a/a5/Mario_NSMB.gif');
height: 50px;
width: 50px;
margin-left: 10px;
}
#goomba {
background-image: url('https://vignette.wikia.nocookie.net/nintendo/images/3/3d/Goomba_-_New_Super_Mario_Bros._2.png/revision/latest/scale-to-width-down/310?cb=20170728033607');
position: absolute;
top: 40%;
left: 70%;
width: 50px;
height: 50px;
animation: move-right 1s linear infinite;
}
@keyframes move-right {
from {left: 70%;}
to {left: 95%;}
}
</style>
</head>
<body>
<div id='mario'></div>
<div id='goomba'></div>
<script>
var mario = document.getElementById('mario');
var goomba = document.getElementById('goomba');
document.onkeydown = function(e) {
switch (e.keyCode) {
// left arrow
case 37:
mario.style.marginLeft = parseInt(mario.style.marginLeft) - 5 + 'px';
break;
// right arrow
case 39:
mario.style.marginLeft = parseInt(mario.style.marginLeft) + 5 + 'px';
break;
}
if (collision(mario, goomba)) {
alert('You won!');
}
};
function collision(el1, el2) {
el1.offsetBottom = el1.offsetTop + el1.offsetHeight;
el1.offsetRight = el1.offsetLeft + el1.offsetWidth;
el2.offsetBottom = el2.offsetTop + el2.offsetHeight;
el2.offsetRight = el2.offsetLeft + el2.offsetWidth;
<pre><code> return !((el1.offsetBottom < el2.offsetTop) ||
(el1.offsetTop > el2.offsetBottom) ||
(el1.offsetRight < el2.offsetLeft) ||
(el1.offsetLeft > el2.offsetRight))
}
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmbH 著作权归作者所有。请勿转载和采集!