I have a game with a character that goes to a random position whenever you click on it. Also, I made it so the game automatically goes into full-screen. However, sometimes, the character goes way off-screen and (because there are no scroll bars in full-screen) you cant get to it. The code is below.
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Alfa Slab One' rel='stylesheet'> <!-- add the font used -->
<script type="text/javascript">
function move() { //move the bird
const height = screen.height; //set the screen params
const width = screen.width;
const box = document.getElementById("bird"); //search for the bird
let randY = Math.floor((Math.random() * height) + 1); //randomise the coords
let randX = Math.floor((Math.random() * width) + 1);
box.style.transform = `translate(${randX}px, ${randY}px)`; //move the bird
addScore(); //add the score
}
</script>
<script type="text/javascript">
function getreqfullscreen(){ //full screen it. I cant really understand how it works
var root = document.documentElement
return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
}
function startFullScreen() {
var pagebody = document.getElementById("main");
var globalreqfullscreen = getreqfullscreen();
document.addEventListener('click', function(e){
var target = e.target
globalreqfullscreen.call(pagebody)
}, false)
}
</script>
<script type="text/javascript">
var points = 0;
function addScore() { //add the score
var pointcount = document.getElementById("scoreCount"); //get the score counter
//var points = 45; --used for testing
points = points + 1; //increment the points
pointcount.innerText = "score: " + points;
//pointCounter.removeChild(pointCounter.childNodes[0]); --used for an older prototype
}
/**************************************/
function startCountdown() { //initiate the timer - starts when the <body> loads
startFullScreen(); //make it full screen
var time = 9999999999999999999999; //would be 60, but I made it infinite
setInterval(function() { //decrease every second
var timer = document.getElementById("Timer"); //get the timer
time = time - 1; //decrement the timer
timer.innerText = "time: " + time;
if(time == 0) { //if you finished
var continuE = prompt("Would you like to restart? (type Y for yes and N for no (case sensitive)).");
if(continuE == "Y") {
window.location.reload();
} else {
history.go(-1);
}
}
},1000);
}
</script>
<style>
html {
cursor: crosshair;
background-color: #00b0e6;
user-select: none;
}
#bird {
position: absolute;
background-color: #ffffff;
cursor: crosshair;
transition: all 1s ease-in-out;
}
#bird:hover {
invert: 0 0 12px #ff0000;
}
/*
span {
height:10px;ss
width:200px;
border:5px double red;
color:#ff00ff;
background-color:#00ffff;
}
*/
p {
color: #ff00ff;
background-color: #000000;
border: 5px double red;
height: 60px;
width: 85px;
margin: 10px;
font-family: "Times New Roman";
}
.restartButton {
border-radius: 999px;
background-color: #ff00ff;
color: #00fffff;
border: 10px double blue;
transition: all 1s ease-out;
margin-left: 50%;
margin-right: 50%;
position: relative;
cursor: help;
}
.restartButton:hover {
border-radius: 999px;
background-color: #ffffff;
color: #4500fff;
border: 10px solid red;
}
#scoreCount {
color: #aff823;
position: fixed;
top: 0;
width: 10px;
height: 10px;
}
#Timer {
color: #aff823;
position: fixed;
top: 0;
left: 200px;
width: 10px;
height: 10px;
}
span {
font-family: Alfa Slab One;
}
#main {
background-color: #00b0e6;
}
</style>
</head>
<body onload="startCountdown()" id="body">
<div id="main">
<div id="pointCounter"><span id="scoreCount"></span><span id="Timer"></span></div>
<input type="button" value="RESTART" onclick="window.location.reload();" class="restartButton"/>
<img src="https://art.pixilart.com/81a784782ea5697.png" alt="" height="50px" width="50px" id="bird" onclick="move();">
</div>
<noscript>
YOU DO NOT HAVE JAVASCRIPT ENABLED. PLEASE ENABLE JAVASCRIPT ELSE THIS WEB PAGE WILL NOT WORK.
</noscript>
</body>
</html>
Because of how stack overflow works, it doesn't go into full-screen.
P.S. I have made it infinite time, it's meant to only be 60 seconds.
Related
The title says it all. To see the issue, copy this code to the following online compiler: https://www.w3schools.com/php/phptryit.asp?filename=tryphp_compiler
<!DOCTYPE HTML>
<html>
<style>
/*MAIN*/
* {
margin: 0;
padding: 0;
user-select: none;
overflow: hidden;
}
body {
background-color: #FF0000;
margin: 0;
padding: 0;
}
/*ELEMENTS*/
div {
width: 100vw;
height: 100vh;
float: left;
margin-left: 0vw;
}
h1 {
font-family: verdana;
font-size: 5vh;
text-transform: uppercase;
}
h1.white {
color: #F4F4F4;
}
</style>
<body>
<div id = "main" style = "width: auto; margin-left: 0vw;">
<div id = "home" class = "container" style = 'background-color: #000000;'>
<h1 class = "white">click arrow to see how the next page doesn't appear until after the transition is complete</h1>
<!--ARROW BUTTON-->
<p id = 'arrowButton' style = 'color: #FFFFFF; position: absolute; height: 10vh; width: auto; margin: 45vh 0 0 75vw; font-size: 3vh;' onMouseDown = 'NextButtonClick();'>--></p>
</div>
<div id = "welcome" class = "container" style = 'background-color: #FFFFFF;'>
<h1 style = 'margin: 47.5vh 0 0 50vw'>welcome to my portfolio</h1>
</div>
</div>
<script>
var mainDiv, welcomeDiv;
var transitionSeconds = 0.5;
var isTransitioning = false;
function NextButtonClick() {
if(!isTransitioning) {
isTransitioning = true;
i = 0;
thisInterval = setInterval(function() {
mainDiv.style.marginLeft = (100 / i) - 101 + "vw";
i++;
if(i == 100) {
clearInterval(thisInterval);
mainDiv.style.marginLeft = "-100vw";
isTransitioning = false;
}
}, transitionSeconds);
}
}
window.onload = function() {
mainDiv = document.getElementById("main");
welcomeDiv = document.getElementById("welcome");
var arrowButton = document.getElementById("arrowButton");
var arrowButtonX, arrowButtonY;
var arrowButtonGlowDistance = 100;
arrowButtonX = arrowButton.getBoundingClientRect().left + arrowButton.getBoundingClientRect().width/2;//center
arrowButtonY = arrowButton.getBoundingClientRect().top + arrowButton.getBoundingClientRect().height/2;//center
document.onmousemove = function(e) {
x = e.clientX; y = e.clientY;
};
};
</script>
</body>
</html>
The background is red on purpose so that you can see how, even though the "welcome" div should be rendered over top the background, it is not being rendered until the very last second after the transition is completed and 100% of the element is on the screen.
I am stumped, and I'm not sure why this is since HTML usually doesn't seem to behave this way. Even when I highlight the element in Inspect Element, the Inspector doesn't show me where the element is on the screen until the final moment when it is rendered.
Any help would be greatly appreciated, and I look forward to hearing your feedback!
The problem here is that your DIVs are placed under each other and while one is moving horizontally, the next div is still underneath of it until first one is completely out of the way (just like Jenga game in reverse).
To solve this, you can try add display: flex, to place them horizontally instead:
var mainDiv, welcomeDiv;
var transitionSeconds = 0.5;
var isTransitioning = false;
function NextButtonClick() {
if (!isTransitioning) {
isTransitioning = true;
i = 0;
thisInterval = setInterval(function() {
mainDiv.style.marginLeft = (100 / i) - 101 + "vw";
i++;
if (i == 100) {
clearInterval(thisInterval);
mainDiv.style.marginLeft = "-100vw";
isTransitioning = false;
}
}, transitionSeconds);
}
}
window.onload = function() {
mainDiv = document.getElementById("main");
welcomeDiv = document.getElementById("welcome");
var arrowButton = document.getElementById("arrowButton");
var arrowButtonX, arrowButtonY;
var arrowButtonGlowDistance = 100;
arrowButtonX = arrowButton.getBoundingClientRect().left + arrowButton.getBoundingClientRect().width / 2; //center
arrowButtonY = arrowButton.getBoundingClientRect().top + arrowButton.getBoundingClientRect().height / 2; //center
document.onmousemove = function(e) {
x = e.clientX;
y = e.clientY;
};
};
* {
margin: 0;
padding: 0;
user-select: none;
overflow: hidden;
}
body {
background-color: #FF0000;
margin: 0;
padding: 0;
}
/*ELEMENTS*/
div {
width: 100vw;
height: 100vh;
float: left;
margin-left: 0vw;
display: flex; /* added */
}
h1 {
font-family: verdana;
font-size: 5vh;
text-transform: uppercase;
}
h1.white {
color: #F4F4F4;
}
<div id="main" style="width: auto; margin-left: 0vw;">
<div id="home" class="container" style='background-color: #000000;'>
<h1 class="white">click arrow to see how the next page doesn't appear until after the transition is complete</h1>
<!--ARROW BUTTON-->
<p id='arrowButton' style='color: #FFFFFF; position: absolute; height: 10vh; width: auto; margin: 45vh 0 0 75vw; font-size: 3vh;' onMouseDown='NextButtonClick();'>--></p>
</div>
<div id="welcome" class="container" style='background-color: #FFFFFF;'>
<h1 style='margin: 47.5vh 0 0 50vw'>welcome to my portfolio</h1>
</div>
</div>
I am wondering if there is something that I can use instead of alert('Copied the hex value '+copyHex.value) to tell the user the message was copied? I don't like the way alert interrupts the page. I was wondering if 'copied (hex code)' who fade in above the color? I think this would look the best.
<!DOCTYPE html>
<html>
<head>
<title>
Color Generator
</title>
<style>
body{
margin: 0;
padding: 0;
background: #161818;
font-family: "Consolas";
}
.color{
margin-top: 300px;
text-align: center;
}
#hex{
display: block;
color: white;
font-size: 100px;
text-transform: uppercase;
margin: 0px;
}
.color button{
background: none;
outline: 10px;
color: white;
cursor: pointer;
font-size: 20px;
border: 3px solid white;
}
</style>
</head>
<body>
<div class="color">
<span id="hex">#??????</span>
<button onclick="genNewColor()">Generate new random color</button>
<button onclick="copyHexValue()">Copy hex value</button>
</div>
<script type="text/javascript">
function genNewColor() {
var symbols, color;
symbols = "0123456789ABCDEF";
color = "#";
for (var i = 0; i < 6; i++) {
color = color + symbols[Math.floor(Math.random() * 16)]
}
document.body.style.background = color;
document.getElementById("hex").innerHTML = color;
}
function copyHexValue() {
var copyHex = document.createElement('input');
copyHex.value = document.getElementById("hex").innerHTML;
document.body.appendChild(copyHex);
copyHex.select();
document.execCommand('copy');
alert('Copied the hex value '+copyHex.value)
console.log('Copied the hex value '+copyHex.value)
document.body.removeChild(copyHex);
}
document.body.onkeyup = function(e){
if(e.keyCode == 32){}
}
</script>
</body>
</html>
You can use a div with your custom message to notify your user.
I added an empty Notification div in your HTML and a CSS class for the same,
and removed alert("Copied the hex value " + copyHex.value);
Instead called a function to show the Notification
The Notification will appear at the top and will slide out after 2s (setTimeout)
PS Run the code snippet in full screen and if you want to outsource this try Material.io
Good Luck
function genNewColor() {
var symbols, color;
symbols = "0123456789ABCDEF";
color = "#";
for (var i = 0; i < 6; i++) {
color = color + symbols[Math.floor(Math.random() * 16)];
}
document.body.style.background = color;
document.getElementById("hex").innerHTML = color;
}
function copyHexValue() {
var copyHex = document.createElement("input");
copyHex.value = document.getElementById("hex").innerHTML;
document.body.appendChild(copyHex);
copyHex.select();
document.execCommand("copy");
// alert("Copied the hex value " + copyHex.value);
showNotification(copyHex.value);
console.log("Copied the hex value " + copyHex.value);
document.body.removeChild(copyHex);
}
document.body.onkeyup = function (e) {
if (e.keyCode == 32) {
}
};
const notification = document.querySelector(".notification");
function showNotification(color) {
let notificationText;
// If no color has been picked
if (color === "#??????") notificationText = "Generate a color first";
// Show Color Picked Message
else notificationText = `Copied hex value ${color}`;
//Slide down the notification
notification.style.transform = "translate(-50%,100%)";
// Add message to notification
notification.textContent = notificationText;
//Make Notification slide back up after 2s
setTimeout(function hideNotification() {
notification.style.transform = "translate(-50%,-100%)";
}, 2000);
}
body {
margin: 0;
padding: 0;
background: #161818;
font-family: "Consolas";
}
.color {
margin-top: 300px;
text-align: center;
}
#hex {
display: block;
color: white;
font-size: 100px;
text-transform: uppercase;
margin: 0px;
}
.color button {
background: none;
outline: 10px;
color: white;
cursor: pointer;
font-size: 20px;
border: 3px solid white;
}
.notification {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -100%);
transition: transform 0.6s ease;
border: 2px solid white;
padding: 12px 30px;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>
Color Generator
</title>
</head>
<body>
<div class="color">
<span id="hex">#??????</span>
<button onclick="genNewColor()">Generate new random color</button>
<button onclick="copyHexValue()">Copy hex value</button>
</div>
<div class='notification'>
</div>
</body>
</html>
There are plenty of ways to do this. One of the simplest would be to add a DOM element above the hex and have it set to display:none; using a class called hidden
You could then set a timeout to show the element for a short time instead of an alert.
document.getElementById("hex-copy").classList.remove("hidden");
setTimeout(() => {
document.getElementById("hex-copy").classList.add("hidden");
}, 2500);
For a fade in, you could set CSS animations on the element.
https://codepen.io/anon/pen/EOrRXo
This is my code so far. It just uses JS to generate a bunch of styled divs. I don't know how to input a picture instead of a string to fill in my divs. They all have values that I add up to generate each players' score to use bitwise "&" calculation to determine when someone has won. There's a play again button that works but it's broken for you because the image is local. Also it's extreme so it's spinning and I'm sorry if that annoys you.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXTREME TIC TAC TOE</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body onload = "startGame();">
<h2 id="game-message"> Tic Tac Toe </h2>
<div id="game-board">
</div>
<div id="restartButton" >
<img src="img/lets-play.gif" id="button" onclick="restartGame();">
</div>
</body>
</html>
CSS
/* CSS */
* {margin: 0; padding: 0; user-select: none; text-transform: uppercase;}
body {background-image: url('../img/name.type'); }
h2#game-message
{
font-size: 60px;
font-family: Tahoma;
margin-bottom: 15px;
text-align: center;
}
div#game-board
{
overflow: hidden;
margin: 20px auto;
width:870px;
}
div[id^="row-"] {clear: both;}
div [id^="row-"] div
{
//border: 30px solid plum;
height: 270px;
width: 270px;
float: left;
text-align: center;
font-family: Tahoma;
font-size: 175px;
border-width: 15px;
border-style: solid;
border-image: url('../img/border.jpg') 25% repeat;
}
div#row-1 div {border-top: none;}
div#row-3 div {border-bottom: none;}
div[id^="row-"] div:first-child {border-left: none}
div[id^="row-"] div:last-child {border-right: none}
#button
{
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-width: 5px;
border-style: solid;
border-image: url('../img/borderr.png') 25% round;
}
#restartButton
{
position: absolute;
left: 880px;
top: 1075px;
}
#keyframes rotation
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#keyframes slide {
0% {left: 0;}
100% { left: 1500px;}
}
#game-board
{
position: relative;
}
JS
//JAVASCRIPT
var markers = ["X", "O"];
//var players = [];
var players = ["Max", "Dennis"];
var totals = [];
var winCodes = [7,56,73,84,146,273,292,448];
var whoseTurn = 0;
var gameOver = false;
var speed = [2, 2];
// Play again button
function restartGame()
{
startGame();
}
function startGame() // Choose your names, and display them in the header message.
{
// makes board spin initially
document.getElementById("game-board").style.animation = "rotation 4s infinite linear";
//players[0] = prompt("Player 1 NAME:");
//players[1] = prompt("Player 2 NAME:");
var counter = 1;
var innerDivs = "";
for (i = 1; i <=3; i++)
{
innerDivs += '<div id="row-' + i + '">';
for (j = 1; j <= 3; j++)
{
innerDivs += '<div onclick="playGame(this,' + counter + ');"></div>';
counter *= 2;
}
innerDivs += '</div>';
}
document.getElementById("game-board").innerHTML = innerDivs;
totals = [0, 0];
gameOver = false;
document.getElementById("game-message").innerText = "IT'S YOUR TURN " + players[whoseTurn];
}
function playGame(clickedDiv, divValue)
{
if (!gameOver)
{
// changes speed depending on how many turns each player has done
speed[whoseTurn]++;
document.getElementById("game-board").style.animation = "rotation "+ 8 / speed[whoseTurn] + "s infinite linear";
// Adds X or O depending on whoseTurn
clickedDiv.innerText = markers[whoseTurn];
// adds up total each time a player "moves" to track a win condition
totals[whoseTurn] += divValue;
// calls isWin() function to see if someone won
if (isWin())
{
document.getElementById("game-message").innerText = "WOW VERY COOL " + players[whoseTurn] + " YOU WON";
document.getElementById("game-board").style.animation = "slide 2s forwards, rotation "+ 8 / speed[whoseTurn] + "s infinite linear";
}
else if (gameOver)
{
document.getElementById("game-message").innerText = "YOU BOTH FAILED";
}
else
{
// Switches turn each click
if (whoseTurn) whoseTurn = 0; else whoseTurn = 1;
// disables onclick tag after clicked so it cannot be used >1 times.
clickedDiv.attributes["0"].nodeValue = "";
// Displays text for which turn it is
document.getElementById("game-message").innerText = "IT'S YOUR TURN " + players[whoseTurn];
}
}
}
// win code logic
function isWin()
{
for (i = 0; i < winCodes.length; i++)
{
if ((totals[whoseTurn] & winCodes[i]) == winCodes[i]) {gameOver = true; return true;}
}
if (totals[0] + totals[1] == 511) {gameOver = true;}
return false;
}
You can start by replacing the markers array with (or creating a new array, such as markerImages) image elements.
Then replace clickedDiv.innerText with clickedDiv.innerHTML.
I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }
.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}
<div class="circle"></div>
I want to do a simple timer who can run from 25 to 0 and reset whenever we want to.
For this I've made a clickable div, and I want one click to start the timer and another one to reset it to 25 and stop the timer, is this possible ?
A toggable start/reset timer?
This is what I came up with so far :
HTML
<div id="result" onclick="playReset"><p id="output"></p> </div>
CSS
#result {
background: pink;
height: 200px;
width: 200px;
border-radius: 50%;
margin-left: 400px;
margin-top: 200px;
}
#result:hover {
border: black solid;
}
#output{
margin-left: 70px;
position: fixed;
font-size: 60px;
}
And the most important the JS :
var duree=25;
var toggle = true;
function playReset () {
if(toggle == true) {
var time = setInterval(function(){
duree--;
document.getElementById('output').innerHTML = duree;
}, 1000);
toggle = false
}
else if (toggle == false) {
clearInterval(time);
duree = 25;
toggle = true;
}
}
document.getElementById('output').innerHTML = duree;
Thank's if someone can give me a hand, I have SO MUCH trouble understanding setInterval/timeout, clearInterval/timeout ...
I simplified that code a little, where you can use the actual time variable to check whether it is running or not.
Stack snippet
var duree = 2;
var time;
function playReset() {
if (time) {
clearInterval(time);
time = null;
duree = 25;
document.getElementById('output').innerHTML = duree;
} else {
time = setInterval(function() {
duree--;
document.getElementById('output').innerHTML = duree;
if (duree == 0) {
clearInterval(time);
}
}, 1000);
}
}
document.getElementById('output').innerHTML = duree;
#result {
background: pink;
height: 200px;
width: 200px;
border-radius: 50%;
margin-left: 40px;
margin-top: 20px;
border: transparent solid;
}
#result:hover {
border: black solid;
}
#output {
margin-left: 70px;
position: fixed;
font-size: 60px;
}
<div id="result" onclick="playReset();">
<p id="output"></p>
</div>
When you later on have increased your skills, you likely want these stuff and their variable hidden from the global environment.
With closure one can do something like this, where only the function name is public.
Stack snippet
(function (output,duree,time) { //declared as static variables
this.init_time = duree;
this.playReset = function() {
if (time) {
clearInterval(time);
time = null;
output.innerHTML = duree = init_time; // set init value
} else {
time = setInterval(function() {
output.innerHTML = --duree;
if (duree == 0) {
clearInterval(time);
}
}, 1000);
}
}
window.playReset = this.playReset; //make it public
output.innerHTML = duree; // set init value
})(document.getElementById('output'),25); // pass in the output element and default time
#result {
background: pink;
height: 200px;
width: 200px;
border-radius: 50%;
margin-left: 40px;
margin-top: 20px;
border: transparent solid;
}
#result:hover {
border: black solid;
}
#output {
margin-left: 70px;
position: fixed;
font-size: 60px;
}
<div id="result" onclick="playReset();">
<p id="output"></p>
</div>
Here is same solution, but with the event listener and I check the count to know if a reset is to be done. You can try this here:
https://jsfiddle.net/0bej5tyn/
html
<div id="timer">
25
</div>
css
#timer{
width:150px;
height:100px;
line-height:100px;
border-radius:100px;
border:5px solid #444;
background:#555;
font-size:50px;
text-align:center;
color:#fff;
font-family:arial;
}
#timer:hover{
border:5px solid #333;
}
js
var timerButton = document.getElementById("timer");
var countStart = timerButton.innerHTML
var count = countStart;
var timer;
timerButton.addEventListener('click',function(){
if (count == countStart){
timer = setInterval(function(){
count--;
timerButton.innerHTML = count;
if (count == 0){
clearInterval(timer);
}
},1000);
}
else{
/* Reset here */
clearInterval(timer);
count = countStart;
timerButton.innerHTML = count;
}
});