I have started a pong game where the guidelines have already been set for me but I have an issue with the ball. It is very early in development but I am stuck on this problem: The X axis will not move up and down. The ball is not meant to bounce off the paddles yet. Here is my code:
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ping Pong</title>
<link href="pong.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/pong.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>Ping Pong</h1>
</header>
<!-- Scoreboard goes here -->
<div id="game">
<div id="playground">
<div id="ball"></div>
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
</div>
</div>
<!-- used for debugging -->
<div id="debug">
</div>
<footer>
This is an example of creating a Ping Pong Game.
</footer>
</body>
</html>
Pong.js
var KEY = {
UP:38,
DOWN:40,
W:87,
S:83
};
var directionX = 1;
var directionY = 1;
$(function(){
var timer = setInterval(gameloop,30)
});
//This is where the logic for the game goes.
function gameloop(){
var playground = $("#playground");
var ball = $("#ball");
var width = parseInt (playground.css("width"))
var left = parseInt (ball.css("left"));
if(left >= width){
directionX = -1;
}
else if (left <= 0){
directionX = 1;
}
var height = parseInt (playground.css("height"))
var top = parseInt (ball.css("top"));
if(top >= height){
directionY = -1;
}
else if (top <= 0){
directionY = 1;
}
ball.css("left",left+5 * directionX);
ball.css("top",height+5 * directionY);
}
function debug(text){
$("#debug").text(text);
}
And pong.css
#playground{
background: #e0ffe0 /*url(images/pixel_grid.jpg)*/;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
#ball {
background: #fbb;
position: absolute;
width: 20px;
height: 20px;
left: 150px;
top: 100px;
border-radius: 10px;
}
.paddle {
background: #bbf;
left: 50px;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}
#paddleB {
left: 320px;
}
#winner{
display:none;
position: relative;
width: 200px;
margin-left: 100px;
top: 30%;
font-size: 20px;
border: 3px solid red;
padding: 20px;
background-color: #FFF;
text-align:center;
font-family: Comic-Sans;
}
Oh and in case you were wondering, the js library was written for me.
You're using the height of the element instead of the offset (top).
It should be
ball.css("top", top + 5 * directionY);
I believe you need to use px when setting the CSS for top and left.
ball.css("left",(left+5 * directionX) + "px");
ball.css("top",(height+5 * directionY) + "px");
Related
I'm creating a game, the div with id "playerDiv" when I hit the space bar it should start going up but it doesn't. So I would like when I hit the space bar the div would go up high.
could you help me? could you also report me the mistakes i made?
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 420 + inc;
player.top = player.top + x;
inc++
playerTimeOut = setTimeout(jump, 50);
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.key === ' ') {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Game</title>
</head>
<body>
<div id="background">
<div id="playerDiv">
</div>
</div>
</body>
<script src="script.js"></script>
</html>
You're not passing the argument in addListener and you're not using correctly the top property, it belongs to style and needs unit , for example px
Also keyCode is deprecated, use key instead
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
player.style.bottom = `${x}px`
inc++
console.log(player.style.bottom)
}
//window.addEventListener("keydown", e => e.key === "(Space Character)" ? jump() : '');
//For snippet only
jump()
setTimeout(() => jump(), 1000)
* {
/* demo */
box-sizing: border-box
}
body {
background-color: #222;
}
#background {
border: solid 2px #ddd;
width: 800px;
height: 500px;
position: relative;
/* demo */
max-width: 100%
}
#playerDiv {
background-color: #aaa;
width: 60px;
height: 80px;
position: absolute;
bottom: 0px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>
Try this:
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
let style = window.getComputedStyle(player);
player.style.top = (parseInt(style.getPropertyValue('top'),10) - x) + 'px';
inc++
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.keyCode == "32") {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>
So for my final assignment I have to create an interactive website using javascript, canvas, html, and css. So I made boxes for my javascript in my canvas and I want boxes to disappear when I click on them but I don't know how to do it. Can someone help me?
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment 5</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1>PART2 - JavaScript and The Canvas</h1>
</header>
<canvas id="canvas" width="1000" height="600"></canvas>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
Here is my CSS:
html {
font-size: 14px;
}
header {
background-color: white;
height: 3rem;
text-align: center;
}
h1 {
color: black;
}
h2 {
color:white;
}
body{
background-color: white;
padding-left: 50px;
padding-right: 50px;
}
#canvas {
position: absolute;
top: 8rem;
left: 8rem;
width: 700px;
height: 400px;
background: white;
animation: move 8s ease infinite;
}
#keyframes move {
50% {
transform: translate(600px, 200px);
}
}
Here is my JavaScript
randomBoxes();
function getRandomColor() {
var color = '#';
for (var i = 0; i < 6; i++) {
color += (Math.random() * 17 | 0).toString(17);
}
return color;
}
function boundryNum(theMin, theMax) {
var theRange = (theMax - theMin) + 5;
var randomNum = Math.floor((Math.random() * theRange) + theMin);
return randomNum;
}
function drawbox() {
var width = Math.floor(Math.random() * 200) +20;
var height = Math.floor(Math.random() * 400) + 20;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(boundryNum(25,800),boundryNum(25,400),width,height);
context.fillStyle = getRandomColor();
}
function randomBoxes(){
var number = Math.floor(Math.random() * 5) + 1;
//Three to six times....
while(number >= 0) {
drawbox();
number--;
}
setInterval(drawbox, 2000)
}
You havn't included any code in your question so I have just made some, the way I understand your question
<div style="left: 30px; top: 30px; border-width: 3px; border-style: solid; border-color: black; width: 150px; height: 100px; display: ;" id="box1" onclick="disappear()">
<h3>Click me</h3>
</div>
<script type="text/javascript">
function disappear() {
document.getElementById("box1").style.display = "none" ;
}
</script>
Hello everyone here i am trying to show progress bar for my website but i ma facing problem of not display background-color on scroll, please help on this also find the code at below starting from html, css and jquery ...
HTML Code
<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>
CSS Code
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
jQuery Code
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").attr('max', d);
$("#progressbar").attr('value', s);
});
});
Here please guide how i can display backgroud-color on scroll. Thanks in Advance!!
There are a couple of issues with your code, HTML width attribute does not support div element. Also, the value attribute is not supported by div either. For creating the progress bar you could use CSS. Instead of updating $("#progressbar").attr('value', s); value just update the width of the element $("#progressbar").width(s);
Here is the complete working example -
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").width(s);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
You should calculate the procentage and set it as width for `progressbar``
have a look.
$(window).scroll(function () {
var d = $(document).height() - $(window).height(),
s = $(document).scrollTop();
var width= (s / d) * 100 // in Procent
$("#progressbar").attr('max', d);
$("#progressbar").attr('value',s).css("width",width +"%");
});
body{
height: 1000px;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>
The function I want to implement is that a parent element that contains an indefinite number of child elements can automatically extend its height to the furthest point of the children when the total height of the children exceeds the parent's. The parent has a fixed height if the children's total height do not exceed that height. Here's the diagram:
I've tried and searched for hours and still couldn't get it to work. Don't know what's been missing here. Here's a demo snippet and when you click on the blue panel it will exceed the white panel but the white one does not extend accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
html,
body {
height: 100%;
background-color: grey;
margin: 0;
}
#left-panel {
position: relative;
width: 256px;
height: 100%;
background-color: white;
}
#child-panel {
position: absolute;
width: 30%;
height: 40%;
top: 20%;
left: 30%;
background-color: blue;
}
</style>
<script>
window.onload = init;
function init() {
var leftPanel = document.getElementById("left-panel");
var childPanel = document.getElementById("child-panel");
childPanel.onclick = function(ev) {
if (childPanel.offsetHeight < leftPanel.offsetHeight) {
childPanel.style.height = leftPanel.offsetHeight + 100 + "px";
leftPanel.style.height = leftPanel.offsetHeight + 100 + "px";
} else {
childPanel.style.height = "40%";
leftPanel.style.height = "100%";
}
}
}
</script>
</head>
<body>
<div id="left-panel">
<div id="child-panel"></div>
</div>
</body>
</html>
it is simple, you don't need javascript to get the right bhavior
first i used this html and css code that gives the same ui as yours in the pictures :
<div class="parent-purpel">
<div class="firstChild-yellow">
<div class="thirdChild-orange">
</div>
</div>
it gives me the result below :
then i used flex in the css :
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px;
display: flex; /* <====================== */
flex-direction: column; /* <======= to get orange squares in vertical align */}
important ! :
we have to use an auto height in the yellow and the purpel divs :
.parent-purpel{
background-color: purple;
width: 100%;
height: auto; /*<===== important*/ }
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto; /*<===== important*/
margin : 30px;
display: flex;
flex-direction: column;}
Now even we add orange elements to the yellow div we will have variable height of the divs yellow and purpel like that :
i hope that will help you thanks !
here is the full code :
html : test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="test1.css">
<title>Document</title>
</head>
<body>
<div class="parent-purpel">
<div class="firstChild-yellow">
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
<div class="thirdChild-orange">
</div>
</div>
</div>
</body>
</html>
CSS : test1.css
.parent-purpel{
background-color: purple;
width: 100%;
height: auto;}
.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px;
display: flex;
flex-direction: column;}
.thirdChild-orange{
background-color: orange;
width: 60%;
height: 200px;
margin: 30px;}
Try this one:
var childTop = childPanel.offsetTop
if (childPanel.offsetHeight < leftPanel.offsetHeight) {
childPanel.style.height = leftPanel.offsetHeight - childTop + "px";
leftPanel.style.height = leftPanel.offsetHeight + "px";
}
you were setting child height (cHeight) as parent height (pHeight) so let's assume
pHeight = 100px;
cheight = pHeight in your case childPanel.style.height = leftPanel.offsetHeight
it means both elements are having the same height but child element also have top: 20%; that you have to reduce from the height of the child.
Calculate Top of the child: var childTop = childPanel.offsetTop
and then reduce from height
childPanel.style.height = leftPanel.offsetHeight - childTop + "px";
Why don't you just try something like;
<!-- min height will be the height that you want to keep fixed if lesser number of children -->
<div style="border:1px solid black; padding:5px; min-height:50px">
<div>
Child 1
</div>
<div>
Child 2
</div>
<div>
Child 3
</div>
<div>
Child 4
</div>
</div>
it's the:
#child-panel {
position: absolute;
}
that is causing the behaviour, to get the position use padding and margin:
#left-panel {
padding: 5% 2%;
}
#child-panel {
margin: auto;
}
The key is to use
min-height: 100%;
height: auto;
for parent panel and don't use
position: absolute;
for the child panels. If you want to re-position the child panels use a wrapper panel instead. Here's the code that when you click on the blue panels the parent and the panels are all extended accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
html, body {
height: 100%;
background-color: grey;
margin: 0;
}
#left-panel {
width: 256px;
min-height: 100%;
height: auto;
background-color: white;
}
.child-panel-wrapper {
width: 30%;
height: auto;
background-color: yellow;
position: relative;
left: 30%;
}
.child-panel {
background-color: blue;
height: 200px;
}
</style>
<script>
window.onload = init;
function init() {
var childPanels = document.getElementsByClassName("child-panel");
for (var i = 0; i < childPanels.length; i++) {
var panel = childPanels[i];
panel.addEventListener("click", function (evt) {
if (this.offsetHeight <= 200) {
this.style.height = 600 + "px";
} else {
this.style.height = 200 + "px";
}
})
}
}
</script>
</head>
<body>
<div id="left-panel">
<div class="child-panel-wrapper">
<div class="child-panel"></div><br>
<div class="child-panel"></div><br>
<div class="child-panel"></div>
</div>
</div>
</body>
</html>
It is really difficult to explain what kind of effect I mean. But let me try. :)
When you scroll down one DIV with text Block moves over a fixed background DIV with a background image. Now when the DIV on top leave the bottom area and moves to the top of the viewport you can seen the half (and later the full) new background image. But the Background Images are not moving, they are fixed. Only the Page Content with Text Blocks moves when you scroll down.
If you still see a question mark then take a look at this website, there you can see the concept in use.
So my question is how can I recreate this effect only with CSS3 and jQuery (Without YUI etc.)?
I don't really understand the logic that is needed for this to work. How do I need to animate the DIVs and where should I place them in the HTML Document.
Below you find some tests I did (But they don't work)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
<title>Agency</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("div.blankItem").css("min-height", $(window).innerHeight()-44);
$("div.red").css("min-height", $(window).innerHeight()-44);
var windowHeight = $(window).innerHeight()+ 44;
var total = - windowHeight - 400;
$('div.red').css('-webkit-transform', 'translate3d(0,' + total + 'px,0)');
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
$(window).resize(function() {
$("div.blankItem").css("min-height", $(window).innerHeight()-44);
$("div.red").css("min-height", $(window).innerHeight()-44);
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
});
$(function(){
$(window).bind({scroll: Scroll, touchmove: Scroll});
});
function Scroll(){
// var op = (window.pageYOffset-$(window).innerHeight()-44-356);
// $("div.pageContentBackground").css("bottom", + op);
var scrollTop = $(window).scrollTop();
var pageYDoc = 1300;
var factor = 0.8;
var pageYViewport = pageYDoc - scrollTop;
var imageY = -1 * parseInt(pageYViewport * factor);
//var tr = -200; // You'd need to calculate this value
/**$('div.red').css("-webkit-transform", "translate3d(0, " + tr + "px, 0)");
*/
//var offset = total + $(window).scrollTop()+400;
$('div.red').css({'-webkit-transform': 'translate3d(0, '+ imageY + '%, 0)'});
// $('div.blue').stop().css('bottom', $(window).scrollTop() - $(window).innerHeight()-44-400 + "px");
console.log(offset);
}
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
ul, li {
margin: 0;
padding: 0;
}
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
}
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
body {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
font-family: 'Open Sans', Helvetica;
color: #F0F2ED;
-webkit-font-smoothing: subpixel-antialiased !important;
}
div.pageMenu {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 44px;
background-color: #333;
z-index: 10;
opacity: 0.99;
}
a.pageMenuButton {
position: fixed;
top: 8px;
right: 44px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
div.pageHeader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #daddda;
z-index: 1;
padding-bottom: 10px;
}
div.pageContent {
position: absolute;
top: 100%;
width: 100%;
z-index: 5;
max-width: 100%;
overflow: hidden;
}
div.pageContentBackground {
position: fixed;
left: 0px;
width: 100%;
}
div.red {
background-color: red;
z-index: 2;
}
div.blue {
background-color: blue;
z-index: 3;
}
div.pageContentBody {
width: 100%;
z-index: 2;
}
div.pageContentBodyItem {
width: 100%;
height: 400px;
background-color: #fff;
display: block;
}
div.blankItem {
background: transparent;
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="pageMenu">
<div class="pageMenuLogo">
</div>
☰
</div>
<div class="pageHeader">
</div>
<div class="pageContentBackground red">
</div>
<!--<div class="pageContentBackground blue">
</div>-->
<div class="pageContent">
<div class="pageContentBody">
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
</div>
</div>
<div class="pageContentFooter">
</div>
</div>
</body>
This is my try: http://codepen.io/rafaelcastrocouto/pen/bCxAd
Although there are lots of differences in the sites, they are still kinda alike.
Notice that my parallax only woks on big screens.
The JS is pretty small:
var lastScrollTop = 0;
var backgroundImages = $('.backgroundImage');
$(window).scroll(function(e){
var st = $(this).scrollTop();
var ah = $(this).height();
backgroundImages.each(function(i){
var img = $(this);
var pos = img.position().top;
var hei = img.height();
if ((st + ah) > pos && st < (pos + hei)){
var p = ((pos - st)/ah) + 0.25;
if(i == 1) console.log(p);
img.css('background-position', '50%'+(p*100)+'%');
}
});
lastScrollTop = st;
});
$(window).scroll();