|
You like games right?
4/30/2022
If you haven't been living under a rock for the past 5-10 years, you've seen one of these unblocked games websites:
While they may look complex to the average non-coder, they are actually just google sites. The thing is though, those websites can't be created anymore.
In 2016, Google presented the new google sites. Ever since, users have slowly shifted to the newer, nicer, neater version. In May 2021, the creation of classic sites were disabled, and in December 2021, editing classic sites was disabled. All of this, combined with the end of flash in 2021, means that classic google sites are slowly going out of date.
Now, what does that have to do with most unblocked games websites? As I mentioned before, all the game websites that you have played were made using classic google sites. So, as games get blocked, stop working, or change URLs, these websites can't keep adding, removing, changing, and fixing their website.
You might wonder, "Why can't you just use the new google sites?" Although it may be good for making informational websites, there are not enough tabs or pages in the navbar to fit the 100+ games needed for a game website.
Now to get to the point of this whole blog post. In Christmas-ish time last year, I had this exact problem but on the consumer end, there were no games for me to play. And so over the course of half a year I, with help from some of my friends coded an unblocked games website. It looks exactly like the classic ones but is still able to be edited, and added on to, to keep up with the latest games. Here is a little picture of it:
If you are planning to make a website using this template, there is something I need to address. It takes a lot of work/time. Luckily with the help of some friends. (mainly Derin) We've been able to cut down the time spent adding games. When you add a game, you will make a new file, change the name, yadda yadda yadda. After you do all that input this code into your code editors terminal (replace the text where it says):
find . -type f -exec sed -i 's/<li class="games"><a href=\"fileRightAfter.html/<li class="games"><a href=\"fileName.html\">Game Name<\/a><\/li>\n &/g' {} +
This piece of code basically finds the game that you tell it to in the navbar and pastes a new game in the navbar right above it on every file, saving you so much time.
Here is the HTML to the website:
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width, initial-scale=1" />
<link rel="icon"href="https://cdn.glitch.global/7291e345-21ef-440f-a17b-8a85764c9ade/Screenshot_2022-01-10_161756_ccexpress.png?v=1641849861252"/>
<title>Website Name | Current Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="script.js"defer></script>
<div>
<div style="float:left; width: 20%;">
<img src="Logo Or Icon" style="width: 100%; height: auto;">
</div>
<div style="float:left; width: 80%;">
<h1>Website Name</h1>
</div>
</div>
<ul class="top">
<li><a class="topLink"href="index.html">Home</a></li>
<li><a class="topLink"href="tabFile.html">Tab File Name</a></li>
</ul>
<hr>
<div class="row">
<div class="column left">
<input id="searchbar" onkeyup="search_games()"type="text" name="search" placeholder="Search Games...">
<ul>
<li class="games"><a href="gameFile.html">Game Name</a></li>
<li class="games"><a href="gameFile.html">Game Name</a></li>
</ul>
</div>
<div class="column right">
<div>
<div style="float:left; width: 85%;">
<p id="gameName">Current Game Playing Name</p>
</div>
<div style="float:left; width: 15%;">
<img id="fullScreenButton"src="fullScreenIcon"onclick="openFullscreen();">
</div>
</div>
<iframe id="iframe" src="https://gameSource"></iframe>
<h5>Highscores:</h5>
<br>
<p>1. Name - Score</p>
<p>2. Name - Score</p>
</div>
</div>
</body>
</html>
Here is the Javascript:
if (!location.protocol[5]) {
location.protocol = "https:"
}
document.querySelector('img').onclick=function(){
location.href='/'
}
var game = document.getElementById("iframe");
function openFullscreen() {
if (game.requestFullscreen) {
game.requestFullscreen();
} else if (game.webkitRequestFullscreen) {
/* Safari */
game.webkitRequestFullscreen();
} else if (game.msRequestFullscreen) {
/* IE11 */
game.msRequestFullscreen();
}
}
function search_games() {
let input = document.getElementById("searchbar").value;
input = input.toLowerCase();
let x = document.getElementsByClassName("games");
for (var i = 0; i < x.length; i++) {
if (!x[i].textContent.toLowerCase().includes(input)) {
x[i].style.display = "none";
} else {
x[i].style.display = "list-item";
}
}
}
And here is the CSS:
hr {
width: 90%;
margin: auto;
margin-bottom: 20px;
border-color: #c8dbed;
border-top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #f1f1f1;
cursor: pointer;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
font-size: 15px;
}
li a.active {
background-color: #92b6db;
color: white;
}
li a:hover {
transition-duration: .4s;
background-color: #92b6db;
color:white;
transform: scale(1.04);
}
h1 {
text-align: center;
font-size: 6.5vw;
color: #b4c9e4;
font-weight: bold;
font-family: sans-serif;
}
body {
background-color: #343a40;
font-family: "Acme", sans-serif;
}
.column {
float: left;
padding: 10px;
}
.left {
width: 17%;
}
.right {
width: 83%;
margin: auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* {
box-sizing: border-box;
}
iframe {
width: 100%;
height: 98vh;
position: relative;
border: 0px;
border-radius: 20px;
}
.top {
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
width: 90%;
margin-top: 10px;
background-color: transparent;
}
.topLink {
float: left;
background-color: #c8dbed;
font-size: 15px;
}
li a:hover:not(.active) {
background-color: #92b6db;
color: white;
transition-duration: 0.4s;
}
p {
font-size: 2vw;
margin: auto;
margin-top: 0px;
color: #c8dbed;
padding-left: 2vw;
padding-right: 2vw;
}
img {
height: 300px;
border-radius: 20px;
border-width: 0px;
margin: 10px;
cursor: pointer;
}
#searchbar {
width: 100%;
height: 30px;
margin-bottom: 15px;
border-width: 0px;
border-radius: 5px;
padding: 10px 10px;
}
#gameName {
font-size: 5vw;
font-weight: bold;
margin-top: 20px;
}
#fullScreenButton {
margin-top: 0px;
width: 66%;
height: auto;
}
#gameMaker {
margin-bottom: 20px;
}
h5 {
margin-top: 10px;
font-size: 3vw;
font-weight: bold;
color: #b4c9e4;
margin-bottom: 0px;
}
If you're looking to check out the website model, or just looking to play some games, here is the website link: Unblocked Games 66