I have a Javascript program working in three different places: here,
here, and here.
But I don't know how would I put them in one file. This is where I am at right now.
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
body {
background-color:#E4E0FF;
}
#canvas {
border:10px solid red;
background-color:white;
}
#canvas2 {
border:10px solid red;
background-color:white;
}
#canvas3 {
border:10px solid red;
background-color:white;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="300">
</canvas>
<canvas id="canvas2" width="400" height="300">
</canvas>
<canvas id="canvas3" width="400" height="300">
</canvas>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var toggle=0;
var x=150;
var y=100;
var w=100;
var h=100;
var r=60;
var wasInside=false;
ctx.fillStyle = "#000000";
ctx.fillRect(x, y, w, h);
function changeColor() {
if (toggle == 0) {
ctx.fillStyle = "#04B45F";
toggle = 1;
} else if (toggle ==1){
ctx.fillStyle = "#04B45F";
toggle = 2;
}else if (toggle == 2){
ctx.fillStyle = "#0000FF";
toggle = 3;
}else if (toggle == 3){
ctx.fillStyle == "#190707";
toggle = 4;
}else if (toggle == 4){
ctx.fillStyle = "#210B61";
toggle = 5;
}else if (toggle == 5){
ctx.fillStyle = "#FA58AC";
toggle = 6;
}else if (toggle ==6){
ctx.fillStyle = "#FFFF00";
toggle = 7;
}else{
ctx.fillStyle = "#F5A9D0";
toggle = 0;
}
ctx.fillRect(x, y, w, h);
}
function changeRadius() {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0, 400, 300);
r = Math.floor((Math.random() * 80) + 20);
ctx.beginPath();
ctx.arc(200, 150, r, 0, 2 * Math.PI);
ctx.stroke();
}
function changeWidth() {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0, 400, 300);
width = Math.floor((Math.random()*50)+1);
ctx.lineWidth=width;
ctx.stroke();
}
function handleMouseMove(e) {
var mx = parseInt(e.clientX - offsetX);
var my = parseInt(e.clientY - offsetY);
var isInsideNow = (mx > x && mx < x + w && my > y && my <= y + h);
if (isInsideNow && !wasInside) {
changeColor();
wasInside = true;
} else if (!isInsideNow && wasInside) {
wasInside = false;
}
}
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas2").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas3").mousemove(function (e) {
handleMouseMove(e);
});
</script>
</body>
</html>
So, how would I tell the program to do circle thing in 2nd canvas and line in 3rd canvas???
I haven't called the changeWidth and changeRadius functions yet, because it'll just do it in the first canvas making a mess.
I just need something in this part of the code to call different functions in different canvas's
if (isInsideNow && !wasInside) {
changeColor();
wasInside = true;
} else if (!isInsideNow && wasInside) {
wasInside = false;
}
I'm not a canvas expert, but just for giving you an idea, check this FIDDLE
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
inspect these 2 lines, the context ctx wil draw in the canvas with id=canvas. you can create other contex variables to draw in the other canvas or reuse the same.
updated FIDDLE
Update for the update: FIDDLE
Related
I have been looking for a while on how to move a certain square around on a canvas with JavaScript, and haven't found much. I have done one where it removes itself and replaces itself every frame, but I want it to be smoother and animated. This is my code:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas><br />
<button onclick="#">Move Up</button>
<script>
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 60, 20, 20);
</script>
So far the button does nothing, is there a function I could add that would move the square around? (in this case up)
To make smooth animations, check about the requestAnimationFrame function (https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame).
Here an example with your code:
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
var squareY = 60;
var isButtonPressed = false;
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, squareY, 20, 20);
function moveUp() {
window.requestAnimationFrame(moveUp);
if (isButtonPressed) {
squareY -= 10 / 16;
}
squareY = Math.max(squareY, 5);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, squareY, 20, 20);
}
function onMouseUp() {
isButtonPressed = false;
}
function onMouseDown() {
isButtonPressed = true;
}
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
var squareY = 60;
var isButtonPressed = false;
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, squareY, 20, 20);
function moveUp() {
window.requestAnimationFrame(moveUp);
if (isButtonPressed) {
squareY -= 10 / 16;
}
squareY = Math.max(squareY, 5);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, squareY, 20, 20);
}
function onMouseUp() {
isButtonPressed = false;
}
function onMouseDown() {
isButtonPressed = true;
}
window.addEventListener('keydown', function (e) {
if (e.key == 'ArrowUp') {
// if the arrow key is pressed
squareY -= 10 / 16;
}
});
moveUp();
<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas><br />
<button onmousedown="onMouseDown()" onmouseup="onMouseUp()">Move Up</button>
<script>
</script>
So I have this rectangle that animates across to the right. How can I get the rectangle to reverse it when it hits the boundaries. I'm trying to make it go back and forth.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
var y = 50;
var width = 10;
var height = 10;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, width, height);
x++;
if(x <= 490) {
setTimeout(animate, 33);
}
}
animate();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"
style="border: 1px solid #000000;"></canvas>
</body>
</html>
https://codepen.io/forTheLoveOfCode/pen/wqdpeg
Is that what you need? (link to codepen above).
var canvas = document.getElementById("canvas_id");
var context = canvas.getContext('2d');
var x=5;
var y=5;
var velocity = 10;
function move(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
x =x + velocity
if ((x+50)>canvas.width || x<0){
velocity *=-1;
}
draw()
}
function draw(){
context.fillStyle = "#E80C7A";
context.strokeStyle = "#000000";
context.lineWidth = '3';
context.fillRect(x, y, 50, 100);
context.strokeRect(x, y, 50, 100);
}
setInterval(move, 100);
<html>
<body>
<canvas id = "canvas_id">
</canvas>
</body>
</html>
here's a solution with boundaries detection
window.onload=function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
var y = 50;
var width = 10;
var height = 10;
var speed = 10; // speed
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, y, width, height);
if(
(x >= 500 - width && speed > 0) || // going to the right and bound reached
(x <= 0 && speed < 0) // going to the left and bound reached
) {
speed *= -1; // inverting the direction
}
x += speed;
setTimeout(animate, 33);
}
animate();
}
<canvas id="canvas" width="500" height="400"
style="border: 1px solid #000000;"></canvas>
consider using requestAnimationFrame instead of setTimeout to do this kind of work.
So I'm trying to implement platforms for the game I'm making for a project (similar to falldown) and have created multiple arrays that have contain all the possible platforms (canvas is 360 so there is if platform[i] == 1 it draws a rect)
var canvas;
var ctx;
var isPlaying = false;
window.onload = function(){
canvas= document.getElementById("gamesCanvas");
ctx = canvas.getContext("2d");
var fps = 60;
setInterval(function(){
}, 1000/fps);
createMenu();
canvas.addEventListener('click', getClicks.bind(this), false)
//canvas.addEventListener("mousemove", getPos)
}
function initialise(){
isPlaying = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
createRect(0,0, canvas.width, canvas.height, 'black');
createPlatforms();
}
function createPlatforms(){
x = randint(1,2);
console.log(x)
var i;
var pos = -60;
var platform1 = [0,1,1,1,1,1];
var platform2 = [1,0,1,1,1,1];
var platform3 = [1,1,0,1,1,1];
var platform4 = [1,1,1,0,1,1];
var platform5 = [1,1,1,1,0,1];
var platform6 = [1,1,1,1,1,0];
if(x==1){
for (i=0; i<platform1.length; ++i) {
var pos = (pos+60);
if(platform1[i] == 1){
createRect(pos, 60, 60,5, 'white');
}
}
}
else if(x==2){
for (i=0; i<platform2.length; ++i){
var pos = (pos+60);
if (platform2[i] ==2){
createRect(pos,60,75,5,'white');
}
}
}
}
function randint(min, max) {
return ~~(Math.random() * (max - min + 1) + min);
}
function background(color) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function createMenu(){
background("black");
if (!isPlaying) {
ctx.font = "60px monospace";
ctx.fillStyle = "white";
ctx.fillText("FallDown", 40, 130);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("PLAY", 130, 260);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("LEADERBOARD", 50, 340);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("SETTINGS", 90, 420);
}
}
function createRect(leftX, topY, width, height, color){
ctx.fillStyle = color;
ctx.fillRect(leftX, topY, width, height);
}
function getClicks(evt) {
var x = evt.offsetX;
var y = evt.offsetY;
if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) {
initialise()
}
}
<html>
<head>
<title>Falldown</title>
</head>
<body>
<canvas id="gamesCanvas" width="360" height="640"></canvas>
<!--script src="test.js"></script-->
</body>
</html>
However, if x>1 (so basically an else if statement is required to run) it doesn't draw anything.
I was testing to see whether it is something that I could fix, however, all I managed to realise that if the if statement has got the contents of the else if statement than it will draw the rects in the right position so in this case (platform2) would be drawn.
I've managed to narrow down the problem but I'm not sure how to fix it. I have experience with python but have never experienced anything like this
Just letting you know that I can't just use the else statement as I have to implement 6 platforms and if I were to use just if and else than that would mean I could only draw 2 of the 6 platforms
Your initial problem wasn't with the if / else.. but the if inside..
But with -> if (platform2[i] ==2){ this wanted to be if (platform2[i] == 1){
But saying all this, your createPlatforms was only creating a single platform. It didn't really need any If/else or arrays.
Below I've modified createPlatforms, using just two for loops.
var canvas;
var ctx;
var isPlaying = false;
window.onload = function(){
canvas= document.getElementById("gamesCanvas");
ctx = canvas.getContext("2d");
var fps = 60;
setInterval(function(){
}, 1000/fps);
createMenu();
canvas.addEventListener('click', getClicks.bind(this), false)
//canvas.addEventListener("mousemove", getPos)
}
function initialise(){
isPlaying = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
createRect(0,0, canvas.width, canvas.height, 'black');
createPlatforms();
}
function createPlatforms(){
for (var y = 0; y < 8; y ++) {
var x = randint(0, 5), pos = 0;
for (var i = 0; i < 6; i ++) {
if (i !== x) {
createRect(pos, 60 + y*60 ,75,5,'white');
}
pos += 60;
}
}
}
function randint(min, max) {
return ~~(Math.random() * (max - min + 1) + min);
}
function background(color) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function createMenu(){
background("black");
if (!isPlaying) {
ctx.font = "60px monospace";
ctx.fillStyle = "white";
ctx.fillText("FallDown", 40, 130);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("PLAY", 130, 260);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("LEADERBOARD", 50, 340);
ctx.font = "34px Arial";
ctx.fillStyle = "white";
ctx.fillText("SETTINGS", 90, 420);
}
}
function createRect(leftX, topY, width, height, color){
ctx.fillStyle = color;
ctx.fillRect(leftX, topY, width, height);
}
function getClicks(evt) {
var x = evt.offsetX;
var y = evt.offsetY;
if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) {
initialise()
}
}
<html>
<head>
<title>Falldown</title>
</head>
<body>
<canvas id="gamesCanvas" width="360" height="640"></canvas>
<!--script src="test.js"></script-->
</body>
</html>
You can use a switch statement in javascript to handle lots of cases.
Example:
switch(x){
case 1:
//logic here
break;
case 2:
// and so on
break:
default:
break;
}
You can add as many cases as you would like. This will eliminate the need to use if else.
Hope this helps!
Hi I looked for hours on this site and on internet in general how to move an object with html5/javascript and I founded a lot of answers but none of that answers was for me useful. I want to explain my problem: I just want to make move one of this two rectangles with the keyboard control but it's too difficult to me without help (I'm just 2 month learning javascript/css/html5).
Please do not give a bad vote to that question, I want to help and to be helped on this site.
This is the code:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);
var canvas1 = document.getElementById("myCanvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);
</script>
</body>
</html>
Thanks guys, I want to learn here from Italy but there aren't the right schools/courses and I have to work hard on the internet to do that.
You need to listen to the keyboard events, and capture the keycodes of the keys with which you want to move the rectangle. You can then increment/decrement the absolute position of your rectangle object to move it.
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
object.x -= 1;
}
//top
else if(event.keyCode == 38) {
object.y -= 1;
}
//right
else if(event.keyCode == 39) {
object.x += 1;
}
//bottom
else if(event.keyCode == 40) {
object.y += 1;
}
}
Here is a working example
#Simone P: Inside your script, try this:
var ctx = canvas.getContext("2d");
function clean() {
canvas.width = canvas.width;
}
var positionDef = { x: 30, y: 30 };
var position = { x: 30, y: 30 };
ctx.fillStyle="#FF0000";
ctx.fillRect(position.x,position.y,20,20);
var move = {
up: function() {
clean();
ctx.fillStyle="#FF0000";
position.y -= 3;
ctx.fillRect(position.x,position.y,20,20);
},
right: function() {
clean();
ctx.fillStyle="#FF0000";
position.x += 3;
ctx.fillRect(position.x,position.y,20,20);
},
down: function() {
clean();
ctx.fillStyle="#FF0000";
position.y += 3;
ctx.fillRect(position.x,position.y,20,20);
},
left: function() {
clean();
ctx.fillStyle="#FF0000";
position.x -= 3;
ctx.fillRect(position.x,position.y,20,20);
},
}
function keyDownEvent(e) {
switch(e.keyCode) {
case 40:
move.down();
break;
case 39:
move.right();
break;
case 38:
move.up();
break;
case 37:
move.left();
break;
}
}
document.addEventListener("keydown", keyDownEvent, false);
I tried with that code but I think I'm using that bad:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);
var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);
}
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
ctx1.x -= 1;
}
//top
else if(event.keyCode == 38) {
ctx1.y -= 1;
}
//right
else if(event.keyCode == 39) {
ctx1.x += 1;
}
//bottom
else if(event.keyCode == 40) {
ctx1.y += 1;
}
}
</script>
</body>
</html>
I Think you forget to draw the canvas. Ctx.x and so on just set the position but not draw. So maybe you have to call dr w() function
To yRand
Where I should add the draw function? Can you please insert that by yourself into the code? :o
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);
var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);
}
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
ctx1.x -= 1;
}
//top
else if(event.keyCode == 38) {
ctx1.y -= 1;
}
//right
else if(event.keyCode == 39) {
ctx1.x += 1;
}
//bottom
else if(event.keyCode == 40) {
ctx1.y += 1;
}
}
</script>
</body>
</html>
#yRand Thanks!!!!!
It works :)
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);
var canvas1 = document.getElementById("myCanvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);
var ctx = canvas.getContext("2d");
function clean() {
canvas.width = canvas.width;
}
var positionDef = { x: 30, y: 30 };
var position = { x: 30, y: 30 };
ctx.fillStyle="#FF0000";
ctx.fillRect(position.x,position.y,20,20);
var move = {
up: function() {
clean();
ctx.fillStyle="#FF0000";
position.y -= 3;
ctx.fillRect(position.x,position.y,20,20);
},
right: function() {
clean();
ctx.fillStyle="#FF0000";
position.x += 3;
ctx.fillRect(position.x,position.y,20,20);
},
down: function() {
clean();
ctx.fillStyle="#FF0000";
position.y += 3;
ctx.fillRect(position.x,position.y,20,20);
},
left: function() {
clean();
ctx.fillStyle="#FF0000";
position.x -= 3;
ctx.fillRect(position.x,position.y,20,20);
},
}
function keyDownEvent(e) {
switch(e.keyCode) {
case 40:
move.down();
break;
case 39:
move.right();
break;
case 38:
move.up();
break;
case 37:
move.left();
break;
}
}
document.addEventListener("keydown", keyDownEvent, false);
</script>
</body>
</html>
The other rectangles when i press the keys desappear... how to fix them?
I have a rectangle (which should appear) on a canvas, that I want to move from side to side of the canvas. The code I have atm however isn't working, as nothing is showing up at all! Any help would be appreciated, cheers!
<!DOCTYPE html>
<html>
<head>
<title>Simple animations in HTML5</title>
<!--<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect (20, 50, 200, 100);
</script> -->
<script>
function drawMessage()
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT);
x += dx;
y += dy;
if(x <= 0 || x >= 500)
{
dx = -dx;
}
if(y <= 0 || y >= 200)
{
dy = -dy
}
function animate()
{
return setInterval(drawMessage, 10);
}
</script>
</head>
<body>
<h2> Optical Illusion </h2>
<video id="illusion" width="640" height="480" controls>
<source src="Illusion_movie.ogg">
</video>
<div id="buttonbar">
<button onclick="changeSize()">Big/Small</button>
</div>
<p>
Watch the animation for 1 minute, staring at the centre of the image. Then look at something else near you.
For a few seconds everything will appear to distort.
Source: Wikipedia:Illusion movie
</p>
<script type="text/javascript">
var myVideo=document.getElementById("illusion");
var littleSize = false;
function changeSize()
{
myVideo.width = littleSize ? 800 : 400;
littleSize = !littleSize;//toggle boolean
}
</script>
<canvas id="myCanvas" width="500" height="500">
</canvas>
<!--<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(20, 50, 200, 100);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", 35, 110);
</script> -->
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 20; // x coordinate of box position
var y = 50; // y coordinate of box position
var dx = 2; // amount to move box to the right
var dy = 4; // amount to move box down
var WIDTH = 500; // width of canvas
var HEIGHT = 200; // height of canvas
var MESSAGE_WIDTH = 200; // width of message
var MESSAGE_HEIGHT = 100; // height of message
animate(); // run the animation
</script>
</body>
</html>
It seems to me like the first script portion of your code might be missing curly braces.
Specifically, the portion:
function drawMessage()
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT);
x += dx;
y += dy;
if(x <= 0 || x >= 500)
{
dx = -dx;
}
if(y <= 0 || y >= 200)
{
dy = -dy
}
Might work better as:
function drawMessage()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(x, y, WIDTH, HEIGHT);
context.fillStyle = "white";
context.font = "30px Arial";
context.fillText ("Hello World", MESSAGE_WIDTH, MESSAGE_HEIGHT);
x += dx;
y += dy;
if(x <= 0 || x >= 500)
{
dx = -dx;
}
if(y <= 0 || y >= 200)
{
dy = -dy
}
}