I want to implement it using the konami code, which I've succesfully used on my site already. I just can't get it to work with skifree. For quick reference, Here's the konami code:
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
kkeys.push( e.keyCode );
if ( kkeys.toString().indexOf( konami ) >= 0 ){
$(document).unbind('keydown',arguments.callee);
// Launch easter egg here
}
});
Here's the code for skifree, as pulled from this site: http://timelessname.com/canvas/skifree/
var left;
var right;
var faster = false;
var step = 0;
var obst = new Array();
var locX = 430;
var locY = 100;
var running = true;
var guy = new Image();
var guyLeft = new Image();
var guyRight = new Image();
var crash = new Image();
var rock = new Image();
var tree = new Image();
var bush = new Image();
guy.src = "http://timelessname.com/canvas/skifree/guy_down.png";
guyLeft.src = "http://timelessname.com/canvas/skifree/guy_left.png";
guyRight.src = "http://timelessname.com/canvas/skifree/guy_right.png";
crash.src = "http://timelessname.com/canvas/skifree/crash.png";
rock.src = "http://timelessname.com/canvas/skifree/rock.png";
tree.src = "http://timelessname.com/canvas/skifree/tree.png";
$(window).keydown(function(e){
if(e.keyCode == 37){
left = true;
}
else if(e.keyCode == 39){
right = true;
}
else if(e.keyCode == 70){
faster = true;
}
});
$(window).keyup(function(e){
if(e.keyCode == 37){
left = false;
}
else if(e.keyCode == 39){
right = false;
}
else if(e.keyCode == 70){
faster = false;
}
else if(e.keyCode == 32){
if(!running){
step = 0;
obst = new Array();
locX = 430;
locY = 100;
running = true;
runSki();
}
}
});
//TODO: wrap edges (no wall)
function runSki(){
if(!running) return;
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect (0, 0, canvas.width, canvas.height);
if(left){
if(locX > -320){
locX--;
}
}
if(right){
if(locX < 640+320){
locX++;
}
}
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect (-10-locX, 0, 10, canvas.height);
ctx.fillRect (640*2+20-locX, 0, 10, canvas.height);
for(var i = 0; i < obst.length;i++){
var o = obst[i];
o.y-=2.5;
if(faster){
o.y-=2.5;
}
ctx.drawImage(o.type,o.x-locX,o.y);
if(o.y < -30){
obst.splice(i,1);
i--;
}
var tX = o.x-locX+5;
var tY = o.y+5;
var d = Math.sqrt((tX-320+3)*(tX-320+3)+ (tY-100+5)*(tY-100+5));
if(d < 20){
ctx.drawImage(crash,320,locY);
running = false;
}
}
if(running){
if(left){
ctx.drawImage(guyLeft,320,locY);
}
else if(right){
ctx.drawImage(guyRight,320,locY);
}
else{
ctx.drawImage(guy,320,locY);
}
}
var randomnumber=Math.floor(Math.random()*641)
if(Math.floor(step*10)%10==0){
var type;
if(Math.floor(Math.random()*2) == 0){
type = rock;
}
else{
type = tree;
}
var obj = {x: Math.floor(Math.random()*641*2), y:480, type: type};
obst.push(obj);
}
step+= 0.1;
if(running){
setTimeout("runSki();",1);
}
}
setTimeout("runSki();",1000);
Not certain of this but your copied code looks wrong; see here:
if(left){
if(locX > -320){
locX--;
}
}
if(right){
if(locX < 640+320){
locX++;
}
}
Have you copied this from html? The >
& <
characters shouldn't be escaped :)
EDIT
Also remember to update your image paths :D
EDIT
I got this to work on this page. Just added the <canvas/>
element, wrapped the ski javascript in a function called setupSki
(which is called by the konami function) and replaced both instances of
setTimeout("runSki();"
with
setTimeout(runSki
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With