Last active
December 25, 2015 13:19
-
-
Save davidwesst/6982934 to your computer and use it in GitHub Desktop.
Example of an HTML Canvas.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>HTML5 Canvas Game</title> | |
| <script type="text/javascript" src="canvas.js" ></script> | |
| </head> | |
| <body> | |
| <h2>Left/Right to Move. Space to Jump.</h2> | |
| <canvas id="canvas" width="640" height="320" > | |
| Your browser doesn't seem to support the canvas tag... | |
| </canvas> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Included with the permisson of Jonathan Evans (@joneapple on Twitter) | |
| */ | |
| var width = 640, height = 480, canvas = null, ctx = null; | |
| var x = 0, y = 0, vel_x = 0, vel_y = 0, prevTime = 0; | |
| var keys = new Array(); | |
| // Key constants | |
| KEY_SPACE = 32; | |
| KEY_LEFT = 37; | |
| KEY_UP = 38; | |
| KEY_RIGHT = 39; | |
| KEY_DOWN = 40; | |
| // Game constants | |
| MAX_VELOCITY = 12; | |
| ACCELERATION_RATE = 2; | |
| GRAVITY_RATE = 2; | |
| JUMP_VELOCITY = -18; // negative # to go up | |
| FPS = 60; | |
| PLAYER_SIZE = 50 | |
| var FLOOR = 320; | |
| window.onload = init; | |
| function init() | |
| { | |
| canvas = document.getElementById("canvas"); | |
| ctx = canvas.getContext('2d'); | |
| setTimeout(gameloop, 1000 / FPS); | |
| FLOOR = canvas.height - (canvas.height % 32); | |
| setInterval(gameloop, 1000 / FPS); | |
| } | |
| function gameloop() | |
| { | |
| update(); | |
| draw(); | |
| //setTimeout(gameloop, 1000 / FPS); | |
| } | |
| function update() | |
| { | |
| // Handle left/right movement | |
| if(keys[KEY_LEFT] == true) | |
| { | |
| vel_x = (vel_x < -MAX_VELOCITY) ? -MAX_VELOCITY : vel_x - ACCELERATION_RATE; | |
| } | |
| else if(keys[KEY_RIGHT] == true) | |
| { | |
| vel_x = (vel_x >= MAX_VELOCITY) ? MAX_VELOCITY : vel_x + ACCELERATION_RATE; | |
| } | |
| else | |
| { | |
| vel_x *= 0.8; // decelerating | |
| } | |
| // Handle up/down movement | |
| if(keys[KEY_SPACE] == true && y+PLAYER_SIZE+vel_y >= FLOOR) | |
| { | |
| vel_y = JUMP_VELOCITY; | |
| } | |
| else | |
| { | |
| vel_y = (vel_y > MAX_VELOCITY) ? MAX_VELOCITY : vel_y + GRAVITY_RATE; | |
| } | |
| // Floor collision | |
| if(y+PLAYER_SIZE+vel_y > FLOOR) | |
| { | |
| y = FLOOR-PLAYER_SIZE; | |
| vel_y = 0; | |
| } | |
| // Adjust player's velocity | |
| x += vel_x; | |
| y += vel_y; | |
| } | |
| function draw() | |
| { | |
| var d = new Date(); | |
| var diff = d.getTime() - prevTime; | |
| prevTime = d.getTime(); | |
| ctx.clearRect(0,0, canvas.width, canvas.height); | |
| ctx.fillStyle = "rgb(180,180,180)"; | |
| var size = 32; // square size | |
| for(var i=0; i<canvas.width; i+=size) | |
| { | |
| for(var j=(i/size%2==0)?0:size; j<FLOOR; j+=size*2) | |
| { | |
| ctx.fillRect(i,j, size, size); | |
| } | |
| } | |
| ctx.fillStyle = "rgb(200,0,0)"; | |
| ctx.fillRect(x, y, PLAYER_SIZE, PLAYER_SIZE); | |
| ctx.strokeStyle = "#000"; | |
| ctx.beginPath(); | |
| ctx.moveTo(0,FLOOR); | |
| ctx.lineTo(canvas.width, FLOOR); | |
| ctx.stroke(); | |
| ctx.fillText(diff + ' ms', canvas.width - 50, 10); | |
| } | |
| // Key events | |
| this.onkeydown = function(event) | |
| { | |
| keys[event.keyCode] = true; | |
| } | |
| this.onkeyup = function(event) | |
| { | |
| keys[event.keyCode] = false; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment