williammalo/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    I'm sorry about the messy code =P

  
## index.html
<!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>
	<!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>