Skip to content

Commit

Permalink
Replaced my gamepad with on screen one by verbalshadow
Browse files Browse the repository at this point in the history 
Signed-off-by: Gaurav Munjal <Gaurav0@aol.com>
  • Loading branch information
@Gaurav0
Gaurav0 committed Apr 10, 2011
1 parent a2fec6f commit a5c55fc
Show file tree
Hide file tree
Showing 7 changed files with 338 additions and 22 deletions.
Binary file removed images/gamepad.png
View file
Binary file not shown.
Binary file added images/meadow.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
306 changes: 306 additions & 0 deletions images/osck.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/screenshot2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion rpgdemo.css
View file
Expand Up @@ -14,7 +14,7 @@ canvas {
#gamepad {
display: none;
position: absolute;
top: 480px;
top: 120px;
left: 10px;
}

Expand Down
17 changes: 9 additions & 8 deletions rpgdemo.html
View file
Expand Up @@ -16,14 +16,14 @@ <h2>HTML5 Canvas Old School RPG Demo</h2>
<canvas id="spriteCanvas" width="416" height="352"></canvas>
<canvas id="menuCanvas" width="416" height="352"></canvas>
<canvas id="textCanvas" width="416" height="352"></canvas>
<div id="gamepad"><img src="images/gamepad.png" usemap="#gamepadmap">
<div id="gamepad"><img src="images/osck.svg" usemap="#gamepadmap">
<map id="gamepadmap" name="gamepad">
<area id="upButton" shape="rect" alt="Up" coords="63,1,104,38" href="#" title="Up" />
<area id="leftButton" shape="rect" alt="Left" coords="28,39,63,77" href="#" title="Left" />
<area id="rightButton" shape="rect" alt="Right" coords="104,38,140,77" href="#" title="Right" />
<area id="downButton" shape="rect" alt="Down" coords="63,77,104,114" href="#" title="Down" />
<area id="escButton" shape="circle" alt="ESC" coords="256,60,40" href="#" title="ESC" />
<area id="enterButton" shape="circle" alt="ENTER" coords="344,62,41" href="#" title="ENTER" />
<area id="upButton" shape="poly" alt="Up" coords="95,159,88,151,88,108,148,108,148,154,141,161" href="#" title="Up" />
<area id="rightButton" shape="poly" alt="Right" coords="142,161,149,154,195,154,195,212,149,212,140,203" href="#" title="Right" />
<area id="downButton" shape="poly" alt="Down" coords="138,205,148,215,148,261,88,261,88,216,98,206" href="#" title="Down" />
<area id="leftButton" shape="poly" alt="Left" coords="96,205,88,213,42,213,42,154,87,154,95,161" href="#" title="Left" />
<area id="escButton" shape="circle" alt="Esc" coords="273,183,35" href="#" title="Esc" />
<area id="enterButton" shape="rect" alt="Enter" coords="313,148,380,217" href="#" title="Enter" />
<area shape="default" nohref alt="" />
</map>
</div>
Expand All @@ -37,8 +37,9 @@ <h2>HTML5 Canvas Old School RPG Demo</h2>
<small><a href="http://www.rpgrevolution.com/forums/index.php?autocom=gallery&req=si&img=3879">Elfwood Forest Tileset</a> by Amaranth Games</small>
<small><a href="http://opengameart.org/content/trevor-overland">Player sprite</a> and <a href="http://opengameart.org/content/fantasy-rpg-npcs">NPC sprites</a> by Mandi Paugh</small>
<small><a href="http://opengameart.org/content/10-fantasy-rpg-enemies">Monster sprites</a> by Antifarea</small>
<small><a href="http://opengameart.org/content/rpg-gui-block-element">GUI block</a> by bart</small>
<small><a href="http://opengameart.org/content/rpg-gui-block-element">GUI block</a> and <a href="http://opengameart.org/content/meadow-background">Meadow</a> by bart</small>
<small><a href="http://opengameart.org/content/treasure-chests-32x32-and-16x16">Treasure chest</a> by Blarumyrran</small>
<small><a href="http://opengameart.org/content/on-screen-controller-kit">On Screen Game Controller Kit</a> by verbalshadow</small>
</footer>
<script type="text/javascript" src="rpgdemo.js"></script>
</body>
Expand Down
35 changes: 22 additions & 13 deletions rpgdemo.js
View file
Expand Up @@ -2281,6 +2281,7 @@ var Battle = Class.extend({
_init: function() {

// Initialize properties
this._background = null;
this._encounter = null;
this._ignoringKeys = false;
this._monsterList = null;
Expand Down Expand Up @@ -2324,7 +2325,9 @@ var Battle = Class.extend({
},

/* Setup random encounter */
setupRandomEncounter: function(zone) {
setupRandomEncounter: function(zone, background) {

this._background = background;

// Get encounter data associated with zone
var zoneXml = null;
Expand Down Expand Up @@ -2355,7 +2358,9 @@ var Battle = Class.extend({
},

/* Setup scripted encounter (for boss monsters, etc.) */
setupEncounter: function(name, aryMonsters) {
setupEncounter: function(name, aryMonsters, background) {

this._background = background;

// Create encounter object
this._encounter = {
Expand Down Expand Up @@ -2383,9 +2388,8 @@ var Battle = Class.extend({
var screenWidth = mapCanvas.width;
var screenHeight = mapCanvas.height;

// Change this to background pic later
mapCtx.fillStyle = "#0080ff";
mapCtx.fillRect(0, 0, screenWidth, screenHeight);
// Draw battle background
mapCtx.drawImage(this._background, 0, 0, screenWidth, screenHeight);

spriteCtx.clearRect(0, 0, screenWidth, screenHeight);
this.drawPlayer();
Expand Down Expand Up @@ -3377,16 +3381,12 @@ $(document).ready(function() {
if (showpad.innerHTML == "Show Gamepad") {
var gamepad = document.getElementById("gamepad");
gamepad.style.display = "block";
var footer = document.getElementsByTagName("footer")[0];
footer.style.top = "620px";
showpad.innerHTML = "Hide Gamepad";
var nokeyb = document.getElementById("nokeyb");
nokeyb.style.display = "none";
} else {
var gamepad = document.getElementById("gamepad");
gamepad.style.display = "none";
var footer = document.getElementsByTagName("footer")[0];
footer.style.top = "500px";
showpad.innerHTML = "Show Gamepad";
var nokeyb = document.getElementById("nokeyb");
nokeyb.style.display = "inline";
Expand Down Expand Up @@ -3424,9 +3424,13 @@ $(document).ready(function() {
g_player.plot();
};

// src set must be after onload function set due to bug in IE9b1
// src set must be after onload function set due to bug in IE9
img.src = "images/Trevor.png";

// Temporary background
var meadow = new Image();
meadow.src = "images/meadow.png";

// Setup random encounters
for (var x = 0; x < g_worldmap.getXLimit(); ++x)
for (var y = 0; y < g_worldmap.getYLimit(); ++y) {
Expand All @@ -3437,7 +3441,7 @@ $(document).ready(function() {
keyBuffer = 0;
g_battle = new Battle();
var zone = this.getZone();
g_battle.setupRandomEncounter(zone);
g_battle.setupRandomEncounter(zone, meadow);
g_battle.draw();
}
};
Expand Down Expand Up @@ -3638,6 +3642,11 @@ function setupForestMap(mapXml, tileset) {
var xLimit = map.getXLimit();
var yLimit = map.getYLimit();


// Temporary background
var meadow = new Image();
meadow.src = "images/meadow.png";

// Setup random encounters
for (var x = 0; x < xLimit; ++x)
for (var y = 0; y < yLimit; ++y) {
Expand All @@ -3647,7 +3656,7 @@ function setupForestMap(mapXml, tileset) {
if (Math.random() < BATTLE_FREQ) {
keyBuffer = 0;
g_battle = new Battle();
g_battle.setupRandomEncounter("forest");
g_battle.setupRandomEncounter("forest", meadow);
g_battle.draw();
}
};
Expand Down Expand Up @@ -3709,7 +3718,7 @@ function setupForestMap(mapXml, tileset) {
if (Math.random() < BATTLE_FREQ) {
keyBuffer = 0;
g_battle = new Battle();
g_battle.setupRandomEncounter("forest");
g_battle.setupRandomEncounter("forest", meadow);
g_battle.draw();
}
}
Expand Down

0 comments on commit a5c55fc

Please sign in to comment.