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.
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'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.
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.
Is it possible to set the loop count of a GIF image using JavaScript and then publish an event when it stops playing?
For example something like:
//html code
<img src="myImage.gif" id="img1"/>
//Javascript code
var image = document.getElementById('img1');
//Image must stop playing after 3 loops
image.setLoopCount = 3;
here is how i would suggest doing it:
extract frames form gif file (you can do it online using for instace -> http://imgops.com/)
use javascript to change pictures, simulating animation (that way you can keep track of how many loops you have done)
Here is a jsFiddle link http://jsfiddle.net/qustosh/n5zWH/9/
I used jQuery. I did three loops and i threw a callback function at the end.
For a design side solution, you can set the GIF image to only loop a certain number of times with Photoshop. Then just use window.setTimeout(callback, milliseconds) to trigger your custom event.
You can calculate the time out from the interval used to display each frame of the animation.