This is the HTML5 Basic set up for displaying the game on screen for now
<!DOCTYPE html> <html lang="en"> <head> Work In Progress <meta charset="utf-8" /> <title>HTML5 Canvas Spritesheet Example</title> <style> body { margin:0; padding:0; background-color:#000; } canvas { display:block; margin:20px auto 0; border:5px #ccc; background-image:url(background%201.gif) } </style> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script src="sprite_scripts.js"></script> </body> </html>
Here is how it looks in a browser for now, it will need further CCS3 styling and the resolutions made need to be bigger and edited to work with all screen sizes and different browsers.
So to put all the stuff on screen i need to use javascript which is the following below
//---------------------------------------------
//Player 1
//---------------------------------------------
var canvas, ctx, sprites,
width = 600,
height = 400,
rightKey = false,
leftKey = false,
upKey = false,
downKey = false,
char1_x = (width / 2) - 25, char1_y = height - 90, char1_w = 87, char1_h = 85,
char2_x = (width / 2) + 25, char2_y = height - 90, char2_w = 87, char2_h = 85,
srcX = 10, srcY = 0;
//Setting up on Screen sprites postion on the page
//---------------------------------------------
function clearCanvas() {
ctx.clearRect(0,0,600,400);
}
function drawchar1() {
if (rightKey) {
char1_x += 5;
srcX = 20;
} else if (leftKey) {
char1_x -= 5;
srcX = 83;
}
ctx.drawImage(sprites,srcX,srcY,char1_w,char1_h,char1_x,char1_y,char1_w,char1_h);
if (rightKey == false || leftKey == false) {
srcX = 10;
}
}
function loop() {
clearCanvas();
drawchar1();
drawchar2();
}
function keyDown(e) {
if (e.keyCode == 39) rightKey = true;
else if (e.keyCode == 37) leftKey = true;
else if (e.keyCode == 65) rightKey2 = true;
else if (e.keyCode == 68) leftKey2 = true;
}
function keyUp(e) {
if (e.keyCode == 39) rightKey = false;
else if (e.keyCode == 37) leftKey = false;
else if (e.keyCode == 65) rightKey2 = false;
else if (e.keyCode == 68) leftKey2 = false;
}
//-------------------------------------------
function drawchar2() {
if (rightKey2) {
char2_x += 5;
srcX = 20;
} else if (leftKey2) {
char2_x -= 5;
srcX = 83;
}
ctx.drawImage(sprites2,srcX,srcY,char2_w,char2_h,char2_x,char2_y,char2_w,char2_h);
if (rightKey2 == false || leftKey2 == false) {
srcX = 10;
}
}
//Sprite movement on screen
//---------------------------------------------
(function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
sprites = new Image();
sprites2 = new Image();
sprites.src = 'characterwalk1.png';
sprites2.src = 'characterwalk2.png';
setInterval(loop, 1000/30);
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
})();
//functions including loading
//---------------------------------------------
//Player 2
//---------------------------------------------
//init();// JavaScript Document
This document needs alot more development. its just the basic set up for now and is only capable of allowing the characters to move around the screen. So far I only have two characters onscreen and the health bar does not work yet .
