1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <!-- Head.........................................................--> <head> <title>Snail Bait</title> <link rel='stylesheet' href='game.css'/> </head> <!-- Body.........................................................--> <body> <!-- Wrapper...................................................--> <div id='wrapper'> <!-- Header.................................................--> <div id='header'> <div id='score'>0</div> </div> <!-- Arena..................................................--> <div id='arena'> <!-- The game canvas.....................................--> <canvas id='game-canvas' width='800' height='400'> Your browser does not support HTML5 Canvas. </canvas> </div> </div> <!-- JavaScript................................................--> <script src='game.js'></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | // --------------------------- DECLARATIONS ---------------------------- var canvas = document.getElementById('game-canvas'), context = canvas.getContext('2d'), // Constants............................................................ PLATFORM_HEIGHT = 8, PLATFORM_STROKE_WIDTH = 2, PLATFORM_STROKE_STYLE = 'rgb(0,0,0)', STARTING_RUNNER_LEFT = 50, STARTING_RUNNER_TRACK = 1, // Track baselines // // Platforms move along tracks. The constants that follow define // the Y coordinate (from the top of the canvas) for each track. TRACK_1_BASELINE = 323, TRACK_2_BASELINE = 223, TRACK_3_BASELINE = 123, // Images background = new Image(), runnerImage = new Image(), // Platforms // // Each platform has its own fill style, but the stroke style is // the same for each platform. platformData = [ // One screen for now // Screen 1....................................................... { left: 10, width: 230, height: PLATFORM_HEIGHT, fillStyle: 'rgb(255,255,0)', opacity: 0.5, track: 1, pulsate: false, }, { left: 250, width: 100, height: PLATFORM_HEIGHT, fillStyle: 'rgb(150,190,255)', opacity: 1.0, track: 2, pulsate: false, }, { left: 400, width: 125, height: PLATFORM_HEIGHT, fillStyle: 'rgb(250,0,0)', opacity: 1.0, track: 3, pulsate: false }, { left: 633, width: 100, height: PLATFORM_HEIGHT, fillStyle: 'rgb(255,255,0)', opacity: 1.0, track: 1, pulsate: false, }, ]; // ------------------------- INITIALIZATION ---------------------------- function initializeImages() { background.src = 'images/background_level_one_dark_red.png'; runnerImage.src = 'images/runner.png'; background.onload = function (e) { startGame(); }; } function drawBackground() { context.drawImage(background, 0, 0); } function calculatePlatformTop(track) { var top; if (track === 1) { top = TRACK_1_BASELINE; } else if (track === 2) { top = TRACK_2_BASELINE; } else if (track === 3) { top = TRACK_3_BASELINE; } return top; } function drawPlatforms() { var pd, top; context.save(); // Save context attributes on a stack for (var i=0; i < platformData.length; ++i) { pd = platformData; top = calculatePlatformTop(pd.track); context.lineWidth = PLATFORM_STROKE_WIDTH; context.strokeStyle = PLATFORM_STROKE_STYLE; context.fillStyle = pd.fillStyle; context.globalAlpha = pd.opacity; // If you switch the order of the following two // calls, the stroke will appear thicker. context.strokeRect(pd.left, top, pd.width, pd.height); context.fillRect (pd.left, top, pd.width, pd.height); } context.restore(); // Restore context attributes } function drawRunner() { context.drawImage(runnerImage, STARTING_RUNNER_LEFT, calculatePlatformTop(STARTING_RUNNER_TRACK) - runnerImage.height); } function draw(now) { drawBackground(); drawPlatforms(); drawRunner(); } function startGame() { draw(); } // Launch game initializeImages(); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |