Skip to content

Instantly share code, notes, and snippets.

@calvinmorett

calvinmorett/fake-2d-side-scroller.markdown

Created December 21, 2022 18:42
Show Gist options
  • Save calvinmorett/7d65d7a493898ab4befd2d26c12979b7 to your computer and use it in GitHub Desktop.
Save calvinmorett/7d65d7a493898ab4befd2d26c12979b7 to your computer and use it in GitHub Desktop.
Download ZIP
Fake 2D Side Scroller
Raw
index.html
<body><element onkeydown="newScript" >
<h1>Beholder's Revenge</h1>
<p id="style">Click to Activate Game.</p>
<div id="game" onclick="showCoords(event)">
<div class="gameitem jewel"></div>
<!-- <div class="gameitem2 penta"></div> -->
<!-- <div class="gameitem heart"></div> -->
<div id="char" class="eye penta"></div>
<div class="fakescore">Score: 2,362</div>
</div>
<div class="keys"></div>
</body>
Raw
script.js
const character = document.getElementById("char")
document.getElementById("game").addEventListener("click", activeGame);
function activeGame() {
document.getElementById("game").style.color = "#7d7d7d";
}
function showCoords(event) {
document.getElementById("style").innerHTML = 'Active Game';
}
var game = $('#game'),
char = $('#char'),
w = game.width() - char.width(),
d = {},
x = 10;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
char.css({
left: function(i,v) { return newv(v, 37, 39); },
// top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
character.style.opacity = "1";
setTimeout(() => {
let getStyle = window.getComputedStyle(character);
character.style.top = "80px";
}, 300);
character.style.top = "10px";
}
else if (e.keyCode == '40') {
character.style.opacity = "0.1";
}
else if (e.keyCode == '39') {
character.style.opacity = "1";
character.style.transform = 'rotateY(0)';
}
else if (e.keyCode == '37') {
character.style.opacity = "1";
character.style.transform = 'rotateY(180deg)';
}
}
// document.getElementById("box").style.margintop = "80px";
// document.onkeypress = function (e) {
// e = e || window.event;
// // use e.keyCode
// };
// let element = document.querySelector('#box');
// let getStyle = window.getComputedStyle(element);
// document.onkeydown = detectKey;
// function detectKey(e) {
// var posLeft = document.getElementById('box').offsetLeft;
// var posTop = document.getElementById('box').offsetTop;
// e = e || window.event;
// if (e.keyCode == '37') {
// // right arrow
// document.getElementById('char').style.marginLeft = (posLeft+40)+"px";
// }
// if (e.keyCode == '39') {
// // right arrow
// document.getElementById('box').style.marginRight = (posLeft+40)+"px";
// }
// }
// addEventListener('ArrowUp', (event) => {});
// onkeyup = (event) => {
// setTimeout(() => {
// let getStyle = window.getComputedStyle(element);
// document.getElementById("box").style.top = "80px";
// document.querySelector('#style').innerHTML = event.propertyName;
// }, 100);
// document.getElementById("box").style.top = "40px";
// document.querySelector('#style').innerHTML = event.propertyName;
// };
// // // take current value and add to it
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
Raw
style.css
*{
padding:0;
margin:0;
}
body{
background:#222;
}
h1{
margin:0 auto;
color:#fff;
font-family:monospace;
position:absolute;
left:0;
right:0;
top:77px;
width:800px;
}
.keys{
height:100px;
width:100px;
position:absolute;
bottom:30px;
left:20px;
background:transparent url('https://imgeasy.com/images/d3b5dbf7b3341abc854f62e8b120b9eb.png') no-repeat;
background-size:contain;
filter:invert(100%);
}
#style{
color:#fff;
font-family:monospace;
position: absolute;
left:20px;
bottom:20px;
}
#game {
position: relative;
width: 800px;
height: 160px;
color:#fff;
box-shadow:0 0 0 3px;
margin:100px auto;
padding:0;
overflow:hidden;
background:#eee url('https://imgeasy.com/images/546a1a2d2fa5055f1a403f14b05481bb.png');
xbackground:#eee url('https://imgeasy.com/images/23ad415879d8eff13d2b8c3c2ce9acbe.png');
background:#eee url('https://imgeasy.com/images/78ba4d3acfcc21cc7a4f0089980011fc.png');
background:#eee url('https://imgeasy.com/images/fcfca04522ba5cc3f972f00f094ba9f5.png');
background:#eee url('https://imgeasy.com/images/0357d099d9b5f338e66b5d05ebfdf816.png');
filter:hue-rotate(205deg);
}
@keyframes tilechange{
0%{
/* background:#eee url('https://imgeasy.com/images/0384504310a915968f89c4451f61f476.png'); */
background-position:bottom left;
}
100%{
/* background:#eee url('https://imgeasy.com/images/7d5f38f0c3f7da6fddcd08ca6ec8dfa3.png'); */
background-position:bottom right;
}
}
#game:before,
#game:after{
display:block;
z-index:1;
content:'';
position: absolute;
width: 800px;
height: 10px;
margin:0;
padding:0;
overflow:hidden;
xbackground:#eee url('https://imgeasy.com/images/546a1a2d2fa5055f1a403f14b05481bb.png');
xbackground:#eee url('https://imgeasy.com/images/23ad415879d8eff13d2b8c3c2ce9acbe.png');
xbackground:#eee url('https://imgeasy.com/images/23ad415879d8eff13d2b8c3c2ce9acbe.png');
background:#eee url('https://imgeasy.com/images/0357d099d9b5f338e66b5d05ebfdf816.png');
background:#eee url('https://imgeasy.com/images/5553bec69f1065ec5c1fe27fee3989a8.gif');
background-position:bottom;
animation:tilechange 12s forwards infinite linear;
filter:grayscale(100%);
opacity:.5;
bottom:0;
left:0;
box-shadow:0 0 12px rgb(253 253 253);
animation:riverglow 1s alternate linear infinite;
}
#game:before{
width: 800px;
top:0;
background-position:top;
height:120px;
opacity:.1;
filter:invert(100);
xfilter:hue-rotate(360deg);
}
@keyframes riverglow{
0%{
box-shadow:0 0 12px rgba(253,253,253,1);}
100%{
box-shadow:0 0 9px rgba(253,253,253,0.73);
}
}
.gameitem{
margin:0;
padding:0;
position: absolute;
top: 80px;
right: 80px;
width: 40px;
height: 40px;
animation:bob .5s alternate infinite;
z-index:1000;
}
.gameitem:nth-of-type(1){
animation-delay:.25s;
}
@keyframes bob{
0%{
top:85px;
}
100%{
top:75px;
}
}
/* https://imgeasy.com/images/61eb363e71bc48180c8253839953ae88.png */
/* hand */
/* https://imgeasy.com/images/fe0512c818114c5820472f281862ffb5.png */
/* penta */
/* https://imgeasy.com/images/970dad56e6e0116a872f0bfcea5c7161.png */
/* heart */
.dagger{
background:transparent url('https://imgeasy.com/images/d4aff51baae7245b9e6c776506be6e56.png') no-repeat;
}
.jewel{
left: 400px;
background:transparent url('https://imgeasy.com/images/ae843905ac21ddf41403cb0632201c0f.png') no-repeat;
}
.penta{
margin:0;
padding:0;
position: absolute;
top: 108px;
left: 30px;
width: 59px;
height: 40px;
z-index:1000;
animation-state:none;
background:transparent url('https://imgeasy.com/images/fe0512c818114c5820472f281862ffb5.png') no-repeat;
}
.heart{
right: 120px;
background:transparent url('https://imgeasy.com/images/970dad56e6e0116a872f0bfcea5c7161.png') no-repeat;
}
#char {
margin:0;
padding:0;
position: absolute;
top: 80px;
left: 40px;
width: 40px;
height: 40px;
transition:top .2s ease;
animation:change .5s alternate infinite;
}
.eye{
background:transparent url('https://imgeasy.com/images/d2fdd987ff1ba0765c0623e2a236e956.png') no-repeat;
}
@keyframes change{
33%{
background:transparent url('https://imgeasy.com/images/34e8d9183a2b4ae5b22f5690e13f48c0.png') no-repeat;
}
66%{
background:transparent url('https://imgeasy.com/images/d2fdd987ff1ba0765c0623e2a236e956.png') no-repeat;
}
99%{
background:transparent url('https://imgeasy.com/images/f2ba0c68bc395fda7ddee430bfeeeb4f.png') no-repeat;
}
}
.fakescore{
margin:0;
padding:0;
position: absolute;
color:#fff;
font-family:monospace;
position: absolute;
top:5px;
right:4px;
background:rgba(0,0,0,.5);
color:#fff;
padding:2px 4px;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
text-align:right;
text-shadow:1px 1px 0 #333;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment