I'm trying to create a simple plant collecting game. When you click all the plants, game ends and sends you to third frame.
1st frame, start button (just wrote start, didn't try to add navigation yet)
2st frame, game area.
3st frame, game over text.
When I start the animation, it passes through 1st frame and comes to second. I've written "stop()" at top of this frame so we can play now.
var kalanMeyve = 7;
// this fruit instance, click event, bind same function but remove yourself (this.instance)
this.ananas.addEventListener("click", fl_MouseClickHandler.bind(this.ananas));
this.armut.addEventListener("click", fl_MouseClickHandler.bind(this.armut));
this.cilek.addEventListener("click", fl_MouseClickHandler.bind(this.cilek));
this.domates.addEventListener("click", fl_MouseClickHandler.bind(this.domates));
this.kirmizibiber.addEventListener("click", fl_MouseClickHandler.bind(this.kirmizibiber));
this.muz.addEventListener("click", fl_MouseClickHandler.bind(this.muz));
this.sogan.addEventListener("click", fl_MouseClickHandler.bind(this.sogan));
function fl_MouseClickHandler() {
this.parent.removeChild(this);
kalanMeyve--;
if(kalanMeyve == 0)
{
//alert here works when game over
}
}
All instances, variables etc. are correct. In fact, when I try to check if my if statement working, it works. I can put an alert when the game is over. But can't navigate to another frame.
Related
I am writing my first website, where a user's goal is to choose an object with the fastest bpm(rhythm). There are 2 big objects with 2 different bpm's, each of them is activated when you place a cursor on it (i use event listener with mouseover).
I decided to make a delay between "rhythm switching" because when a user moves his cursor quickly from one object to another, the next rhythm plays immediately and it feels uncomfortable.
But with code below the whole rhythm playing system breaks and rhythm starts playing even if the cursor is not hovering over the object (it happens if you quickly move the cursor over and back again the object several times). Clearing the interval of the timer used for rhythm playing doesn't help.
If the commented part is uncommented and the "if" part is commented, then everything works fine but I don't get the delay.
t0 is a time measured when mouseout event happens. play_bpm1 is a function executed on mouseover event for the first object. There is the same function for the second object. pla() is used to play one beat immediately, play(bpm) is a function using pla() with setInterval, so when executed rhythm starts playing. rtimer is a timer which is used in play(bpm) with setInterval.
var play_bpm1 = function(){
if(performance.now()-t0 <= (60000/bpm2)){ //delay between rhythm switching
rdelay1 = setTimeout(function(){
clearInterval(rtimer);
pla();
play_rt(bpm1);
}, (60000/bpm2)-(performance.now()-t0) )
}
else{
clearInterval(rtimer);
pla();
play_rt(bpm1);
}
// pla();
// play_rt(bpm1);
}
I have an HTML issue. This is for a intro web programming class that I have no clue what is going on.
Some web pages are written in a comibination of HTML and JavaScript. In this Application, you will create a video game using HTML and JavaScript. The idea of the game is that an image will move on screen randomly and the player will try to click the image as many times as possible before time runs out. The score will increase each time the player successfully clicks the image.
Perform the following steps:
Create a Web page called “game.html” and place it in the root directory. To that page, add a layer, which will be treated as an object, with an image for its contents. Add another image which will start the game when clicked on. When the game starts, the layer, including the image, will move randomly in any direction but not more than 10 pixels. The layer will not leave the visible screen space. You may assume an 800x600 resolution setting. Be creative when choosing your images, but avoid anything that may be considered explicit or offensive.
Add a timer, or loop, to determine how long the game will run. This should be set to 30 seconds. You will need to experiment to determine how many times a loop must repeat to make it last 30 seconds. One of the ways to accomplish this is by using the command “setTimeout()” which executes a code some time in the future. As an example, the following command will call the function “FlyLogoIE” exactly 50 milliseconds after this line is executed:
setTimeout("FlyLogoIE()",50);
The game should proceed as follows:
The score starts at 0. Each time the user clicks the image, one point is added to the score. This score is constantly displayed either on the status bar or somewhere in the background.
On every click, the layer also moves randomly, by not more than 10 pixels, to another part of the screen.
The game continues until the time runs out. Optionally, a dialog box appears telling the user his or her final score. The user now has the option to restart the game by clicking the “Start” image again.
For an extra challenge, implement levels of difficulty for the game. Add instructions that prompt the user for the level of difficulty at which he or she wants to play. A higher level of difficulty would correspond to either faster motion, a smaller target, or both. Perform this step only if all other requirements are met and you still have time before the due date. No extra points will be given to you for this step.
Add a link from your homepage to this web page.
Test the code thoroughly before publishing it.
Here is what I've done so far, but am lost. Can you help?
<Layer Name="game" LEFT=400 TOP=500>
<a href="#" onClick="return moveGame()";> Start! </a>
<br>
<IMG <span id= "Game" style= "left: 100px; top 100px; position; absolute;" SRC="/pics/drone.jpg" alt="drone" width="100">
<script>
<SCRIPT LANGUAGE="javascript">
function moveGame(){
var x;
x = Math.floor(Math.random()*4+1);
if (x==4 && game.style.pixelLeft>=10) {game.style.pixelLeft-=10;}
if (x==3 && game.style.pixelRight>=5) {game.style.pixelRight-=5;}
if (x==2 && game.style.pixelUp>=10) {game.style.pixelUp-=10;}
if (x==1 && game.style.pixelDown>=5) {game.style.pixelDown-=5;}
setTimeout("moveGame()",50);
}
</script>
</layer>`
Start of with something like this:
JS:
// timer
var gameLength = 30 * 1000; // 30 seconds
function startGame(){
runGame();
setTimeout( endGame, gameLength );
}
function endGame(){
// stop listening for click
}
function runGame(){
// register click listeners
// main game loop
}
var myElement = {
htmlElement: "img",
onClick: function(){ /* do stuff */ },
moveRandomly: function(){ /* do stuff */ },
state: 'listening' // or not
}
var viewPort = {
htmlElement: 'div',
draw: function(){ /* do stuff */ }
}
This is really just to get you started. There is more and it could be written better. You need to Object Orient this stuff so that each component is easy to understand, easy to modify, and then you'll be on your way in programming.
Part of learning programming is the struggle. Most everyone has been there. Don't give up.
I've been trying to solve this for several time, but I'm now pointless with this situation. I'm creating a HTML5 canvas project in Flash CC, I'm kinda new in JS (not difficult BTW), the point is, I have around 10 keyframes inside my main timeline, and some classic buttons, all I need to do is to navigate inside every frame when a button is pressed (pretty easy uh!) the trouble is, the first frame works perfectly, but from 2 to the others, I can't be able to use buttons, interactivity is being programmed as follows:
var self = this;
this.stop();
this.btn4.addEventListener("click", clickUno);
function clickUno() {
self.gotoAndPlay(1);
}
Any help will be really appreciated, I just don't know why 1st frame works great, but others doesn't!
I had similar issues with canvas with flash.
I needed to created completed new buttons on every instance you need a button to get code to work. (ODD I know.)
Button code.
this.getinsideIt.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_9.bind(this));
function fl_ClickToGoToAndPlayFromFrame_9()
{
this.Mygreatmovie.gotoAndPlay(350);
}
As I understand, you need a button, clicking on which proceeds your animation 1 frame at a time. Correct?
You should make use of the currentFrame and totalFrames properties of the main stage for this. Query the current frame and move on to next!
var self = this;
this.stop();
if(!this.btn4.hasEventListener("click", clickUno))
this.btn4.addEventListener("click", clickUno);
function clickUno(e) {
var curr = self.currentFrame;
var total = self.totalFrames;
self.gotoAndStop((curr + 1)%total);
}
I am researching setting up a script that will show certain notes along with accompanying music tracks. Basically I need certain times in the audio track to trigger events. I have seen I could use the currentTime similar to the following, but I am getting hung up on a good way to make a concise function to move between frames and move back and firth if there is a rewind etc. Help's appreciated greatly!
$("#ogg_player_1_obj").bind('timeupdate', notePosition);
function notePosition(){
myVid=document.getElementById("ogg_player_1_obj");
mct=myVid.currentTime;
//SET Frame based on time???
}
function notePosition(){
//your code.
if(frame1start <= mct && frame1end >= mct) {
$(".frame").fadeOut(100);
$("#frame1").fadeIn(100);
}
//and again for every frame.
}
This works if you put every frame in a seperate element with class frame and the id frame + number.
I want to load a youtube clip on a page, and along with the clip I want to add a top (HTML) layer that will work somewhat like youtube's own annotation functionality.
In bullets:
- User will see a YT clip (probably in a custom player)
- Depending on the current time of the clip, I need JS to load information on a layer on top of the clip.
So:
For example, from 0.00 to 0.05 you see a piece of text on top of the clip
From 0.05 to 0.30 no text
From 0.30 to 0.37 text again
etc etc
Any ideas on how to approach this? I realize Youtube's Player API has the functionality to getCurrentTime
But how would I go on write a piece of JS to "play along" with the clip on a div layer on top of the clip?
The way to achieve this is indeed to do with the getCurrentTime method on the yt api, specifically, call it in a repeating function with the help of setInterval.
You will need to keep an array of overlays you wish to present, along with the from and to time, something like:
var overlays = [
{text:"Some text",from:1,to:6},
{text:"Some other text",from:8,to:14}];
Then, you'll need a couple of functions to handle the movie playing and stoping (or pausing).
var watchId;
function startWatch(){
watchId = setInterval( function(){
showOrHideOverlay(ytplayer.getCurrentTime());
},1000)
}
function stopWatch(){
clearTimeout(watchId);
}
You'll notice that uses a variable ytplayer and according to the jsapi documentation this can be grabbed using the following code:
var ytplayer ;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
Notice in there ive attached an event listener, this leads us to a method to handle the movie state changing
function onytplayerStateChange(newState) {
if(newState == 1){ // playing
startWatch()
}
else if(newState == 0 || newState == 2){ //ended or paused
stopWatch();
}
}
So the last piece of the puzzle is actually handling a "tick" which ive set to occur every second. This method showOrHideOverlay looks like:
function showOrHideOverlay(time){
// find overlays which should be visible at "time"
var shownOverlays = false;
for(var i=0;i<overlays.length;i++){
if(overlays[i].from < time && overlays[i].to > time){
$('#overlay').text(overlays[i].text);
shownOverlays = true;
}
}
if(!shownOverlays)
$('#overlay').text("");
}
Finally, the live example: http://jsfiddle.net/zTZjU/ (Just press play on the clip)
Check this fiddle: http://jsfiddle.net/rEeJS/
I added wmode="transparent" to allow the overlay to appear in Chrome.