I am using HTML canvas to draw, then move a red square across the screen. However, when I change the x value of the square and redraw it, an error is thrown stating that "mg_player1 is not defined..." I can't seem to figure out the issue in the code, can anyone help?
<html>
<head>
<style>
#mg_canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 1600px;
height: 800px;
border: 4px solid black;
}
</style>
<body onload="mg_start()">
<div class="hideMultiGames">
<button class="button" onclick="mg_player1.moveUp()">Click me!</button>
<script>
function mg_start() {
multiGames_area.drawCanvas();
var mg_player1 = new mg_player("red", 0, 670);
}
var multiGames_area = {
canvas : document.createElement("canvas"),
drawCanvas : function() {
if (document.getElementById("mg_canvas")) {
}
else {
this.canvas.width = 1600;
this.canvas.height = 800;
this.canvas.id = "mg_canvas"
this.canvas.className = "hideMultiGames";
multiGames_area.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
},
mg_drawGround : function() {
var mg_ground;
mg_ground = document.getElementById("mg_canvas");
var ground = mg_ground.getContext("2d");
ground.moveTo(0,700);
ground.lineTo(1600,700);
ground.stroke();
},
mg_clear : function() {
this.context.clearRect(0, 0, 1600, 800);
},
}
function mg_player(color, x, y) { //stores general shared methods and properties of players
this.width = 30;
this.height = 30;
this.color = color;
this.x = x;
this.y = y;
ctx = multiGames_area.context;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
this.moveUp = function() { //function that is throwing errors
this.x = 1000;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
</script>
</div>
</body>
</html>
`
You need to define the mg_player1 object globaly. If you use the var keyword the object is created only in the current function context.
mg_player1 = new mg_player("red", 0, 670);
And you need to call mg_clear in the moveUp function to redraw to canvas. Also better read the width and height property from the canvas in your mg_clear function.
So the script should be like this.
<html>
<head>
<style>
#mg_canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 1600px;
height: 800px;
border: 4px solid black;
}
</style>
<body onload="mg_start()">
<div class="hideMultiGames">
<button class="button" onclick="mg_player1.moveUp()">Click me!</button>
<script>
function mg_start() {
multiGames_area.drawCanvas();
//define the `mg_player1` object global (in the `window` context)
mg_player1 = new mg_player("red", 0, 670);
}
var multiGames_area = {
canvas : document.createElement("canvas"),
drawCanvas : function() {
if (document.getElementById("mg_canvas")) {
}
else {
this.canvas.width = 1600;
this.canvas.height = 800;
this.canvas.id = "mg_canvas"
this.canvas.className = "hideMultiGames";
multiGames_area.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
},
mg_drawGround : function() {
var mg_ground;
mg_ground = document.getElementById("mg_canvas");
var ground = mg_ground.getContext("2d");
ground.moveTo(0,700);
ground.lineTo(1600,700);
ground.stroke();
},
mg_clear : function() {
//read the width and heigth from the canvas
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
}
function mg_player(color, x, y) { //stores general shared methods and properties of players
this.width = 30;
this.height = 30;
this.color = color;
this.x = x;
this.y = y;
ctx = multiGames_area.context;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
this.moveUp = function() {
//clear the canvas
multiGames_area.mg_clear();
this.x = 1000;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
</script>
</div>
</body>
</html>
Related
I want to make the canvases PNG file, when exported, to be not squished ( Original size: Width: 480 pixels, height: 360 pixels. ) and plus, have the blue background color ( Color: #85c9ff ) . Source:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flippy in JavaScript! - Replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="startGame()">
<canvas id="flippyGoesHere"></canvas>
<center>
<button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
<div>
<button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button>
<br>
<br>
</div>
<button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
<br>
<br>
<button onclick="exportAsPng()">EXPORT AS IMAGE</button>
<br>
<br>
</center>
<script src="script.js"></script>
</body>
</html>
JS:
var myGamePiece;
var imgLink = document.getElementById("imgLink")
function startGame() {
myGamePiece = new component(20, 10, "/flippy.svg", 140, 70, "image");
myGameArea.start();
myGameArea.context.fillStyle = "#85c9ff"
myGameArea.context.fillRect(0, 0, myGameArea.canvas.width, myGameArea.canvas.height)
}
var myGameArea = {
canvas: document.getElementById("flippyGoesHere"),
start: function () {
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function () {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function () {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY = -1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = -1;
}
function moveright() {
myGamePiece.speedX = 1;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
function exportAsPng() {
imgLink.setAttribute("href", myGameArea.canvas.toDataURL())
imgLink.click()
}
And CSS, I don't know why:
body {
margin: 0;
}
a#imgLink {
display: none;
}
a#imgLink::before {
content: attr(href);
}
canvas#flippyGoesHere {
width: 480px;
height: 360px;
background-color: #85c9ff;
}
button { /* For all buttons! */
cursor: pointer;
}
Demo is here!
Here's the resulted image, when the turtle is not moving:
Building on KeroppiMomo's answer ...
Use the myGameArea.clear() method to colour the background too
var myGameArea = {
...
clear: function () {
myGameArea.context.fillStyle = "#85c9ff"
myGameArea.context.fillRect(0, 0, myGameArea.canvas.width,
myGameArea.canvas.height)
},
Get rid of all of the css for canvas#flippyGoesHere, that is just confusing things as it's affecting the display of the canvas.
You can set the canvas size in the html like KeroppiMomo suggested, or you can set it in the javascript (perhaps in your startGame() function):
myGameArea.canvas.height = 500
myGameArea.canvas.width = 500
You can see that the width and height of the canvas is not what you specified in CSS: myGameArea.canvas.width is 300 and myGameArea.canvas.height is 150. The problem is that the actual size of the canvas is different from its display size.
Setting the canvas size in HTML reveals that the exported image is the same as the canvas.
<canvas id="flippyGoesHere" width="480" height="360"></canvas>
The issue with the background color also lies in the CSS. Specifying the background color in CSS only displays that color, not rendering it in the canvas.
Filling the canvas with the background color (and for good practice, removing the background-color in CSS) should solve the problem.
this.update = function () {
ctx = myGameArea.context;
ctx.fillStyle = "#85c9ff";
ctx.fillRect(0, 0, width, height);
// ...
}
So far, I create a canvas and I add two images one over another.how to create a eraser to scratch upper image and then shows it lower image ..pls help me..
It's very essential to me ..I surprise to my brother birthday...pls help me..Thank you..
I just want to know..
how to add two images on canvas? In my code is it right..?
how to create eraser for clearing upper image.. with touchmove in javaScript
javaScript
window.addEventListener("click",play);
function play() { document.getElementById("song").play();
}
window.onload = function () {
var img1= new Image();
img1.src = 'https://dl.dropbox.com/s/xxz0nbrplhst2w2/20201010_174008.jpg?';
img1.onload = function ()
{
filling1(img1);
}
var img2=new Image();
img2.src=
"https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg";
img2.onload = function ()
{
filling2(img2);
}
function filling1(img) {
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0,1012,1012);
}
function filling2(img) {
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0,1078,1260);
}
}
CSS
body { background: #dddddd;
}
canvas
{
margin: 50px;
padding: 0px;
border: thin inset #aaaaaa;
width: 300px;
height: 400px;
position:absolute;
background-image:url("");
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
</head>
<body>
<div>
<canvas id="canvas"> Canvas not supported </canvas>
</div>
<audio controls style="display:none;"loop id="song" >
<source src="https://dl.dropbox.com/s/bsgain4rsi5q44m/Happy-Birthday-Instrumental">
<!-- <source src="https://dl.dropbox.com/s/bbxas9a8jvts3ng/birthday%20wishes%20song%20slow%20motion"> -->
<script>
Swal.fire("Just Scratch It").then((value)=> {Swal.fire('I hope you like it','Thank you','success');});
</script>
</audio>
</body>
</html>
It is another code for touchmove but it doesn't work as a eraser ..why..?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 380;
var mx, my;
function Circle(x, y){
this.x = x;
this.y = y;
this.radius = 30;
this.draw = function(){
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
c.stroke();
}
this.update = function(){
canvas.addEventListener("touchmove",
function(e){
mx = e.touches[0].clientX;
my = e.touches[0].clientY;
circle.x = mx;
circle.y = my;
});
if(this.x + this.radius > canvas.width){
this.x = canvas.width / 2;
}
if(this.x - this.radius < 0){
this.x = canvas.width / 2;
}
if(this.y + this.radius > canvas.height){
this.y = canvas.height / 2;
}
if(this.y - this.radius < 0){
this.y = canvas.height / 2;
}
circle.draw()
}
}
var circle = new Circle(100, 100);
function a(){
requestAnimationFrame(a);
c.clearRect(0, 0, canvas.width, canvas.height);
circle.update();
}
a();
</script>
</body>
</html>
window.addEventListener("click",play);
function play() { document.getElementById("song").play();}
var canvas= document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 400;
window.onload = function () {
var img = new Image();
img.onload = () => ctx.drawImage(img,0,0,300,400);
img.src = "https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg";
}
function Circle(x, y){
this.x = x;
this.y = y;
this.radius = 30;
this.draw = function(){
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.restore();
}
}
var circle = new Circle(100, 100);
canvas.addEventListener("touchmove", function(e){
var mx = e.touches[0].clientX;
var my = e.touches[0].clientY;
move(mx, my);
});
canvas.addEventListener("mousemove", function(e){
var mx = e.offsetX;
var my = e.offsetY;
move(mx, my);
});
function move(x,y){
circle.x = x;
circle.y = y;
circle.draw();
}
body { background: #dddddd;}
canvas {
margin: 20px;
padding: 0px;
border: thin inset #aaaaaa;
width: 300px;
height: 400px;
position:absolute;
background-image: url("https://dl.dropbox.com/s/xxz0nbrplhst2w2/20201010_174008.jpg");
background-size: 100% 100%;;
}
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
</head>
<body>
<div>
<canvas id="canvas"> Canvas not supported </canvas>
</div>
<audio controls style="display:none;"loop id="song" >
<source src="https://dl.dropbox.com/s/bsgain4rsi5q44m/Happy-Birthday-Instrumental">
<!-- <source src="https://dl.dropbox.com/s/bbxas9a8jvts3ng/birthday%20wishes%20song%20slow%20motion"> -->
</audio>
<script>
Swal.fire("Just Scratch It").then((value)=> {Swal.fire('I hope you like it','Thank you','success');});
</script>
</body>
</html>
I have a very simple application, on which I draw the image on canvas perfectly. I am translating the context by image.width/2, image.height/2 and set the destination point as -image.width/2, -image.height/2.
function draw() {
window.canvas = document.getElementById('canvas');
window.ctx = canvas.getContext('2d');
window.image = document.createElement("img");
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(image.width/2,image.height/2);
ctx.drawImage(image,-image.width/2,-image.height/2);
};
image.src = 'rec.JPG';
}
This is displaying the image as it supposed to be. So considering this conept that if I want to make the center point of image in center of canvas I should do this as I did above. Now, I want user to click on canvas, I am getting mouse coordinates. Then I want to scale this image and redraw the canvas such that user will see that part of the image in center (zoomed version). The code is as follow:
function zoom(evt) {
var x = getMousePos(canvas, evt).x;
var y = getMousePos(canvas, evt).y;
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(x,y);
ctx.scale(1.5, 1.5);
ctx.drawImage(image,-x,-y);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
But I am not getting the right results somehow. I want to see the region where user clicked and then I again want to click to zoom out and thats it. I can do a later part easily but having problem with zooming the perfect region. I saw similiar questions on stackoverflow, but they aren't meeting my requirement. This is my html and css:
<style>
.container {
height: 500px;
}
.container .image-container {
height: 500px;
width: 50%;
overflow: auto;
position: absolute;
border: 1px solid;
}
img {
display: none;
}
canvas {
width: 100%;
}
</style>
<body onload="draw()">
<div class="container">
<div class="image-container">
<canvas
id="canvas"
onclick="zoom(event)"
>
</canvas>
</div>
</div>
</body>
P.S: I don't want panning. Just zoom-in and out on clicks. You can play with the snippet.
function draw() {
window.canvas = document.getElementById('canvas');
window.ctx = canvas.getContext('2d');
window.image = document.createElement("img");
window.isZoom = false;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(image.width/2,image.height/2);
ctx.drawImage(image,-image.width/2,-image.height/2);
};
image.src = 'https://d85ecz8votkqa.cloudfront.net/support/help_center/Print_Payment_Receipt.JPG';
}
function zoom(evt) {
if(!isZoom) {
var x = getMousePos(canvas, evt).x;
var y = getMousePos(canvas, evt).y;
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(x,y);
ctx.scale(2, 2);
ctx.drawImage(image,-x,-y);
canvas.style.cursor = 'zoom-out';
isZoom = true;
} else {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(image.width/2,image.height/2);
ctx.drawImage(image,-image.width/2,-image.height/2);
isZoom=false;
canvas.style.cursor = 'zoom-in';
}
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
<style>
.container {
height: 500px;
}
.container .image-container {
height: 500px;
width: 50%;
overflow: auto;
position: absolute;
border: 1px solid;
}
img {
display: none;
}
canvas {
width: 100%;
cursor: zoom-in;
}
</style>
<body onload="draw()">
<div class="container">
<div class="image-container">
<canvas
id="canvas"
onclick="zoom(event)"
>
</canvas>
</div>
</div>
</body>
You where really close, just have to mix the scale into your drawing of the image
function draw() {
window.canvas = document.getElementById('canvas');
window.ctx = canvas.getContext('2d');
window.image = document.createElement("img");
window.isZoom = false;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0,0);
};
image.src = 'https://d85ecz8votkqa.cloudfront.net/support/help_center/Print_Payment_Receipt.JPG';
}
function zoom(evt) {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
var scale = 2
if (!isZoom) {
var pos = getMousePos(canvas, evt);
ctx.scale(scale, scale);
ctx.drawImage(image, -pos.x*scale*scale, -pos.y*scale*scale);
canvas.style.cursor = 'zoom-out';
} else {
ctx.drawImage(image, 0, 0);
canvas.style.cursor = 'zoom-in';
}
isZoom = !isZoom
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
.container {
height: 500px;
}
.container .image-container {
height: 500px;
width: 50%;
overflow: auto;
position: absolute;
border: 1px solid;
}
img {
display: none;
}
canvas {
width: 100%;
cursor: zoom-in;
}
<body onload="draw()">
<div class="container">
<div class="image-container">
<canvas id="canvas" onclick="zoom(event)">
</canvas>
</div>
</div>
</body>
Besides the addition of var scale I did some cleanup to your code:
var x = getMousePos(canvas, evt).x;
var y = getMousePos(canvas, evt).y;
That was kind of a wasteful double call to getMousePos
I'm making a simple Javascript game for a school project. I'm trying to replace the red square with an image(in the following link).
enter link description here
How can i achieve this?
Great question! Use a snippet to post your code. This link should provide a complete answer add image
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY -= 1;
}
function movedown() {
myGamePiece.speedY += 1;
}
function moveleft() {
myGamePiece.speedX -= 1;
}
function moveright() {
myGamePiece.speedX += 1;
}
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body onload="startGame()">
<div style="text-align:center;width:480px;">
<button onclick="moveup()">UP</button><br><br>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button><br><br>
<button onclick="movedown()">DOWN</button>
</div>
<p>If you click a button the red square will start moving. Click the same button many times, and it will move faster and faster.</p>
</body>
</html>
I am trying to develop a game and i am starting to dip my toes into the HTML <canvas> tag and using it with javascript. My program here is my work in progress clone of PONG. I have managed to add the two paddles with no error but as i have added the Ball function it simply refuses to draw anything on the screen and thus i am given a page covered in black.
Could it be because i am using classes?
Here is the code:
// ctx.fillStyle = 'rgba(red, green, blue, alpha)';
// ctx.fillRect(x, y, width, height);
var canvas;
var ctx;
var dx = 5;
var dy = 5;
//Class Definitions
function Game(width, height, colour) {
this.width = width;
this.height = height;
this.colour = colour;
}
function Player(width, height, colour, x, y, up, down) {
this.width = width;
this.height = height;
this.colour = colour;
this.x = x;
this.y = y;
this.up = up;
this.down = down;
this.move = function(ny) {
this.y = this.y + ny;
ctx.fillStyle = this.colour;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
function Ball(width, height, colour, x , y, isTouched, isInGoal) {
this.width = width;
this.height = height;
this.colour = colour;
this.x = x;
this.y = y;
this.isTouched = isTouched;
this.isInGoal = isInGoal;
this.move = function() {
clear();
this.x = this.x + 1;
ctx.fillStyle = this.colour;
ctx.fillRect(this.x, this.y, this.width, this.height);
};
}
//Creating new Classes
var gameStage = new Game((window.innerWidth), (window.innerHeight), 'rgb(0,0,0)');
var paddleOne = new Player(10, 150, 'rgb(255,255,255)', (gameStage.width/10), (gameStage.height/2), 38, 40);
var paddleTwo = new Player(10, 150, 'rgb(255,255,255)', (gameStage.width/1.1), (gameStage.height/2), 87, 83);
var ball = new Ball(20, 20, 'rgb(255,255,255)', (gameStage.width/2), (gameStage.height/2), 0, 0);
//Initialisation
function init(){
canvas = document.getElementById('game');
canvas.setAttribute('width', gameStage.width);
canvas.setAttribute('height', gameStage.height);
canvas.setAttribute('tabindex', 0);
if (game.getContext){
ctx = canvas.getContext('2d');
return setInterval(ball.move, 10);
return setInterval(draw, 10);
}
}
//Canvas Functions
function clear(){
ctx.clearRect(0, 0, gameStage.width, gameStage.height);
}
function draw() {
clear();
ctx.fillStyle = gameStage.colour;
ctx.fillRect(0, 0, gameStage.width, gameStage.height);
ctx.fillStyle = paddleOne.colour;
ctx.fillRect(paddleOne.x, paddleOne.y, paddleOne.width, paddleOne.height);
ctx.fillStyle = paddleTwo.colour;
ctx.fillRect(paddleTwo.x, paddleTwo.y, paddleTwo.width, paddleTwo.height);
console.log("PlayerOne Y Coordinate: " + paddleOne.y + "\n");
console.log("PlayerTwo Y Coordinate: " + paddleTwo.y + "\n");
}
//Player Control
function doKeyDown(e) {
if (e.keyCode == paddleOne.up){
paddleOne.move(-5);
} else if (e.keyCode == paddleOne.down) {
paddleOne.move(5);
} else if (e.keyCode == paddleTwo.up) {
paddleTwo.move(-5);
} else if (e.keyCode == paddleTwo.down) {
paddleTwo.move(5);
}
}
//For HTML
function beginStuff(){
init();
window.addEventListener('keydown', doKeyDown, true);
}
* { margin: 0; padding: 0;}
body, html {height: 100%;}
#game {
position: absolute;
width:100%;
height:100%;
background-color: #000000;
}
<!DOCTYPE HTML>
<htmL>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A game</title>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="beginStuff();" >
<canvas id="game">
Please upgrade your browser to support HTML5. <br/>
</canvas>
</body>
</htmL>
This looks wrong to me:
return setInterval(ball.move, 10);
return setInterval(draw, 10);
Firstly, you've got 2 returns. Secondly, you've lost the binding on the move method:
return setInterval(ball.move.bind(ball), 10);
If that doesn't fix it I suggest stepping through in a debugger, line-by-line, making sure that everything is doing exactly what you expect it to.
With help from #skirtle, i moved the ball.move(); to the draw() function and removed the clear() call from the ball.move() function.