I have no idea what is wrong. This is being made on a completely new site, so there are no cache problems, and the javascript console isn't returning errors. The canvas spans over the whole page, and is tagged properly. Here is the script:
<script type = "text/javascript">
var game = document.getElementById("game");
var context = game.getContext("2d");
var gamePieces = []
function gamePiece(width, height, color, x, y){
this.width = width;
this.height = height;
this.x = x;
this.y = y;
update = function(){
context.fillStyle = color;
context.fillRect(this.x, this.y, this.height, this.width);
}
gamePieces[gamePieces.length] = this
}
var p1 = gamePiece(50, 50, "blue", 0, 0);
function update(){
context.clearRect(0, 0, game.width, game.height);
for(var i = 0; i < gamePieces.length; i++){
gamePieces[i].update();
}
}
</script>
Nevermind. I figured it out.
Everything is running smoothly, I just needed to add another context.fillstyle and context.fillRect() statement. derpyderp.
Related
I am trying to create a small game to learn javascript.Everything works fine except my Rect class.As a matter of fact key_click works fine when it executes some console.log, but doesn’t display anything with tile.draw_tile() (nor gives any error).Could you help me?
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let Rect = class {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
draw_tile() {
c.fillStyle = "red";
c.fillRect(this.x, this.y, this.width, this.height);
}
}
var mouse = {
x: undefined,
y: undefined,
key_move: window.addEventListener('mousemove',(event)=>{
mouse.x = event.clientX;
mouse.y= event.clientY;
}),
key_click:window.addEventListener('click',(event)=>{
tile.draw_tile();
})
}
let tile = new Rect(mouse.x, mouse.y, 30, 30);
main = function(){
mouse.key_move;
mouse.key_click;
window.requestAnimationFrame(main);
}
window.requestAnimationFrame(main);
My code have a error help me!
I made a code to create a screen and then show the circles, but the code is giving error. Could someone help me with this error?
var blob;
var blobs = [];
var x;
var y;
window.onload = function(){
c = document.createElement('canvas');
width = 300;
height = 300;
c.width = width;
c.height = height;
ctx = c.getContext('2d');
document.body.appendChild(c);
setInterval(draw(), 1000/30)
blob = new Blob(width/2, height/2, 64);
}
function draw(){
ctx.rect(0, 0, width, height);
ctx.fillstyle = 'black';
ctx.fill();
blob.show();
}
function Blob(x, y, r){
this.pos = this.x, this.y = x, y;
this.r = r;
this.show = function(){
ctx.fillstyle = 'white';
ctx.fill();
ctx.ellipse(this.pos.x, this.pos.y, this.r*2, this.r*2);
}
}
<!DOCTYPE html>
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
This is the error: Cannot read property 'show' of undefined
you're invoking the method rather than passing a reference to a function
setInterval(draw(), 1000/30) //here the blob instance is still not created thus the error
change it to:
setInterval(draw, 1000/30)
Im trying to create and delete arcs on events, to adding parts works fine and i'm saving them in arrays so i could delete them on calling an event listener by somehow that's not happening , I mean its working fine in the console as in the array values are decremented by its not updating in the canvas
Code:
<script>
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = 500;
var c = myCanvas.getContext("2d");
var myArr = [];
myCanvas.addEventListener("click", function(){
var x = event.x;
var y = event.y;
var radius = 10;
myArr.push(new CreateCircle(x, y, radius, "#34495e"));
console.log( myArr );
});
window.addEventListener('keydown', function(){
myArr.splice(0,1);
console.log(myArr);
});
function CreateCircle(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2);
c.fillStyle = this.color;
c.fill();
}
this.draw();
}
</script>
Do i need to add an delete function in the constructor function and call it on keydown event , how do i go on doing it/fixing it ?
To remove the circles, you have to clear the canvas, and then redraw it with the modified array of circles.
First of all, return an object from the CreateCircle method, so you have something to work with. There's no need for instances here.
Secondly, you could clear the canvas by resetting it's width, and then redraw based on the array, like this
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = 500;
var c = myCanvas.getContext("2d");
var myArr = [];
myCanvas.addEventListener("click", function() {
var x = event.x;
var y = event.y;
var radius = 10;
myArr.push(CreateCircle(x, y, radius, "#34495e"));
});
window.addEventListener('keydown', function() {
myArr.splice(0, 1);
myCanvas.width = myCanvas.width;
myArr.forEach(function(circle) {
CreateCircle(circle.x, circle.y, circle.r, circle.c)
})
});
function CreateCircle(x, y, radius, color) {
c.beginPath();
c.arc(x, y, radius, 0, Math.PI * 2);
c.fillStyle = color;
c.fill();
return {x: x, y: y, r: radius, c: color};
}
<canvas id="myCanvas"></canvas>
You don't update canvas anywhere. You need to create some sort of "render" function which will clear previously rendered frame and then loops through circles in array and call .draw on all of them.
Tip:
context.clearRect method is useful for clearing canvas.
I already create my canvas on my page, however when I try to import an image on the canvas, it does not appear, here are the code I used. (the makeGameArea is a method I created to make a canvas on the webpage, the code of this method is not shown because it is so long to put it here)
Here are the following code that should have problem
var myGameArea2 = makeGameArea(700, 150, "myArea", "white");
var myContext2 = myGameArea2.getContext("2d");
var myImage = new drawImage(myContext2, "sonic.gif", 91, 97, 0, 0);
myImage.draw();
function drawImage(ctx, src, width, height, x, y){
this.image = new Image();
this.image.src = src;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.draw = function(){
this.image.onload = function(){
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
}
}
}
Is there anything wrong with my drawImage() method?
HTMLImage.onload will fire only once per src setting.
Here you are attaching your handler in the draw method, which I guess will be called later on. At this moment, the event will already have fired, and hence will never be called, since it won't fire again unless you reset its src.
Fixed code block:
function drawImage(ctx, src, width, height, x, y){
this.image = new Image();
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.draw = function(){
ctx.drawImage(this.image, this.x, this.y, this.width, this.height));
};
// if you want it to draw as soon as possible
this.image.onload = this.draw.bind(this);
this.image.src = src;
}
I tried to draw a simple rectangle and move it by keyboard. But the problem is that I think added everything I need in my code...Well i want to use arrows on keyboard. But before i tried JUST to get an alert....But it does not work.....Help me please... Any help will appreciated.
var canvas = document.getElementById("screen");
context = canvas.getContext("2d");
function Player() {
this.x=0, this.y = 0, this.w = 50, this.h = 50;
this.render = function (){
context.fillStyle = "orange";
context.fillRect(this.x, this.y, this.w, this.h);
}
}
var player = new Player();
player.x=100;
player.y= 460;
setInterval( function() {
context.fillStyle="black";
context.fillRect(0,0,canvas.width, canvas.height);
/*context.fillStyle = "white";
context.fillRect(100, 460, 30 , 30);*/
player.render();
//move all aliens & draw all aliens
for(var i = 0; i < 9; i++) {
aliens[i].move(),
aliens[i].draw(context);
}
}, 20);
document.addEventListener('keydown', function(event)){
var key_press = String.fromCharCode(event.keyCode);
alert(event.keyCode + " | " + key_press);
});
}
document.addEventListener('keydown', function(event)){
----------------------------------------------------^
You did put extra parentheses on this, remove it, the actual code would be
document.addEventListener('keydown', function(event){