Skip to content

Instantly share code, notes, and snippets.

@jakl

jakl/index.html

Created September 22, 2011 19:30
Show Gist options
  • Save jakl/1235773 to your computer and use it in GitHub Desktop.
Save jakl/1235773 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<head><style type="text/css"> .bg { color: #000000; background: black; }
</style></head>
<canvas id="canvas" tabindex="2">
Out with the stone age ... Use Chrome! sry w3m </canvas>
<body class='bg' onKeyDown="return main.key_down(event)" onKeyUp="return
main.key_up(event)">
<script type="text/javascript">
var main = {
up:false,down:false,left:false,right:false,space:false,other:false,
x:0,y:0,speed:5,Box_Width:200,Box_Length:200,Box_Color:'#2CF',Box_Color2:
'#0F0',
tic:function(){
this.paint();
setTimeout("main.tic()", 100);
},
resize:function(){
main.g.canvas.width = window.innerWidth*.95;
main.g.canvas.height = window.innerHeight*.95;
main.paint();
},
init:function(){
this.g = document.getElementById('canvas').getContext('2d');
//document.onmouseup = function(e){}
//document.onmousedown = function(e){}
//document.onmousemove = function(e){}
//document.onmousewheel = function (e){}
window.onresize=this.resize;
this.resize();
},
paint:function(){
var g = this.g;
g.fillStyle = '#203';
g.fillRect(0,0,this.g.canvas.width,this.g.canvas.height);
g.fillStyle = '#2CF';
g.fillRect(this.x, this.y, this.Box_Length, this.Box_Width);
if(this.right){this.x+=this.speed}
if(this.left){this.x-=this.speed}
if(this.up){this.y-=this.speed}
if(this.down){this.y+=this.speed}
if(this.space){this.speed=this.speed*2}
if(this.one){this.speed/=2}
if(this.a){this.Box_Length=this.Box_Length+100}
if(this.b){this.Box_Width=this.Box_Width+100}
if(this.c){this.Box_Length=this.Box_Length-100}
if(this.d){this.Box_Width=this.Box_Width-100}
if(this.e){g.fillStyle = '#507'}
if(this.speed<=5)this.title = 'THE GREEN BLOCK!';
if(this.speed>5)this.title = 'you found da speedz yo';
if(this.speed<5) this.title= 'impeding traffic foo';
if(this.Box_Width>200 && this.Box_Length == 200)this.title = 'THICK';
else if(this.Box_Width>200 && this.Box_Length>200)this.title =
'looonnggg and thick... just the way she likes it';
else if(this.Box_Width == 200 && this.Box_Length>200)this.title =
' looonnggg';
else if(this.Box_Width<200 && this.Box_Length == 200)this.title=
'baaby rectangle'
else if(this.Box_Width<200 && this.Box_Length<200)this.title=
'ive seen bigger'
else if(this.Box_Width == 200 && this.Box_Length<200)this.title=
'shortstack'
this.draw_controls();
},
draw_controls:function(){
this.g.fillStyle = '#ccc';
this.draw_control_y = 40;
this.draw_control(this.title);
this.draw_control(this.speed);
},
draw_control:function(message){
this.g.fillText
(message,this.g.canvas.width/2,this.draw_control_y+=20);
},
key_down:function(e){
if (e.keyCode == 39) {this.right=true;}
else if (e.keyCode == 37) {this.left=true;}
else if (e.keyCode == 38) {this.up=true;}
else if (e.keyCode == 40) {this.down=true;}
else if (e.keyCode == 32) {this.space=true;}
else if (e.keyCode == 49) {this.one=true;}
else if (e.keycode == 50) {this.two=true;}
else if (e.keycode == 51) {this.three=true;}
else if (e.keycode == 52) {this.four=true;}
else if (e.keycode == 53) {this.five=true;}
else if (e.keycode == 54) {this.six=true;}
else if (e.keycode == 55) {this.seven=true;}
else if (e.keycode == 56) {this.eight=true;}
else if (e.keycode == 58) {this.nine=true;}
else if (e.keyCode == 65) {this.a=true;}
else if (e.keyCode == 66) {this.b=true;}
else if (e.keyCode == 67) {this.c=true;}
else if (e.keyCode == 68) {this.d=true;}
else if (e.keycode == 69) {this.e=true;}
else if (e.keycode == 70) {this.f=true;}
else if (e.keycode == 71) {this.g=true;}
else if (e.keycode == 72) {this.h=true;}
else if (e.keycode == 73) {this.i=true;}
else if (e.keycode == 74) {this.j=true;}
else if (e.keycode == 75) {this.k=true;}
else if (e.keycode == 76) {this.l=true;}
else if (e.keycode == 77) {this.m=true;}
else if (e.keycode == 78) {this.n=true;}
else if (e.keycode == 79) {this.o=true;}
else if (e.keycode == 80) {this.p=true;}
else if (e.keycode == 81) {this.q=true;}
else if (e.keycode == 82) {this.r=true;}
else if (e.keycode == 83) {this.s=true;}
else if (e.keycode == 84) {this.t=true;}
else if (e.keycode == 85) {this.u=true;}
else if (e.keycode == 86) {this.v=true;}
else if (e.keycode == 87) {this.w=true;}
else if (e.keycode == 88) {this.x=true;}
else if (e.keycode == 89) {this.y=true;}
else if (e.keycode == 90) {this.z=true;}
else if (e.keycode == 112) {this.f1=true;}
else if (e.keycode == 113) {this.f2=true;}
else if (e.keycode == 114) {this.f3=true;}
else if (e.keycode == 115) {this.f4=true;}
else if (e.keycode == 116) {this.f5=true;}
else if (e.keycode == 117) {this.f6=true;}
else if (e.keycode == 118) {this.f7=true;}
else if (e.keycode == 119) {this.f8=true;}
else if (e.keycode == 120) {this.f9=true;}
else if (e.keycode == 121) {this.f10=true;}
else if (e.keycode == 122) {this.f11=true;}
else if (e.keycode == 123) {this.f12=true;}
else {this.other=true;}
this.paint();
return true;//false to capture input and decieve browser
}, // else if (e.keycode == ) {this.=true;} <--use
key_up:function(e){
if (e.keyCode == 39) {this.right=false;}
else if (e.keyCode == 37) {this.left=false;}
else if (e.keyCode == 38) {this.up=false;}
else if (e.keyCode == 40) {this.down=false;}
else if (e.keyCode == 32) {this.space=false;}
else if (e.keyCode == 49) {this.one=false;}
else if (e.keycode == 50) {this.two=false;}
else if (e.keycode == 51) {this.three=false;}
else if (e.keycode == 52) {this.four=false;}
else if (e.keycode == 53) {this.five=false;}
else if (e.keycode == 54) {this.six=false;}
else if (e.keycode == 55) {this.seven=false;}
else if (e.keycode == 56) {this.eight=false;}
else if (e.keycode == 58) {this.nine=false;}
else if (e.keyCode == 65) {this.a=false;}
else if (e.keyCode == 66) {this.b=false;}
else if (e.keyCode == 67) {this.c=false;}
else if (e.keyCode == 68) {this.d=false;}
else if (e.keycode == 69) {this.e=false;}
else if (e.keycode == 70) {this.f=false;}
else if (e.keycode == 71) {this.g=false;}
else if (e.keycode == 72) {this.h=false;}
else if (e.keycode == 73) {this.i=false;}
else if (e.keycode == 74) {this.j=false;}
else if (e.keycode == 75) {this.k=false;}
else if (e.keycode == 76) {this.l=false;}
else if (e.keycode == 77) {this.m=false;}
else if (e.keycode == 78) {this.n=false;}
else if (e.keycode == 79) {this.o=false;}
else if (e.keycode == 80) {this.p=false;}
else if (e.keycode == 81) {this.q=false;}
else if (e.keycode == 82) {this.r=false;}
else if (e.keycode == 83) {this.s=false;}
else if (e.keycode == 84) {this.t=false;}
else if (e.keycode == 85) {this.u=false;}
else if (e.keycode == 86) {this.v=false;}
else if (e.keycode == 87) {this.w=false;}
else if (e.keycode == 88) {this.x=false;}
else if (e.keycode == 89) {this.y=false;}
else if (e.keycode == 90) {this.z=false;}
else if (e.keycode == 112) {this.f1=false;}
else if (e.keycode == 113) {this.f2=false;}
else if (e.keycode == 114) {this.f3=false;}
else if (e.keycode == 115) {this.f4=false;}
else if (e.keycode == 116) {this.f5=false;}
else if (e.keycode == 117) {this.f6=false;}
else if (e.keycode == 118) {this.f7=false;}
else if (e.keycode == 119) {this.f8=false;}
else if (e.keycode == 120) {this.f9=false;}
else if (e.keycode == 121) {this.f10=false;}
else if (e.keycode == 122) {this.f11=false;}
else if (e.keycode == 123) {this.f12=false;}
else {this.other=false;}
this.paint();
return true;//false to capture input and decieve browser
},
}
main.init();
main.tic();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment