im creating a simple game and, I need some direction for debuging some data.
i have a div in my HTML file, that I want him to show some data that change when some variables get change by the user actions.
for exmple i got var xPosition, I want to send the data to a div in the HTML, so i can see the current state of xPosition.
i realy dont have any idea where to start creating this functionlity.
my questions:
is it possible to create event inside this class and register some
element to him that will show all the changing data?
do i have to use a some a timer for that sort of thing?
this is the "class":
(function ($) {
$.Player = function (element) {
this.element = (element instanceof $) ? element : $(element);
this.movmentSpeed = 10;
this.size = $(element).width();
this.xPos = 0;
this.yPos = 0;
};
$.Player.prototype = {
//register events
InitEvents: function () {
var that = this;
$(document).keydown(function (e) {
var key = e.which;
if (key == 39) {
that.moveRight(400);
} else if (key == 37) {
that.moveLeft();
}
});
this.element.css({
left: this.xPos
});
},
//movment functions
moveRight: function (worldWidth) {
if ((this.xPos + this.size) <= worldWidth) {
this.xPos += this.movmentSpeed;
this.element.css("left", '+=' + this.movmentSpeed);
}
},
moveLeft: function () {
if (this.xPos > 0) {
this.xPos -= this.movmentSpeed;
this.element.css("left", '-=' + this.movmentSpeed);
}
}
};
} (jQuery));
here the HTML:
<div id="player">
<div id="debugData"> <div>
<script>
var player = new $.Player($("#player"));
player.InitEvents();
</script>
(sorry for my english)
jsFiddle Demo
I'd say having an internal function inside the Class would help. Maybe even having a setting where you turn the logging on by doing player.logging = true;, and having it default to false;
In your prototype just add a public prototype variable for logging = false, and our prototype function log().
The internal function you could use could be something as simple as:
logging : false, // our default
log : function (str) {
if (this.logging) {
$('#debugData').html(str);
}
},
This way you could leave your log(this.xPos); (or whatever you want to log) within your code, and by removing the player.logging = true; when you instantiate your class, they won't show up, till you put that code back in.
Related
Let me preface by saying I am relatively green in respect to JavaScript. However, I am trying to create a JavaScript function that will listen for a wheel event, determine the direction of the scroll and scroll the next part of the page into view. Similar to a swipe gesture. I have it working in Firefox as intended, user scrolls down the page moves down, up the page moves up. However, in Chrome and Edge, the element.scrollIntoView() function seems to be called, but nothing happens.
I am using Blazor with JSInterop to get the page to scroll.
Here is the gist of the file:
// scrolldetection.js //
window.scrolldetection {
scrollSetup: function (elementId) {
autoscroller(elementId);
}
}
function autoscroller(elementId) {
// Set up vars
var idList = document.getElementById(elementId).children.id;
var idListIndex = // Gets current index based on current location on page
var curDirection;
document.addEventListener("wheel", function () {
var currentPos = window.scrollY;
if (!curDirection) {
// Check for what direction user scrolls
idListIndex = // Function that determines new index
scrollScreen(idList, idListIndex);
}
var timerId = setTimeout(function () {
curDirection = undefined;
clearTimeout(timerId);
}, 700);
}
}
function scrollScreen(idList, curIndex) {
console.log("list index: " + curIndex);
element = document.getElementById(idList[curIndex]);
console.log(element.id);
element.scrollIntoView({ behavior: 'smooth' });
}
I have another function that calls scrollIntoView() on the same elements, via a button press. Works just fine.
Here is that function:
// anchorlink.js // This one works as intended //
window.anchorlink = {
scrollIntoView: function (elementId) {
var elem = document.getElementById(elementId);
if (elem) {
elem.scrollIntoView({ behavior: 'smooth' });
}
}
}
The console.log() calls within the scrollScreen() function show up properly in the console in each browser. Leading me to believe that element.scrollIntoView() is being called, but something is going wrong to make it not function appropriately. If there is any other information you need, I will be happy to provide, thanks.
After working on this some more, I decided the concept I was using wasn't as user friendly as I had hoped.
I decided to let the user scroll freely along the page and when they stop scrolling, then determine the closest DOM element and scroll to it. Works on Edge, Chrome and Firefox.
window.contentcenter = {
contentCenter: function (elementId) {
var centeringFunction = debounce(function () { autocenter(elementId) }, 200);
document.addEventListener("scroll", centeringFunction);
}
}
function autocenter(elementId) {
var currentElement = detectCurrentElement(elementId);
currentElement.scrollIntoView({ behavior: "smooth" });
}
function detectCurrentElement(elementId) {
var element = document.getElementById(elementId);
var currentPos = window.scrollY;
var contentIdList = getContentIdList(elementId);
var currentElement = closestContent(currentPos, element, contentIdList);
return currentElement;
}
function closestContent(pos, element, contentIdList) {
var contentId = Math.round(pos / (element.offsetHeight / contentIdList.length));
var currentElement = document.getElementById(contentIdList[contentId]);
return currentElement;
}
function getContentIdList(elementId) {
var idList = []
var childElements = document.getElementById(elementId).children;
for (var i = 0; i < childElements.length; i++) {
idList.push(childElements[i].id);
}
return idList;
}
function debounce(func, timeout) {
var timer;
return function () {
var context = this, args = arguments;
var later = function () {
timer = null;
func.apply(context, args);
};
clearTimeout(timer);
timer = setTimeout(later, timeout)
};
}
I'm having a problem where I need to reset the game.input.onDown event in the same way as Phaser.Key.reset. It seems like this is doable with the Phaser.Pointer.reset method. Unfortunately, there seems to be a bunch of different potential pointer objects in the Phaser.Input class, and I'm not sure which one I need to use for game.input.onDown, which says that it gets "dispatched each time a pointer is pressed down". I'm just not really sure which pointer I need to use. Can anyone shed some light on this?
I guess I effectively need to do something like this:
this.game.input.whicheverPointer.reset();
EDIT:
Here is an example that mimics the the problem I'm having.
Here is the source code for it:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game", {preload: preload, create: create, update: update});
var dude;
var block;
var spacebar;
var gameOverText;
var gameOverCounter = 0;
var gameOverBool = false;
function preload () {
game.load.image("block", "assets/block.png");
game.load.image("dude", "assets/phaser-dude.png");
}
function create () {
dude = game.add.sprite(373, 760, "dude");
block = game.add.sprite(0, 505, "block");
game.physics.arcade.enable(dude);
game.physics.arcade.enable(block);
dude.body.collideWorldBounds = true;
dude.body.gravity.y = 200;
block.body.collideWorldBounds = true;
block.body.immovable = true;
block.body.velocity.x = 100;
block.body.bounce.x = 1;
spacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
var jumpOrTryAgain = function () {
if (gameOverBool === false) {
dude.body.velocity.y = -250;
// If you open up your JS / error console, you'll see that
// this message gets printed an extra time each reset,
// when you click. The spacebar doesn't have this problem
// because of the `spacebar.reset()` call below.
console.log("down");
} else {
dude.destroy();
block.destroy();
gameOverText.destroy();
// Here, I can reset the spacebar, but I'm not sure what to do
// for the click / touch event, which keeps getting the jumpOrTryAgain
// callback added onto it.
spacebar.reset();
gameOverBool = false;
gameOverCounter = 0;
create();
}
};
game.input.onDown.add(jumpOrTryAgain);
spacebar.onDown.add(jumpOrTryAgain);
}
function update () {
function gameOver () {
if (gameOverCounter === 0) {
gameOverBool = true;
dude.body.velocity.y = 0;
dude.body.velocity.x = 0;
block.body.velocity.x = 0;
gameOverText = game.add.text(300, 200, "Game Over!", {fontSize: "16px", fill: "white"});
gameOverCounter += 1;
}
}
game.physics.arcade.collide(dude, block, gameOver);
}
As you can read in my comments above, the problem is that the click / touch event keeps getting the jumpOrTryAgain callback added onto itself as create gets recursively called when you reset the game. I need a way to reset the click / touch event, similar to spacebar.reset() as seen above.
game.input.onDown gets triggered from both mouse and touch input. If you need to reset its callback after every call, you can just use game.input.onDown.addOnce() (instead of game.input.onDown.add()) so that the callback is removed automatically after the first run.
All I had to do was implement a simple counter keeping the spacebar and pointer from getting re-assigned, like so:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game", {preload: preload, create: create, update: update});
var dude;
var block;
var spacebar;
var gameOverText;
var gameOverCounter = 0;
var gameOverBool = false;
var downCounter = 0;
function preload () {
game.load.image("block", "assets/block.png");
game.load.image("dude", "assets/phaser-dude.png");
}
function create () {
dude = game.add.sprite(373, 760, "dude");
block = game.add.sprite(0, 505, "block");
game.physics.arcade.enable(dude);
game.physics.arcade.enable(block);
dude.body.collideWorldBounds = true;
dude.body.gravity.y = 200;
block.body.collideWorldBounds = true;
block.body.immovable = true;
block.body.velocity.x = 100;
block.body.bounce.x = 1;
var jumpOrTryAgain = function () {
if (gameOverBool === false) {
dude.body.velocity.y = -250;
console.log("down");
} else {
dude.destroy();
block.destroy();
gameOverText.destroy();
gameOverBool = false;
gameOverCounter = 0;
create();
}
};
if (downCounter === 0) {
spacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
game.input.onDown.add(jumpOrTryAgain);
spacebar.onDown.add(jumpOrTryAgain);
downCounter += 1;
}
}
function update () {
function gameOver () {
if (gameOverCounter === 0) {
gameOverBool = true;
dude.body.velocity.y = 0;
dude.body.velocity.x = 0;
block.body.velocity.x = 0;
gameOverText = game.add.text(300, 200, "Game Over!", {fontSize: "16px", fill: "white"});
gameOverCounter += 1;
}
}
game.physics.arcade.collide(dude, block, gameOver);
}
My question is: How is it possible to call the function mova from outside the function init?
init.mova("a2-a3"); doesn't work
The full code is here.
This is a chessboard system.
I don't now how to call the function mova from outside init. init.mova doesn't work.
Code:
var init = function() {
//--- start example JS ---
var board,
game = new Chess(),
statusEl = $('#status'),
fenEl = $('#fen'),
pgnEl = $('#pgn');
// do not pick up pieces if the game is over
// only pick up pieces for the side to move
var onDragStart = function(source, piece, position, orientation) {
if (game.game_over() === true ||
(game.turn() === 'w' && piece.search(/^b/) !== -1) ||
(game.turn() === 'b' && piece.search(/^w/) !== -1)) {
return false;
}
};
var onDrop = function(source, target) {
// see if the move is legal
var move = game.move({
from: source,
to: target,
promotion: 'q' // NOTE: always promote to a queen for example simplicity
});
if (move !== null) {
console.log(move.to);
}
// illegal move
if (move === null) return 'snapback';
updateStatus();
};
// update the board position after the piece snap
// for castling, en passant, pawn promotion
var onSnapEnd = function() {
board.position(game.fen());
};
var updateStatus = function() {
var status = '';
var moveColor = 'White';
if (game.turn() === 'b') {
moveColor = 'Black';
}
// checkmate?
if (game.in_checkmate() === true) {
status = 'Game over, ' + moveColor + ' is in checkmate.';
}
// draw?
else if (game.in_draw() === true) {
status = 'Game over, drawn position';
}
// game still on
else {
status = moveColor + ' to move';
// check?
if (game.in_check() === true) {
status += ', ' + moveColor + ' is in check';
}
}
statusEl.html(status);
fenEl.html(game.fen());
pgnEl.html(game.pgn());
};
var cfg = {
draggable: true,
position: 'start',
onDragStart: onDragStart,
onDrop: onDrop,
onSnapEnd: onSnapEnd
};
board = new ChessBoard('board', cfg);
updateStatus();
//--- end example JS ---
var mova = function(positie) {
board.move(positie);
}
}; // end init()
$(document).ready(init);
init.mova("a2-a3");
Variables defined within a function are scoped to that function. They cannot be called from outside of the function.
If you wanted a quick and dirty fix, you could define the variable mova outside the init() function, and then assign its value within it.
var mova;
var init = function() {
// etc. etc.
mova = function(positie) {
board.move(positie);
}
}
then, the mova function would be available outside of the init function once it has run.
You could ensure that you don't try to use the function until it's defined by using a function that is called when your init completes:
var mova;
var init = function() {
// etc. etc.
mova = function(positie) {
board.move(positie);
}
onInitComplete();
}
function onInitComplete() {
// function using mova function
}
It's likely, given the structure of your program, that you will want to use the same technique for many variables other than just mova. You probably don't want all of your game logic inside the init() function. You could define some variables for the state of your game outside the init function and then just assign them their starting values inside it. Hope that helps.
So I'm trying to program a bejeweled like game in javascript but instead of clicking a jewel then clicking another jewel to make them switch positions, I want to the player to click on a jewel then drag to another jewel to make them switch places. In the code I use the variable orb as jewels.
function makeOrb(orb, x, y) {
orb.className = "orb";
var bejeweledarea = document.getElementById("bejeweledarea");
bejeweledarea.appendChild(orb);
var random = Math.round(Math.random() * (colors.length - 1));
orb.style.backgroundColor = colors[random];
orb.style.position = "absolute";
orb.style.top = y + "px";
orb.style.left = x + "px";
orb.onmousedown = activate;
if (activeSwitching) {
orb.onmouseover = switchOrbs(activeOrb, orb);
}
}
function activate() {
activeSwitching = true;
activeOrb = this;
}
function switchOrbs(orb, otherOrb) {
var oldTop = orb.style.top;
var oldLeft = orb.style.left;
orb.style.top = otherOrb.style.top;
orb.style.left = otherOrb.style.left;
otherOrb.style.top = oldTop;
otherOrb.style.left = oldLeft;
}
My could will register the activeSwitching as true but for some reason the mouseover event doesn't ever work.
You are now adding a onmouseover event to the orb that has just been clicked. I assume you want all the other orbs to have an onmouseover event that calls switchOrbs, right? Because you want to switch the orbs when the activated is hovered over an other orb.
You could add that mouseover event to all the orbs. In that function you then check if activeSwitching = true. If so, you perform the routine to switch. Otherwise you stop, since there is no activated orb and the program needs to wait for a orb.onmousedown / activate() call.
Edit: outline for the code
$(".orbs").on("mouseover", function() {
// `this` is the orb that is being hovered
if( currentActiveOrb != null ) {
switch(this, currentActiveOrb);
}
}).on("mousedown", function() {
// `this` is the orb that is being clicked
currentActiveOrb = this;
}).on("mouseup", function() {
currentActiveOrb = null;
});
function switch(hovered, active) {
// Code to switch the orbs.
}
I want to play the songs only if the user press the button 'play',
without Waiting to load all the 21 songs.
when I press the button 'play' the page jump up like refreshing ,it is not normal.
what I can do to improve my code.
please try to play the songs in the example site and see the problem.
many thanks.
var Music = {
init:function(){
song = new Audio();
//speaKer = document.getElementById("imgSpeaker");
this.volume = 0.08;
this.isMute = false;
canPlayMP3 = (typeof song.canPlayType === "function" && song.canPlayType("audio/mpeg") !== "");
song.src = canPlayMP3 ? "http://rafih.co.il/wp-content/uploads/2013/07/1.mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/1.ogg";
song.preload = 'auto';
},
/* start:function(){
song.src = canPlayMP3 ? "http://rafih.co.il/wp-content/uploads/2013/07/1.mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/1.ogg";
song.volume = 0.08;
song.autoplay = true;
song.load();
},*/
play: function () {
song.volume = 0.08;
song.autoplay = true;
song.load();
// Music.speaker();
},
stop: function () {
if (!song.ended) {
song.pause();
}
},
next: function () {
if (curr < count) {
curr++;
}else curr = 1;
song.src = canPlayMP3 ? "http://rafih.co.il/wp-content/uploads/2013/07/" + curr + ".mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/" + curr + ".ogg";
},
};
function load() {
Music.init();
}
You need to return false from the play buttons event handler, to prevent the page from scrolling to the top.
Change:
<div id="play" onclick='Music.play()'>
To:
<div id="play" onclick='Music.play(); return false;'>
That's because of the anchor in your link, such as href="#". A very simple fix would be to add return false; in to your inline handler attribute, such as onclick="Music.play(); return false;", however that isin't a good approach and is considered a bad practice.
Instead you could add your handlers programmatically, it will also make your code more modular and testable:
var Music = {
init: function (options) {
var playBtn = this.playBtn = document.querySelector(options.playBtn);
playBtn.addEventListener('click', this._onPlayBtnClick.bind(this));
//...
return this;
},
_onPlayBtnClick: function (e) {
e.preventDefault(); //prevents the browser's default behaviour
this.play();
},
//...
};
Then you could do something like:
function load() {
var musicController = Object.create(Music).init({
playBtn: '#play',
//...
});
}
You could also use it as a singleton like:
Music.init({ ... });