Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
easy pixel perfect collision engine demo canvas/javascript

I'm sorry about the messy code =P

<!DOCTYPE html>
<title>terrain test</title>
<body onkeydown=keys(1,event) onkeyup=keys(0,event)>
<script>
var CANVAS_WIDTH=480, CANVAS_HEIGHT=320, FPS = 30;
var keydownleft=0, keydownright=0 ,keydownspace=0 ,keydownup=0 ,keydowndown=0;
//mathglobalizr: https://gist.github.com/2221488
(function(a,b){for(b in a=Object.getOwnPropertyNames(Math))this[a[b]]=Math[a[b]]})()
function keys(a,e){
if(e.keyCode==37)keydownleft = a
if(e.keyCode==39)keydownright = a
if(e.keyCode==32)keydownspace = a
if(e.keyCode==38)keydownup = a
if(e.keyCode==40)keydowndown = a
}
function collides(a,b){
return a.x<b.x+b.width&&
a.x+a.width>b.x&&
a.y<b.y+b.height&&
a.y+a.height>b.y
}
function terraincheck(a,b){
var pix = canvas.getImageData(a+15,b,1,1).data
return pix[1]<20
}
var playerimg = new Image
playerimg.src = 'images/playerr.png'
var levelimg = new Image
levelimg.src = 'images/level.png'
var player={
x:50, y:270, width:30, height:62, yspeed:0
,update: function(){
if(keydownleft){
player.y-=3
if(!terraincheck(player.x-2,player.y+player.height)){player.x -= 2}
if(!terraincheck(player.x-2,player.y+player.height)){player.x -= 2}
playerimg.src = 'images/playerl.png'
}
if(keydownright){
player.y-=3
if(!terraincheck(player.x+2,player.y+player.height)){player.x += 2}
if(!terraincheck(player.x+2,player.y+player.height)){player.x += 2}
playerimg.src = 'images/playerr.png'
}
if(keydownup&&terraincheck(player.x,player.y+player.height+5)&&!terraincheck(player.x+15,player.y)&&!terraincheck(player.x-15,player.y))player.yspeed=-6
player.y += player.yspeed
terraincheck(player.x,player.y+player.height)?player.yspeed=0:player.yspeed += 1;
player.x = min(max(player.x,0),CANVAS_WIDTH-player.width)
player.y = min(max(player.y,0),CANVAS_HEIGHT-player.height)
canvas.drawImage(playerimg,player.x,player.y)
}
}
function update(){
//clear the canvas
canvas.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT)
canvas.drawImage(levelimg,0,0)
player.update()
}
var canvasElement = document.createElement("canvas")
canvasElement.width=CANVAS_WIDTH
canvasElement.height=CANVAS_HEIGHT
var canvas = canvasElement.getContext("2d")
document.body.appendChild(canvasElement)
setInterval(update,1e3/FPS)
</script>
@yckart

This comment has been minimized.

Copy link

commented Apr 27, 2013

A simple fiddle would be nice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.