if(game.pressedKeys[37]) {
this.ship.x -= this.shipSpeed * dt;
}
if(game.pressedKeys[39]) {
this.ship.x += this.shipSpeed * dt;
}
This code works very well. But I want, scroll path be curved. A kind of like this:
What should be my solution? How can I solve this? Thanks.
You always know the x position of your ship. Create a function that takes an x position and returns a y.
The curve you have could be represented by the parabolic function y=a(x-s)^2+b where a is the vertical stretch, s is the sideways shift, and b is the vertical shift.
Here I created such a function that works for a screen width of 500, and the ship goes up to a max of 150
function parabolic(x) {
return Math.pow((((1/20.412415)*x)-12.24745),2)+150;
}
//I am using ugly numbers, however you can have a variable `w` for the screen width
Here is a working demo: JSFiddle (Click on the canvas for keyboard to work)
document.addEventListener('keydown', function(e) {
if(e.which===37) {
ship.x--;
} else if(e.which===39) {
ship.x++;
}
ship.y = parabolic(ship.x);
update();
})
Related
So what I want to happen is that when viewing the Span the text is normal but as you scroll down it starts moving until it looks like such:
Before the effect:
While the effect occurs:
The header is represented by spans for each letter. In the initial state, the top pixel value for each is 0. But the idea as mentioned is that that changes alongside the scroll value.
I wanted to keep track of the scroll position through JS and jQuery and then change the pixel value as needed. But that's what I have been having trouble with. Also making it smooth has been another issue.
Use the mathematical functions sine and cosine, for characters at even and odd indices respectively, as the graphs of the functions move up and down like waves. This will create a smooth effect:
cos(x) == 1 - sin(x), so in a sense, each character will be the "opposite" of the next one to create that scattered look:
function makeContainerWiggleOnScroll(container, speed = 0.01, distance = 4) {
let wiggle = function() {
// y-axis scroll value
var y = window.pageYOffset || document.body.scrollTop;
// make div pseudo-(position:fixed), because setting the position to fixed makes the letters overlap
container.style.marginTop = y + 'px';
for (var i = 0; i < container.children.length; i++) {
var span = container.children[i];
// margin-top = { amplitude of the sine/cosine function (to make it always positive) } + { the sine/cosine function (to make it move up and down }
// cos(x) = 1 - sin(x)
var trigFunc = i % 2 ? Math.cos : Math.sin;
span.style.marginTop = distance + distance * trigFunc(speed * y)/2 + 'px';
}
};
window.addEventListener('scroll', wiggle);
wiggle(); // init
}
makeContainerWiggleOnScroll(document.querySelector('h2'));
body {
height: 500px;
margin-top: 0;
}
span {
display: inline-block;
vertical-align: top;
}
<h2>
<span>H</span><span>e</span><span>a</span><span>d</span><span>e</span><span>r</span>
</h2>
Important styling note: the spans' display must be set to inline-block, so that margin-top works.
Something like this will be the core of your JS functionality:
window.addEventListener('scroll', function(e) {
var scrl = window.scrollY
// Changing the position of elements that we want to go up
document.querySelectorAll('.up').forEach(function(el){
el.style.top = - scrl/30 +'px';
});
// Changing the position of elements that we want to go down
document.querySelectorAll('.down').forEach(function(el){
el.style.top = scrl/30 +'px';
});
});
We're basically listening in on the scroll event, checking how much has the user scrolled and then act upon it by offsetting our spans (which i've classed as up & down)
JSBin Example
Something you can improve on yourself would be making sure that the letters wont go off the page when the user scrolls a lot.
You can do this with simple math calculation, taking in consideration the window's total height and using the current scrollY as a multiplier.
- As RokoC has pointed out there is room for performance improvements.Implement some debouncing or other kinds of limiters
There's this awesome codepen called Gravity Points which I liked very much and wanted to use on my next project but it turns out it only works well if it is the only element on the page. Once you start adding content above and below it, it miscalculates the mouse position.
Take a look at my fork here, I've added the content above it. Notice if the canvas is aligned perfectly with the screen, the gravity points are created in the right spot but if you click on the canvas when you're half way scrolled up, the points are created a few pixels down.
I'm not great with javascript and jquery, although I'm able to understand which functions it's calling and which functions are being used to draw the points but I can't understand where the calculations are happening and how it's related to scroll position. This functions seems to be triggered when left clicked but where does the cursor coordinates come from?
function mouseDown(e) {
for (var i = gravities.length - 1; i >= 0; i--) {
if (gravities[i].isMouseOver) {
gravities[i].startDrag(mouse);
return;
}
}
gravities.push(new GravityPoint(e.clientX, e.clientY, G_POINT_RADIUS, {
particles: particles,
gravities: gravities
}));
}
So can someone take a look at it and give some insights?
<canvas> element has its own coordinate system, which differs from the document one (the one sent by mouseEvents).
What you need to do is to check canvas's bounding box and remove its offset to your mouseEvents coordinates :
canvas.onmousemove = function(mouseEvent){
var rect = canvas.getBoundingClientRect();
var x = mouseEvent.clientX - rect.left;
var y = mouseEvent.clientY - rect.top;
// doSomething with x and y
for (var i = gravities.length - 1; i >= 0; i--) {
if (gravities[i].isMouseOver) {
gravities[i].startDrag(mouse);
return;
}
}
gravities.push(new GravityPoint(x, y, G_POINT_RADIUS, {
particles: particles,
gravities: gravities
}));
}
this is my code :
var pane = $('#Container'),
box = $('#PLayer'),
w = pane.width() - box.width(),
d = {},
x = 3;
function newv(v, a, b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function (e) { d[e.which] = true; });
$(window).keyup(function (e) { d[e.which] = false; });
setInterval(function () {
box.css({
left: function (i, v) { return newv(v, 37, 39); },
top: function (i, v) { return newv(v, 38, 40); }
});
}, 20);
<div id="Container" class="Container">
<div id="PLayer" class="player" ></div>
</div>
by this code i managed to make the div animate by using the arrow key but how can i make that jumping effect ? like the one used here
Here's a link to a fork of your fiddle:
http://jsfiddle.net/dJut2/
I made two changes:
Jquery wanted top to have an initial value while using the 2-argument callback inside .css(...), so I set it to 50% in CSS: .player{ ... top: 50%; }
I added "gravity" using another ternary check inside the input response/collision function. It checks against whether 38/the up-key is passed as an input case and adds 2 to the top: ... + (a==38 ? 2 : 0)
By the way, verbose variable names or comments could really make your code easier to read. Also, ternary operators aren't as efficient or readable as some if statements. Lastly, you should break your input response and collision functionality into specific cases so you can edit them each specifically later without having to refactor.
Lastly, if you want to simulate a 'jump', you'll need to have some kind of timed input case. This can be accomplished automatically with an acceleration variable (set it to a number, subtract it from the top every frame, and decrement it every frame flooring at 0 when on the ground; the gravity I added can be removed in this case) or some kind of specific animation (subtract 4 every frame for 20 frames).
If you want to do something similar to that platformer game you linked (which is awesome), why not just check out the source code for it? http://taffatech.com/Platformer.js
if(Player.isUpKey == true)
{
if(!Player.jumping){
Player.jumping = true;
Player.velY = -Player.speed*2;
}
}
If you look there you see he's not actually using CSS animations, but recalculating the player's position every frame. If the player hit's the up key, their y velocity is increased, and then every frame this is called to move the player
//gravity would be a numeric variable, this makes the player constantly move
//back downwards when they leave the ground
Player.velY += gravity;
//adjusting the player's position according to new
//calculated x and y velocity
Player.x += Player.velX;
Player.y += Player.velY;
This is similar to how most game engines work, recalculating the scenario and forces each frame so they can constantly react to what's going on. Instead of animations, a physics engine is doing the math and moving things accordingly on screen.
I've looked everywhere and so far have not found a non-jQuery js to handle this. I would like to avoid using a library for just this one simple task.
I would like to fix three navigation divs ("#header", "#tabs" and "#footer") to viewport left (or alternatively, to the x position of a div "#helper" with "position: fixed; left: 0; top: 0;") -- but not fix y. They can not be vertically fixed.
I've created a working js that forces the divs to reposition based on scrolling, but it's not smooth in the real page (too many dynamic and graphic elements) - I'd like it to either animate smoothly, or mimic fixed-left and not appear to reposition at all.
Anyone who can give pointers or a quick script, or review and modify the script I have made? I've noticed people tend to ask why an obvious solution is not used instead of answering the question... I will be glad to answer, but would prefer help with the actual problem.
Here is a jsFiddle with the problem: http://jsfiddle.net/BMZvt/6/
Thank you for any help!
Smooth animation example:
var box = document.getElementById('box');
var moveTo = function(obj, target) {
// start position
// you should obtain it from obj.style
var cpos = {
x: 0,
y: 0
}
var iv = setInterval(function(){
cpos.x += (target.x - cpos.x) * 0.3; // 0.3 is speed
cpos.y += (target.y - cpos.y) * 0.3; // 0.3 is speed
obj.style.left = Math.floor(cpos.x) + 'px';
obj.style.top = Math.floor(cpos.y) + 'px';
var dist = Math.abs(cpos.y - target.y); // distance (x+y) from destination
dist += Math.abs(cpos.x - target.x); // < 1 = object reached the destination
if(dist < 1) { // here we are checking is box get to the destination
clearInterval(iv);
}
}, 30); // this is also the speed
}
box.onclick = function(){
moveTo(box, {x: 90, y: 75}); // fire this function to move box to specified point
}
Demonstration: http://jsfiddle.net/Qwqf6/5/
Your script is your job, but this is a quick start how to solve animation problem
You can also do some fancy stuff with speed for example use sin(x) to set the speed
Demonstration #2 http://jsfiddle.net/Qwqf6/6/ (very smooth)
Full script here https://gist.github.com/3419179
I don't think there's a straight way to do this...
But here's a way.
First, You need to be able to detect the direction of the scrolling when window.onscroll event happens. You would do this by comparing the current page offsets with the newly acquired page offsets whenever the scroll event happens. (http://stackoverflow.com/questions/1222915/can-one-use-window-onscroll-method-to-include-detection-of-scroll-direction)
Now suppose you know the direction of the scroll, you want to change the styling for the divs depending on the direction of the scroll.
Let FixAtX be the value of the x coordinate that you want to fix your divs at.
Let OriginalY be the y coordinate of the divs.
Also whenever scrolling happens, despite of the direction, you want to remember the pageoffset X and Y. Let's call them OldX and OldY
If scrolling vertically:
Set position value for divs' style to be absolute.
Set top value for divs' style to be OriginalY
Set left value for divs' style to be OldX + FixAtX
If scrolling horizontally:
Set position value for divs' style to be fixed.
set top value for divs' style to be OriginalY - OldY (<- this may be different depending on how the browser computes pageOffset value,)
Set Left value for divs' style to be FixAtX
I think this should work...
Since you are just using browser's rendering for positioning, it should be very smooth!
hope I understood the question correctly.
This is for people who view this post - I wound up going with the solution I initially put together in the jsFiddle that used a simple javascript to mimic fixed x.
The javascript in the first answer was hefty and wound up buggy, and the second answer sounded good but did not work in practice. So, I'm recommending the javascript from the jsFiddle (below) as the best answer to fixed x and fluid y without a javascript library. It's not perfect and has a minimal delay but is the best answer I've found.
function fixLeft() {
function getScrollX() {
var x = 0, y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
x = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft) ) {
x = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft) ) {
x = document.documentElement.scrollLeft;
}
return [x];
}
var x = getScrollX();
var x = x[0];
// have to get and add horizontal scroll position px
document.getElementById('header').style.left = x + "px";
document.getElementById('tabs').style.left = x + "px";
document.getElementById('footer').style.left = x + "px";
}
window.onscroll = fixLeft;
I have a #wrapper div and a #grid div nested inside. currently I can scroll around with this function below.
getCursorPos : function(){
// set the empty cursor object
var cursor = {};
//get the offset from the left of the grid container
var grid
//offset loop
$(function getCursorPos(){
grid = $('#grid').offset();
setTimeout(getCursorPos, game.loopSpeed);
});
//continuosly get the position
var that = this;
$(document).mousemove(function(e){
//if game mode is menu exit
if(game.mode === 'menu'){
return;
}
// NOTE: this looks a litle over done but don't remove anything
// its like this because javascript uses floating points
// and so in order to line up to the nearest hunderedth I
// had to make the cursor and div position intergers by
// muliplying by ten. one the two are added I reduced them
// and rounded them.
that.x = Math.round(((e.pageX * 10) - (grid.left * 10)) / 10);
that.y = Math.round(((e.pageY * 10) - (grid.top * 10)) / 10);
});
},
the problem is that the mouse coordinates only update when the mouse moves. is there any way to get the coordinates with out moving the mouse?
You always have the latest up-to-date coordinates of the mouse from the last mouse move, clarify why those are not useful to you.