Creating shapes in an SVG - javascript

For my assignment, we create an SVG block and the user would input a number, and we add that number of squares to the svg block in random positions within the svg block. My code isn't working.
Here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script>
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script>
<script src="logic.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Exercise 10</title>
</head>
<body>
<h1>Exercise 10</h1>
<div id="svg1"></div>
<div class="form">Add how many?
<input type="text" id="howmany" />
<button id="more">Add More</button></div>
<div id="svg2"></div>
<div class="form">
<button id="another">Add Another</button>
</div>
</body>
</html>
Here's my Javascript:
var num_squares, x, y;
num_squares = $('#howmany').val()
add_more = function() {
for (count = 0;count < num_squares;count += 1)
{
x = Math.random() * 180
y = Math.random() * 180
r = paper.rect(x, y, 20, 20)
filled = {
'fill': '#ddf'
}
r.attr(filled)
}
}
setup = function() {
paper = Raphael('svg1', 200, 200)
add_more()
}
jQuery(document).ready(setup)
Here's my CSS:
#svg1 {
border: black;
}

You initialise num_squares outside the function i.e. on document load. This is before anyone's typed in a number so num_squares is always empty and therefore your loop doesn't do anything. You also aren't calling add_more when the button is pressed.
add_more = function() {
var num_squares, x, y;
num_squares = $('#howmany').val();
for (count = 0;count < num_squares;count += 1)
{
x = Math.random() * 180
y = Math.random() * 180
r = paper.rect(x, y, 20, 20)
filled = {
'fill': '#ddf'
}
r.attr(filled)
}
}
setup = function() {
paper = Raphael('svg1', 200, 200)
}
jQuery(document).ready(setup)
#svg1 {
border: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script>
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script>
<script src="logic.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Exercise 10</title>
</head>
<body>
<h1>Exercise 10</h1>
<div id="svg1"></div>
<div class="form">Add how many?
<input type="text" id="howmany">
<button id="more" onclick="add_more()">Add More</button></div>
<div id="svg2"></div>
<div class="form">
<button id="another">Add Another</button>
</div>
</body>
</html>

Related

how to increment the value of a progress bar when press a button javascript

