I've been working on a fairly simple game which resembles whack a mole but instead uses snakes. I've tried and tried but can't work out why the game won't start when I try and open it through a browser. The problem seems to be with adding in the try_again feature as the game works fine until I try and add this facility but I can' t see exactly what the root cause is. Any help is gratefully received!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body{
height: 100%;
width: 100%;
overflow: hidden;
}
.snake {
background-color: rgb(36, 176, 79);
border-radius: 100px 100px 0px 0px;
height: 100%;
width: 10%;
position: absolute;
top: 100%;
background-image: url(snake.png);
background-repeat: no-repeat;
background-size: 100%;
}
#snake1{ left:10%; }
#snake2{ left:45%; }
#snake3{ left:80%; }
.score{ font-family: arial; font-size: 5vw; position: absolute; right: 50%;}
</style>
<script>
jQuery(document).ready(function(){
var add = 0;
function game_over(){
jQuery(".snake").stop().animate({"top";"100%"}, 300);
jQuery(".score").html("Game Over Motherfucker!");
jQuery(".score").append("<div class= 'try_again'>TRY AGAIN</div>");
}
function start(){
add = 0;
jQuery(".score").html("Score: " + add);
jQuery(".snake").animate({"top": "0%"}, 5000, function(){
game_over();
jQuery(".try_again").click(function(){start();});
});
}
jQuery(".snake").hover(function(){
jQuery(this).css("background-image", "url(hurt.png)");
jQuery(this).stop().animate({"top":"100%"}, 300, function(){
add = add - (-1);
jQuery(".score").html("Score: " + add);
jQuery(this).css("background-image", "url(snake.png)");
jQuery(".snake").animate({"top": "0%"}, 5000, function(){
game_over();
jQuery(".try_again").click(function(){start();});
});
});
});
start();
}
});
</script>
</head>
<body>
<div class="score"> Score: 0 </div>
<div class="snake" id="snake1"></div>
<div class="snake" id="snake2"></div>
<div class="snake" id="snake3"></div>
</body>
</html>
You have some syntax errors
1) jQuery(".snake").stop().animate({"top";"100%"}, 300);
should be
jQuery(".snake").stop().animate({"top":"100%"}, 300);
2)
start();
}//this is in addition you should remove it
});
</script>
Below is the fixed code :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.snake {
background-color: rgb(36, 176, 79);
border-radius: 100px 100px 0px 0px;
height: 100%;
width: 10%;
position: absolute;
top: 100%;
background-image: url(snake.png);
background-repeat: no-repeat;
background-size: 100%;
}
#snake1 {
left: 10%;
}
#snake2 {
left: 45%;
}
#snake3 {
left: 80%;
}
.score {
font-family: arial;
font-size: 5vw;
position: absolute;
right: 50%;
}
</style>
<script>
jQuery(document).ready(function() {
var add = 0;
function game_over() {
jQuery(".snake").stop().animate({
"top":"100%"
}, 300);
jQuery(".score").html("Game Over Motherfucker!");
jQuery(".score").append("<div class= 'try_again'>TRY AGAIN</div>");
}
function start() {
add = 0;
jQuery(".score").html("Score: " + add);
jQuery(".snake").animate({
"top": "0%"
}, 5000, function() {
game_over();
jQuery(".try_again").click(function() {
start();
});
});
}
jQuery(".snake").hover(function() {
jQuery(this).css("background-image", "url(hurt.png)");
jQuery(this).stop().animate({
"top": "100%"
}, 300, function() {
add = add - (-1);
jQuery(".score").html("Score: " + add);
jQuery(this).css("background-image", "url(snake.png)");
jQuery(".snake").animate({
"top": "0%"
}, 5000, function() {
game_over();
jQuery(".try_again").click(function() {
start();
});
});
});
});
start();
});
</script>
</head>
<body>
<div class="score"> Score: 0 </div>
<div class="snake" id="snake1"></div>
<div class="snake" id="snake2"></div>
<div class="snake" id="snake3"></div>
</body>
</html>
There are a couple of syntax errors:
1)
$(".snake").stop().animate({"top";"100%"}, 300);
should be
$(".snake").stop().animate({"top":"100%"}, 300);
(replaced ; with :)
2)
start();
}
The } is an orphan and needs removing.
Correct those and it appears to work fine. You can see these errors for yourself by opening your browser developer tools (press F12 on most desktop browsers) and looking at the console. This should really be your first step when anything doesn't work.
Related
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
I am trying to rotate background image while scrolling. The effect should look like cube. Sadly I could not find a way with css and jquery to make it look like in the video. On the gif, when scrolling down from gallery to next page, there is grill background which rotates and stretches by amount of page shown.
EDIT: Rotating animation has to look like this
What have I tried so far (unsuccessfully)
$(function() {
var rotation = 0,
scrollLoc = 0;
$(window).scroll(function() {
$("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height());
var newLoc = $(document).scrollTop();
var diff = scrollLoc - newLoc;
rotation += diff, scrollLoc = newLoc;
var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)";
$("#home").css({
"-webkit-transform": rotationStr,
"-moz-transform": rotationStr,
"transform": rotationStr,
"background-size": -rotation
});
});
})
body,
html {
height: 100%;
}
body {
background-color: #090909;
}
#home {
height: 100%;
position: relative;
overflow: hidden;
}
#galerie {
color: green;
}
#home:before {
content: "";
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center bottom;
background-color: grey;
background-attachment: initial;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id=box>
<div id="home">
TestText
</div>
</div>
<div id="galerie">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="gale">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
I've made the top part for you. And I'm sure you'll make the bottom one yourself (see the snippet in the Full page mode):
$(function() {
$(window).scroll(function() {
$('#home_bg').css({
'transform': 'rotateX(' + 30 * (1 + Math.PI * Math.atan($(document).scrollTop() / 300)) + 'deg)'
});
});
})
html,
body {
height: 100%; margin:0 ;padding:0
}
body {
background-color: #333;
}
#home {
height: 30vh;
position: relative;
overflow: hidden;
perspective: 300px;
color:#fff;
text-align:center;
}
#home_bg {
content: "";
background: repeating-linear-gradient(45deg, #555, #555 2px, transparent 0, transparent 60px), repeating-linear-gradient(-45deg, #555, #555 2px, transparent 0, transparent 60px) 30px 30px / 170px 170px;
position: absolute;
z-index: -1;
top: -100%;
left: -50%;
width: 200%;
height: 200%;
transform: rotateX(30deg);
transform-origin: 50% 100%;
}
#galerie {
color: green;
display: flex;
justify-content: center;
flex-flow: row wrap;
width: 50%;
margin: 0 auto 70vh;
}
#galerie img {
width: 45%;
margin: 0 auto 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="home">
<h1>Lorem ipsum?</h1>
<div id="home_bg"></div>
</div>
<div id="galerie">
<p></p>
<img src="https://picsum.photos/100/100?1">
<img src="https://picsum.photos/100/100?2">
<img src="https://picsum.photos/100/100?3">
<img src="https://picsum.photos/100/100?4">
<img src="https://picsum.photos/100/100?5">
<img src="https://picsum.photos/100/100?6">
</div>
</body>
Hope you want like this.
$(function() {
var rotation = 0;
var interval;
var gear = $('.gear');
function animate() {
gear.css('transform', 'rotate('+rotation+'deg)');
rotation += 10;
rotation %= 360;
}
function startAnim() {
if (!interval) {
interval = setInterval(animate, 50);
}
}
function stopAnim() {
clearInterval(interval);
interval = null;
}
$(document).scroll(startAnim).mouseup(stopAnim);
});
body{
height: 1000px;
}
.gear{
background: url("https://cdn.pixabay.com/photo/2016/01/03/11/24/gear-1119298_960_720.png") no-repeat;
width: 100%;
height: 100px;
position: fixed;
background-position: center center;
background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gear"></div>
Hi i'm trying to make some web.
It's a simple game
just drag the answer to the blank and if is the correct answer, the answer is in the blank.
ex image ,,, like this )
enter image description here
enter image description here
This is my current code.
I can drag the img. but can't put in answer to the blank.
html code -----
var css_test_idx = 10;
var pt1 = $("#pt1");
$('#n1')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
});
$("#n1")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
$('#n2')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n2")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
});
$('#n3')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n3")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
});
$('#n4')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n4").draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
}).css('cursor', 'move');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<style>
#leftbox {
float: left;
width: 170px;
height: 170px;
height: 250;
margin: 5px;
border: 3px solid blue;
}
#clock {
position: static;
width: 900px;
height: 650px;
margin-top: 50px
}
#box {
position: relative;
margin-left: 300px;
}
#n1 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n2 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n3 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n4 {
width: 150px;
height: 150px;
margin-left: 50px
}
#blank {
width: 100%;
height: 100px
}
</style>
</head>
<body>
<center><img id="clock" src="image/clock.png"></div>
</center>
<div id="leftbox"></div>
<center>
<div class="box">
<img id="n1" src="image/n1.png" />
<img id="n2" src="image/n2.png" />
<img id="n3" src="image/n3.png" />
<img id="n4" src="image/n4.png" />
</div>
</center>
<script src="temp2.js" type="text/javascript"></script>
</body>
</html>
-- you can't run this code here because i use node express.
help~
I try to animate a div from its original position to left of the screen, if a button was clicked. If another button is clicked then i want it to animate back to it's origin position. I was able to figure out on how to animate it from right to left, but i cant animate it back to its original position.
var left = $('#coolDiv').offset().left;
$("#b1").click(
function() {
$("#coolDiv").css({
left: left
}).animate({
"left": "0px"
}, "slow");
}
);
$("#b2").click(
function() {
$("#coolDiv").css({
right: right
}).animate({
"right": "0px"
}, "slow");
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>
http://jsfiddle.net/XqqtN/5385/
Set the left CSS to the window width minus the width of the box.
$("#b1").click(function() {
// Get the current left of the div
var left = $('#coolDiv').offset().left;
$("#coolDiv").css({
left: left
}).animate({
left: 0
}, "slow");
});
$("#b2").click(function() {
var left = $(window).width() - $('#coolDiv').width();
$("#coolDiv").css({
left: 0
}).animate({
left: left
}, "slow");
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Optimized Code:
// Common function to animate Div on both button clicks
function animateDiv(left, right) {
$('#coolDiv').css({
left: left
}).stop(true, true).animate({
left: right
}, 'slow');
}
$('#b1').click(function() {
animateDiv($('#coolDiv').offset().left, 0);
});
$('#b2').click(function() {
animateDiv(0, $(window).width() - $('#coolDiv').width());
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Can you try something simple like this?
$(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
You can use setInterval to make it work a lot of times.
$(function () {
setInterval(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
}, 2000);
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
This is your updated code. Make changes like following:
$("#b1").click(
function() {
$("#coolDiv").animate({
"left": "0px"
},
"slow"
);
$("#coolDiv").css('right', '');
}
);
$("#b2").click(
function() {
$("#coolDiv").animate({
"right": "0px"
},
"slow"
);
$("#coolDiv").css('left', '');
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">B1</button>
<button id="b2">B2</button>
Hope it helps.
I am trying to get the source of an image to use in a bigger image and the problem is that it just says that it is undefined when it is not. Here is my code and I appreciate the help in advance.
edit
It appears the code works perfectly in the code snippet but not here when I open the index file ;(, I have no idea why this is happening... halp me! D:, also, when I inspect the element with my own index.html file, it says that the source is equal to undefined
var src = $('.button').attr('src');
$(document).ready(function() {
$('.button').click(function() {
$('.backdrop').animate({
'opacity': '.5'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.box, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + src + '">');
});
});
$(document).ready(function() {
$('.backdrop').click(function() {
close_box();
});
$('.close').click(function() {
close_box();
});
});
function close_box() {
$('.backdrop, .box').animate({
'opacity': '0'
}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
});
}
.backdrop {
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box {
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close {
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.button {
border-radius: 30px;
height: 300px;
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<img class="button" src="http://www.hdbackgroundpoint.com/wp-content/uploads/2013/10/13/urlttr.jpeg">
<div class="backdrop"></div>
<div class="box">
</div>
</body>
</html>
You set the var src = $('.button').attr('src'); before DOM has loaded, and is therefore not defined.
Try moving it inside $(document).ready()
$(document).ready(function() {
var src = $('.button').attr('src');
...
});
Thanks to one of the comments, I figured it out, I just had to have the var inside of the document.ready function :D