Solier
Silliness Specialist
Divine
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
700 XP
In this chapter, I am going to teach you how to make a rotating image or shape using javascript. Download the source code and follow the directions below. You can use this to your simple projects.
DIRECTIONS
HTML CODE
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
DIRECTIONS
HTML CODE
- <!DOCTYPE html>
- <html
>
- <head
>
- <meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/
>
- <style
>
- canvas {
- border:1px solid #d3d3d3;
- background-color: #f1f1f1;
- }
- </
style
>
- </
head
>
- <body
onload
=
"startGame()"
>
- </
body
>
- </
html
>
- <
script>
- var
myGamePiece;
- function
startGame(
)
{
- myGamePiece =
new
component(
30
,
30
,
"red"
,
80
,
75
)
;
- 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
.frameNo
=
0
;
- this
.interval
=
setInterval(
updateGameArea,
20
)
;
- }
,
- stop :
function
(
)
{
- clearInterval(
this
.interval
)
;
- }
,
- 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
.angle
=
0
;
- this
.x
=
x;
- this
.y
=
y;
- this
.update
=
function
(
)
{
- ctx =
myGameArea.context
;
- ctx.save
(
)
;
- ctx.translate
(
this
.x
,
this
.y
)
;
- ctx.rotate
(
this
.angle
)
;
- ctx.fillStyle
=
color;
- ctx.fillRect
(
this
.width
/
-
2
,
this
.height
/
-
2
,
this
.width
,
this
.height
)
;
- ctx.restore
(
)
;
- }
- }
- function
updateGameArea(
)
{
- myGameArea.clear
(
)
;
- myGamePiece.angle
+=
1
*
Math
.PI
/
180
;
- myGamePiece.update
(
)
;
- }
- </
script>
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.