|
JavaScript - Number Guessing Game
Hello!
So, here is my problem. I have to write a number-guessing game that prompts the visitor to guess the right number in a maximum of 4 attempts. If the visitor guesses the target number within 4 tries, I want to write an alert that congratulates them as well as indicates the number of tries taken. If they guess incorrectly, I want to prompt with "Try again." And I finally want to keep track of each number they typed with a document.write. I have something like this, but its just not working out: Code: <script type="text/javascript">
var count = "" ;
if (count >=0 && count <=88) {
for (i=1; i<=4; i++) {
count = prompt("I'm thinking of a number between 0-88. Can you guess it?", "");
document.write("Guess #" + i + ":" + count + "<br />");
}}
else if (count>88){
alert("Too high!")
}
else if (count=55){
alert("Congratulations, you guessed it in " + i + " tries!)
}
else{
alert ("Guess again!")
}
</script>
Thank you for your time. Similar TutorialsWhat I'm trying to achieve is it initialises a number between 1-2000 randomly. When the submit button is clicked it simply returns if the number that is in putted is higher or lower than the randomly initialised number. External JavaScript: Html Code: <html>
<head>
<script type="text/javascript" src="jsscri.js"></script>
</head>
<body onload="initialisation ()">
<form name="exampleform">
<h3>
Number: <input name="number" type="text"
onchange='checkNumber( this.value );'>
</h3>
<p>
<input name="submit" type="button" value="Guess"
onclick= 'checkValue()';/>
</p>
</body>
</html>
If you load this onto a webpage you'll see what i'm trying to do. I tried deleting the rest of the code to keep the size of the code down. Can someone guide me to what I am doing wrong. My book does not show how to do this. This is what I have to far.I am just getting more and more confused. I am suppose to have a button there asking write a timeout that asks users if they want to stop the game if they do not press the Guess button within 10 seconds. They are suppose to pick a number between 1-100. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Guessing Game</title> <script type="text/javascript"> while (runAgain == 'y' || runAgain == 'Y') { guessedNumber = reader.readDouble("Please pick a number between 1 and 100: "); while (guessedNumber != randomNumber) { if (guessedNumber < randomNumber) System.out.println("Too low!\nGuess again!"); else if (guessedNumber > randomNumber) System.out.println("Too high\nGuess again!"); else if (guessedNumber == randomNumber) System.out.println("You got it!"); } runAgain = reader.readChar("Play again (y/n)? "); } </script> </head> <body> <div id="content"> <h2>JavaScript Guessing Game</h2> <p>Enter a number between 1 and 100, then press the Guess button.</p> <form action="myForm" method="post"> <p><input type="text" name="guessgame" /> <input type="hidden" name="eGame" value="1"/> <input type="submit" value=" Guess" name="submit"/></p> </form> </body> </html> Absolutely nothing happens when I click on the button, and I know NOTHING about Java. Need serious help! The user is supposed to arbitrarily type a number (1-5) and see if it's the same one that JavaScript generates. The function "secretNum" is supposed to be a global variable, but I don't have a clue as to what that means. Anyways, an alert should pop up saying either congrats or try again. Code: <html>
<head>
<title>Guessing Game</title>
<script type="text/javascript">
function setUp ()
{
secretNum = 1+Math.floor(5*Math.random());
alert = (secretNum);
}
function checkGuess ()
{
userGuess = document.IfForm.guessBox.value;
userGuess = parseFloat(userGuess);
// get value from text box
if (secretNum == userGuess)
{alert ("Correct!");}
else
{alert ("Sorry, Try Again");}
}
</script>
</head>
<body style="text-align:center" onLoad="setUp();">
<h2>Guess the Number From 1 to 5</h2>
<form name="IfForm">
Enter Your Guess:
<input type="text" size="5" name="guessBox" value="" />
<br />
<input type="button" value="Check Guess" onClick="checkGuess" />
</form>
</body>
</html>
Hi everyone. Right now I'm doing a guessing game assignment for my class. I'm new to the forums so sorry if copy/pasting code into the thread here isn't the right thing to do. I have ran firebug a few times on this code and for some reason the variable "Football" is the only answer that is declared true. How can I fix this code so that all of the variables in the array display the true statement when typed in the box? Note: I have the questions looped to ask 3 times. Thanks! <html> <head> <h1>Welcome to the guessing game!</h1> <h2>Second Submission Attempt</h2> </head> <body> <script type = "text/javascript"> var sportsAry = new Array(6); sportsAry[0] = "Football"; sportsAry[1] = "Basketball"; sportsAry[2] = "Rollerblading"; sportsAry[3] = "Hiking"; sportsAry[4] = "Biking"; sportsAry[5] = "Swimming"; var firstName; var points = 0; var finalscore; var ask; do { firstName = prompt("Please enter your first name.",""); } while (firstName == "" || firstName == null || firstName == parseInt(firstName)); alert("Welcome to the Game, " + firstName + " !"); for (var count = 0; count < 3; count++){ ask = prompt("Please guess a sport : ",""); if (ask == null){ alert("You are chicken!!!"); } else if (ask == ""){ alert("You forgot to enter a game!"); count--; }else { for ( var i = 0; i < sportsAry.length; i++){ if (ask.toUpperCase() == sportsAry[i].toUpperCase()) { points +=5; alert("You have guessed correctly! You have gained 5 points"); break; }else if (ask.toUpperCase() !== sportsAry[i].toUpperCase()) { points -=5; alert("You have guessed incorrectly, you gain no points."); break; } } } } if (points == 15){ document.write(firstName + ", you are a mind reader!" + "<br>"); } else if (points < 15){ document.write(firstName + ", you are pretty good!"); }else { document.write(firstName + ", you do not display ESP tendencies at this time."); } </script> </body> </html> Good day. I'm working on a word guessing game. Simple premise, enter a letter, if it's in the mystery word it fills the asterick if not you keep guessing until it is guessed. However, I can't get it to fill in the astericks or to acknowledge when you've guessed it...soem help would be appreciated...thanks in advance. ao5431 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Guessing Game</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ var mysteryWord = "suspicious"; function checkGuess() { if (document.forms[0].letter.value != "") { var progress = document.forms[0].mysteryWord.value; var guess = document.forms[0].letter.value; document.forms[0].letter.value = guess; mysteryWordArray = mysteryWord.split(" "); var progressArray = progress.split(""); for (var i=0; i<mysteryWord.length; ++i) { var curLetter = mysteryWordArray[i]; if (curLetter == guess) progressArray[i] = guess; } progress = progressArray.join(""); if (progress == mysteryWord) document.forms[0].mysteryWord.value = "You guessed correctly! The mystery word is '" + progress + "'."; else document.forms[0].mysteryWord.value = progress; } else window.alert("You must enter a letter!"); } /* ]]> */ </script> </head> <body> <h1>Guessing Game</h1><hr /> <form action="" method="get" enctype="application/x-www-form-urlencoded"> <p>Mystery word: <input type="text" name="mysteryWord" value="**********" size="100" readonly="readonly" style="border: 0" /></p> <p>Enter a letter and click the Submit Letter button.</p> <p><input type="text" name="letter" size="2" /> <input type="button" value="Submit Letter" onclick="checkGuess()" /></p> </form><hr /> </body> </html> Im making a simple "gallow" guessing game. I got a virtual keyboard styled with boxes and onclick event, and a randomized guessing word when i click on button new game. Here is the virtual keyboard: Code: <div align="center" style="width: 700px; float: left;" id="keys">
<span onclick="selection(this)">Q</span>
<span onclick="selection(this)">W</span>
<span onclick="selection(this)">E</span>
<span onclick="selection(this)">R</span>
<span onclick="selection(this)">T</span>
<span onclick="selection(this)">Z</span>
<span onclick="selection(this)">U</span>
... all keys
+ a .css for looking like a keyboard - see picture at bottom</div>
The function that randomizes a word from the array of words + css styled boxes around the word chars. the array of words: Code: var strings= [ "indexof", "round", "fixed", "touppercase", "alert", "prompt"]; Code:
function newgame() {
document.getElementById('display').innerHTML = "";
var wordArr = strings[Math.floor(Math.random() * strings.length)].split("");
for (var i=0; i<wordArr.length; i++)
{
document.getElementById('display').innerHTML += '<span>'+wordArr[i]+'</span>';
}
}
css for this words Code: #display span {
border-top:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
width:10px;
background-color:gray;
text-align:justify;
padding:5px 10px;
}
#display span:first-child {
border:1px solid #000;
}
I also have function to colorize the pressed key on virtual keyboard-that colors it red-so the user knows it pressed it already Code: function selection(key) {
key.style.background = "red";
}
So now i have the question how do i make the guessing word - the boxes around chars without the chars - that the boxes are empty, but somehow the word stays in back of it or something like that -temporary save?.. I mean now i got [f] [i] [x] [e] [d], i wanna when i press new game to be like [] [] [] [] [].. and then i need to guess the word.. i press e on keyboard.. then it comes like this [] [] [] [e] []... Somehow i need to check if the pressed key on the keyboard is inside the word, and then show it in the box (but how).. then i press f -> [f] [] [] [e] [] .... and so on till i guess all of the word.. Here is an screenshot if u dont know what i mean.. http://img13.imageshack.us/i/printscreenshot1.jpg/ Thank you for helping! This is a simple basic game i want to make. Its a "What Am I" Riddle... The questions is (In HTML which i already know): I'm as light as a feather but no man can hold me for long. What am I? the answer is: Your Breath. (This is where the JAVASCRIPT comes in) Lets say they guess a rock, have a pop up say: Wrong Answer. Please try again. Lets say they guess Your breath -OR- Breath, have a pop up say: Correct! I want a text field where you can enter your answer, and if they choose ANYTHING but the 2 correct answers above, it will display please try again. Can anyone code this please? Thanks for reading. Ok so i want to work on an EASY basic game. As simple as Guess what number... But there are some twist... Ok So here is my example... (HTML, i know this.)I'm Guessing a number 1-99. What is it? (java) Lets say its 66 and they guess 53, have the text rusult be in a pop up window be: Too low! (java) Lets say they guess 78, have the text rusult be in a pop up window be: Too high! (java) Lets say they guess 100+, have the text rusult be in a pop up window be: Out of range! (java)But lets say they guess 66, have a text result be in a pop up window be: You've won! (java) I want a text field where you can enter your answer, and it will do the actions above. Can anyone code this? Thanks for reading! I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?
When I used toFixed() method on a number, I thought that this method round a number to a specified approximation, but I got a surprising result, the number became string! 15.23689 .toFixed ( 2 ) ==> "15.24" So does it convert the number into string? I have a game page on my site and I am trying to protect direct access to it by .htaccess .htpasswd but is not accepting user name and password? .htaccess: AuthUserFile /home/vhosts/kandcoentertainment.freetzi.com/.htpasswd AuthType Basic AuthName "game1" <Files "cookietest.html"> Require valid-user </Files> .htpasswd test:8888 Any suggestions on why it is not working? What I would like to do is have apay and play once setup but as I am a novice and dont have a clue HELP PLEASE!!! What I have been told is - protect the files, add a client side cookie to game page then upon url payment return validate cookie giving single access and when played the user cannot replay by refresh or just typing in url because cookie expired ? I have tried to write the scripts up with no success. I am creating a guessing word game and when the user types in a guess a pop-up tells the user how many letters the user got right to the actual answer. My problem is I can't seem to display the number of letters the user guessed right. This is what the function looks like: Code: function guessing()
{
words = "album";
guess = document.getElementById("txt1").value;
answer = document.getElementById("result").value = parseInt();
alert("You have " + answer + " matches");
used = false;
for(i = 0; i<=guess.length; i++)
{
for(j = 0; j<=answer.length; j++)
if(!used[j] && guess[i] == words)
{
alert("Congradulations! You got it!");
used[j] = true;
count++;
break;
}
else
{
count = 5;
while(count > 5)
{
alert("Sorry, that's game over!");
count++;
}
}
}
}
Hi! I am studying webdesign and we also go through a chapter of javascript-programming. Our first assignment is to create a dice game. I have written a code and in the beginning it worked, except that all the dices showed the same random number. I tried to fix that and now I do not know what I have done! In the game, you shall click on a link and the three dices will show random numbers. Here is my code: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tärningsspel</title>
<script type="text/javascript" language="javascript">
function showDice(imgNr) {
if (imgNr == 1) var imgUrl = "1.gif";
else if (imgNr == 2) var imgUrl = "2.gif";
else if (imgNr == 3) var imgUrl = "3.gif";
else if (imgNr == 4) var imgUrl = "4.gif";
else if (imgNr == 5) var imgUrl = "5.gif";
else if (imgNr == 6) var imgUrl = "6.gif";
document.tarning1.src = imgUrl;
document.tarning2.src = imgUrl;
document.tarning3.src = imgUrl;
}
function randomInteger() {
var randNumber = Math.random();
var randNumber = Math.floor(5*randNumber)+2;
return randNumber;
}
function showRandomPict() {
var imgNr = randomInteger(6);
showDice(imgNr);
var imgName = "tarning1" + imgNr;
var imgName = "tarning2" + imgNr;
var imgName = "tarning3" + imgNr;
}
function PlayAll(){
diceSwitch('tarning1', 'text1');
diceSwitch('tarning2', 'text2');
diceSwitch('tarning3', 'text3');
}
function diceSwitch(randNumber,textRuta){
var randNumber = randomInteger();
}
</script>
</head>
<body>
<p><b>Tärning 1:</b><br /><span id="text1">1</span></p>
<p><b>Tärning 2:</b><br /><span id="text2">2</span></p>
<p><b>Tärning 3:</b><br /><span id="text3">3</span></p>
<img src="1.gif" name="tarning1" onclick="javascript:diceSwitch('tarning1', 'text1')" />
<img src="2.gif" name="tarning2" onclick="javascript:diceSwitch('tarning2', 'text2')" />
<img src="3.gif" name="tarning3" onclick="javascript:diceSwitch('tarning3', 'text3')" />
<p><a href="javascript:PlayAll()">Spela alla!</a></p>
</body>
</html>
Thank you! Hello everyone. I have a tic tac toe game I am working on and I managed to make it so you can place X's and O's respectively. My next problem is making a win condition so it checks to see if the X's won the game or the O's did. Here is what I have so far. Edit fiddle - JSFiddle What I am basically thinking is that when you are clicking I want whatever letter it is that is placed to be saved and then I can check to see if all 3 are equal to that letter. It is a bit hard to explain. Essentially I want to make a win condition. If anyone could throw some assistance my way that would be great. I know for sure it requires a lot of checks because there are so many different ways of winning, I just need to know that initial one. Thank you very much. Hi every1! Got a task in university to make a memory game (card matching game). Thats what i've got so far: Code: var selected = 0;
var choiceOne;
var choiceTwo;
var matches = 0;
var numOfTries = 0;
var interval = 700;
var gamePlace = document.getElementById("wrap");
var backcard="img/memoryBg.png";
var timeStart;
var timeFinish;
var time;
function nameEnter(){
var name = prompt("Please enter your name");
if (name != null){
document.title =
"Welcome " + name + "!";
}
}
function game(){
var nOfPairs = document.getElementById("nPairs").value;
timeStart = new Date().getTime();
if (nOfPairs==1){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
}
if (nOfPairs==2){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==3){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==4){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==5){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==6){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards[10] = 'img/card6.png';
cards[11] = 'img/card6.png';
cards.sort(function shuffle() {
return Math.random() - 0.5;});
}
if (nOfPairs==7){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards[10] = 'img/card6.png';
cards[11] = 'img/card6.png';
cards[12] = 'img/card7.png';
cards[13] = 'img/card7.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if (nOfPairs==8){
var cards=[];
cards[0] = 'img/card1.png';
cards[1] = 'img/card1.png';
cards[2] = 'img/card2.png';
cards[3] = 'img/card2.png';
cards[4] = 'img/card3.png';
cards[5] = 'img/card3.png';
cards[6] = 'img/card4.png';
cards[7] = 'img/card4.png';
cards[8] = 'img/card5.png';
cards[9] = 'img/card5.png';
cards[10] = 'img/card6.png';
cards[11] = 'img/card6.png';
cards[12] = 'img/card7.png';
cards[13] = 'img/card7.png';
cards[14] = 'img/card8.png';
cards[15] = 'img/card8.png';
cards.sort(function shuffle(){
return Math.random() - 0.5;});
}
if(nOfPairs>8||nOfPairs<1){
alert("Please enter the number from 1 to 8");
}else{
for(i = 0; i<=nOfPairs*2-1; i++){
var cardDiv = document.createElement("div");
cardDiv.setAttribute("id",""+i+"");
cardDiv.style.height="65px";
cardDiv.style.width="65px";
cardDiv.style.float='left';
gamePlace.appendChild(cardDiv);
document.getElementById(""+i+"").innerHTML='<img src="img/memoryBg.png">';
cardDiv.onclick=function(){cardClick(this.id);};
}
}
function cardClick(card){
if (selected==2){
return ;
}
if (selected==0){
choiceOne=card;
document.images[card].src = cards[card];
selected = 1;
}else {
selected = 2;
choiceTwo = card;
document.images[card].src =cards[card];
var timer=setInterval(checking,interval);
}
function checking()
{
clearInterval(timer);
numOfTries++;
document.getElementById("tries").innerHTML = numOfTries;
if (cards[choiceTwo]==cards[choiceOne]){
matches++;
document.images[choiceOne].src = "img/memoryBgI.png";
document.images[choiceTwo].src = "img/memoryBgI.png";
//choiceTwo.onclick=null;
} else {
document.images[choiceOne].src = "img/memoryBg.png";
document.images[choiceTwo].src = "img/memoryBg.png";
selected = 0;
return ;
}
if (matches == nOfPairs){
timeFinish = new Date().getTime();
time = Math.round (((timeFinish - timeStart)/1000));
alert("Congrats! You needed " + numOfTries + " tries, and " + time + " seconds.");
}
selected = 0;
return ;
}
}
}
so the problem is, that I can just click 2 times on one card and it will look like a coincidence. My second problem is that when I have a real coincidence, I can still click on that card (by "real coincidence" i mean two same pics. so when i find them, they have to be not active, and when im clicking on them, they should just simply do nothing.). Can someone help me? Hi, i made a game,where you controll a paddle to bounce back a ball and it hits the bricks on top. The problem is that my eventhandlers don't work after i've added delay function,to make a counter(counting from 3 to 1 before game starts). Any tips?Is it scope problem? Code: var ballx = 100;
var bally = 100; //coord x and y,radius of a ball
var ballr = 10;
var recx;
var recy; //coord x and y,width and height of a paddle
var recw = 100;
var rech = 15;
var dx = 2; //x coord step for animated movement of ball
var dy = 2; //y coord step for animated movement of ball
var rx = 5; //x coord step for animated movement of paddle
var WIDTH; //width of main canvas
var HEIGHT; //height of main canvas
var ctx; //drawn shape
var leftDown = false;
var rightDown = false; //keyboard arrow buttons
var upDown = false;
var downDown = false;
var mouseXmin;
var mouseXmax;
var intervalId;
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;
var y=4;
window.addEventListener("load",init,false); //event for loading main func
window.addEventListener("keydown",buttonpressed,false); //event for checking if button is pressed
window.addEventListener("keyup",buttonreleased,false); //event to check if button is released
window.addEventListener("mousemove",mousemoved,false); //event for controlling paddle with mouse movement
function init_mouse(){ //initialize coord for mouse movement
mouseXmin = document.getElementById('can').offsetLeft;
mouseXmax = mouseXmin + (WIDTH-recw); //doesn't work that pretty...check?
}
function init_bricks(){ //initialize bricks
NROWS = 5;
NCOLS = 3;
BRICKWIDTH = (WIDTH/NCOLS) - 1;
BRICKHEIGHT = 15;
PADDING = 1;
bricks = new Array(NROWS);
for(i=0; i<NROWS; i++){
bricks[i] = new Array(NCOLS);
for(j=0; j<NCOLS; j++){
bricks[i][j] = 1;
}
}
}
function mousemoved(e){ //function that enables movement of paddle with mouse
if(e.pageX > mouseXmin && e.pageX < mouseXmax) recx = e.pageX ;//- mouseXmin; <---why would you need that?Movement is bugyy! FIX:)
}
function buttonpressed(e){ //to check if any of keyboard arrow buttons are pressed
if(e.which==37) { leftDown = true; }
if(e.which==39) { rightDown = true; }
if(e.which==40) { upDown = true; }
if(e.which==38) { downDown = true; }
}
function buttonreleased(e){ //function to check if button up,down,left or right is released
if(e.which==37) { leftDown = false; }
if(e.which==39) { rightDown = false; }
if(e.which==40) { upDown = false; }
if(e.which==38) { downDown = false; }
}
function clear(){ //function to clear the stage
ctx.clearRect(0,0,800,600);
}
function circle(x,y,r){ //function to draw circle shape
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
function rect(x,y,w,h){ //function to draw rectangle shape
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function checkforCoallision(){ //checks for borders of main canvas and if ball hits the paddle
if(ballx + dx > WIDTH-ballr || ballx + dx < ballr) dx = -dx;
if(bally + dy < ballr ) dy = -dy;
else if (bally + dy > HEIGHT - ballr){
if(ballx + ballr > recx && ballx + ballr < recx + recw)
dy = -dy;
else {clearInterval(intervalId); alert('Game Over,Baby!');} bounce();}
}
function draw(){ //function that draws the desired shapes and animates them
clear(); //clears the main canvas,so the animation would look smooth
checkforCoallision(); //checks for borders of main canvas and if ball hits the paddle
if(leftDown) recx -= rx; //enables movement of paddle right and left
if(rightDown) recx += rx;
for(i=0; i<NROWS; i++){ //drawing bricks
for(j=0; j<NCOLS; j++){
if(bricks[i][j] == 1) { //checking if brick exists
rect(j * (BRICKWIDTH+PADDING)+PADDING,i * (BRICKHEIGHT+PADDING) + PADDING, BRICKWIDTH, BRICKHEIGHT)
}
}
}
//have we hit a brick?
rowheight = BRICKHEIGHT + PADDING;
colwidth = BRICKWIDTH + PADDING;
row = Math.floor(bally/rowheight);
col = Math.floor(ballx/colwidth);
//if so, reverse the ball and mark the brick as broken
if (bally < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
dy = -dy;
bricks[row][col] = 0;
}
circle(ballx,bally,ballr);
rect(recx,recy,recw,rech);
ballx += dx;
bally += dy;
}
/* function init(){
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto
recx = WIDTH / 2; //setting the coord x of a paddle
recy = HEIGHT - rech; //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it
return intervalId;
} */
function delay() {
if(y<=0) {
document.getElementById('content2').innerHTML = "<canvas id='can' width='300' height='300'>This text is displayed if your browser does not support HTML5 Canvas.</canvas>";
ctx = document.getElementById('can').getContext('2d');
WIDTH = document.getElementById('can').offsetWidth ; //gets the width of main canvas
HEIGHT = document.getElementById('can').offsetHeight ; //gets the height of main canvastto
recx = WIDTH / 2; //setting the coord x of a paddle
recy = HEIGHT - rech; //setting the coord y of a paddle
init_mouse();
init_bricks();
intervalId = setInterval(draw,10); //calls draw func on desired interval,which is represented by number next to it
return intervalId;
}
else {
Object = document.getElementById('content2');
y = y - 1;
Object.innerHTML = "<div style='text-align:center;width:25em;margin: 0px auto;height:100px;position:absolute;top:50%;margin-top:-50px;'>"+y+"</div>";
setTimeout("delay()", 1000);}
}
How hard would it be to make a 2d game similar to super smash bros? Basically I want to have a scrolling position (instead of a static image, where the background is always the same) where when the user moves his character object, the area of vision moves with him. Also, will it work with using keyboard keys? I have to integrate it into a database and I know quite a bit of javascript so I am hoping it is possible. Thanks! Max Hello, I am trying to create a clock for my video game. I need to begin the clock at zero and count while the game is going. I need to have the clock count in standard minutes and seconds but not be based on the actual time of day. I am coding in javascript for an applet.
|
|||||||