diff options
| author | Jules <jules@asdf.us> | 2016-11-10 15:34:53 -0500 |
|---|---|---|
| committer | Jules <jules@asdf.us> | 2016-11-10 15:34:53 -0500 |
| commit | dc06cab69f9e871aa8f7f519c964cf632d2217ea (patch) | |
| tree | 1c9344a58185c55f90c9b0db7f87c478e5d9a947 /v1.html | |
Diffstat (limited to 'v1.html')
| -rwxr-xr-x | v1.html | 230 |
1 files changed, 230 insertions, 0 deletions
@@ -0,0 +1,230 @@ +<!doctype html> +<html> +<head> +<title></title> +<style type="text/css"> +body + { + background-color: #fff; + } +#playground + { + border: 1px solid red; + } + +</style> +</head> +<body> + +<div id="playground"> +</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 = 900 +var PLAYGROUND_HEIGHT = 600 +var REFRESH_RATE = 30 + +$(function () + { + var KEY = + { + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, + } + var DUDE_STATE = + { + IDLE_RIGHT: 0, + IDLE_LEFT: 1, + RUN_RIGHT: 2, + RUN_LEFT: 3, + // JUMPING_RIGHT: 4, + // JUMPING_LEFT: 5, + } + + $("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH, refreshRate: REFRESH_RATE, keyTracker: false}) + $.each(KEY, function (k,v) { $.gameQuery.keyTracker[v] = false }) + + function changeAnimation (sprite, dude, newAnimation, oldAnimation) + { + if (newAnimation === oldAnimation) + return + dude.currentState = newAnimation + // if (dude.currentState == DUDE_STATE.JUMPING_RIGHT || dude.currentState == DUDE_STATE.JUMPING_LEFT) + + newAnim = dude.animations[newAnimation] + oldAnim = dude.animations[oldAnimation] + sprite.setAnimation(newAnim.animation) + .width(newAnim.width) + .height(newAnim.height) + .css("top", sprite.position().top + newAnim.deltaY - oldAnim.deltaY) + .css("left", sprite.position().left + newAnim.deltaX - oldAnim.deltaX) + } + function animate (sprite) + { + sprite = $(sprite) + actor = sprite.data("actor") + } + var sky = new $.gameQuery.Animation({imageURL: "./sky.png"}) + var sand = new $.gameQuery.Animation({imageURL: "./sand.png"}) + $.playground() + .addSprite( "sky", + { + posx: 0, + posy: 0, + width: 1024, + height: 600, + animation: sky, + }) + .addSprite( "sand", + { + posx: 0, + posy: PLAYGROUND_HEIGHT - 115, + width: 1018, + height: 115, + animation: sand, + }) + .addGroup("actors").end() + $("#sceengraph").css("background-color", "#88dddd") + + DUDE_WIDTH = 282 + DUDE_HEIGHT = 463 + var dude = + { + currentState: DUDE_STATE.IDLE_RIGHT, + // jumping: false, + position: 250, + width: DUDE_WIDTH, + animations: + [ + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/orig/manstandingsprite.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-1, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT, + }, + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/orig/manstandingsprite_left.png", + numberOfFrame: 8, + delta: DUDE_HEIGHT-1, + rate: REFRESH_RATE*1.5, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: 0, + width: DUDE_WIDTH, + height: DUDE_HEIGHT, + }, + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/orig/manrunningsprite.png", + numberOfFrame: 15, + delta: 456, + rate: REFRESH_RATE*1, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: -20, + width: 283, + height: 456, + }, + { + animation: new $.gameQuery.Animation( + { + imageURL: "sprites/orig/manrunningsprite_left.png", + numberOfFrame: 15, + delta: 456, + rate: REFRESH_RATE*1, + type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_CALLBACK + }), + deltaX: 0, + deltaY: -20, + width: 283, + height: 456, + }, + ], + } + $("#actors").addSprite("dude", + { + posx: 250, + posy: PLAYGROUND_HEIGHT - DUDE_HEIGHT - 115 + 65, + width: DUDE_WIDTH, + height: DUDE_HEIGHT, + animation: dude.animations[0].animation, + geometry: $.gameQuery.GEOMETRY_RECTANGLE, + callback: animate, + }) + $("#dude").data("actor", dude) + + + $(document).bind("keydown", function (e) + { + // if (dude.jumping) + // return + switch (e.keyCode) + { + // case KEY.UP: + // dude.jumping = true + // break + case KEY.RIGHT: + changeAnimation($("#dude"), dude, DUDE_STATE.RUN_RIGHT, dude.currentState) + break + case KEY.LEFT: + changeAnimation($("#dude"), dude, DUDE_STATE.RUN_LEFT, dude.currentState) + break + } + }) + $(document).bind("keyup", function (e) + { + // if (dude.jumping) + // return + switch (e.keyCode) + { + case KEY.RIGHT: + changeAnimation($("#dude"), dude, DUDE_STATE.IDLE_RIGHT, dude.currentState) + break + case KEY.LEFT: + changeAnimation($("#dude"), dude, DUDE_STATE.IDLE_LEFT, dude.currentState) + break + } + }) + + $.playground().registerCallback( function () + { + if (dude.currentState === DUDE_STATE.RUN_RIGHT) + { + dude.position += 20 + if (dude.position > PLAYGROUND_WIDTH) + dude.position = -dude.width + $("#dude").css("left", dude.position) + } + else if (dude.currentState === DUDE_STATE.RUN_LEFT) + { + dude.position -= 20 + if (dude.position < -dude.width + 80) + dude.position = PLAYGROUND_WIDTH + $("#dude").css("left", dude.position) + } + }, REFRESH_RATE) + $.playground().startGame(function () + { + }) + }) + +</script> +</html> |