1+
2+ // Copyright 2011 William Malone (www.williammalone.com)
3+ //
4+ // Licensed under the Apache License, Version 2.0 (the "License");
5+ // you may not use this file except in compliance with the License.
6+ // You may obtain a copy of the License at
7+ //
8+ // http://www.apache.org/licenses/LICENSE-2.0
9+ //
10+ // Unless required by applicable law or agreed to in writing, software
11+ // distributed under the License is distributed on an "AS IS" BASIS,
12+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+ // See the License for the specific language governing permissions and
14+ // limitations under the License.
15+
16+ var canvas ;
17+ var context ;
18+ var images = { } ;
19+ var totalResources = 9 ;
20+ var numResourcesLoaded = 0 ;
21+ var fps = 30 ;
22+ var charX = 245 ;
23+ var charY = 185 ;
24+ var breathInc = 0.1 ;
25+ var breathDir = 1 ;
26+ var breathAmt = 0 ;
27+ var breathMax = 2 ;
28+ var breathInterval = setInterval ( updateBreath , 1000 / fps ) ;
29+ var maxEyeHeight = 14 ;
30+ var curEyeHeight = maxEyeHeight ;
31+ var eyeOpenTime = 0 ;
32+ var timeBtwBlinks = 4000 ;
33+ var blinkUpdateTime = 200 ;
34+ var blinkTimer = setInterval ( updateBlink , blinkUpdateTime ) ;
35+ var fpsInterval = setInterval ( updateFPS , 1000 ) ;
36+ var numFramesDrawn = 0 ;
37+ var curFPS = 0 ;
38+ var jumping = false ;
39+
40+ function updateFPS ( ) {
41+
42+ curFPS = numFramesDrawn ;
43+ numFramesDrawn = 0 ;
44+ }
45+ function prepareCanvas ( canvasDiv , canvasWidth , canvasHeight )
46+ {
47+ // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
48+ canvas = document . createElement ( 'canvas' ) ;
49+ canvas . setAttribute ( 'width' , canvasWidth ) ;
50+ canvas . setAttribute ( 'height' , canvasHeight ) ;
51+ canvas . setAttribute ( 'id' , 'canvas' ) ;
52+ canvasDiv . appendChild ( canvas ) ;
53+
54+ if ( typeof G_vmlCanvasManager != 'undefined' ) {
55+ canvas = G_vmlCanvasManager . initElement ( canvas ) ;
56+ }
57+ context = canvas . getContext ( "2d" ) ; // Grab the 2d canvas context
58+ // Note: The above code is a workaround for IE 8and lower. Otherwise we could have used:
59+ // context = document.getElementById('canvas').getContext("2d");
60+
61+ canvas . width = canvas . width ; // clears the canvas
62+ context . fillText ( "loading..." , 40 , 140 ) ;
63+
64+ loadImage ( "leftArm" ) ;
65+ loadImage ( "legs" ) ;
66+ loadImage ( "torso" ) ;
67+ loadImage ( "rightArm" ) ;
68+ loadImage ( "head" ) ;
69+ loadImage ( "hair" ) ;
70+ loadImage ( "leftArm-jump" ) ;
71+ loadImage ( "legs-jump" ) ;
72+ loadImage ( "rightArm-jump" ) ;
73+ }
74+
75+ function loadImage ( name ) {
76+
77+ images [ name ] = new Image ( ) ;
78+ images [ name ] . onload = function ( ) {
79+ resourceLoaded ( ) ;
80+ }
81+ images [ name ] . src = "images/" + name + ".png" ;
82+ }
83+
84+ function resourceLoaded ( ) {
85+
86+ numResourcesLoaded += 1 ;
87+ if ( numResourcesLoaded === totalResources ) {
88+
89+ setInterval ( redraw , 1000 / fps ) ;
90+ }
91+ }
92+
93+ function redraw ( ) {
94+
95+ var x = charX ;
96+ var y = charY ;
97+ var jumpHeight = 45 ;
98+
99+ canvas . width = canvas . width ; // clears the canvas
100+
101+ // Draw shadow
102+ if ( jumping ) {
103+ drawEllipse ( x + 40 , y + 29 , 100 - breathAmt , 4 ) ;
104+ } else {
105+ drawEllipse ( x + 40 , y + 29 , 160 - breathAmt , 6 ) ;
106+ }
107+
108+ if ( jumping ) {
109+ y -= jumpHeight ;
110+ }
111+
112+ if ( jumping ) {
113+ context . drawImage ( images [ "leftArm-jump" ] , x + 40 , y - 42 - breathAmt ) ;
114+ } else {
115+ context . drawImage ( images [ "leftArm" ] , x + 40 , y - 42 - breathAmt ) ;
116+ }
117+
118+ if ( jumping ) {
119+ context . drawImage ( images [ "legs-jump" ] , x , y - 6 ) ;
120+ } else {
121+ context . drawImage ( images [ "legs" ] , x , y ) ;
122+ }
123+
124+ context . drawImage ( images [ "torso" ] , x , y - 50 ) ;
125+ context . drawImage ( images [ "head" ] , x - 10 , y - 125 - breathAmt ) ;
126+ context . drawImage ( images [ "hair" ] , x - 37 , y - 138 - breathAmt ) ;
127+
128+ if ( jumping ) {
129+ context . drawImage ( images [ "rightArm-jump" ] , x - 35 , y - 42 - breathAmt ) ;
130+ } else {
131+ context . drawImage ( images [ "rightArm" ] , x - 15 , y - 42 - breathAmt ) ;
132+ }
133+
134+ drawEllipse ( x + 47 , y - 68 - breathAmt , 8 , curEyeHeight ) ; // Left Eye
135+ drawEllipse ( x + 58 , y - 68 - breathAmt , 8 , curEyeHeight ) ; // Right Eye
136+ }
137+
138+ function drawEllipse ( centerX , centerY , width , height ) {
139+
140+ context . beginPath ( ) ;
141+
142+ context . moveTo ( centerX , centerY - height / 2 ) ;
143+
144+ context . bezierCurveTo (
145+ centerX + width / 2 , centerY - height / 2 ,
146+ centerX + width / 2 , centerY + height / 2 ,
147+ centerX , centerY + height / 2 ) ;
148+
149+ context . bezierCurveTo (
150+ centerX - width / 2 , centerY + height / 2 ,
151+ centerX - width / 2 , centerY - height / 2 ,
152+ centerX , centerY - height / 2 ) ;
153+
154+ context . fillStyle = "black" ;
155+ context . fill ( ) ;
156+ context . closePath ( ) ;
157+ }
158+
159+ function updateBreath ( ) {
160+
161+ if ( breathDir === 1 ) { // breath in
162+ breathAmt -= breathInc ;
163+ if ( breathAmt < - breathMax ) {
164+ breathDir = - 1 ;
165+ }
166+ } else { // breath out
167+ breathAmt += breathInc ;
168+ if ( breathAmt > breathMax ) {
169+ breathDir = 1 ;
170+ }
171+ }
172+ }
173+
174+ function updateBlink ( ) {
175+
176+ eyeOpenTime += blinkUpdateTime ;
177+
178+ if ( eyeOpenTime >= timeBtwBlinks ) {
179+ blink ( ) ;
180+ }
181+ }
182+
183+ function blink ( ) {
184+
185+ curEyeHeight -= 1 ;
186+ if ( curEyeHeight <= 0 ) {
187+ eyeOpenTime = 0 ;
188+ curEyeHeight = maxEyeHeight ;
189+ } else {
190+ setTimeout ( blink , 10 ) ;
191+ }
192+ }
193+
194+ function jump ( ) {
195+
196+ if ( ! jumping ) {
197+ jumping = true ;
198+ setTimeout ( land , 500 ) ;
199+ }
200+
201+ }
202+ function land ( ) {
203+
204+ jumping = false ;
205+
206+ }
0 commit comments