DIR : /home/kozerus/public_html/walk.html
/home/kozerus/public_html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>walk.html 20210617_1900 gaminglogy walk onepage b64</title>
<!--
<title>Gaminglogy Game Set Up</title>
-->
</head>
<body bgcolor="linen">
<div id="div_gamecanvas" >
<hr color=golderrod>
<hr color=golderrod>
<h1>div_gamecanvas</h1>
<canvas id="gameCanvas">
unauthorized access logged<br/>
<!--
Please upgrade your browser to support HTML5.<br/>
One recommendation is to install the latest Chrome or Firefox.
-->
</canvas>
<hr color=golderrod>
<hr color=golderrod>
</div>
<!-- <script type="text/javascript" src="walk_constants.js"></script> -->
<script id="script_walk_constants_js" >
//------------
//System Values
//------------
var STAGE_WIDTH = 600,
STAGE_HEIGHT = 400,
TIME_PER_FRAME = 33, //this equates to 30 fps
GAME_FONTS = "bold 20px sans-serif";
// var PATH_CHAR = "img/spritesheet.png";
var PATH_CHAR = "/walk_spritesheet.png";
// var PATH_CHAR = "/walk_spritesheet01.png";
// var PATH_CHAR = "/walk_spritesheet02.png";
// var PATH_CHAR = "/walk_spritesheet03.png";
// var PATH_CHAR = "/walk_spritesheet04.png";
var CHAR_WIDTH = 72,
CHAR_HEIGHT = 96,
CHAR_START_X = 200,
CHAR_START_Y = 200,
CHAR_SPEED = 5,
IMAGE_START_X = 0,
IMAGE_START_NORTH_Y = 0,
IMAGE_START_EAST_Y = 96,
IMAGE_START_SOUTH_Y = 192,
IMAGE_START_WEST_Y = 288,
SPRITE_WIDTH = 216;
var TEXT_PRELOADING = "Loading ...",
TEXT_PRELOADING_X = 200,
TEXT_PRELOADING_Y = 200;
</script>
<!-- <script type="text/javascript" src="walk_game.js"></script> -->
<script id="script_walk_game_js" >
//------------
//System Vars
//------------
var stage = document.getElementById("gameCanvas");
stage.width = STAGE_WIDTH;
stage.height = STAGE_HEIGHT;
var ctx = stage.getContext("2d");
// ctx.fillStyle = "grey";
ctx.fillStyle = "linen";
ctx.font = GAME_FONTS;
//---------------
//Preloading ...
//---------------
//Preload Art Assets
// - Sprite Sheet
var charImage = new Image();
charImage.ready = false;
charImage.onload = setAssetReady;
var b64_spritesheet_png = "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";
charImage.src = PATH_CHAR;
// charImage.src = spritesheet;
charImage.src = 'data:image/png;base64,' + b64_spritesheet_png;
charImage.src = 'walk_spritesheet01.png';
function setAssetReady() {
this.ready = true;
}
//Display Preloading
ctx.fillRect(0,0,stage.width,stage.height);
ctx.fillStyle = "#000";
ctx.fillText(TEXT_PRELOADING, TEXT_PRELOADING_X, TEXT_PRELOADING_Y);
var preloader = setInterval(preloading, TIME_PER_FRAME);
var gameloop, facing, currX, currY, charX, charY, isMoving;
function preloading() {
if (charImage.ready) {
clearInterval(preloader);
// Initialise game
facing = "E"; //N = North, E = East, S = South, W = West
isMoving = false;
gameloop = setInterval(update, TIME_PER_FRAME);
document.addEventListener("keydown",keyDownHandler, false);
document.addEventListener("keyup",keyUpHandler, false);
}
}
//------------
//Key Handlers
//------------
function keyDownHandler(event) {
var keyPressed = String.fromCharCode(event.keyCode);
// alert( "BUGS_130 keydownhandler keyPressed="+ String.fromCharCode(event.keyCode));
// arrowkey_left = 37 &
// arrowkey_up = 38 %
// arrowkey_right = 39 '
// arrowkey_down = 40 (
if ((keyPressed == "W") || (keyPressed == "K") || (keyPressed == '38' ) || (keyPressed == '&' )) {
facing = "N";
isMoving = true;
}
else if ((keyPressed == "D") || (keyPressed == "J") || (keyPressed == '40' ) || (keyPressed == "'" )) {
facing = "E";
isMoving = true;
}
else if ((keyPressed == "S") || (keyPressed == "H") || (keyPressed == '37' ) || (keyPressed == "(" )) {
facing = "S";
isMoving = true;
}
else if ((keyPressed == "A") || (keyPressed == "L") || (keyPressed == '39' ) || (keyPressed == "%" )) {
facing = "W";
isMoving = true;
}
}
function keyUpHandler(event) {
var keyPressed = String.fromCharCode(event.keyCode);
// alert( "BUGS_keyuphandler event="+event+" string.fromCharCode(event.keycode)="+String.fromCharCode(event.keyCode) );
if ((keyPressed == "W") || (keyPressed == "A") ||
(keyPressed == "S") ||
(keyPressed == "D") ||
(keyPressed == "H") ||
(keyPressed == "L") ||
(keyPressed == "J") ||
(keyPressed == "&") ||
(keyPressed == "%") ||
(keyPressed == "'") ||
(keyPressed == "(") ||
(keyPressed == "K")) {
isMoving = false;
}
}
//------------
//Game Loop
//------------
charX = CHAR_START_X;
charY = CHAR_START_Y;
currX = IMAGE_START_X;
currY = IMAGE_START_EAST_Y;
function update() {
// Clear Canvas
// ctx.fillStyle = "grey";
// ctx.fillStyle = "linen";
ctx.fillStyle = "goldenrod";
ctx.fillRect(0, 0, stage.width, stage.height);
if (isMoving) {
if (facing == "N") {
charY -= CHAR_SPEED;
currY = IMAGE_START_NORTH_Y;
}
else if (facing == "E") {
charX += CHAR_SPEED;
currY = IMAGE_START_EAST_Y;
}
else if (facing == "S") {
charY += CHAR_SPEED;
currY = IMAGE_START_SOUTH_Y;
}
else if (facing == "W") {
charX -= CHAR_SPEED;
currY = IMAGE_START_WEST_Y;
}
currX += CHAR_WIDTH;
if (currX >= SPRITE_WIDTH) currX = 0;
}
//Draw Image
ctx.drawImage(charImage,currX,currY,CHAR_WIDTH,CHAR_HEIGHT,
charX,charY,CHAR_WIDTH,CHAR_HEIGHT);
var text = "("+currX+","+currY+") ";
// alert( "BUGS_101 text="+text );
ctx.fillStyle = "white";
ctx.font = "20px Arial";
// ctx.fillText(text,10,10);
// ctx.fillText(text, canvas.width/2, canvas.height/2);
ctx.fillText(text, 20, 20);
// alert( "BUGS_104 text="+text );
}
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer