|
JavaScript - Click Track For Js Game
I've been playing around on my off time from other work to learn javascript better so I made this little php javascript game that randomly puts 10 boxes in different locations in a 10x10 table. The object is to close the boxes by clicking them and get timed on how long it takes to close all 10 boxes.
The problem is you can click the same box real fast and only have to click a couple boxes for the timer to stop. So what I'd like to know what is the best way to only accept one click for each box generated. Here is what I'm using so far for the click validation: Code: <script language="javascript">
var tovalidate = 10;
function validate()
{
tovalidate -= 1;
if(tovalidate === 9)
starttimer();
if(tovalidate === 0)
stoptimer();
}
</script>
And using Jquery to fade the boxes pretty after click and trigger the validator: Code: <script>
$("#<?=$c;?>").click(function () { /*where $c is id generated for each specific box */
$("#<?=$c;?>").fadeOut("slow");
validate();
});
</script>
Similar TutorialsHi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! 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! Hi, I am trying to create a small art project where I want to track real-time visitors on my site. I am not very good at coding at all and am really struggling to know how to go about this To give you an idea of what I want to achieve; a basic example would be for every live visitor on my site, a circle would appear on the index page. I am aiming for the end product to be a very basic visualisation of live visitors on the site. So just a group of circles representing how many people are on the site. I am really struggling to get to grips with the coding needed and would hugely appreciate your help. Thank you very much for your time, All, Say I have a four part process to add something to my website. I'd like to have a bar at the top of my page (if you need an example, something simliar to FedEx to show where you package is along the way) that will get updated upon each page move so the user knows how far along they are in the process and how much farther they have to go? Any type of tutorials or ideas (whether it's PHP and jQuery or any other combination) I'd greatly appreciate them. Thanks in advance for any guidance. Thanks. Is there anything wrong with the code below? - it doesnt seem to track the links, (which it suppose to do inside img.php) Code: // IMAGERY SYSTEM
function Imagery(img)
{
ajax = ajaxFunction();
var url = base_url+"application/imagery/img.php?img="+img;
ajax.open("GET",url,true);
ajax.send(null);
}
Link Code: <a href="http://google.com" onClick="Imagery('545');">
without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events? for instance, i have a website i log into that has a "submit" button. the button itself only has this code: Code: <input type="image" class="png" tabindex="5" value="Go" src="login.png"> obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case. consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly. any help!? Hi All, I have to know whether we can track the direct browser closing event by Javascript. I have tried with window.unload & window.onbeforeunload, but I was not get full satisfaction with those ones. Please let me know if anybody have any kind of solutions other than those specified above. advance thanks... Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Hey guys just need a little help. I need to create a little script that clicks a link automatically and opens it up in a new page. So far I have this: Code: <head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>
It works but the problem is that IE popup blocker keeps blocking the new window. Is there a way to do the same thing with javascript without it having blocked by IE popup blocker? 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. need to make "left click" act as "middle click" -------------------------------------------------------------------------------- I need to make "left click" act as "middle click" for a web site ....thank you in advance for any and all help... [CODE] <script language="javascript"> function Click(4) { if (event.button==0; 1; ) } document.onmousedown </script>> Hello all, * I'm very new to javascript and working on a quiz game. Theres a set of code im working on but i need help, and greatly appreciate any help. * After every questions, there is a tick or wrong animation/image that should pop over the answer card. I created the gif file one for a tick and one for a wrong: http://www.freeimagehosting.net/cqn91 http://www.freeimagehosting.net/v74v6 *By right the user should not be able to click on the answer cards anymore after finishing the quiz. For now the score keeps going up although the quiz is done. And after the quiz is done, a button should direct the user to the DetailedResult page, instead of the popup. *How to change the popup into a Html(DetailedResult) page, and instead of a text eg.(resent.jpg), how can I make the real image show, and if the qn is correct, how can I place a tick and if the qn is wrong how can I place a wrong image. Ive created both images. tick image==>http://i1069.photobucket.com/albums/...ttica/tick.jpg wrong image==>http://i1069.photobucket.com/albums/...ca/wrong-1.jpg *Suppose at the bottom of the html page, should have a button for the user to retry only wrong answers. *And how do i keep updating the user score for each attempt he tries on the table. Below are a set of code i'm working on, and another set of Html layout(DetailedResult) which i intend to achieve. Code: <!DOCTYPE HTML>
<html>
<head>
<title> Card Test </title>
<style>
img { margin:7px; }
#Question {
text-align:left;
font-family:"Vladimir Script";
font-size:40px;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/private....pm&pmid=124136
var baseURL = 'http://s1069.photobucket.com/albums/u475/felettica/';
var questions = [
// format [pic,[image1,imag2,image3]],
['happy.jpg', ['*|delight.jpg','|sad.jpg','|confuse.jpg']], // 0
['angry.jpg', ['|sad.jpg','*|resent.jpg','|joyful.jpg']], // 1
['father.jpg',['|sister.jpg','|mum.jpg','*|dad.jpg']], // 2
['sports.jpg',['|crying.jpg','*|soccer.jpg','|sleep.jpg']], // 1
['fruit.jpg', ['*|apple.jpg','|meat.jpg','|bacon.jpg']], // 0
];
var qNo = 0;
var correct = [];
function $_(IDS) { return document.getElementById(IDS); }
function NextQuestion(IDS) {
var response;
switch (IDS) {
case 'image1' : response = 0; break;
case 'image2' : response = 1; break;
case 'image3' : response = 2; break;
}
if (response == currentQuestion[4]) {
correct[0]++;
alert('Well Done');
} else {
alert('Wrong Answer');
}
correct.push(currentQuestion.join('|')+'|'+response); // alert(correct.join('\n'));
qNo++;
if (qNo < questions.length) {
$_('score').innerHTML = 'Sco '+correct[0];
showImages(qNo);
$_('Question').innerHTML = 'Question: '+(qNo+1);
} else {
$_('score').innerHTML = 'You had '+correct[0]+' correct answers for '+questions.length+' questions';
DisplayQuizResults();
// alert('End of quizi\n\n'+correct.join('\n'));
return;
}
// I created a two .gif animation of a tick and a wrong
// but unsure how to place it so that it appears on the
// correct answer image instead of the alertbox.
// Tick animation Url==> http://www.freeimagehosting.net/cqn91
// Wrong animation Url==>http://www.freeimagehosting.net/v74v6
// I tried to add a button to direct to the DetailedResult page
// which shows the correct and wrong questions but it didnt appear.
// It should appear after the alert('End of quiz'); pops up.
}
var currentQuestion = [];
function showImages(ptr) {
var tarr = []; var tmp = '';
currentQuestion = [];
currentQuestion.push(questions[ptr][0]); // 0
temp_questions = questions[ptr][1].slice();
temp_questions.sort(randOrd);
for (var i=0; i<3; i++) {
tarr = temp_questions[i].split('|')
if (tarr[0] != '') { tmp = i; } // save correct answer
currentQuestion.push(tarr[1]); // 1,2,3 // save response order
}
currentQuestion.push(tmp); // 4
$_("Pic").src=baseURL+currentQuestion[0];
$_("image1").src=baseURL+currentQuestion[1];
$_("image2").src=baseURL+currentQuestion[2];
$_("image3").src=baseURL+currentQuestion[3];
}
function randOrd() { return (Math.round(Math.random())-0.5); }
window.onload = function() {
correct = []; correct.push(0);
questions = questions.sort(randOrd);
showImages(0);
}
// Following from: http://www.yourhtmlsource.com/javascript/popupwindows.html
function DisplayQuizResults() {
var generator=window.open('','name','height=400,width=500');
generator.document.write('<html><head><title>Popup</title>');
generator.document.write('<link rel="stylesheet" href="style.css">');
generator.document.write('</head><body>');
var str = '';
var tarr = [];
// correct array format: item +|+ question +|+ answer +|+ response
var str = '<h1> Your Results</h1>';
for (var i=1; i<correct.length; i++) {
tarr = correct[i].split('|'); // item|img1|img2|img3|ans|resp
str += 'Question #'+i;
str += ' was: '+tarr[0];
str += '<br>Correct answer was: '+tarr[4] +'('+tarr[tarr[4]*1+1]+')';
if (tarr[4] != tarr[5]) {
str += ' but your answer was: '+tarr[5] +'('+tarr[tarr[5]*1+1]+')';
}
str += '<p>';
}
generator.document.write('<p>'+str+'<p>');
generator.document.write('<p><a href="java_script:self.close()">Close</a> the popup.</p>');
generator.document.write('</body></html>');
generator.document.close();
}
</script>
</head>
<body>
<div id="Question">Question: 1</div>
<div align="center">
<img id="Pic" src="" height="220" width="321"> <p>
<img id="image1" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<img id="image2" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<img id="image3" src="" width="269" height="171" onclick="NextQuestion(this.id)">
<p> <span id="score">Sco </span> <p></div>
</body>
</html>
================================================ Instead of the popup, instead i thought having it on a Html page (DetailedResult), the layout below ================================================ Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
Table{
position:absolute;
left:632px;
top:97px;
width: 408px;
border:1px solid black;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table width="472" border="0" cellspacing="0" cellpadding="0"> <!--In the table,the scores of the user should appear for the the current attempt and previous attempts so that the user can track his scores-->
<tr>
<th width="227" scope="row"><strong>My Attempts</strong></th>
<td width="181"> <div align="center">My sco </div></td>
</tr>
<tr>
<th height="19" scope="row">1st Attempt</th>
<td><div align="center">4/5</div></td>
</tr>
<tr>
<th scope="row">2nd Attempt</th>
<td> </td>
</tr>
<tr>
<th scope="row">3rd Attempt</th>
<td> </td>
</tr>
</table>
<h1> My Current Attempt </h1>
<p> </p>
<p>Question 1: "code to get Qn 1 image" "either tick image or wrong image" </p> <!-- For each qn, its picture will appear and either a tick or wrong image next to it. If the user answer it correctly, then a tick will appear or other wise. The image of the question would be smaller. -->
<p>Question 2: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p>Question 3: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p>Question 4: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p>Question 5: "code to get Qn 1 image" "either tick image or wrong image"</p>
<p><button type="button">Retry Wrong Question</button><p> <!-- direct page to retry wrong qns once more -->
<!-- tick image URL:http://i1069.photobucket.com/albums/...ttica/tick.jpg
wrong image URL http://i1069.photobucket.com/albums/...ca/wrong-1.jpg
baseURL:http://s1069.photobucket.com/albums/u475/felettica/ -->
</body>
</html>
Hi guys I need some help with a 2d game that i am making. i am almost done i need only a loading screen but its not working i got this javascript file thats getting an error about : assetsloader is not defined. Maybe you guys can help me. Here is the code: Code: // awesome goblin game
// assetLoader
/**
* Ensure all assets are loaded before using them
* @param {number} dic - Dictionary name ('imgs', 'sounds', 'fonts')
* @param {number} name - Asset name in the dictionary
*/
function assetLoaded(dic, name) {
// don't count assets that have already loaded
if (this[dic][name].status !== 'loading') {
return;
}
this[dic][name].status = 'loaded';
assetsLoaded++;
// progress callback
if (typeof this.progress === 'function') {
this.progress(assetsLoaded, this.totalAssest);
}
// finished callback
if (assetsLoaded === this.totalAssest && typeof this.finished === 'function') {
this.finished();
}
}
// before assetLoader.finished()
/**
* Show asset loading progress
* @param {integer} progress - Number of assets loaded
* @param {integer} total - Total number of assets
*/
assetLoader.progress = function(progress, total) {
var pBar = document.getElementById('progress-bar');
pBar.value = progress / total;
document.getElementById('p').innerHTML = Math.round(pBar.value * 100) + "%";
}
/**
* Show the main menu after loading all assets
*/
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
function mainMenu() {
$('#progress').hide();
$('#main').show();
$('#menu').addClass('main');
}
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero_sheet.png";
// Treasure image
var treasureReady = false;
var treasureImage = new Image();
treasureImage.onload = function () {
treasureReady = true;
};
treasureImage.src = "images/treasure.png";
// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";
// Game objects
var backgrounder = {
speed: 0,
x: 0,
y: 0
};
var hero = {
speed: 256, // movement in pixels per second
x: 0,
y: 0
};
var monster = {
speed: 256,
x: 0,
y: 0
};
var treasure = {
x:0,
y:0
};
var treasureCaught = 0;
var treasureTimer= 0;
var treasureTime= 50;
var monstersCaught = 0;
var delta = 0;
var lives = 3;
var directionMonster = 0;
var directionDuration = 20;
var goThisWay = 1;
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
//restart the game
var restartGame = function (){
//when you die screen turns black
ctx.fillStyle="#000000";//color
ctx.fillRect(32,32,canvas.width-64,canvas.height-64);//draw rectangle with the bushes still in place
//show that you're dead
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.textAlign = "center";
ctx.fillText("GameOver Press R to reset",canvas.width/2, canvas.height/2);
//R to reset pressed
if (82 in keysDown){
//reset assets
lives = 3;
treasureCaught = 0;
}
};
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
//check if hero walks from screen
if (hero.y <= 32){
//if hero walks from screen top, stay at exact y axle
hero.y = hero.y;
}
else{
//move hero up
hero.y -= hero.speed * modifier;
}
// end of upmovement
}
if (40 in keysDown) { // Player holding down
//check if hero walks from screen
if (hero.y >= canvas.height -64){
//if hero walks from screen bottom, stay at exact y axle
hero.y = hero.y;
}
else{
//move hero down
hero.y += hero.speed * modifier;
}// end of downmovement
}
if (37 in keysDown) { // Player holding left
//check if hero walks from screen
if (hero.x <= 32){
//if hero walks from screen left, stay at exact x axle
hero.x = hero.x;
}
else{
//move hero left
hero.x -= hero.speed * modifier;
}//end of left movement
}
if (39 in keysDown) { // Player holding right
//check if hero walks from screen
if (hero.x >= canvas.width -64){
//if hero walks from screen right, stay at exact x axle
hero.x=hero.x;
}
else{
//move hero right
hero.x += hero.speed * modifier;
}//end of right movement
}
// Are they touching? MONSTER
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
--lives;
reset();
}
// Are they touching? TREASURE
if (
hero.x <= (treasure.x + 32)
&& treasure.x <= (hero.x + 32)
&& hero.y <= (treasure.y + 32)
&& treasure.y <= (hero.y + 32)
) {
treasureTimer = treasureTime;
++treasureCaught;
}
};
//make our monster move :)
var monsterMove = function (modifier){
++directionMonster;
if (directionMonster <= directionDuration){
//bewegingen
//rechts => links
if (goThisWay == 1) {
monster.x = monster.x - (monster.speed * modifier);
if (monster.x <= 32){
goThisWay = 2;
}
}
//links => rechts
if (goThisWay == 2) {
monster.x = monster.x + (monster.speed * modifier);
if (monster.x >= canvas.width-64){
goThisWay=1;
}
}
//boven => onderen
if (goThisWay == 3) {
monster.y = monster.y + (monster.speed * modifier);
if (monster.y >= canvas.height-64){
goThisWay=4;
}
}
//onderen => boven
if (goThisWay == 4) {
monster.y = monster.y - (monster.speed * modifier);
if (monster.y <= 32){
goThisWay=3;
}
}
//bepalen welke richting
if (directionMonster ==directionDuration){
directionMonster = 0;
goThisWay = Math.floor((Math.random() * 4) + 1);
//console.log (goThisWay);
}
}
};
// Draw everything
var render = function () {
if (bgReady) {
//backgrounder.x = backgrounder.x +1;
backgrounder.x = 0;
ctx.drawImage(bgImage, backgrounder.x, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
if (treasureReady) {
ctx.drawImage(treasureImage, treasure.x, treasure.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Treasure caught: " + treasureCaught, 32, canvas.height-64);
ctx.fillText("Lives: " + lives, 32, 32);
};
var spawnTreasure = function(){
if (treasureTimer >= treasureTime){
treasure.x = 32 + (Math.random() * (canvas.width - 64));
treasure.y = 32 + (Math.random() * (canvas.height - 64));
treasureTimer = 0;
}
++treasureTimer;
};
// The main game loop
var main = function () {
var now = Date.now();
delta = now - then;
if (lives > 0){
update(delta / 1000);
render();
monsterMove(delta / 1000);
spawnTreasure();
}
else {
restartGame();
}
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
var then = Date.now();
reset();
main();
Reply With Quote 01-14-2015, 10:11 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts In the code you posted there are no references to assetsLoader at all. There is exactly one reference to assetLoader (without the 's') and that is to add a progress() function to every occurrence of the assetLoader object that you haven't defined (at least not in the code you posted). 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 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? 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. 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 What 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. |
|||||||