this is a very simple program that when you press the button the value inside the progress bar increases until it reaches the 100%.
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
when you press the button whatever is the value inside the progressbar (eg 10% 20%) it reaches the 100%. i would that when i press the button, the value increases only only by a certain quantity (for example if the value is 10% and i press the button i want that the value will arrive at 20%).
Thanks to everyone!!
A solution is to remove the setInterval, since it will call the function again without having to click on button.
This code simply define width outside of function, and then on each click, increment width by 10 and change the progress bar style.
var width = 20;
function move() {
var elem = document.getElementById("myBar");
if (width < 100) {
width+=10;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>
Here's a quick and simple way to do it with minimal changes, firstly you need to declare a global variable that holds the value of the "width-to-be". This is the desired width of the progress bar, once the animation has finished.
Next for the sake of clarity, I changed the name of the 'width' variable to widthAnim. When the value of widthValue is changed, widthAnim will increment until it reaches that same value.
The widthIncrement variable change be changed to whatever you like, and it will increment by that amount.
Finally, I added at extra condition in the frame function that makes sure it only goes up in increments of widthIncrement.
var widthValue = 20;
function move() {
var elem = document.getElementById("myBar");
var widthAnim = widthValue;
var id = setInterval(frame, 10);
var widthIncrement = 10;
widthValue = widthAnim + widthIncrement;
function frame() {
if (widthAnim >= widthValue || widthValue > 100) {
clearInterval(id);
} else {
widthAnim++;
elem.style.width = widthAnim + '%';
elem.innerHTML = widthAnim * 1 + '%';
}
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>
I modified some of your code, when attach the 100% it will clear the counter and restart from 0%.
maybe help you :)
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = parseInt(elem.innerHTML);
var aim = width + 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= aim) {
clearInterval(id);
} else if(width >= 100) {
width=0;
aim = 10;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
What you can do is set an initial value of width for example 20 and keep increasing it in setInterval callback till it is 40 (you can check that by taking its remainder with 20) and so on.
if(width % 20 === 0 ) clearInterval(id)
Here is snippet
var elem = document.getElementById("myBar");
var width = 20;
var id = null;
var click = false;
function move() {
if(!click){
click = true;
id = setInterval(function() {
width++;
if (width > 100) width = 20;
if (width % 20 === 0){
clearInterval(id);
click = false;
}
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}, 30);
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>
To achieve the desired result you should call clearInterval(id) when width is a multiple of 10. This will stop the frame() function from being called until the move() function is called again (when the user clicks the button)
To determine if width is a multiple of 10 the remainder operator can be used:
if (width % 10 == 0) {
clearInterval(id);
}
width should also be a global variable, outside of the move() function so that progress can be tracked in between button clicks.
var width = 20;
var id = null;
function move() {
if (width == 100) {
return;
}
var elem = document.getElementById("myBar");
if (id) {
clearInterval(id);
}
id = setInterval(frame, 10);
function frame() {
width ++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
if (width % 10 == 0) {
clearInterval(id);
}
}
}
<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>dynamic Progress bar</h2>
<p>example:</p>
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>
</body>
</html>

Frogger JavaScript game - Redefine Object Property

I am trying to write a frogger game like in OOP javascript. I have a couple of sprites for the player to choose from. What I want to achieve is that when the user selects the specific sprite, it updates the correct one when instantiating the player object.
I get an error when I try to redefine the property. I have tried a couple of solutions but with no success. What am i doing wrong? please help!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>First Attempt: Frogger</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/dd.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 offset-sm-2 characters" style="border:1px solid black">
<img src="images/char-boy.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-boy.png" checked="checked">
<img src="images/char-cat-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-cat-girl.png">
<img src="images/char-horn-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-horn-girl.png">
<img src="images/char-pink-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-pink-girl.png">
<img src="images/char-princess-girl.png" alt="char-boy"><input type="radio" name="sprite" value="images/char-princess-girl.png">
</div>
<div class="col-sm-6" id="game"></div>
</div>
</div>
<script src="js/resources.js"></script>
<script src="js/app.js"></script>
<script src="js/engine.js"></script>
</body>
</html>
JavaScript:
var Player = function(){
//What sprite to use
this.sprite = $("input[name='sprite']:checked").val();
//initial x location
this.x = 200;
//initial y location
this.y = 400;
};
$(document).on("click", 'input:radio[name="sprite"]',
function(){
var result = $("input[name='sprite']:checked").val();
console.log(result);
Object.defineProperty(Player.prototype, 'sprite', {
get: function(){
return this.sprite;
},
set: function(result){
this.sprite = result;
}
});
}
);
You could wrap the Player constructor in a closure to pass in the sprite before instantiation:
var PlayerWithSprite = function (sprite) {
return function () {
//What sprite to use
this.sprite = sprite;
//initial x location
this.x = 200;
//initial y location
this.y = 400;
};
};
var Player = PlayerWithSprite('my-sprite');
var playerInstance = new Player();
console.log(playerInstance);
Here is a Player class to get you started:
class Player
{
constructor(x,y)
{
var player = this;
this.x = x;
this.y = y;
this.sprite = null;
$('input:radio[name="sprite"]').click(function(){
player.sprite = $("input[name='sprite']:checked").val();
});
}
}
$(function(){
new Player(200,400);
});
You are getting an error because by default you can't redefine properties in JavaScript. See this answer for more information. If you want to define properties on an object, it should be one in the player constructor function.

script no longer updating the page

I have the following html page which displays a picture at a random location and updates it every 10 seconds :
<!DOCTYPE html>
<html>
<head>
<title>Domoos | Screen saver screen</title>
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript">
function init() {
var xmin = 0;
var xmax = 890;
var ymin = 0;
var ymax = 430;
var xCoord = Math.floor((Math.random()*xmax)+xmin);
var yCoord = Math.floor((Math.random()*ymax)+ymin);
var xCoordStr = xCoord.toString() + "px";
var yCoordStr = yCoord.toString() + "px";
document.getElementById("randomPlacement").style.left = xCoordStr;
document.getElementById("randomPlacement").style.top = yCoordStr;
}
</script>
</head>
<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></p>
</div>
</body>
</html>
It works very well. Now, I would like to add two 'div' tags so I could display the date and the time. So, I updated the body tag as follows (the rest of the page remains unchanged) :
<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></p>
</div>
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
</body>
The problem by doing so is that the image is never displayed at a random location. What am I missing and hopefully how can I solve the issue? I have added an extract of the console in Chrome.
Thanks a lot for your help.
replace
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
with
<div id="time">
</div>
then in init()
function init() {
var xmin = 0;
var xmax = 890;
var ymin = 0;
var ymax = 430;
var xCoord = Math.floor((Math.random()*xmax)+xmin);
var yCoord = Math.floor((Math.random()*ymax)+ymin);
var xCoordStr = xCoord.toString() + "px";
var yCoordStr = yCoord.toString() + "px";
document.getElementById("randomPlacement").style.left = xCoordStr;
document.getElementById("randomPlacement").style.top = yCoordStr;
document.getElementById("date").innerhtml=getDate('date');
document.getElementById("time").innerhtml=gettime('time');
}

Rotate and move with JQuery not working

I need to rotate and move an image at the same time, actually works just one time, but then just move and not rotating.
This is what i have:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain(){
$(".cartman").hover(MoveCartman,Normal); //on hover Eric Cartman
var v1=100; //variable to move Cartman
function MoveCartman(){
$(this).attr("src","CartmanNude.png");
$(this).css({
"margin-top":v1+"px",
"transform":"rotateZ(-360deg)",
"transition":"1s"
});
if (v1<200){v1+=100;}
else {v1=0;}
}
function Normal(){
$(this).attr("src","CartmanNormal.png");
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="CartmanNormal.png">
</div>
</div>
</div>
</body>
</html>
I think this should work fine but I dont know why the function on hover is not working more than just 1 time.
Sorry for my bad english and thanks.
Try substituting lowercase d for D at doctype declaration , adding all to transition value before duration ; css "margin-top": "0px" , "transform": "rotateZ(0deg)" to Normal function
.cartman {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain() {
$(".cartman").hover(MoveCartman, Normal); //on hover Eric Cartman
var v1 = 100; //variable to move Cartman
function MoveCartman() {
$(this).attr("src", "http://lorempixel.com/100/100/cats");
$(this).css({
"margin-top": v1 + "px",
"transform": "rotateZ(-360deg)"
});
if (v1 < 200) {
v1 += 100;
} else {
v1 = 0;
}
}
function Normal() {
$(this).attr("src", "http://lorempixel.com/100/100/technics")
.css({
"margin-top": "0px",
"transform": "rotateZ(0deg)"
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
</div>
</div>
</div>
</body>
</html>

How do I call a JavaScript function every 60 seconds?

So I'm trying to work on a Canvas demo, and I want this square to move from one side to the other, but I can't figure out how to call JavaScript in a way that repeats every 60 seconds.
Here's what I got so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
</script>
</head>
<body onLoad="setTimeout(update(), 0);">
<canvas id="screen1" width="500" height="500"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas>
<script type="text/javascript">
var x = 50;
var y = 250;
function update(){
draw();
x = x + 5;
}
function draw(){
var canvas = document.getElementById('screen1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
}
update();
setInterval ( update, 60000 );
</script>
</body>
</html>
1000ms = 1 second, 60000 = 60 seconds.
Using setTimeout, instead of setInterval, allows you to stop the animation with clearTimeout and the use of a variable.
(edit: this whole thing doesn't work in IE, but the setTimeout - clearTimeout combo itself should... also changed the onload and onclick events)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #000000;}
canvas{ background-color: #ffffff;}
</style>
<script type="text/javascript">
var x = 50;
var y = 250;
function update()
{
draw();
x = x + 5;
// For one minute, you would use 60000 instead of 100.
// 100 is so you can actually see it move.
myToggle = setTimeout(update, 100);
};
function draw()
{
var canvas = document.getElementById('screen1');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(236,138,68)';
ctx.fillRect(x,y,24,24);
}
};
function stop()
{
clearTimeout(myToggle);
};
window.onload = function()
{
document.getElementById("stop").onclick = function() { stop(); };
document.getElementById("start").onclick = function() { update(); };
update();
};
</script>
</head>
<body>
<canvas id="screen1" width="500" height="500"></canvas><br/>
<input id="stop" type="button" value="Stop" /><br/>
<input id="start" type="button" value="Start" />
</body>
</html>

Categories

Resources