I have got a snake game from Snake Code - Make the face of the snake an image, and I'm wondering how to make the apple into text with the same font as the Score in the upper right corner, and green using the JavaScript recognized color LimeGreen, or its Hex equivalent #32CD32.
Here's the continuous HTML code for your viewing:
<!DOCTYPE html>
<html style="background-color: #000000">
<head>
<title>Snake!</title>
</head>
<body>
<script>
(function() {
/////////////////////////////////////////////////////////////
// Canvas & Context
var canvas;
var ctx;
// Snake
var snake;
var snake_dir;
var snake_next_dir;
var snake_speed;
// Food
var food = {
x: 0,
y: 0
};
// Score
var score;
// Wall
var wall;
// HTML Elements
var screen_snake;
var screen_menu;
var screen_setting;
var screen_gameover;
var button_newgame_menu;
var button_newgame_setting;
var button_newgame_gameover;
var button_setting_menu;
var button_setting_gameover;
var ele_score;
var speed_setting;
var wall_setting;
/////////////////////////////////////////////////////////////
var activeDot = function(x, y) {
ctx.fillStyle = "LimeGreen";
ctx.fillRect(x * 10, y * 10, 10, 10);
}
/////////////////////////////////////////////////////////////
var changeDir = function(key) {
if (key == 38 && snake_dir != 2) {
snake_next_dir = 0;
} else {
if (key == 39 && snake_dir != 3) {
snake_next_dir = 1;
} else {
if (key == 40 && snake_dir != 0) {
snake_next_dir = 2;
} else {
if (key == 37 && snake_dir != 1) {
snake_next_dir = 3;
}
}
}
}
}
/////////////////////////////////////////////////////////////
var addFood = function() {
food.x = Math.floor(Math.random() * ((canvas.width / 10) - 1));
food.y = Math.floor(Math.random() * ((canvas.height / 10) - 1));
for (var i = 0; i < snake.length; i++) {
if (checkBlock(food.x, food.y, snake[i].x, snake[i].y)) {
addFood();
}
}
}
/////////////////////////////////////////////////////////////
var checkBlock = function(x, y, _x, _y) {
return (x == _x && y == _y) ? true : false;
}
/////////////////////////////////////////////////////////////
var altScore = function(score_val) {
ele_score.innerHTML = String(score_val);
}
/////////////////////////////////////////////////////////////
var mainLoop = function() {
var _x = snake[0].x;
var _y = snake[0].y;
snake_dir = snake_next_dir;
// 0 - Up, 1 - Right, 2 - Down, 3 - Left
switch (snake_dir) {
case 0:
_y--;
break;
case 1:
_x++;
break;
case 2:
_y++;
break;
case 3:
_x--;
break;
}
snake.pop();
snake.unshift({
x: _x,
y: _y
});
// --------------------
// Wall
if (wall == 1) {
// On
if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10) {
showScreen(3);
return;
}
} else {
// Off
for (var j = 0, x = snake.length; j < x; j++) {
if (snake[j].x < 0) {
snake[j].x = snake[j].x + (canvas.width / 10);
}
if (snake[j].x == canvas.width / 10) {
snake[j].x = snake[j].x - (canvas.width / 10);
}
if (snake[j].y < 0) {
snake[j].y = snake[j].y + (canvas.height / 10);
}
if (snake[j].y == canvas.height / 10) {
snake[j].y = snake[j].y - (canvas.height / 10);
}
}
}
// --------------------
// Autophagy death
for (var i = 1; i < snake.length; i++) {
if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
showScreen(3);
return;
}
}
// --------------------
// Eat Food
if (checkBlock(snake[0].x, snake[0].y, food.x, food.y)) {
snake[snake.length] = {
x: snake[0].x,
y: snake[0].y
};
score += 1;
altScore(score);
addFood();
activeDot(food.x, food.y);
}
// --------------------
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// --------------------
for (var i = 0; i < snake.length; i++) {
activeDot(snake[i].x, snake[i].y);
}
// --------------------
activeDot(food.x, food.y);
// Debug
//document.getElementById("debug").innerHTML = snake_dir + " " + snake_next_dir + " " + snake[0].x + " " + snake[0].y;
setTimeout(mainLoop, snake_speed);
}
/////////////////////////////////////////////////////////////
var newGame = function() {
showScreen(0);
screen_snake.focus();
snake = [];
for (var i = 4; i >= 0; i--) {
snake.push({
x: i,
y: 15
});
}
snake_next_dir = 1;
score = 0;
altScore(score);
addFood();
canvas.onkeydown = function(evt) {
evt = evt || window.event;
changeDir(evt.keyCode);
}
mainLoop();
}
/////////////////////////////////////////////////////////////
// Change the snake speed...
// 150 = slow
// 100 = normal
// 50 = fast
var setSnakeSpeed = function(speed_value) {
snake_speed = speed_value;
}
/////////////////////////////////////////////////////////////
var setWall = function(wall_value) {
wall = wall_value;
if (wall == 0) {
screen_snake.style.borderColor = "#606060";
}
if (wall == 1) {
screen_snake.style.borderColor = "#FFFFFF";
}
}
/////////////////////////////////////////////////////////////
// 0 for the game
// 1 for the main menu
// 2 for the settings screen
// 3 for the game over screen
var showScreen = function(screen_opt) {
switch (screen_opt) {
case 0:
screen_snake.style.display = "block";
screen_menu.style.display = "none";
screen_setting.style.display = "none";
screen_gameover.style.display = "none";
break;
case 1:
screen_snake.style.display = "none";
screen_menu.style.display = "block";
screen_setting.style.display = "none";
screen_gameover.style.display = "none";
break;
case 2:
screen_snake.style.display = "none";
screen_menu.style.display = "none";
screen_setting.style.display = "block";
screen_gameover.style.display = "none";
break;
case 3:
screen_snake.style.display = "none";
screen_menu.style.display = "none";
screen_setting.style.display = "none";
screen_gameover.style.display = "block";
break;
}
}
/////////////////////////////////////////////////////////////
window.onload = function() {
canvas = document.getElementById("snake");
ctx = canvas.getContext("2d");
// Screens
screen_snake = document.getElementById("snake");
screen_menu = document.getElementById("menu");
screen_gameover = document.getElementById("gameover");
screen_setting = document.getElementById("setting");
// Buttons
button_newgame_menu = document.getElementById("newgame_menu");
button_newgame_setting = document.getElementById("newgame_setting");
button_newgame_gameover = document.getElementById("newgame_gameover");
button_setting_menu = document.getElementById("setting_menu");
button_setting_gameover = document.getElementById("setting_gameover");
// etc
ele_score = document.getElementById("score_value");
speed_setting = document.getElementsByName("speed");
wall_setting = document.getElementsByName("wall");
// --------------------
button_newgame_menu.onclick = function() {
newGame();
};
button_newgame_gameover.onclick = function() {
newGame();
};
button_newgame_setting.onclick = function() {
newGame();
};
button_setting_menu.onclick = function() {
showScreen(2);
};
button_setting_gameover.onclick = function() {
showScreen(2)
};
setSnakeSpeed(150);
setWall(1);
showScreen("menu");
// --------------------
// Settings
// speed
for (var i = 0; i < speed_setting.length; i++) {
speed_setting[i].addEventListener("click", function() {
for (var i = 0; i < speed_setting.length; i++) {
if (speed_setting[i].checked) {
setSnakeSpeed(speed_setting[i].value);
}
}
});
}
// wall
for (var i = 0; i < wall_setting.length; i++) {
wall_setting[i].addEventListener("click", function() {
for (var i = 0; i < wall_setting.length; i++) {
if (wall_setting[i].checked) {
setWall(wall_setting[i].value);
}
}
});
}
document.onkeydown = function(evt) {
if (screen_gameover.style.display == "block") {
evt = evt || window.event;
if (evt.keyCode == 32) {
newGame();
}
}
}
}
})();
</script>
<style>
::selection {
color: #FFFFFF;
background: transparent;
}
::-moz-selection {
color: #FFFFFF;
background: transparent;
}
* {
margin: 0;
padding: 0;
font-family: "VT323";
}
body {
background-color: #000000;
}
.wrap {
margin-left: auto;
margin-right: auto;
}
header {
width: 340px;
font-size: 0;
}
canvas {
display: none;
border-style: solid;
border-width: 10px;
border-color: #FFFFFF;
}
canvas:focus {
outline: none;
}
/* Top Styles */
h1 {
display: inline-block;
width: 100px;
font-size: 32px;
color: #FFFFFF;
}
.score {
display: inline-block;
width: 240px;
font-size: 20px;
color: #FFFFFF;
text-align: right;
}
.score_value {
font-size: inherit;
}
/* All screens style */
#gameover a,
#setting a,
#menu a {
display: block;
}
#gameover a,
#setting a:hover,
#menu a:hover {
cursor: pointer;
}
#gameover a:hover::before,
#setting a:hover::before,
#menu a:hover::before {
content: ">";
margin-right: 10px;
}
/* Menu Screen Style */
#menu {
display: block;
width: 340px;
padding-top: 95px;
padding-bottom: 95px;
font-size: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #FFF;
}
#menu h2 {
-webkit-animation: logo-ani 1000ms linear infinite;
animation: logo-ani 1000ms linear infinite;
margin-bottom: 30px;
}
#menu a {
font-size: 30px;
}
#-webkit-keyframes logo-ani {
50% {
-webkit-transform: scale(1.3, 1.3);
}
100% {
-webkit-transform: scale(1.0, 1.0);
}
}
#keyframes logo-ani {
50% {
transform: scale(1.3, 1.3);
}
100% {
transform: scale(1.0, 1.0);
}
}
/* Game Over Screen Style */
#gameover {
display: none;
width: 340px;
padding-top: 95px;
padding-bottom: 95px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 30px;
color: #FFF;
}
#gameover p {
margin-top: 25px;
font-size: 20px;
}
/* Settings Screen Style */
#setting {
display: none;
width: 340px;
margin-left: auto;
margin-right: auto;
padding-top: 85px;
padding-bottom: 85px;
font-size: 30px;
color: #FFF;
text-align: center;
}
#setting h2 {
margin-bottom: 15px;
}
#setting p {
margin-top: 10px;
}
#setting input {
display: none;
}
#setting label {
cursor: pointer;
}
#setting input:checked+label {
background-color: #FFF;
color: #000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<header class="wrap">
<h1>Snake</h1>
<p class="score">Score: <span id="score_value">0</span></p>
</header>
<canvas class="wrap" id="snake" width="600" height="600" tabindex="1"></canvas>
<!-- Game Over Screen -->
<div id="gameover">
<h2>Game Over</h2>
<p>press <span style="background-color: #FFFFFF; color: #000000">space</span> to begin a</p>
<a id="newgame_gameover">new game</a>
<a id="setting_gameover">settings</a>
</div>
<!-- Setting screen -->
<div id="setting">
<h2>Settings</h2>
<a id="newgame_setting">new game</a>
<p>Speed:
<input id="speed1" type="radio" name="speed" value="120" checked/>
<label for="speed1">Slow</label>
<input id="speed2" type="radio" name="speed" value="75" />
<label for="speed2">Normal</label>
<input id="speed3" type="radio" name="speed" value="35" />
<label for="speed3">Fast</label>
</p>
<p>Wall:
<input id="wallon" type="radio" name="wall" value="1" checked/>
<label for="wallon">On</label>
<input id="walloff" type="radio" name="wall" value="0" />
<label for="walloff">Off</label>
</p>
</div>
<!-- Main Menu Screen -->
<div id="menu">
<h2>Snake</h2>
<a id="newgame_menu">new game</a>
<a id="setting_menu">settings</a>
</div>
</body>
</html>
Thanks in advance!
Add a 3rd param to activeDot, pass the colour.
var activeDot = function(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * 10, y * 10, 10, 10);
}
It's used in 3 places, activeDot(food.x, food.y, 'LimeGreen');
This code
var current = 0,
slides = document.getElementsByTagName("p");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 1000);
p {
position: absolute;
transition: opacity .5s ease-in;
}
p + p { opacity: 0; }
<p>1</p>
<p>2</p>
<p>3</p>
is what I'm looking for to change the text on my page. However, when I add the p tags
<p>1</p>
<p>2</p>
<p>3</p>
all the paragraphs on the page will start to change. How can I specifically target just these three paragraphs tags?
Wrap the Ps in a container or give them a class and use querySelectorAll
https://jsfiddle.net/mplungjan/nb7pkqy5/
slides = document.querySelectorAll("#container p");
var current = 0,
slides = document.querySelectorAll("#container p");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 1000);
#container p {
position: absolute;
transition: opacity .5s ease-in;
}
#container p+p {
opacity: 0;
}
<p>Other paragraph</p>
<div id="container">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
I have a simple slider made with HTML/CSS/Javascript
My problem is that I don't know how to make a simple setTimeout. My idea is that the slides
must change when you click on any of the control dots ( that is already done by me and it works as expected). But a timer needs to work there too, so every 4 seconds this timer must change the active slide and if a control dot is clicked, the timer must resets and counts for another 4 seconds.
Here is my code
HTML
<div class="slideshow-container">
<div class="slides">
<div class="intro-slide fade">
<h2>title</h2>
<p>
text
</p>
</div>
<!--slide-->
<div class="intro-slide fade">
<h2>title</h2>
<p>
text
</p>
</div>
<!--slide-->
<div class="intro-slide fade">
<h2>title</h2>
<p>
text
</p>
</div>
<!--slide-->
</div>
<!--slides-->
<div class="control-dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--control-dots
</div>
<!--slideshow-container -->
SCSS
.slideshow-container {
width: 570px;
h2 {
font-weight: 800;
font-size: 34px;
line-height: 1.27;
margin-bottom: 20px;
font-family: 'Raleway';
}
.control-dots {
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
&:hover,
&.active {
background-color: #fff;
}
}
}
Javascript
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("intro-slide");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
Thanks in advance
So cancel the timeout if it is running. The timeout returns the id of the timer. So you store that into a variable and cancel it.
function plusSlides(n) {
n = n || 1
showSlides(slideIndex += n);
}
var activeTimer
function showSlides(n) {
if (activeTimer) window.clearTimeout(activeTimer)
// ...
activeTimer = window.setTimeout(plusSlides, 4000);
}
I am trying to create a div that is 50% width left and another 50% width right of the viewport. I want each div to change the slideshow image previous / next on click
Example: https://jonoverrall.com/colin/owzib05x14nq1xd08etgqoe7nmmvum
Does anyone have any suggestions on how to achieve this?
<div class="slideshow-container">
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
<div class="text">As a Fountain 2017</div>
<div class="opacity">001 </div>
</div>
<div class="mySlides fade">
<img src="001%20(2).jpg" onclick="plusSlides(1)">
<div class="text">Deliverance 2017</div>
<div class="opacity">002 </div>
</div>
CSS
img {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vh;
object-fit: contain;
}
.mySlides img {
display: inline-block;
vertical-align: middle;
}
.slideshow-container img {
display: block;
margin: 0px auto;
}
JS
var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
https://codepen.io/anon/pen/xobQRM
Hope I am not breaking Stack Overflow protocol or etiquette here.
I am reposting this solution from another question that was posted.
Original Question: show-and-hide-images-with-next-previous-button-using-javascript
Asked by: user1199537
Prefered solution given by: bunjerd-sparrow
This code works great, but I need it to stop at image 1 (using previous button) and stop at image 11 (using next button), not continuously roll through the images.
I am sure this is light work for you guys.
I just can't figure it out to save my life.
Any and all help is greatly appreciated.
var $c = 0;
function next() {
var boxes = document.getElementsByClassName("box");
$c += 1;
if ($c >= boxes.length) $c = 0;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev() {
var boxes = document.getElementsByClassName("box");
$c -= 1;
if ($c < 0) $c = (boxes.length - 1);
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
#container {
position: relative;
width: 120px;
height: 120px;
}
#container div {
position: absolute;
width: 120px;
height: 120px;
}
#box-red {
background: red;
}
#box-yellow {
background: yellow;
display: none;
}
#box-green {
background: green;
display: none;
}
#box-maroon {
background: maroon;
display: none;
}
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>
Change
if ($c < 0) $c = (boxes.length - 1);
to not wrap:
if ($c < 0) $c=0;
and
if ($c >= boxes.length) $c = 0;
to not wrap
if ($c >= boxes.length) $c = boxes.length-1;
var $c = 0;
function next() {
var boxes = document.getElementsByClassName("box");
$c += 1;
if ($c >= boxes.length) $c = boxes.length - 1;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev() {
var boxes = document.getElementsByClassName("box");
$c -= 1;
if ($c < 0) $c = 0;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
#container {
position: relative;
width: 120px;
height: 120px;
}
#container div {
position: absolute;
width: 120px;
height: 120px;
}
#box-red {
background: red;
}
#box-yellow {
background: yellow;
display: none;
}
#box-green {
background: green;
display: none;
}
#box-maroon {
background: maroon;
display: none;
}
<div id="container">
<div id="box-one" class="box">10</div>
<div id="box-two" class="box">9</div>
<div id="box-three" class="box">8</div>
<div id="box-four" class="box">7</div>
<div id="box-five" class="box">6</div>
<div id="box-six" class="box">5</div>
<div id="box-seven" class="box">4</div>
<div id="box-eight" class="box">3</div>
<div id="box-nine" class="box">2</div>
<div id="box-ten" class="box">1</div>
<div id="box-nothing" class="box">0</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>
Just don't run the code to show a new box and increase/decrease the counter when hitting the first or last image.
if ($c < boxes.length - 1) {
// Do logic
}
and
if ($c > 0) {
// Do logic
}
Example
var $c = 0;
function next() {
var boxes = document.getElementsByClassName("box");
if ($c < boxes.length - 1) {
$c += 1;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
}
return false;
}
function prev() {
var boxes = document.getElementsByClassName("box");
if ($c > 0) {
$c -= 1;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
}
return false;
}
#container {
position: relative;
width: 120px;
height: 120px;
}
#container div {
position: absolute;
width: 120px;
height: 120px;
}
#box-red {
background: red;
}
#box-yellow {
background: yellow;
display: none;
}
#box-green {
background: green;
display: none;
}
#box-maroon {
background: maroon;
display: none;
}
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>