CSS Pixel game

Developer
Rune Sejer Hoffmann
Size
4,834 Kb
Views
6,072
  1. CSS Pixel game Previews
  2. CSS Pixel game HTML Codes
  3. CSS Pixel game CSS Codes
  4. CSS Pixel game JS Codes

How do I make an css pixel game?

Using keyframes, steps, and spritesheets. What is a css pixel game? How do you make a css pixel game? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

CSS Pixel game Previews
IQ Test

CSS Pixel game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Pixel game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='overlay'> <p>Press enter</p>
</div>
<div class='hiddendiv pulldown'> <img class='hook' src='http://artplague.dk/_assets/hook.png'> <p>Pixel CSS game - Under construction!</p> By Rune
</div>
<div class='arrow'>></div>
<div class='rightdiv'></div>
<div class='leftdiv'></div>
<div class='proffwrap intro' style='left:3%; bottom:15%;'> <div class='proff walk'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Pixel game - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
body { height: 100vh; width: 100%; background: url("http://artplague.dk/_assets/map.jpg") no-repeat bottom; background-size: cover; overflow: hidden; margin: 0; padding: 0;
}
.rightdiv { position: absolute; right: -80px; height: 100%; width: 100px;
}
.leftdiv { position: absolute; left: -80px; height: 100%; width: 100px;
}
.levelwrap { position: fixed; width: 100%; height: 100%; bottom: 0;
}
.hook { position: absolute; bottom: -28px; left: 0; right: 0; margin: auto;
}
.hiddendiv { position: absolute; background-color: #407f7f; height: 200px; width: 300px; left: 0; right: 0; top: -200px; margin: auto; font-family: 'Press Start 2P', cursive; color: white; text-align: center; font-size: 22px; line-height: 34px; border-radius: 2px; text-shadow: 1px 1px 1px black;
}
.proffwrap { position: absolute;
}
.proff { background: url("http://artplague.dk/_assets/proff.png") no-repeat bottom center; height: 50px; width: 30px;
}
.overlay { position: fixed; height: 100%; width: 100%; background: rgba(41, 22, 87, 0.6); font-family: 'Press Start 2P', cursive; font-size: 2.5em; color: #fff; text-shadow: 0px 5px 0px grey; text-align: center; line-height: 80vh; z-index: 9; opacity: 0;
}
.overlay p { -webkit-animation: push 1s steps(2, end) infinite; animation: push 1s steps(2, end) infinite;
}
.arrow { position: absolute; right: 100px; top: 50px; height: 40px; width: 40px; font-size: 3em; font-family: 'Press Start 2P', cursive; color: #fff; text-shadow: 0px 5px 0px grey; -webkit-animation: push 1s steps(2, end) infinite; animation: push 1s steps(2, end) infinite; display: none;
}
.pulldown { -webkit-animation: pulldown 18s 1 forwards; animation: pulldown 18s 1 forwards;
}
.intro { -webkit-animation: walkjump 18s 1; animation: walkjump 18s 1;
}
.walk { -webkit-animation: walk 1s steps(2, end) infinite; animation: walk 1s steps(2, end) infinite;
}
.levelheight { height: 250px;
}
.rotate { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.db { display: block;
}
.lvl1 { background-image: url(http://artplague.dk/_assets/lvl3.png);
}
@-webkit-keyframes push { to { text-shadow: 0px 0px 0px; -webkit-transform: translate(0px, 5px); transform: translate(0px, 5px); }
}
@keyframes push { to { text-shadow: 0px 0px 0px; -webkit-transform: translate(0px, 5px); transform: translate(0px, 5px); }
}
@-webkit-keyframes walk { from { background-position: 15% 100%; } to { background-position: 60% 100%; }
}
@keyframes walk { from { background-position: 15% 100%; } to { background-position: 60% 100%; }
}
@-webkit-keyframes walkjump { 10% { bottom: 15%; } 30% { left: 50%; } 38% { bottom: 10%; left: 50%; } 40% { bottom: 90%; } 48% { bottom: 10%; left: 50%; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 57% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 60% { left: 50%; } 97% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { bottom: 15%; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@keyframes walkjump { 10% { bottom: 15%; } 30% { left: 50%; } 38% { bottom: 10%; left: 50%; } 40% { bottom: 90%; } 48% { bottom: 10%; left: 50%; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 57% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 60% { left: 50%; } 97% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { bottom: 15%; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@-webkit-keyframes pulldown { 40% { top: -200px; } 50% { top: 0px; } 100% { top: 0px; }
}
@keyframes pulldown { 40% { top: -200px; } 50% { top: 0px; } 100% { top: 0px; }
}

CSS Pixel game - Script Codes JS Codes

//Under construction
//Detecting when intro is done
$('.hiddendiv').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() { //Adding overlay $('.overlay').animate({ opacity: 1, });
});
//removing overlay and start game on enter press
function reset() { $(".overlay").hide(); $(".proffwrap").removeClass('intro'); $(".proff").removeClass('walk'); $(".hiddendiv").removeClass('pulldown'); //Setting starting position $('.levelwrap').addClass('levelheight'); $('.arrow').addClass('db');
}
$(document).keypress(function(e) { if (e.which == 13) { reset(); }
});
//
//Setting keys
//walking
$("body").keydown(function(e) { // left arrow if ((e.keyCode || e.which) == 37) { $(".proff").addClass('walk'); $(".proffwrap").addClass('rotate'); $(".proffwrap").animate({ left: "-=20" }, 40, 'linear'); } // right arrow if ((e.keyCode || e.which) == 39) { $(".proff").addClass('walk'); $(".proffwrap").removeClass('rotate'); $(".proffwrap").animate({ left: "+=20" }, 40, 'linear'); } //Up key if ((e.keyCode || e.which) == 38) { $(".proff").addClass('walk'); $(".proffwrap").animate({ bottom: "+=15" }, 40, 'linear'); } //Down key if ((e.keyCode || e.which) == 40) { $(".proff").addClass('walk'); $(".proffwrap").animate({ bottom: "-=15" }, 40, 'linear'); }
});
//Overlap detection function
div1 = $(".proffwrap");
div2 = $(".rightdiv");
function collision($div1, $div2) { var x1 = $div1.offset().left; var y1 = $div1.offset().top; var h1 = $div1.outerHeight(true); var w1 = $div1.outerWidth(true); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $div2.offset().left; var y2 = $div2.offset().top; var h2 = $div2.outerHeight(true); var w2 = $div2.outerWidth(true); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; return true;
}
//The object manipulation
//First level
window.setInterval(function() { if ((collision($('.proffwrap'), $('.rightdiv')))) { $( ".proffwrap" ).attr({ style: "left:3%; bottom:15%;" }); $('.arrow').addClass('db'); $('body').addClass('lvl1'); }
}, 500);
// second level
window.setInterval(function() { if ((collision($('.proffwrap'), $('.leftdiv')))) { $( ".proffwrap" ).attr({ style: "left:97%; bottom:15%;" }); $('.arrow').removeClass('db'); $('body').removeClass('lvl1'); }
}, 500);
CSS Pixel game - Script Codes
CSS Pixel game - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3
Size 4,834 Kb
Views 6,072
Do you need developer help for CSS Pixel game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
Svg polycat
Material design card
Nav ui
Pure css download button
Fadout menu concept
RoadFURY
Content aware dropdown
Ecommerce animations
A Pen by Rune Sejer Hoffmann
Perspective CSS hover effect
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!