[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –
HTML5 Tutorial – 43 – Animation for Games!
by
Tags:
Comments
37 responses to “HTML5 Tutorial – 43 – Animation for Games!”
-
just being honest here: that the mouse isnt on the left top corner of the square has nothing to do with any error or failed attempt at the clientX/Y being correct; its the default margin html does for the body element. to correct it you need to subtract the position of the element(the canvas) itself froom the clientX/Y.
-
Can't copy paste Bucky's code in 2017. We are in the future and most of this shit is changed. Here is a "useable" code. Probably better ways to do it. I am a noob. this is what I made.
function doFirst(){
"use strict";
window.addEventListener("mousemove", bucky, false);}
function bucky(e){
"use strict";
var x = document.getElementById('canvas');
var canvas = x.getContext('2d');
canvas.clearRect(0,0,x.width,x.height);
var xPos = e.clientX;
var yPos = e.clientY;
canvas.fillRect(xPos -50,yPos -50, 100,100);}
window.addEventListener("load", doFirst, false);
-
how is the variable e = event being declared and filled? should it not be: (var) e = window.addEvent…. or something like this – before it is being passed into the func?? or is it, as the next tutorial suggests, somehow predeclared and automatically filled? thanx!
-
Not worked
-
can any1 tell me how to hide the cursor so that the black box acts as the pointer i can't seem to find any information about it on the web
-
How is the e working when it didn't even got passed in as parameter!?
-
difference between clientX and pageX?
-
All the tutorials so far, worked without any trouble.
-
Can anyone get this to work as of this date?
-
==================== THIS WORKS ====================
function doFirst() {
var x = document.getElementById('canvas');
canvas = x.getContext('2d');window.addEventListener("mousemove", svanski, false);
}
function svanski(e) {
canvas.clearRect(0, 0, 600, 400);
var xPos = e.clientX;
var yPos = e.clientY;
canvas.fillRect(xPos, yPos, 100, 100);
}window.addEventListener("load", doFirst, false);
-
did not work
-
IT CANT REPLACE JAVA 🙂
-
Can you show us the way to use a timer to make it move?
-
Variables are more flexible and could be used later on in many different ways in case the application gets more complex..
-
You're probably loading the image every frame instead of loading it once at the beginning.
-
maybe you use an old browser!
-
Why make those xPos and yPos variables when you can just simply type "canvas.fillRect(e.clientX-50, e.clientY-50, 100, 100);"?
-
There is no way in heck HTML5 can replace Java or action script . Those languages have many powerful features that HTML5 can't even come close to.
Even PHP has more "back end" features …. -
Because of the way this is written, it gets re-drawn each time the mouse moves. Sounds like your picture is being re-drawn every time the mouse moves too. Voila, flashing picture.
I'm new to this as well, so I can't actually solve your problem. I know this is a 3 month old comment.. hopefully you figured it out on your own with time 🙂
-
everything works good… untill u move the mouse wheel ( if the page is big enuf)
when it happens mouse jumps below the Rect and keeps just like that ; -
I put an image instead of rect, but when i move cursor image blinks/flashes. Why is that?
-
because of the word game probably
-
Hi Bucky i am trying to build a Simple Canvas Paint. İ can start a drawing event but i cant stop it. how can i do this?
Here is my JScript code
pastie org/5573200 -
Nice tutorial
-
I typed this whole into one html and when i tested it nothing happened D: any reasons why it might have failed?
-
@fogglee It's a burrito.
-
@fogglee They wrk together, javascript is a great addition to HTML5,
-
@fogglee These javascript functions only work in HTML5-compalible browser, never be afraid to ask questions…
-
bucky please make environmental science videos
-
@FalconPiss 33
-
@iluismadrid Visit kirupa.com. There is a tutorial on the countdown timer. ; }
-
Hello i was wondering if you could please make a tutorial on how to make an HTML5 countdown timer to date because i can't find one in all youtube or the web and thank you for all your tutorials they really help me a lot.
-
Can I put the canvas in the background (or something like that) to give the user some mouse effects on specific parts of my website?
-
PLEASE make more UDK tutorials!
-
Hi, I cant get this to work. Perhaps you can post the code somewhere to download. Maybe a link here or on your own website?
-
man you posted the right video the right time.
-
why is this one the most views?
or is it because of games
Leave a Reply to Davit Svanidze Cancel reply