Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've made a few changes to my function, and now have the follwing code:</p> <pre><code>/*Add an event listener to the page to listen for a click on the tick or the cross, if the user clicks the right one to indicate whether the image and word relate to the same number or not, increase the user's score*/ myGameCanvas.addEventListener('click', function(e){ console.log('click: ' + e.pageX + '/' + e.pageY); var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; /*If the tick is clicked, check whether or not the image and word represent the same number, if they do, increase the score, if not, leave the score as it is*/ if((mouseX &gt; 250 &amp;&amp; mouseX &lt; 300) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage == drawnWord)){ currentScore = currentScore + 5; var scorePositionX = currentScorePositionX; var scorePositionY = currentScorePositionY; context.clearRect(scorePositionX, scorePositionY, 30, 30); /*Clear the old score from the canvas */ context.strokeText(currentScore, 650, 50); /*Now write the new score to the canvas */ console.log('Current Score = ' + currentScore); } else if((mouseX &gt; 250 &amp;&amp; mouseX &lt; 300) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage != drawnWord)){ currentScore = currentScore; console.log('Current Score = ' + currentScore); /*If the cross is clicked, check whether or not the image and word represent the same number, if they don't, increase the score, otherwise, leave the score as it is*/ } else if((mouseX &gt; 350 &amp;&amp; mouseX &lt; 400) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage != drawnWord)){ currentScore = currentScore + 5; context.clearRect(currentScorePositionX, currentScorePositionY, 20, 20); /*Clear the old score from the canvas */ context.strokeText(currentScore, 500, 50); /*Now write the new score to the canvas */ console.log('Current Score = ' + currentScore); } else if ((mouseX &gt; 350 &amp;&amp; mouseX &lt; 400) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage == drawnWord)){ currentScore = currentScore; console.log('Current Score = '+ currentScore); } else { console.log('The click was not on either the tick or the cross.'); } }, false); </code></pre> <p>This is now displaying the current score, and updating it every time the user correctly selects the tick or the cross, however, when drawing the new score to the canvas each time, rather than removing the previous drawing of the score and writing the new score in its place, it simply writes it over the top, so both the old score and the new score are displayed in the same location- which is a bit of a mess, and makes it hard to read.</p> <p>Also, the location and font &amp; size of the score are not where I had intended- I had intended that it be displayed in my 'score bar' as previously mentioned, however, it is now displayed below the score bar, on the main 'display' section of the canvas. Also the font is different- the numbers are not displayed as usual characters, i.e. 5, 10, etc, but the font is larger, and is like 'bubble writing', with white space in the middle of the digits. The font is also much larger- at least twice the size of the text I have displayed in the 'score bar'.</p> <p>Could someone point out to me what I'm doing wrong here? Thanks very much!</p>
    singulars
    1. This table or related slice is empty.
    1. PORe-writing a JavaScript variable to HTML5 canvas when the value of the variable has been updated
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USSomeone2088
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COThis should be asked in a new question.
      singulars
      1. PO
      1. USElliot Bonneville
    2. CO@danp You said "Something that may not have occurred to you, is that canvas elements can be transparent, and stacked on top of each other. This way, you could have a GUI only canvas, and an action canvas, and keep them separate. Absolute positioning will make this work, if you're not confident in css, and want an example, just say." Would it be possible to have an example of this?
      singulars
      1. PO
      1. USSomeone2088
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload