ChromaGaming/civ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

repurposed Game towards Map

Browse source
This commit is contained in:
alisolarflare 2017-06-28 20:49:42 -04:00
parent aef054896e
commit 5dc639fae7
15 changed files with 15 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -9,7 +9,7 @@
<nav> <nav>
<a href="./index.html">Main</a> <a href="./index.html">Main</a>
<a href="./sandbox.html">Sandbox</a> <a href="./sandbox.html">Sandbox</a>
<a href="./map.html">Game</a> <a href="./map.html">Map</a>
<a href="./rules.html">Rules</a> <a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a> <a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a> <a href="./spawn.html">Spawn</a>

12
map.html
View file

@ -4,15 +4,15 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Javascript game</title> <title>Civilization Map</title>
<script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script> <script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="./resources/game/tutorial.js" type="text/javascript"></script> <link rel="stylesheet" href="resources/game/css/style.css">
<link rel="stylesheet" href="resources/global/style.css">
<!-- Leaflet Interactive Map --> <!-- Leaflet Interactive Map -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
crossorigin=""/> crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
crossorigin=""></script> crossorigin=""></script>
@ -21,12 +21,12 @@
<nav> <nav>
<a href="./index.html">Main</a> <a href="./index.html">Main</a>
<a href="./sandbox.html">Sandbox</a> <a href="./sandbox.html">Sandbox</a>
<a href="./map.html">Game</a> <a href="./map.html">Map</a>
<a href="./rules.html">Rules</a> <a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a> <a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a> <a href="./spawn.html">Spawn</a>
</nav> </nav>
<canvas id="myCanvas" width="640" height="480"
style="border: 1px solid gray; width: 640px; height: 480px"></canvas> <img src="resources/game/images/biome_map_full_10.png" alt="" id="biome_map">
</body> </body>
</html> </html>

2
questions.html
View file

@ -12,7 +12,7 @@
<nav> <nav>
<a href="./index.html">Main</a> <a href="./index.html">Main</a>
<a href="./sandbox.html">Sandbox</a> <a href="./sandbox.html">Sandbox</a>
<a href="./map.html">Game</a> <a href="./map.html">Map</a>
<a href="./rules.html">Rules</a> <a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a> <a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a> <a href="./spawn.html">Spawn</a>

4
resources/game/css/style.css Normal file
View file

@ -0,0 +1,4 @@
#biome_map{
width: 100%;
height: auto;
}

0
resources/questions/images/biome_map_full_10.png → resources/game/images/biome_map_full_10.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

0
resources/game/blue_tile.png → resources/game/images/tiles/blue_tile.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

0
resources/game/green_tile.png → resources/game/images/tiles/green_tile.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

0
resources/game/purple_tile.png → resources/game/images/tiles/purple_tile.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

0
resources/game/red_tile.png → resources/game/images/tiles/red_tile.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

0
resources/game/white_tile.png → resources/game/images/tiles/white_tile.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 132 B

After

Width:  |  Height:  |  Size: 132 B

0
resources/game/yellow_tile.png → resources/game/images/tiles/yellow_tile.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 B

After

Width:  |  Height:  |  Size: 138 B

82
resources/game/tutorial.js
View file

@ -1,82 +0,0 @@
const World = function(canvas_id_tag){
this.canvas = document.getElementById(canvas_id_tag);
this.context = this.canvas.getContext("2d");
this.clear = function(background_color="white"){
this.context.beginPath();
this.context.rect(0,0,640,480);
this.context.fillStyle = background_color;
this.context.fill();
};
this.newSprite = function(filename, is_pattern=true){
var mySprite = new Sprite(filename, this, is_pattern=true);
return mySprite;
};
};
const Sprite = function(filename, world, is_pattern=true){
switch(filename){
case undefined: console.log("Unable to load Sprite: filename is undefined"); break;
case null: console.log("Unable to load Sprite: filename is null"); break;
case "": console.log("Unable to load sprite: filename is \"\""); break;
default:
break;
}//endswitch
this.image = new Image();
this.image.src = filename;
this.is_pattern = is_pattern;
const TO_RADIANS = Math.PI/180
if(is_pattern)
this.pattern = world.context.createPattern(this.image, "repeat")
this.draw = function(x, y, w=this.image.width, h=this.image.height){
world.context.drawImage(this.image, x, y, w, h);
}
this.rotate = function(x, y, degrees){
world.context.save();
world.context.translate(x,y);
world.context.rotate(degees * TO_RADIANS);
world.context.drawImage(
this.image,
-(this.image.width/2),
-(this.image.height/2)
);
world.context.restore();
}
};
var isReady = false;
var world;
var myCanvas;
$(document).ready(function(){
//Initialize
world = new World("canvas");
myCanvas = world.canvas;
world.clear();
const reddie = world.newSprite("./game/red_tile.png");
reddie.image.onload = function(){
reddie.draw(100, 100, 16, 16);
};
isReady = true;
});
$('#canvas').on('mousedown', function(e){
const pos = getMousePos(canvas, e);
mx = pos.x;
my = pos.y
console.log(mx, my);
reddie.draw(mx % 16, my % 16, 16, 16);
});
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}

2
rules.html
View file

@ -9,7 +9,7 @@
<nav> <nav>
<a href="./index.html">Main</a> <a href="./index.html">Main</a>
<a href="./sandbox.html">Sandbox</a> <a href="./sandbox.html">Sandbox</a>
<a href="./map.html">Game</a> <a href="./map.html">Map</a>
<a href="./rules.html">Rules</a> <a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a> <a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a> <a href="./spawn.html">Spawn</a>

2
sandbox.html
View file

@ -11,7 +11,7 @@
<nav> <nav>
<a href="./index.html">Main</a> <a href="./index.html">Main</a>
<a href="./sandbox.html">Sandbox</a> <a href="./sandbox.html">Sandbox</a>
<a href="./map.html">Game</a> <a href="./map.html">Map</a>
<a href="./rules.html">Rules</a> <a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a> <a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a> <a href="./spawn.html">Spawn</a>

2
spawn.html
View file

@ -15,7 +15,7 @@
<nav> <nav>
<a href="./index.html">Main</a> <a href="./index.html">Main</a>
<a href="./sandbox.html">Sandbox</a> <a href="./sandbox.html">Sandbox</a>
<a href="./map.html">Game</a> <a href="./map.html">Map</a>
<a href="./rules.html">Rules</a> <a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a> <a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a> <a href="./spawn.html">Spawn</a>