dinasity
-
Posts
15 -
Joined
-
Last visited
dinasity's Achievements
Newbie (1/7)
0
Reputation
-
Hello Everyone, I'm trying to drag the cards that I "Deal", but nothing is happening. I'm not sure what I'm doing wrong... HTML::: <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="cards.css" rel="stylesheet" type="text/css" /><title> Card Game </title><script type='text/javascript' src='http://ajax.microsoft.com/ajax/jQuery/jquery-2.0.2.js'></script><script type='text/javascript' src="./jquery-ui.js"></script><script type="text/javascript"> $(document).ready(function () {$('#deal').click(function () { dealCard(randomCard());});var cardsInDeck = new Array();var numberOfCardsInDeck = 52;cardsInDeck[0] = "2_of_clubs";cardsInDeck[1] = "8_of_hearts";cardsInDeck[2] = "king_of_diamonds";cardsInDeck[3] = "queen_of_spades2";cardsInDeck[4] = "8_of_diamonds";cardsInDeck[5] = "queen_of_hearts2";cardsInDeck[6] = "ace_of_hearts";cardsInDeck[7] = "8_of_clubs";cardsInDeck[8] = "10_of_spades";cardsInDeck[9] = "jack_of_spades2";cardsInDeck[10] = "3_of_spades";cardsInDeck[11] = "5_of_hearts";cardsInDeck[12] = "king_of_clubs2";cardsInDeck[13] = "6_of_hearts";cardsInDeck[14] = "2_of_diamonds";cardsInDeck[15] = "8_of_spades";cardsInDeck[16] = "2_of_hearts";cardsInDeck[17] = "9_of_clubs";cardsInDeck[18] = "2_of_spades";cardsInDeck[19] = "9_of_diamonds";cardsInDeck[20] = "3_of_clubs";cardsInDeck[21] = "9_of_hearts";cardsInDeck[22] = "3_of_diamonds";cardsInDeck[23] = "9_of_spades";cardsInDeck[24] = "3_of_hearts";cardsInDeck[25] = "10_of_clubs";cardsInDeck[26] = "4_of_clubs";cardsInDeck[27] = "10_of_diamonds";cardsInDeck[28] = "10_of_hearts";cardsInDeck[29] = "4_of_diamonds";cardsInDeck[30] = "ace_of_clubs";cardsInDeck[31] = "4_of_spades";cardsInDeck[32] = "ace_of_diamonds";cardsInDeck[33] = "5_of_clubs";cardsInDeck[34] = "ace_of_spades";cardsInDeck[35] = "5_of_diamonds";cardsInDeck[36] = "5_of_hearts";cardsInDeck[37] = "jack_of_clubs2";cardsInDeck[38] = "5_of_spades";cardsInDeck[39] = "jack_of_diamonds2";cardsInDeck[40] = "6_of_clubs";cardsInDeck[41] = "jack_of_hearts2";cardsInDeck[42] = "6_of_diamonds";cardsInDeck[43] = "jack_of_spades2";cardsInDeck[44] = "6_of_hearts";cardsInDeck[45] = "king_of_hearts2";cardsInDeck[46] = "7_of_clubs";cardsInDeck[47] = "king_of_spades2";cardsInDeck[48] = "7_of_diamonds";cardsInDeck[49] = "queen_of_clubs2";cardsInDeck[50] = "7_of_spades";cardsInDeck[51] = "queen_of_diamonds2";cardsInDeck[52] = "queen_of_hearts2";function dealCard(i) { if (numberOfCardsInDeck == 0) return false; var img = document.createElement("img"); img.src = "https://lackeyinnovations.azurewebsites.net/Cards/" + cardsInDeck[i] + ".png"; document.body.appendChild(img); removeCard(i);}function randomCard() { return Math.floor(Math.random() * numberOfCardsInDeck); }function removeCard(c){ // simply make every higher numbered card move down 1 for (j=c; j <= numberOfCardsInDeck - 2; j++) { cardsInDeck[j] = cardsInDeck[j+1]; } numberOfCardsInDeck--;} });function init() { $('.drop').droppable( { drop: handleDropEvent } ); }function dealCard() { var img = document.createElement("img"); img.src = 'https://lackeyinnovations.azurewebsites.net/Cards/'; img.id = 'ace_of_hearts'; document.body.appendChild(img); $('#ace_of_hearts').draggable();}function handleDropEvent( event, ui ) { var draggable = ui.draggable; $('#drop').html( 'The "' + draggable.attr('id') + '" Was Discarded Here!' ); }</script></head> <body> <center><a href="">JS Fiddle Link</a></center> <br/><br/> <input type="button" value="Deal Card" id="deal" /> <br/> <br/> <br/> <br/> <br/> <div id='drop' class='drop'><strong><center>Discard Here:</center></strong></div></body></html> CSS::: body {background-color: #c0c0c0; font-family: Arial, Helvetica, sans-serif}.drop { float: inherit; width: 600px; height: 200px; background-color: #494775; image-orientation: initial; }img{ width: 80px; height: 120px;}p {text-indent: 0.0em}#imgcntr{ text-align: center; padding: 16px; border-image-source: url(./Cards);}.drop { float: center; width: 400px; height: 200px; background-color: #808080;}
-
Never Mind. Figured it out...
-
I've noticed that every time I open the page 2,-6,6, and 10 appear. Is there a way were I can change it so it can be blank? Sorry for all the questions, but W3 schools has been teaching me a lot... <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script></head><body>y = a sin bx<br/><br/>Input a <input type="text" id="a" size="5" value="2"/><br/>Input b <input type="text" id="b" size="5" value="-6" /><br/>X Min<input type="text" id="xmin" value="-10" size="5"/>X Max<input type="text" id="xmax" value="10" size="5" /><br/><br/> <input type="button" value="Calculate" id="calculate" /><input type="button" value="Plot" id="plot" /><br/><br/><p id="output"> </p> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div><script>var a = 0;var b = 0;var n = 0;var x = new Array();var y = new Array(); var v = new Array();function calculateY(b, a, x) { return (a * Math.sin(x) * ;}function calculate() { a = Number($('#a').val()); b = Number($('#b').val()); var xmin = Number($('#xmin').val()); var xmax = Number($('#xmax').val()); var xt = 0; var i = 0; for (xt = xmin; xt <= xmax; xt++) { x[i] = xt; y[i] = calculateY(a, b, xt); v[i] = [x[i], y[i]]; i++; } n = i - 1; }function displayValues(){ var s = ""; s = "Y = " + a; s+= " sin (" + b + ")<br/><br/>"; for (var i = 0; i <= n; i++) { s += " X = " + x[i] + " Y = " + y[i] + "<br/>"; } output.innerHTML = s;}function plotValues(){ calculate(); chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', marginRight: 130, marginBottom: 25 }, title: { text: 'Sine', x: -20 //center }, xAxis: { title: { text: 'X' } }, yAxis: { title: { text: 'Y' } }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } } } }, series: [{ name: 'Y Values', color: 'rgba(223, 83, 83, .5)', data: v }] }) }$('#calculate').click( function() { calculate(); displayValues(); });$('#plot').click( function() { calculate(); plotValues(); });</script> </body></html>
-
I did everything you said, davej... Thank You!!!
-
Hello Everyone, I'm breaking my neck trying to see what I'm doing wrong can any one give me any pointers. When I click on "Calculate or Plot" nothing happens. I believe it has something to do with my script. I would really appreciate it. <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <title>Sine Function Graph</title>y = a sin bx<br/><br/> Input a <input type="text" id="a" size="5" value="2"/><br/> Input b <input type="text" id="b" size="5" value="-6" /><br/> X Min<input type="text" id="xmin" value="-10" size="5"/> X Max<input type="text" id="xmax" value="10" size="5" /><br/><br/> <input type="button" value="Calculate" id="calculate" /><input type="button" value="Plot" id="plot" /><br/><br/><p id="output"> </p> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div><script>var a = 0;var b = 0;var n = 0;var x = new Array();var y = new Array(); var v = new Array();function calculateY(b, a, x) { return (a * Math.sin(x) * ;}function calculate() { a = Number($('#a').val()); b = Number($('#b').val()); var xmin = Number($('#xmin').val()); var xmax = Number($('#xmax').val()); var xt = 0; var i = 0; for (xt = xmin; xt <= xmax; xt++) { x[i] = xt; y[i] = calculateY(a, b, xt); v[i] = [x[i], y[i]]; i++; } n = i - 1; }function displayValues(){ var s = ""; s = "Y = " + a; s+= " sin (" + b + ")<br/><br/>"; for (var i = 0; i <= n; i++) { s += " X = " + x[i] + " Y = " + y[i] + "<br/>"; } output.innerHTML = s;}function plotValues(){ calculate(); chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', marginRight: 130, marginBottom: 25 }, title: { text: 'Sine', x: -20 //center }, xAxis: { title: { text: 'X' } }, yAxis: { title: { text: 'Y' } }, plotOptions: { scatter: { marker: { radius: 5, states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } } }, states: { hover: { marker: { enabled: false } } } } }, series: [{ name: 'Y Values', color: 'rgba(223, 83, 83, .5)', data: v }] }) }$('#calculate').click( function() { calculate(); displayValues(); });$('#plot').click( function() { calculate(); plotValues(); });</script> </body></html>
-
Thanks For The Help!!! I couldn't get it, but at least go the spiro going...
-
I'm sorry if I'm not understanding... This is what I have... <!doctype html><html lang="en"> <head> <style> body {background-color:lightgrey} h1 {color:blue} h2 {color:blue} </style> <meta name="Description" content=""> <title>Assignment 7</title> </head> <body> <center><button onclick="doDrawing();">Start The Spiro</button></center> <center><button onclick="stopDrawing();">Stop The Spiro</button></center> <br></br> <center><canvas id="myCanvas" width="400" height="400" style="border:1px solid #0000ff;"></center> <br></br> <p> When You Click On <strong>"Start The Spirograph"</strong> It Will Make A Clover Leave!!! </p> </canvas> </body> <script>var t = 0;var c = document.getElementById("myCanvas");var R = 100;var ctx = c.getContext("2d");var r= 25;var O= 10;function doDrawing() { t = 0; // Clear the Canvas ctx.clear(); // Create a random color var timesRun = 0; var color = '#'+Math.floor(Math.random()*16777215).toString(16); // Initial x and y var x = (c.width/2) + (R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t); var y = (c.width/2) + (R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t); // Start the Drawing ctx.beginPath(); ctx.strokeStyle = color; ctx.moveTo(x,y); //Use the timer to create drawing interval = setInterval(function(){ timesRun += 1;function stopDrawing() { clearInterval(interval);} drawCircle();}, 55); }function drawCircle(){ t += 0.4; x = Math.floor((c.width/2) + ((R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t))); y = Math.floor((c.width/2) + ((R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t))); ctx.lineTo(x,y); ctx.stroke();}CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform) { if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); } this.clearRect(0, 0, this.canvas.width, this.canvas.height); if (preserveTransform) { this.restore(); } }; </script> </html>
-
I've done the change not sure is its correct, but it's not stopping. <!doctype html><html lang="en"> <head> <style> body {background-color:lightgrey} h1 {color:blue} h2 {color:blue} </style> <meta name="Description" content=""> <title>Assignment 7</title> </head> <body> <center><button onclick="doDrawing();">Start The Spiro</button></center> <center><button onclick="stopDrawing();">Stop The Spiro</button></center> <br></br> <center><canvas id="myCanvas" width="400" height="400" style="border:1px solid #0000ff;"></center> <br></br> <p> When You Click On <strong>"Start The Spirograph"</strong> It Will Make A Clover Leave!!! </p> </canvas> </body> <script> var t = 0;var c = document.getElementById("myCanvas");var R = 100;var ctx = c.getContext("2d");var r= 25;var O= 10;function doDrawing() { t = 0; // Clear the Canvas ctx.clear(); // Create a random color var timesRun = 0; var color = '#'+Math.floor(Math.random()*16777215).toString(16); // Initial x and y var x = (c.width/2) + (R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t); var y = (c.width/2) + (R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t); // Start the Drawing ctx.beginPath(); ctx.strokeStyle = color; ctx.moveTo(x,y); //Use the timer to create drawing var interval = setInterval(function(){ timesRun += 1;function stopDrawing() { clearInterval(interval);} drawCircle();}, 55); }function drawCircle(){ t += 0.4; x = Math.floor((c.width/2) + ((R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t))); y = Math.floor((c.width/2) + ((R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t))); ctx.lineTo(x,y); ctx.stroke();}CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform) { if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); } this.clearRect(0, 0, this.canvas.width, this.canvas.height); if (preserveTransform) { this.restore(); } }; </script> </html>
-
Ok I got a decent Spirograph, but I'm having a problem stopping the spirograph. I really appreciate all the help you have given me "Ingolme"... <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Spirograph</title> </head> <body> <center><button onclick="doDrawing();">Start The Spiro</button></center> <center><button onclick="stopDrawing();">Stop The Spiro</button></center> <br></br> <center><canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"></center> <br></br> <p> When You Click On <strong>"Start The Spirograph"</strong> It Will Make A Clover Leave!!! </p> </canvas> </body> <script> var t = 0;var c = document.getElementById("myCanvas");var R = 100;var ctx = c.getContext("2d");var r= 25;var O= 10;function doDrawing() { t = 0; // Clear the Canvas ctx.clear(); // Create a random color var timesRun = 0; var color = '#'+Math.floor(Math.random()*16777215).toString(16); // Initial x and y var x = (c.width/2) + (R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t); var y = (c.width/2) + (R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t); // Start the Drawing ctx.beginPath(); ctx.strokeStyle = color; ctx.moveTo(x,y); //Use the timer to create drawing var interval = setInterval(function(){ timesRun += 1; if(timesRun === 300){ clearInterval(interval); } drawCircle();}, 55); }function drawCircle(){ t += 0.4; x = Math.floor((c.width/2) + ((R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t))); y = Math.floor((c.width/2) + ((R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t))); ctx.lineTo(x,y); ctx.stroke();}CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform) { if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); } this.clearRect(0, 0, this.canvas.width, this.canvas.height); if (preserveTransform) { this.restore(); } }; </script> </html>
-
I made a couple of changes, I'm on the right path, but I'm not getting the Spirograph Effect... Any tips or suggestions would be greatful... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <button onclick="doDrawing();">Start Drawing</button> <button onclick="stopDrawing();">Stop Drawing</button> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"> </canvas> </BODY> <SCRIPT> var t = 0;var c = document.getElementById("myCanvas");var R = c.width/2;var ctx = c.getContext("2d");r= .9;O= .8;function doDrawing() { t = 0; // Clear the Canvas ctx.clear(); // Create a random color var timesRun = 0; var color = '#'+Math.floor(Math.random()*16777215).toString(16); // Initial x and y var x = R+R*Math.cos(0); var y = R+R*Math.sin(0); // Start the Drawing ctx.beginPath(); ctx.strokeStyle = color; ctx.moveTo(x,y); //Use the timer to create drawing var interval = setInterval(function(){ timesRun += 1; if(timesRun === 65){ clearInterval(interval); } drawCircle();}, 20); }function drawCircle(){ t += 0.1; x = Math.floor((R+r)*Math.cos(t) - (r+O)*Math.cos(((R+r)/r)*t)); y = Math.floor((R+r)*Math.sin(t) - (r+O)*Math.sin(((R+r)/r)*t)); ctx.lineTo(x,y); ctx.stroke();}CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform) { if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); } this.clearRect(0, 0, this.canvas.width, this.canvas.height); if (preserveTransform) { this.restore(); } }; </SCRIPT></HTML>
-
Thank You For The Explanation...
-
Just to make sure, dont I have to have this equation in the HTML in order to make a Spirograph? x = (R+r)*cos(t) - (r+O)*cos(((R+r)/r)*t) y = (R+r)*sin(t) - (r+O)*sin(((R+r)/r)*t)
-
Thank You For The Explanation Ingolme! "Niche" I'm learning by watching YouTube Videos and Forums...
-
Hello Everyone!!! I'm new to W3 Schools. I'm glad I'm part of this community.
-
I'm trying to make a "Spirograph" for my website, but I'm not sure what I'm doing wrong... I was able to make a circle, but struggling with the "Spirograph"Here is my code... <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <button onclick="doDrawing();">Start Drawing</button><button onclick="stopDrawing();">Stop Drawing</button><canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script> var t = 0;var c = document.getElementById("myCanvas");var R = c.width/2;var ctx = c.getContext("2d");function doDrawing() { t = 0; // Clear the Canvas ctx.clear(); // Create a random color var timesRun = 0; var color = '#'+Math.floor(Math.random()*16777215).toString(16); // Initial x and y var x = R+R*Math.cos(0); var y = R+R*Math.sin(0); // Start the Drawing ctx.beginPath(); ctx.strokeStyle = color; ctx.moveTo(x,y); //Use the timer to create drawing var interval = setInterval(function(){ timesRun += 1; if(timesRun === 65){ clearInterval(interval); } drawCircle();}, 20); }function drawCircle(){ t += 0.1; x=(R+r)*cos(t)-(r+O)*cos(((R+r)/r)*t); y=(R+r)*sin(t)-(r+O)*sin(((R+r)/r)*t); ctx.lineTo(x,y); ctx.stroke();}CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform) { if (preserveTransform) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); } this.clearRect(0, 0, this.canvas.width, this.canvas.height); if (preserveTransform) { this.restore(); } };</script> </body></html>
