Followed a tutorial, with the intent of simulating /r/place
This commit is contained in:
alisolarflare
parent
7e4741c607
commit
b9f1ffa185
8 changed files with 97 additions and 0 deletions
15
game.html
Normal file
15
game.html
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Javascript game</title>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
|
||||||
|
<script src="./game/tutorial.js" type="text/javascript"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id="myCanvas" width="640" height="480"
|
||||||
|
style="border: 1px solid gray; width: 640px; height: 480px"></canvas>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
game/blue_tile.png
Normal file
BIN
game/blue_tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
BIN
game/green_tile.png
Normal file
BIN
game/green_tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
BIN
game/purple_tile.png
Normal file
BIN
game/purple_tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
BIN
game/red_tile.png
Normal file
BIN
game/red_tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 B |
82
game/tutorial.js
Normal file
82
game/tutorial.js
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
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
|
||||||
|
};
|
||||||
|
}
|
||||||
BIN
game/white_tile.png
Normal file
BIN
game/white_tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 B |
BIN
game/yellow_tile.png
Normal file
BIN
game/yellow_tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 B |
Loading…
Reference in a new issue