diff options
Diffstat (limited to 'v5.html')
| -rwxr-xr-x | v5.html | 632 |
1 files changed, 632 insertions, 0 deletions
@@ -0,0 +1,632 @@ +<!doctype html> +<html> +<head> +<title></title> +<style type="text/css"> +@font-face + { + font-family: Commodore; + src: url("fonts/Commodore-Rounded-v1.2.ttf"); + } +body + { + background-color: #fff; + padding: 0; margin: 0; + } +#playground + { + } +#hud + { + font-family: Commodore, sans-serif; + position: fixed; + top: 10px; + right: 10px; + width: 300px; + font-size: 14px + padding: 5px; + opacity: 0.7; + color: #000; + background: #fff; + z-index: 666; + display: none; + } +#message + { + position: fixed; + bottom: 400px; + left: 20px; + width: 600px; + height: 100px; + font-size: 36px; + font-family: Commodore, sans-serif; + padding: 20px; + background-color: white; + color: black; + border: 4px solid black; + display: none; + } +#message-corner + { + position: fixed; + bottom: 354px; + left: 80px; + height: 50px; + width: 50px; + display: none; + } +#black-arrow + { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + border-bottom: 46px solid transparent; + border-top: 46px solid black; + border-left: 46px solid transparent; + border-right: 46px solid transparent; + } +#white-arrow + { + position: absolute; + top: 0; + left: 6px; + width: 0; + height: 0; + border-bottom: 40px solid transparent; + border-top: 40px solid white; + border-left: 40px solid transparent; + border-right: 40px solid transparent; + } +</style> +</head> +<body> + +<div id="playground"> +</div> + +<div id="message"> +</div> +<div id="message-corner"> + <div id="black-arrow"></div> + <div id="white-arrow"></div> +</div> +<div id="hud"></div> + +</body> +<script type="text/javascript" src="/js/jquery.js"></script> +<script type="text/javascript" src="jquery.gamequery-0.5.1.js"></script> +<script type="text/javascript"> +var PLAYGROUND_WIDTH = $(window).width() // 900 +var PLAYGROUND_HEIGHT = $(window).height() // 600 +var REFRESH_RATE = 30 + +$(function () + { + var KEY_LEFT = 37 + var KEY_UP = 38 + var KEY_RIGHT = 39 + var KEY_DOWN = 40 + var KEYTRACK = + { + KEY_LEFT: false, + KEY_UP: false, + KEY_RIGHT: false, + KEY_DOWN: false, + } + var IDLE = 0 + var RUNNING = 1 + var JUMPING = 2 + var RUNNING_AND_JUMPING = 3 + var SWIMMING = 4 + var DIVING = 5 + + var RIGHT = 0 + var LEFT = 1 + + var DUDE_STATE = + { + IDLE_RIGHT: 0, + IDLE_LEFT: 1, + RUN_RIGHT: 2, + RUN_LEFT: 3, + JUMPING_RIGHT: 4, + JUMPING_LEFT: 5, + RUNNING_AND_JUMPING_RIGHT: 6, + RUNNING_AND_JUMPING_LEFT: 7, + } + + $("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH, refreshRate: REFRESH_RATE, keyTracker: false}) + + function update_animation (sprite, actor) + { + new_state = actor.activity * 2 + actor.orientation + if (actor.state === new_state) + return + old_anim = actor.animations[actor.state] + new_anim = actor.animations[new_state] + actor.state = new_state + dude.y += new_anim.deltaY - old_anim.deltaY + dude.x += new_anim.deltaX - old_anim.deltaX + sprite.setAnimation(new_anim.animation) + .width(new_anim.width) + .height(new_anim.height) + .css("top", sprite.position().top + new_anim.deltaY - old_anim.deltaY) + .css("left", sprite.position().left + new_anim.deltaX - old_anim.deltaX) + } + var stage = + { + x: 0, + y: 0, + biffx: 20, + sea_distance: 2000, + scroll: function () + { + $("#sand").css({"left": stage.x}) + $("#biff").css({"left": stage.biffx + stage.x}) + $("#sea").css({"left": stage.sea_distance + stage.x}) + }, + } + var FLOOR_HEIGHT = 115 + var sky = new $.gameQuery.Animation({imageURL: "./sky.png"}) + var sand = new $.gameQuery.Animation({imageURL: "./sand.png"}) + var sea = new $.gameQuery.Animation({imageURL: "./sea.png"}) + $.playground() + .addSprite( "sky", + { + posx: 0, + posy: 0, + width: PLAYGROUND_WIDTH, + height: PLAYGROUND_HEIGHT, + animation: sky, + }) + .addSprite( "sand", + { + posx: 0, + posy: PLAYGROUND_HEIGHT - FLOOR_HEIGHT, + width: stage.sea_distance, + height: FLOOR_HEIGHT, + animation: sand, + }) + .addSprite( "sea", + { + posx: stage.sea_distance, + posy: PLAYGROUND_HEIGHT - FLOOR_HEIGHT, + width: PLAYGROUND_WIDTH, + height: FLOOR_HEIGHT, + animation: sea, + }) + .addGroup("actors").end() + $("#sceengraph").css("background-color", "#88dddd") + + MAX_YSPEED = 10 + RUN_SPEED = 10 + GRAVITY = 1 + TERMINAL_VELOCITY = 10 + JUMP_POWER = 10 + + FLOOR_DEPTH = 30 + DUDE_WIDTH = 140 + DUDE_HEIGHT = 231 + DUDE_START_X = 300 + DUDE_START_Y = PLAYGROUND_HEIGHT - DUDE_HEIGHT - FLOOR_HEIGHT + FLOOR_DEPTH + TERMINAL_VELOCITY + var dude = + { + state: DUDE_STATE.IDLE_RIGHT, + activity: IDLE, + orientation: RIGHT, + can_jump: true, + running_while_jumping: true, + xspeed: 0, + yspeed: 0, + x: DUDE_START_X, + y: DUDE_START_Y, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-10, + animations: + [ + // IDLE + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manstandingsprite.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-2, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-20, + }, + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manstandingsprite_left.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-2, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-20, + }, + // RUNNING + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manrunningsprite.png", + numberOfFrame: 15, + delta: 226, + rate: REFRESH_RATE*1, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: 140, + height: 214, + }, + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manrunningsprite_left.png", + numberOfFrame: 15, + delta: 226, + rate: REFRESH_RATE*1, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: 140, + height: 214, + }, + // JUMPING + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manstandingsprite.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-2, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-20, + }, + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manstandingsprite_left.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-2, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-20, + }, + // RUNNING AND JUMPING + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manstandingsprite.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-2, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-20, + }, + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/manstandingsprite_left.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-2, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-20, + }, + ], + } + BIFF_HEIGHT = 500 + BIFF_WIDTH = 500 + BIFF_START_X = 20 + BIFF_START_Y = PLAYGROUND_HEIGHT - BIFF_HEIGHT - FLOOR_HEIGHT + FLOOR_DEPTH + TERMINAL_VELOCITY + 30 + var biff = + { + state: DUDE_STATE.IDLE_RIGHT, + activity: IDLE, + orientation: RIGHT, + can_jump: true, + running_while_jumping: true, + xspeed: 0, + yspeed: 0, + spoke: false, + x: BIFF_START_X, + y: BIFF_START_Y, + width: BIFF_WIDTH, + height: BIFF_HEIGHT, + animations: + [ + // IDLE + { + animation: new $.gameQuery.Animation( + { + imageURL: "/im/17/1299880975157dumpfmpepperglitter_hand_askin_left_1310538093_1310593206.gif", + numberOfFrame: 1, + delta: BIFF_HEIGHT, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: BIFF_WIDTH, + height: BIFF_HEIGHT, + }, + ], + } + $("#actors").addSprite("biff", + { + posx: BIFF_START_X, + posy: BIFF_START_Y, + width: BIFF_WIDTH, + height: BIFF_HEIGHT, + animation: biff.animations[0].animation, + geometry: $.gameQuery.GEOMETRY_RECTANGLE, + // callback: animate, + }) + $("#biff").data("actor", biff) + + $("#actors").addSprite("dude", + { + posx: DUDE_START_X, + posy: DUDE_START_Y, + width: DUDE_WIDTH, + height: DUDE_HEIGHT-20, + animation: dude.animations[0].animation, + geometry: $.gameQuery.GEOMETRY_RECTANGLE, + // callback: animate, + }) + $("#dude").data("actor", dude) + + + $(window).bind("blur", function (e) + { + $.each(KEYTRACK, function (k,v) { KEYTRACK[k] = false }) + }) + $(document).bind("keydown", function (e) + { + KEYTRACK[e.keyCode] = true + switch (e.keyCode) + { + case KEY_RIGHT: + dude.orientation = RIGHT + break + case KEY_LEFT: + dude.orientation = LEFT + break + case KEY_UP: + break + case KEY_DOWN: + break + } + }) + $(document).bind("keyup", function (e) + { + KEYTRACK[e.keyCode] = false + switch (e.keyCode) + { + case KEY_RIGHT: + break + case KEY_LEFT: + break + case KEY_UP: + break + case KEY_DOWN: + break + } + }) + + WATER_LINE = 10000 + function actor_has_landed (actor) + { + if (actor.x < WATER_LINE) + return (actor.y + actor.height) > (PLAYGROUND_HEIGHT - FLOOR_HEIGHT + FLOOR_DEPTH - TERMINAL_VELOCITY) + else + return true + } + $.playground().registerCallback( function () + { + switch (dude.activity) + { + case IDLE: + dude.can_jump = true + if (KEYTRACK[KEY_UP]) + { + dude.yspeed -= JUMP_POWER + dude.activity = JUMPING + } + else if (KEYTRACK[KEY_LEFT]) + { + dude.xspeed = -1 * RUN_SPEED + dude.activity = RUNNING + } + else if (KEYTRACK[KEY_RIGHT]) + { + dude.xspeed = RUN_SPEED + dude.activity = RUNNING + } + break + case RUNNING: + if (KEYTRACK[KEY_UP]) + { + dude.yspeed -= JUMP_POWER + dude.activity = RUNNING_AND_JUMPING + } + else if (KEYTRACK[KEY_LEFT]) + { + dude.orientation = LEFT + dude.xspeed = -1 * RUN_SPEED + if (dude.x <= -dude.width + 80) + dude.x = PLAYGROUND_WIDTH + } + else if (KEYTRACK[KEY_RIGHT]) + { + dude.orientation = RIGHT + dude.xspeed = RUN_SPEED + if (dude.x >= PLAYGROUND_WIDTH) + dude.x = -dude.width + } + else + { + dude.activity = IDLE + dude.xspeed = 0 + } + break + case JUMPING: + dude.yspeed = dude.yspeed + GRAVITY + if (dude.yspeed > TERMINAL_VELOCITY) + dude.yspeed = TERMINAL_VELOCITY + if (actor_has_landed(dude)) + { + dude.xspeed = 0 + dude.yspeed = 0 + dude.activity = IDLE + } + else if (KEYTRACK[KEY_LEFT]) + { + dude.activity = RUNNING_AND_JUMPING + dude.xspeed = -1 * RUN_SPEED + } + else if (KEYTRACK[KEY_RIGHT]) + { + dude.activity = RUNNING_AND_JUMPING + dude.xspeed = RUN_SPEED + } + break + case RUNNING_AND_JUMPING: + dude.yspeed = dude.yspeed + GRAVITY + if (dude.yspeed > TERMINAL_VELOCITY) + dude.yspeed = TERMINAL_VELOCITY + if (actor_has_landed(dude)) + { + dude.yspeed = 0 + if (KEYTRACK[KEY_UP]) + dude.yspeed -= JUMP_POWER + else + dude.activity = RUNNING + } + else if (KEYTRACK[KEY_LEFT]) + { + dude.xspeed = -1 * RUN_SPEED + dude.orientation = LEFT + dude.activity = RUNNING_AND_JUMPING + if (dude.x <= -dude.width + 80) + dude.x = PLAYGROUND_WIDTH + } + else if (KEYTRACK[KEY_RIGHT]) + { + dude.xspeed = RUN_SPEED + dude.orientation = RIGHT + dude.activity = RUNNING_AND_JUMPING + if (dude.x >= PLAYGROUND_WIDTH) + dude.x = -dude.width + } + else + { + dude.activity = JUMPING + } + break + } + + if (stage.x === 0) + { + if (KEYTRACK[KEY_LEFT] || dude.x < 310) + dude.x += dude.xspeed + else + { + stage.x -= dude.xspeed + if (stage.x > 0) + stage.x = 0 + } + if (dude.x < 160) + { + dude.x = 160 + if (dude.activity === JUMPING) + { + } + else if (dude.activity === RUNNING_AND_JUMPING) + { + dude.activity = JUMPING + } + else + dude.activity = IDLE + } + if (dude.x < 170) + { + $("#message").show(400, function(){$("#message").html("what up doe?"); }) + $("#message-corner").show(200) + biff.spoke = true + } + else if (dude.x > 190) + { + $("#message-corner").hide(100) + $("#message").hide(400).html("") + } + } + else if (stage.x > -1* (stage.sea_distance - 550)) // || dude.orientation === LEFT) + { + stage.x -= dude.xspeed + } + else + { + dude.x += dude.xspeed + if (dude.x > 400) + { + dude.x = 400 + if (dude.activity === JUMPING) + { + } + else if (dude.activity === RUNNING_AND_JUMPING) + { + dude.activity = JUMPING + } + else + dude.activity = IDLE + } + else if (dude.x < 350) + stage.x -= dude.xspeed + } + dude.y += dude.yspeed + $("#dude").css({"top": dude.y, "left": dude.x}) + update_animation($("#dude"), dude) + stage.scroll () + $("#hud").html( + [ + "dude @ ", dude.x, " ", dude.y, "<br/>", + "stage @ ", stage.x, " ", stage.y, "<br/>", + ].join(" ")) + }, REFRESH_RATE) + $.playground().startGame(function () + { + }) + }) + +</script> +</html> |