|
| 1 | +<!DOCTYPE HTML> |
| 2 | +<meta charset="utf-8"> |
| 3 | +<title>Blue Robot Demo</title> |
| 4 | +<style> |
| 5 | + html { overflow: hidden; min-height: 200px; min-width: 380px; } |
| 6 | + body { height: 200px; position: relative; margin: 8px; } |
| 7 | + .buttons { position: absolute; bottom: 0px; left: 0px; margin: 4px; } |
| 8 | +</style> |
| 9 | +<canvas width="380" height="200"></canvas> |
| 10 | +<script> |
| 11 | + var Landscape = function (context, width, height) { |
| 12 | + this.offset = 0; |
| 13 | + this.width = width; |
| 14 | + this.advance = function (dx) { |
| 15 | + this.offset += dx; |
| 16 | + }; |
| 17 | + this.horizon = height * 0.7; |
| 18 | + // This creates the sky gradient (from a darker blue to white at the bottom) |
| 19 | + this.sky = context.createLinearGradient(0, 0, 0, this.horizon); |
| 20 | + this.sky.addColorStop(0.0, 'rgb(55,121,179)'); |
| 21 | + this.sky.addColorStop(0.7, 'rgb(121,194,245)'); |
| 22 | + this.sky.addColorStop(1.0, 'rgb(164,200,214)'); |
| 23 | + // this creates the grass gradient (from a darker green to a lighter green) |
| 24 | + this.earth = context.createLinearGradient(0, this.horizon, 0, height); |
| 25 | + this.earth.addColorStop(0.0, 'rgb(81,140,20)'); |
| 26 | + this.earth.addColorStop(1.0, 'rgb(123,177,57)'); |
| 27 | + this.paintBackground = function (context, width, height) { |
| 28 | + // first, paint the sky and grass rectangles |
| 29 | + context.fillStyle = this.sky; |
| 30 | + context.fillRect(0, 0, width, this.horizon); |
| 31 | + context.fillStyle = this.earth; |
| 32 | + context.fillRect(0, this.horizon, width, height-this.horizon); |
| 33 | + // then, draw the cloudy banner |
| 34 | + // we make it cloudy by having the draw text off the top of the |
| 35 | + // canvas, and just having the blurred shadow shown on the canvas |
| 36 | + context.save(); |
| 37 | + context.translate(width-((this.offset+(this.width*3.2)) % (this.width*4.0))+0, 0); |
| 38 | + context.shadowColor = 'white'; |
| 39 | + context.shadowOffsetY = 30+this.horizon/3; // offset down on canvas |
| 40 | + context.shadowBlur = '5'; |
| 41 | + context.fillStyle = 'white'; |
| 42 | + context.textAlign = 'left'; |
| 43 | + context.textBaseline = 'top'; |
| 44 | + context.font = '20px sans-serif'; |
| 45 | + context.fillText('WHATWG ROCKS', 10, -30); // text up above canvas |
| 46 | + context.restore(); |
| 47 | + // then, draw the background tree |
| 48 | + context.save(); |
| 49 | + context.translate(width-((this.offset+(this.width*0.2)) % (this.width*1.5))+30, 0); |
| 50 | + context.beginPath(); |
| 51 | + context.fillStyle = 'rgb(143,89,2)'; |
| 52 | + context.lineStyle = 'rgb(10,10,10)'; |
| 53 | + context.lineWidth = 2; |
| 54 | + context.rect(0, this.horizon+5, 10, -50); // trunk |
| 55 | + context.fill(); |
| 56 | + context.stroke(); |
| 57 | + context.beginPath(); |
| 58 | + context.fillStyle = 'rgb(78,154,6)'; |
| 59 | + context.arc(5, this.horizon-60, 30, 0, Math.PI*2); // leaves |
| 60 | + context.fill(); |
| 61 | + context.stroke(); |
| 62 | + context.restore(); |
| 63 | + }; |
| 64 | + this.paintForeground = function (context, width, height) { |
| 65 | + // draw the box that goes in front |
| 66 | + context.save(); |
| 67 | + context.translate(width-((this.offset+(this.width*0.7)) % (this.width*1.1))+0, 0); |
| 68 | + context.beginPath(); |
| 69 | + context.rect(0, this.horizon - 5, 25, 25); |
| 70 | + context.fillStyle = 'rgb(220,154,94)'; |
| 71 | + context.lineStyle = 'rgb(10,10,10)'; |
| 72 | + context.lineWidth = 2; |
| 73 | + context.fill(); |
| 74 | + context.stroke(); |
| 75 | + context.restore(); |
| 76 | + }; |
| 77 | + }; |
| 78 | +</script> |
| 79 | +<script> |
| 80 | + var BlueRobot = function () { |
| 81 | + this.sprites = new Image(); |
| 82 | + this.sprites.src = 'blue-robot.png'; // this sprite sheet has 8 cells |
| 83 | + this.targetMode = 'idle'; |
| 84 | + this.walk = function () { |
| 85 | + this.targetMode = 'walk'; |
| 86 | + }; |
| 87 | + this.stop = function () { |
| 88 | + this.targetMode = 'idle'; |
| 89 | + }; |
| 90 | + this.frameIndex = { |
| 91 | + 'idle': [0], // first cell is the idle frame |
| 92 | + 'walk': [1,2,3,4,5,6], // the walking animation is cells 1-6 |
| 93 | + 'stop': [7], // last cell is the stopping animation |
| 94 | + }; |
| 95 | + this.mode = 'idle'; |
| 96 | + this.frame = 0; // index into frameIndex |
| 97 | + this.tick = function () { |
| 98 | + // this advances the frame and the robot |
| 99 | + // the return value is how many pixels the robot has moved |
| 100 | + this.frame += 1; |
| 101 | + if (this.frame >= this.frameIndex[this.mode].length) { |
| 102 | + // we've reached the end of this animation cycle |
| 103 | + this.frame = 0; |
| 104 | + if (this.mode != this.targetMode) { |
| 105 | + // switch to next cycle |
| 106 | + if (this.mode == 'walk') { |
| 107 | + // we need to stop walking before we decide what to do next |
| 108 | + this.mode = 'stop'; |
| 109 | + } else if (this.mode == 'stop') { |
| 110 | + if (this.targetMode == 'walk') |
| 111 | + this.mode = 'walk'; |
| 112 | + else |
| 113 | + this.mode = 'idle'; |
| 114 | + } else if (this.mode == 'idle') { |
| 115 | + if (this.targetMode == 'walk') |
| 116 | + this.mode = 'walk'; |
| 117 | + } |
| 118 | + } |
| 119 | + } |
| 120 | + if (this.mode == 'walk') |
| 121 | + return 8; |
| 122 | + return 0; |
| 123 | + }, |
| 124 | + this.paint = function (context, x, y) { |
| 125 | + if (!this.sprites.complete) return; |
| 126 | + // draw the right frame out of the sprite sheet onto the canvas |
| 127 | + // we assume each frame is as high as the sprite sheet |
| 128 | + // the x,y coordinates give the position of the bottom center of the sprite |
| 129 | + context.drawImage(this.sprites, |
| 130 | + this.frameIndex[this.mode][this.frame] * this.sprites.height, 0, this.sprites.height, this.sprites.height, |
| 131 | + x-this.sprites.height/2, y-this.sprites.height, this.sprites.height, this.sprites.height); |
| 132 | + }; |
| 133 | + }; |
| 134 | +</script> |
| 135 | +<script> |
| 136 | + var animating = false; |
| 137 | + var canvas = document.getElementsByTagName('canvas')[0]; |
| 138 | + var context = canvas.getContext('2d'); |
| 139 | + var landscape = new Landscape(context, canvas.width, canvas.height); |
| 140 | + var blueRobot = new BlueRobot(); |
| 141 | + // paint when the browser wants us to, using requestAnimationFrame() |
| 142 | + function paint() { |
| 143 | + context.clearRect(0, 0, canvas.width, canvas.height); |
| 144 | + landscape.paintBackground(context, canvas.width, canvas.height); |
| 145 | + blueRobot.paint(context, canvas.width/2, landscape.horizon*1.1); |
| 146 | + landscape.paintForeground(context, canvas.width, canvas.height); |
| 147 | + if (animating) |
| 148 | + requestAnimationFrame(paint); |
| 149 | + } |
| 150 | + var interval = null; |
| 151 | + var cancelingTimeout = null; |
| 152 | + function startAnim() { |
| 153 | + if (cancelingTimeout) { |
| 154 | + clearTimeout(cancelingTimeout); |
| 155 | + cancelingTimeout = null; |
| 156 | + } |
| 157 | + if (!animating) { |
| 158 | + animating = true; |
| 159 | + paint(); |
| 160 | + // but tick every 150ms, so that we don't slow down when we don't paint |
| 161 | + interval = setInterval(function () { |
| 162 | + var dx = blueRobot.tick(); |
| 163 | + landscape.advance(dx); |
| 164 | + }, 100); |
| 165 | + } |
| 166 | + } |
| 167 | + function stopAnim() { |
| 168 | + if (cancelingTimeout) return; |
| 169 | + cancelingTimeout = setTimeout(function () { |
| 170 | + cancelingTimeout = null; |
| 171 | + if (animating) { |
| 172 | + clearInterval(interval); |
| 173 | + animating = false; |
| 174 | + } |
| 175 | + }, 1000); |
| 176 | + } |
| 177 | + paint(); |
| 178 | + blueRobot.sprites.onload = paint; |
| 179 | +</script> |
| 180 | +<p class="buttons"> |
| 181 | + <input type=button value="Walk" onclick="blueRobot.walk(); startAnim();"> |
| 182 | + <input type=button value="Stop" onclick="blueRobot.stop(); stopAnim();"> |
| 183 | +<footer> |
| 184 | + <small> Blue Robot Player Sprite by <a href="https://johncolburn.deviantart.com/">JohnColburn</a>. |
| 185 | + Licensed under the terms of the Creative Commons Attribution Share-Alike 3.0 Unported license.</small> |
| 186 | + <small> This work is itself licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">Creative |
| 187 | + Commons Attribution-ShareAlike 3.0 Unported License</a>.</small> |
| 188 | +</footer> |
0 commit comments