I would like to make the annotations move by a certain step and not stop in between two columns in axis.
For example, the x axis is [0, 10, 20, 30]. When dragging the annotation, I want its point to change directly from {x: 10, y: 10000} to {x: 20, y: 10000} without going to x: 15. i.e. make the annotation a bit sticky to the column and not sitting between columns.
I also need to get the current annotation point so I can update some other element.
I tried the solution from stackoverflow but it doesn't work.
Here is my current code. CodePen
enter code here
Edit 1:
Thanks to the solution from #ppotaczek, the annotation can move by steps now. Here is the updated code JSFiddle. What needs to be refined is when dragging the annotation too fast, it cannot keep up with the mouse. Is it because of the performance of Highcharts.redraw() method and how can we solve this?
Another unsolved question is -> how to get the current point of the annotation? It seems the annotation object doesn't provide any value about that. All I can think of is keep a record of the initial point, then everytime the annotation is moved by a step, update the record. Is there a better way?
//this code can deal with vertical and horizontal annotations now.
Highcharts.Annotation.prototype.onDrag = function(e) {
if (
this.chart.isInsidePlot(
e.chartX - this.chart.plotLeft,
e.chartY - this.chart.plotTop
)
) {
var translation = this.mouseMoveToTranslation(e),
xAxis = this.chart.xAxis[0],
yAxis = this.chart.yAxis[0],
xStep = 1,
yStep = 1000,
pxStep = xAxis.toPixels(xStep) - xAxis.toPixels(0),
pyStep = yAxis.toPixels(yStep) - yAxis.toPixels(0);
if (!Highcharts.defined(this.potentialTranslation)) { //not defined
this.potentialTranslation = 0;
}
if (this.options.draggable === 'x') {
this.potentialTranslation += translation.x;
translation.y = 0;
if (Math.abs(this.potentialTranslation) >= Math.abs(pxStep)) {
translation.x = (this.potentialTranslation > 0) ? pxStep : -pxStep;
this.potentialTranslation = 0;
//this.potentialTranslation = undefined;
if (this.points.length) {
this.translate(translation.x, translation.y);
} else {
this.shapes.forEach(function(shape) {
shape.translate(translation.x, translation.y);
});
this.labels.forEach(function(label) {
label.translate(translation.x, translation.y);
});
}
}
}
if (this.options.draggable === 'y') {
this.potentialTranslation += translation.y;
translation.x = 0;
if (Math.abs(this.potentialTranslation) >= Math.abs(pyStep)) {
translation.y = (this.potentialTranslation > 0) ? -pyStep : pyStep;
this.potentialTranslation = 0;
if (this.points.length) {
this.translate(translation.x, translation.y);
} else {
this.shapes.forEach(function(shape) {
shape.translate(translation.x, translation.y);
});
this.labels.forEach(function(label) {
label.translate(translation.x, translation.y);
});
}
}
}
this.redraw(false);
}
}
Edit 2:
Thanks to #ppotaczek again! The "mouse moving too fast" issue is solved now. I apply his updates and also my idea of how to get the annotation value into JSFiddle.
You can overwrite Highcharts.Annotation.prototype.onDrag method:
(function(H) {
H.Annotation.prototype.onDrag = function(e) {
if (
this.chart.isInsidePlot(
e.chartX - this.chart.plotLeft,
e.chartY - this.chart.plotTop
)
) {
var translation = this.mouseMoveToTranslation(e),
xAxis = this.chart.xAxis[0],
step = 0.5,
pxStep = xAxis.toPixels(step) - xAxis.toPixels(0);
if (!H.defined(this.potentialTranslation)) {
this.potentialTranslation = 0;
}
this.potentialTranslation += translation.x;
if (Math.abs(this.potentialTranslation) >= pxStep) {
translation.y = 0;
translation.x = (this.potentialTranslation > 0) ? pxStep : -pxStep;
this.potentialTranslation = 0;
if (this.points.length) {
this.translate(translation.x, translation.y);
} else {
this.shapes.forEach(function(shape) {
shape.translate(translation.x, translation.y);
});
this.labels.forEach(function(label) {
label.translate(translation.x, translation.y);
});
}
}
this.redraw(false);
}
}
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/vmon2chx/
Docs: https://www.highcharts.com/docs/extending-highcharts
Related
I create a game using javascript. The code is placed at the bottom of the page. Visualize it as if the game is below a footer. The game starts when the user selects the start game button. The mechanics of the game are controlled by the arrow key. Arrow keys are used to move up, right, and left down. The problem is when I press the up or down key, the page scrolls too. How to stop this? I want the page not to scroll when the game is active. I am attaching the code of the game I create. It is a snake game.There's CSS too, but I'm not attaching it as I don't think its relevant
<div id="app" class="app">
<div class="start-screen">
<h2>🦊 </h2>
<div class="options">
<h3>Choose Difficulty</h3>
<p class="end-score"></p>
<button data-difficulty="100" class="active">Easy</button>
<button data-difficulty="75">Medium</button>
<button data-difficulty="50">Hard</button>
</div>
<button class="play-btn">Play</button>
</div>
<canvas id="board"></canvas>
<div class="score">0</div>
</div>
<script>
class SnakeGame {
constructor() {
this.$app = document.querySelector('#app');
this.$canvas = this.$app.querySelector('canvas');
this.ctx = this.$canvas.getContext('2d');
this.$startScreen = this.$app.querySelector('.start-screen');
this.$score = this.$app.querySelector('.score');
this.settings = {
canvas: {
width: 500,
height: 500,
background: 'white',
border: 'black'
},
snake: {
size: 20,
background: '#73854A',
border: '#000'
}
};
this.game = {
// "direction" (set in setUpGame())
// "nextDirection" (set in setUpGame())
// "score" (set in setUpGame())
speed: 100,
keyCodes: {
38: 'up',
40: 'down',
39: 'right',
37: 'left'
}
}
this.soundEffects = {
score: new Audio('./sounds/score.mp3'),
gameOver: new Audio('./sounds/game-over.mp3')
};
this.setUpGame();
this.init();
}
init() {
// Choose difficulty
// Rather than using "this.$startScreen.querySelectorAll('button')" and looping over the node list
// and attaching seperate event listeners on each item, it's more efficient to just listen in on the container and run a check at runtime
this.$startScreen.querySelector('.options').addEventListener('click', event => {
this.chooseDifficulty(event.target.dataset.difficulty);
});
// Play
this.$startScreen.querySelector('.play-btn').addEventListener('click', () => {
this.startGame();
});
}
chooseDifficulty(difficulty) {
if(difficulty) {
this.game.speed = difficulty;
this.$startScreen.querySelectorAll('.options button').forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
}
}
setUpGame() {
// The snake starts off with 5 pieces
// Each piece is 30x30 pixels
// Each following piece must be n times as far from the first piece
const x = 300;
const y = 300;
this.snake = [
{ x: x, y: y },
{ x: x - this.settings.snake.size, y: y },
{ x: x - (this.settings.snake.size * 2), y: y },
{ x: x - (this.settings.snake.size * 3), y: y },
{ x: x - (this.settings.snake.size * 4), y: y }
];
this.food = {
active: false,
background: '#EC5E0B',
border: '#73AA24',
coordinates: {
x: 0,
y: 0
}
};
this.game.score = 0;
this.game.direction = 'right';
this.game.nextDirection = 'right';
}
startGame() {
// Stop the game over sound effect if a new game was restarted quickly before it could end
this.soundEffects.gameOver.pause();
this.soundEffects.gameOver.currentTime = 0;
// Reset a few things from the prior game
this.$app.classList.add('game-in-progress');
this.$app.classList.remove('game-over');
this.$score.innerText = 0;
this.generateSnake();
this.startGameInterval = setInterval(() => {
if(!this.detectCollision()) {
this.generateSnake();
} else {
this.endGame();
}
}, this.game.speed);
// Change direction
document.addEventListener('keydown', event => {
this.changeDirection(event.keyCode);
});
}
changeDirection(keyCode) {
const validKeyPress = Object.keys(this.game.keyCodes).includes(keyCode.toString()); // Only allow (up|down|left|right)
if(validKeyPress && this.validateDirectionChange(this.game.keyCodes[keyCode], this.game.direction)) {
this.game.nextDirection = this.game.keyCodes[keyCode];
}
}
// When already moving in one direction snake shouldn't be allowed to move in the opposite direction
validateDirectionChange(keyPress, currentDirection) {
return (keyPress === 'left' && currentDirection !== 'right') ||
(keyPress === 'right' && currentDirection !== 'left') ||
(keyPress === 'up' && currentDirection !== 'down') ||
(keyPress === 'down' && currentDirection !== 'up');
}
resetCanvas() {
// Full screen size
this.$canvas.width = this.settings.canvas.width;
this.$canvas.height = this.settings.canvas.height;
this.$canvas.style.border = `3px solid ${this.settings.canvas.border}`;
// Background
this.ctx.fillStyle = this.settings.canvas.background;
this.ctx.fillRect(0, 0, this.$canvas.width, this.$canvas.height);
}
generateSnake() {
let coordinate;
switch(this.game.direction) {
case 'right':
coordinate = {
x: this.snake[0].x + this.settings.snake.size,
y: this.snake[0].y
};
break;
case 'up':
coordinate = {
x: this.snake[0].x,
y: this.snake[0].y - this.settings.snake.size
};
break;
case 'left':
coordinate = {
x: this.snake[0].x - this.settings.snake.size,
y: this.snake[0].y
};
break;
case 'down':
coordinate = {
x: this.snake[0].x,
y: this.snake[0].y + this.settings.snake.size
};
}
// The snake moves by adding a piece to the beginning "this.snake.unshift(coordinate)" and removing the last piece "this.snake.pop()"
// Except when it eats the food in which case there is no need to remove a piece and the added piece will make it grow
this.snake.unshift(coordinate);
this.resetCanvas();
const ateFood = this.snake[0].x === this.food.coordinates.x && this.snake[0].y === this.food.coordinates.y;
if(ateFood) {
this.food.active = false;
this.game.score += 10;
this.$score.innerText = this.game.score;
this.soundEffects.score.play();
} else {
this.snake.pop();
}
this.generateFood();
this.drawSnake();
}
drawSnake() {
const size = this.settings.snake.size;
this.ctx.fillStyle = this.settings.snake.background;
this.ctx.strokestyle = this.settings.snake.border;
// Draw each piece
this.snake.forEach(coordinate => {
this.ctx.fillRect(coordinate.x, coordinate.y, size, size);
this.ctx.strokeRect(coordinate.x, coordinate.y, size, size);
});
this.game.direction = this.game.nextDirection;
}
generateFood() {
// If there is uneaten food on the canvas there's no need to regenerate it
if(this.food.active) {
this.drawFood(this.food.coordinates.x, this.food.coordinates.y);
return;
}
const gridSize = this.settings.snake.size;
const xMax = this.settings.canvas.width - gridSize;
const yMax = this.settings.canvas.height - gridSize;
const x = Math.round((Math.random() * xMax) / gridSize) * gridSize;
const y = Math.round((Math.random() * yMax) / gridSize) * gridSize;
// Make sure the generated coordinates do not conflict with the snake's present location
// If so recall this method recursively to try again
this.snake.forEach(coordinate => {
const foodSnakeConflict = coordinate.x == x && coordinate.y == y;
if(foodSnakeConflict) {
this.generateFood();
} else {
this.drawFood(x, y);
}
});
}
drawFood(x, y) {
const size = this.settings.snake.size;
this.ctx.fillStyle = this.food.background;
this.ctx.strokestyle = this.food.border;
this.ctx.fillRect(x, y, size, size);
this.ctx.strokeRect(x, y, size, size);
this.food.active = true;
this.food.coordinates.x = x;
this.food.coordinates.y = y;
}
detectCollision() {
// Self collison
// It's impossible for the first 3 pieces of the snake to self collide so the loop starts at 4
for(let i = 4; i < this.snake.length; i++) {
const selfCollison = this.snake[i].x === this.snake[0].x && this.snake[i].y === this.snake[0].y;
if(selfCollison) {
return true;
}
}
// Wall collison
const leftCollison = this.snake[0].x < 0;
const topCollison = this.snake[0].y < 0;
const rightCollison = this.snake[0].x > this.$canvas.width - this.settings.snake.size;
const bottomCollison = this.snake[0].y > this.$canvas.height - this.settings.snake.size;
return leftCollison || topCollison || rightCollison || bottomCollison;
}
endGame() {
this.soundEffects.gameOver.play();
clearInterval(this.startGameInterval);
this.$app.classList.remove('game-in-progress');
this.$app.classList.add('game-over');
this.$startScreen.querySelector('.options h3').innerText = 'Game Over';
this.$startScreen.querySelector('.options .end-score').innerText = `Score: ${this.game.score}`;
this.setUpGame();
}
}
const snakeGame = new SnakeGame();
</script>
Stop the page from moving up and down when the game is active
You just need to prevent the default behaviour of these keys:
// Change direction
document.addEventListener('keydown', event => {
event.preventDefault(); // add this line
this.changeDirection(event.keyCode);
});
Note that this isn't a very good idea to do it that way, as it will prevent the default behaviour of all keypresses anywhere on your page. Most notably, F5 will never refresh the browser, and if you have other elements like buttons, links, etc, the standard keypresses to activate those will stop working (turning these off is a particular problem if you want your site to be accessible to those with disabilities).
You'd be better off checking the keyCode first and only preventing default if it corresponds to one of the arrow keys - which isn't so easy to do with your code as it stands but I'd encourage you to rewrite it that way.
Even doing that presents a problem to those who are not able to use a mouse, as (depending on the position of your game interface on the screen and its size) they may still need to scroll down and will be prevented from doing this by this preventDefault behaviour. But well that's what you asked for, and I've given you the solution - but with this important caveat.
I'm trying to create a fire effect for a game in Matter.js, and I need to blur a circle to make it look more realistic. However, I need to make it so it only blurs the fire, not the whole canvas. How can I do this?
This is the code I have so far:
function setOnFire(object) {
var fireX = object.position.x;
var fireY = object.position.y;
var fire = Bodies.circle(fireX, fireY, vw*1, {
isStatic: true,
render: {
fillStyle: "rgba(255,130,0,1)"
}
});
World.add(world, fire);
}
This is not exactly what I had in mind, but it is as close as you can get.
Start by going to matter.js and go to this section:
for (k = body.parts.length > 1 ? 1 : 0; k < body.parts.length; k++) {
part = body.parts[k];
if (!part.render.visible)
continue;
Add this code after the continue;:
if (body.bloom) {
c.shadowColor = body.render.fillStyle;
c.shadowOffsetX = 0;
c.shadowOffsetY = 0;
c.shadowBlur = body.bloom;
}
Then, go to the very end of the loop and add this:
if (body.bloom) {
c.shadowColor = "transparent";
c.shadowOffsetX = 0;
c.shadowOffsetY = 0;
c.shadowBlur = 0;
}
Then, just add the bloom while making your body. For instance:
let fireParticle = Bodies.circle(0, 0, {
bloom: 25
});
So for my assignment I have a webpage where I input a number and choose a shape and the chosen number amount of the chosen shape will appear and go through a set animation. After the animation, I need to make the shape disappear. I've tried everything including using the remove() action and still can't figure this one out.
So here's my fiddle: https://jsfiddle.net/o6e2yu5b/2/
Here's the javascript code:
draw = function() {
var typed = $('#howmany').val()
var shape = $('#shape').val()
var x, y;
for (var i = 0; i < typed; i++) {
x = Math.random() * 350
y = Math.random() * 350
if (shape == 'a') {
pattern = paper.circle(25, 25, 25)
}
if (shape == 'b') {
pattern = paper.rect(10, 10, 50, 50)
}
if (shape == 'c') {
pattern = paper.path('M25,0 L50,50, L0,50 Z')
}
color_attr = {
'fill': '#BB7'
}
position_attr = {
'transform': 't' + x + ',' + y
}
pattern.attr(color_attr)
pattern.animate(position_attr, 2000)
onComplete:function() {
this.target.remove();
}
}
}
setup = function() {
paper = Raphael('svg1', 400, 400)
$('button').click(draw)
}
jQuery(document).ready(setup)
Please help! Thanks
It looks like your onComplete function is incorrect and didn't work. So I made a new setTimeout function that will delete generated shape/s after animation is complete. Check out this demo https://jsfiddle.net/o6e2yu5b/3/
setTimeout(function(){
SVG.find("circle").remove();
SVG.find("rect").remove();
SVG.find("path").remove();
}, 2000);
I am getting the following error when I scroll in ui-grid:
Uncaught TypeError: Cannot read property 'percentage' of undefined
Interestingly I get the same error on the ui-grid tutorial site so it is possible it is just simply a bug.
Here is a plunker that shows the issue.
Here are the grid options I am using:
mc.gridOptions = {
data: mc.people,
enableSorting: true,
onRegisterApi: function( gridApi ) {
mc.gridApi = gridApi;
},
columnDefs: [
{field: 'name'},
{field: 'age'},
{field: 'state', enableSorting: false}
]
};
Any ideas as to what I am doing wrong here? As far as I can tell there is nothing wrong with this.
I would mention this in the comment box, but I need the space and the formatting to explain that you probably need to bring this up to their attention:
First you are using an unstable version, your best bet is to use a stable version that is being used and tested.
The unstable version is throwing a bug in the code below.. please review all my comments in asterisk (******) :
// Scroll the render container viewport when the mousewheel is used
$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
// use wheelDeltaY
var newEvent = GridUtil.normalizeWheelEvent(evt);
var args = { target: $elm };
*****THIS STATEMENT IS TRUE BECAUSE YOU SCROLLED VERTICALLY, ARGS.Y IS SET*****
if (newEvent.deltaY !== 0) {
var scrollYAmount = newEvent.deltaY * -120;
// Get the scroll percentage
var scrollYPercentage = (containerCtrl.viewport[0].scrollTop + scrollYAmount) / rowContainer.getVerticalScrollLength();
// Keep scrollPercentage within the range 0-1.
if (scrollYPercentage < 0) { scrollYPercentage = 0; }
else if (scrollYPercentage > 1) { scrollYPercentage = 1; }
***THIS IS SET***
args.y = { percentage: scrollYPercentage, pixels: scrollYAmount };
}
*****THIS STATEMENT IS FALSE BECAUSE YOU NEVER SCROLLED HORIZONTALLY, ARGS.X IS NOT SET*****
if (newEvent.deltaX !== 0) {
var scrollXAmount = newEvent.deltaX * -120;
// Get the scroll percentage
var scrollLeft = GridUtil.normalizeScrollLeft(containerCtrl.viewport);
var scrollXPercentage = (scrollLeft + scrollXAmount) / (colContainer.getCanvasWidth() - colContainer.getViewportWidth());
// Keep scrollPercentage within the range 0-1.
if (scrollXPercentage < 0) { scrollXPercentage = 0; }
else if (scrollXPercentage > 1) { scrollXPercentage = 1; }
***THIS DOESNT GET SET SINCE IT WILL NOT REACH THIS POINT***
args.x = { percentage: scrollXPercentage, pixels: scrollXAmount };
}
*****THROWS AN ERROR BECAUSE ARGS.X IS NULL & DOESNT EXIST*****
// Let the parent container scroll if the grid is already at the top/bottom
if ((args.y.percentage !== 0 && args.y.percentage !== 1) || (args.x.percentage !== 0 && args.x.percentage !== 1)) {
evt.preventDefault();
}
uiGridCtrl.fireScrollingEvent(args);
});
Hello im trying to find a way to get the snap property of draggable for Greensock to work without throwprops or livesnap. I would like when you let go of the '.face' for it to snap to the closest spot. It works with livesnap but I don't want to have the jagged dragging of it.
Here is what i'm working with at the moment:
var droppables = $('.face');
var choice = $('.choice');
var gridWidth = 192;
var gridHeight = 256;
var overlapThreshold = '50%';
function onDrop(dragged, dropped) {
TweenMax.fromTo(dropped, 0.2, {opacity:1}, {opacity:0.5, repeat:1, yoyo:true});
}
Draggable.create(droppables, {
type:'x,y',
bounds:$('.content'),
liveSnap:true,
snap: {
x: function(endValue) {
return Math.round(endValue / gridWidth) * gridWidth;
},
y: function(endValue) {
return Math.round(endValue / gridHeight) * gridHeight;
}
},
onDrag: function(e) {
var i = droppables.length;
while (--i > -1) {
if (this.hitTest(choice[i], overlapThreshold)) {
$(droppables[i]).addClass('highlight');
} else {
$(droppables[i]).removeClass('highlight');
}
}
},
onDragEnd:function(e) {
var i = droppables.length;
while (--i > -1) {
if (this.hitTest(choice[i], overlapThreshold)) {
onDrop(this.target, choice[i]);
}
}
Any help would be great.
What you can do is change your conditional logic in the onDragEnd callback and remove everything related to the snap event.
Draggable.create(droppables, {
type:'x,y',
bounds:$('.content'),
onDrag: function(e) {
var i = droppables.length;
for(var j = 0; j < i; j++) {
if (this.hitTest(choice[j], overlapThreshold)) {
$(droppables[j]).addClass('highlight');
} else {
$(droppables[j]).removeClass('highlight');
}
}
},
onDragEnd:function(e) {
var i = droppables.length,
snappedEl = false,
originalOffset = $(this.target).offset();
for(var j = 0; j < i; j++) {
if (this.hitTest(choice[i], overlapThreshold)) {
var targetOffset = $(choice[j]).offset();
onDrop(this.target, choice[i]);
snappedEl = true;
$(this.target).addClass("snapped");
TweenLite.to(this.target, 0.1,{
x:targetOffset.left-originalOffset.left,
y:targetOffset.top-originalOffset.top
});
}
}
if(!snappedEl) {
TweenLite.to(this.target, 0.2, {x:0, y:0});
}
}
}
});
I set up a live sample here:
http://codepen.io/rhernando/pen/e2502a90f4ed69fef0e1e7b8d9c17aae
Also for this type of questions is far better for users to go straight to the GreenSock forums, you'll get a faster and official answer. Not that there's something wrong with coming here for answers, but the GreenSock forums are dedicated to GSAP and you'll get official support from the moderating team that includes the creator of the engine.
Cheers!!