arne/asdf-games
2
1
Fork 1
Code Issues Pull Requests Releases 1 Wiki Activity

Cleaned up repo and added XML spritesheet support

Browse Source
This commit is contained in:
Arne van Iterson 2019-12-31 15:33:27 +01:00
parent 65f3f6cab1
commit 91af017b19
84 changed files with 75 additions and 1077 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
projects/
node_modules/

45
asdf/TileMapXML.js Normal file
View File

@ -0,0 +1,45 @@
// XML format must be:
// <TextureAlias imagePath="">
// <SubTexture x="" y="" width="" height=""></SubTexture>
// ...
// </TextureAlias>
class TileMapXML {
constructor(url) {
this.array = [];
this.fetchXMLtoArray(url);
}
fetchXMLtoArray(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.send(null);
if (xhr.status === 200) {
var children = xhr.responseXML.children[0].children;
for (let index = 0; index < children.length; index++) {
const element = children[index];
this.array.push({
name: element.attributes.name.nodeValue,
x: element.attributes.x.nodeValue,
y: element.attributes.y.nodeValue,
width: element.attributes.width.nodeValue,
height: element.attributes.height.nodeValue
});
}
} else {
console.error('XML file cannot be loaded!')
}
}
findIndex(attribute, value) {
for (let index = 0; index < this.array.length; index++) {
const element = this.array[index];
if (element[attribute] == value) {
return index;
}
}
}
}
export default TileMapXML;

13
asdf/TileSpriteXML.js Normal file
View File

@ -0,0 +1,13 @@
import Sprite from "./Sprite.js";
class TileSpriteXML extends Sprite {
constructor (texture, xml, index) {
super(texture);
var src = xml.array[index];
this.imgPos = { x: src['x'], y: src['y'] };
this.width = src['width'];
this.height = src['height'];
}
}
export default TileSpriteXML;

2
asdf/controls/MouseControls.js
View File

@ -1,6 +1,6 @@
class MouseControls { class MouseControls {
constructor(container) { constructor(container) {
this.el = container || document.body this.el = container || document.body;
// State // State
this.pos = {x: 0, y: 0}; this.pos = {x: 0, y: 0};
this.isDown = false; this.isDown = false;

5
asdf/index.js
View File

@ -9,9 +9,12 @@ import MouseControls from "./controls/MouseControls.js";
import Sprite from "./Sprite.js"; import Sprite from "./Sprite.js";
import TileSprite from "./TileSprite.js"; import TileSprite from "./TileSprite.js";
import TileSpriteXML from "./TileSpriteXML.js";
import Text from "./Text.js"; import Text from "./Text.js";
import Texture from "./Texture.js"; import Texture from "./Texture.js";
import TileMapXML from "./TileMapXML.js";
export default { export default {
CanvasRenderer, CanvasRenderer,
Container, Container,
@ -21,6 +24,8 @@ export default {
MouseControls, MouseControls,
Sprite, Sprite,
TileSprite, TileSprite,
TileMapXML,
TileSpriteXML,
Text, Text,
Texture Texture
}; };

9
asdf/renderer/CanvasRenderer.js
View File

@ -67,6 +67,15 @@ class CanvasRenderer {
0,0, 0,0,
child.tileW, child.tileH child.tileW, child.tileH
); );
} else if (child.imgPos && child.width && child.height) {
ctx.drawImage(
img,
child.imgPos.x,
child.imgPos.y,
child.width, child.height,
0,0,
child.width, child.height
);
} else { } else {
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
} }

BIN
ctx-test/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

13
ctx-test/index.html
View File

@ -1,13 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<canvas width="640" height="480"></canvas>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

59
ctx-test/lib/KeyControls.js
View File

@ -1,59 +0,0 @@
class KeyControls {
constructor() {
this.keys = {};
// Bind event handlers
document.addEventListener("keydown", e => {
if ([37,38,39,40].indexOf(e.which) >= 0) {
e.preventDefault();
}
this.keys[e.which] = true;
}, false);
document.addEventListener('keyup', e => {
this.keys[e.which] = false;
}, false);
}
// Handle key actions
get action() {
// Spacebar
return this.keys[32];
}
get x () {
// Arrow Left or A (WASD)
if (this.keys[37] || this.keys[65]) {
return -1;
}
// Arrow Right or D (WASD)
if (this.keys[39] || this.keys[68]) {
return 1;
}
return 0;
}
get y () {
// Arrow Up or W (WASD)
if (this.keys[38] || this.keys[87]) {
return -1;
}
// Arrow Down or S (WASD)
if (this.keys[40] || this.keys[83]) {
return 1;
}
return 0;
}
key(key, value) {
if (value !== undefined) {
this.keys[key] = value;
}
return this.keys[key];
}
reset() {
for (let key in this.keys) {
this.keys[key] = false;
}
}
}
export default KeyControls;

46
ctx-test/lib/MouseControls.js
View File

@ -1,46 +0,0 @@
class MouseControls {
constructor(container) {
this.el = container || document.body
// State
this.pos = {x: 0, y: 0};
this.isDown = false;
this.pressed = false;
this.released = false;
// Handlers
document.addEventListener('mousemove', this.move.bind(this), false);
document.addEventListener('mousedown', this.down.bind(this), false);
document.addEventListener('mouseup', this.up.bind(this), false);
}
mousePosFromEvent({ clientX, clientY }) {
const { el, pos } = this;
const rect = el.getBoundingClientRect();
const xr = el.width / el.clientWidth;
const yr = el.height / el.clientHeight;
pos.x = (clientX - rect.left) * xr;
pos.y = (clientY - rect.top) * yr;
}
move(e) {
this.mousePosFromEvent(e);
}
down(e) {
this.isDown = true;
this.pressed = true;
this.mousePosFromEvent(e);
}
up() {
this.isDown = false;
this.released = true;
}
update() {
this.released = false;
this.pressed = false;
}
}
export default MouseControls;

20
ctx-test/package.json
View File

@ -1,20 +0,0 @@
{
"name": "asdf-ctx-test",
"version": "1.0.0",
"description": "Canvas renderer test",
"main": "index.html",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "na"
},
"keywords": [
"canvas",
"renderer",
"test",
"asdf"
],
"author": "Arne van Iterson",
"license": "ISC"
}

BIN
ctx-test/res/images/rc2000.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
ctx-test/res/images/rick.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

17
ctx-test/res/main.css
View File

@ -1,17 +0,0 @@
body {
background-color: rgba(42, 42, 46, 1);
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#board {
position: relative;
background-color: #111;
width: 640px;
height: 480px;
margin: auto;
border: 5px solid whitesmoke;
}

34
ctx-test/src/main.js
View File

@ -1,34 +0,0 @@
import asdf from "../../asdf/index.js";
const { Container, CanvasRenderer, KeyControls, MouseControls, Text, Texture, Sprite } = asdf;
const canvas = document.querySelector("#board canvas");
const ctx = canvas.getContext("2d");
const { width: w, height: h } = canvas;
console.log(canvas);
// Setup Code
const controls = new KeyControls();
const mouse = new MouseControls(canvas);
let x = w / 2;
let y = h / 2;
// Looping Code
function loopme(ms) {
requestAnimationFrame(loopme);
ctx.fillStyle = '#111'
// Game logic code
ctx.save();
ctx.fillRect(0,0,w,h);
x = mouse.pos.x * 1;
y = mouse.pos.y * 1;
if (mouse.isDown) {
ctx.fillStyle = '#00f'
} else {
ctx.fillStyle = '#f00'
}
ctx.fillRect(x, y, 5, 5);
ctx.fillRect(0, 0, 5, 5);
ctx.restore();
mouse.update();
}
requestAnimationFrame(loopme);

BIN
lib-test/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

13
lib-test/index.html
View File

@ -1,13 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<!-- Renderer will push content here -->
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

19
lib-test/package.json
View File

@ -1,19 +0,0 @@
{
"name": "asdf-lib-test",
"version": "1.0.0",
"description": "Library test",
"main": "index.html",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "na"
},
"keywords": [
"library",
"test",
"asdf"
],
"author": "Arne van Iterson",
"license": "ISC"
}

BIN
lib-test/res/images/building.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
lib-test/res/images/characters.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
lib-test/res/images/rc2000.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
lib-test/res/images/rick.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
lib-test/res/images/spaceship.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 405 B

BIN
lib-test/res/images/tiles_packed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

17
lib-test/res/main.css
View File

@ -1,17 +0,0 @@
body {
background-color: rgba(42, 42, 46, 1);
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#board {
position: relative;
background-color: #111;
width: max-content;
height: auto;
margin: auto;
border: 5px solid whitesmoke;
}

48
lib-test/src/main.js
View File

@ -1,48 +0,0 @@
import asdf from "../../asdf/index.js";
const { Game, Container, CanvasRenderer, math, KeyControls, MouseControls, Text, Texture, Sprite } = asdf;
const game = new Game(640, 320, false);
const { scene, w, h } = game;
const buildings = scene.add(new Container());
const makeRandom = (b, x) => {
b.scale.x = math.randf(1,3);
b.scale.y = math.randf(1,3);
b.pos.x = x;
b.pos.y = h - b.scale.y * 64;
};
for (let x = 0; x < 50; x++) {
const b = buildings.add(new Sprite(new Texture("res/images/building.png")));
makeRandom(b, math.rand(w));
}
var rotation = 0;
const ship = new Sprite(new Texture("res/images/spaceship.png"));
ship.pivot = { x: 16, y: 16 };
scene.add(ship);
game.run((dt ,t) => {
ship.update = function(dt, t) {
const {scale} = this;
scale.x = Math.abs(Math.sin(t)) + 1;
scale.y = Math.abs(Math.sin(t)) + 1;
rotation = rotation + 0.2;
ship.rotation = rotation;
ship.pos.y = (Math.abs(Math.sin(t))) * 50 + (h / 2) - 16;
ship.pos.x += dt * 50;
if (ship.pos.x > w) {
ship.pos.x = -32;
}
}
buildings.map(b => {
b.pos.x -= 100 * dt;
if (b.pos.x < -80) {
makeRandom(b,w);
}
});
});

BIN
other/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

BIN
other/raindrops/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

13
other/raindrops/index.html
View File

@ -1,13 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<canvas width="640" height="480"></canvas>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

11
other/raindrops/package.json
View File

@ -1,11 +0,0 @@
{
"name": "game",
"version": "1.0.0",
"description": "My first game",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Arne van Iterson",
"license": "ISC"
}

BIN
other/raindrops/res/images/rc2000.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
other/raindrops/res/images/rick.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

17
other/raindrops/res/main.css
View File

@ -1,17 +0,0 @@
body {
background-color: rgba(42, 42, 46, 1);
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#board {
position: relative;
background-color: #111;
width: 640px;
height: 480px;
margin: auto;
border: 5px solid whitesmoke;
}

30
other/raindrops/src/main.js
View File

@ -1,30 +0,0 @@
const canvas = document.querySelector("#board canvas");
const ctx = canvas.getContext("2d");
const { width: w, height: h } = canvas;
const center = w / 2;
// Setup Code
ctx.fillStyle = '#000';
ctx.globalAlpha = 0.02;
// Looping Code
function loopme(t) {
requestAnimationFrame(loopme);
// Logic Code
ctx.save();
ctx.fillRect(0,0,w,h);
ctx.fillStyle = '#fff';
ctx.globalAlpha = 1;
const x = Math.random() * w;
const y = Math.random() * h;
const radius = Math.random() * 10;
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI * 2)
ctx.fill();
ctx.restore();
}
requestAnimationFrame(loopme);

19
other/snowflakes/index.html
View File

@ -1,19 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<style>
@font-face {
font-family: 'Visitor';
src: URL('res/visitor1.ttf') format('truetype');
}
</style>
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<canvas width="640" height="480"></canvas>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

11
other/snowflakes/package.json
View File

@ -1,11 +0,0 @@
{
"name": "game",
"version": "1.0.0",
"description": "My first game",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Arne van Iterson",
"license": "ISC"
}

BIN
other/snowflakes/res/images/rick.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
other/snowflakes/res/images/snowflake.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

10
other/snowflakes/res/main.css
View File

@ -1,10 +0,0 @@
body {
/* font-family: "Visitor", sans-serif; */
background-color: rgba(42, 42, 46, 1);
}
#board {
width: 640px;
height: 480px;
margin: auto;
background-color: white;
}

BIN
other/snowflakes/res/visitor1.ttf
View File

Binary file not shown.

23
other/snowflakes/src/main.js
View File

@ -1,23 +0,0 @@
const canvas = document.querySelector("#board canvas");
const ctx = canvas.getContext("2d");
const { width: w, height: h } = canvas;
const center = w / 2;
ctx.fillStyle = "#111";
ctx.fillRect(0, 0, w, h);
const img = new Image();
img.src = "res/images/snowflake.png";
img.addEventListener("load", draw, false);
function draw() {
const { width, height } = img;
for (let i = 0; i < 100; i++) {
const x = Math.random() * w;
const y = Math.random() * h;
const scale = Math.random();
ctx.drawImage(img, x, y, width * scale, height * scale);
}
}

BIN
other/stars/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

13
other/stars/index.html
View File

@ -1,13 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<canvas width="640" height="480"></canvas>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

11
other/stars/package.json
View File

@ -1,11 +0,0 @@
{
"name": "game",
"version": "1.0.0",
"description": "My first game",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Arne van Iterson",
"license": "ISC"
}

14
other/stars/res/main.css
View File

@ -1,14 +0,0 @@
@font-face {
font-family: 'Visitor';
src: URL('/data/visitor1.ttf') format('truetype');
}
body {
/* font-family: "Visitor", sans-serif; */
background-color: rgba(42, 42, 46, 1);
}
#board {
width: 640px;
height: 480px;
margin: auto;
background-color: white;
}

17
other/stars/src/main.js
View File

@ -1,17 +0,0 @@
const canvas = document.querySelector("#board canvas");
const ctx = canvas.getContext("2d");
const { width: w, height: h } = canvas;
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = "#555";
let x, y, radius;
for (let i = 0; i < 550; i++) {
x = Math.random() * w;
y = Math.random() * h;
radius = Math.random() * 3;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, false);
ctx.fill();
}

BIN
other/text/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

19
other/text/index.html
View File

@ -1,19 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<style>
@font-face {
font-family: 'Visitor';
src: URL('res/visitor1.ttf') format('truetype');
}
</style>
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<canvas width="640" height="480"></canvas>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

11
other/text/package.json
View File

@ -1,11 +0,0 @@
{
"name": "game",
"version": "1.0.0",
"description": "My first game",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Arne van Iterson",
"license": "ISC"
}

10
other/text/res/main.css
View File

@ -1,10 +0,0 @@
body {
/* font-family: "Visitor", sans-serif; */
background-color: rgba(42, 42, 46, 1);
}
#board {
width: 640px;
height: 480px;
margin: auto;
background-color: white;
}

BIN
other/text/res/visitor1.ttf
View File

Binary file not shown.

30
other/text/src/main.js
View File

@ -1,30 +0,0 @@
const canvas = document.querySelector("#board canvas");
const ctx = canvas.getContext("2d");
const { width: w, height: h } = canvas;
const center = w / 2;
ctx.fillStyle = "black";
ctx.font = "20px Visitor";
ctx.textAlign = "left";
function printText(str, l) {
var words = str.split(" ");
var text = "";
var line = 1;
for (var i = 0; i < words.length; i++) {
console.log(words[i]);
if ((text.split("").length + words[i].split("").length + 1) <= l * line) {
text = text + `${words[i]}`;
if (words[i + 1] != undefined) {
if ((text.split("").length + words[i + 1].split("").length + 1) <= l * line) {
text = text + ` `;
}
}
} else {
text = text + "\n" + `${words[i]}` + " ";
line++;
}
}
console.log(text);
}
printText("Oh really, are you going to tell me this function is going to cut of the words very awkwardly?", 32);

BIN
rc2000/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

14
rc2000/index.html
View File

@ -1,14 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<span id="remain"></span>
</div>
<p style="color: white; font-size: 32px;">Rick Clicker 2000. Rick the clicks!
<script type="module" src="src/main.js"></script>
</body>
</html>

20
rc2000/package.json
View File

@ -1,20 +0,0 @@
{
"name": "rc2000",
"version": "1.0.0",
"description": "Rick Clicker 2000",
"main": "index.html",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "na"
},
"keywords": [
"DOM",
"Rick Ashley",
"Clicker",
"Game"
],
"author": "Arne van Iterson",
"license": "ISC"
}

BIN
rc2000/res/images/rc2000.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
rc2000/res/images/rick.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

28
rc2000/res/main.css
View File

@ -1,28 +0,0 @@
@font-face {
font-family: 'Visitor';
src: URL('/data/visitor1.ttf') format('truetype');
}
body {
font-family: "Visitor", sans-serif;
background-color: rgba(42, 42, 46, 1);
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#board {
position: relative;
background-color: #8CD;
width: 640px;
height: 480px;
margin: auto;
background-image: url('images/rc2000.png');
background-repeat: no-repeat;
background-position: center center;
border: 5px solid whitesmoke;
border-radius: 8px;
}

39
rc2000/src/main.js
View File

@ -1,39 +0,0 @@
let clickers = 50;
let startTime = Date.now();
function sync(dom, pos) {
dom.style.left = `${pos.x}px`,
dom.style.top = `${pos.y}px`
};
function addClicker() {
const pos = {
x: Math.random() * 500,
y: Math.random() * 300
};
const img = new Image();
img.src = "res/images/rick.png";
img.style.position = "absolute";
img.addEventListener("click", removeClicker, false);
document.querySelector("#board").appendChild(img);
sync(img, pos);
};
function removeClicker(e) {
e.target.parentNode.removeChild(e.target);
clickers--;
checkGameOver();
};
function checkGameOver() {
document.querySelector("#remain").innerHTML = clickers;
if (clickers === 0) {
const taken = Math.round((Date.now() - startTime) / 1000)
alert(`De-rick-ed in ${taken} seconds!`)
}
};
for (let i = 0; i < clickers; i++) {
addClicker();
};

BIN
shooter/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

20
shooter/index.html
View File

@ -1,20 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<header class="title">SPACEMANIA 2000</header>
<div id="board">
<!-- Renderer will push content here -->
</div>
<div class="controls_container">
<span style="grid-area: control_1" class="control" title="W, A, S and D Keys">W<br>ASD</span>
<span style="grid-area: control_def_1" class="control_definition" title="Move your spacecraft!">Move</span>
<span style="grid-area: control_2" class="control" title="Space Key"><br>_</span>
<span style="grid-area: control_def_2" class="control_definition" title="Shoot Bullets!">Shoot</span>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

21
shooter/package.json
View File

@ -1,21 +0,0 @@
{
"name": "asdf-shooter",
"version": "1.0.0",
"description": "Spacemania 2000 Shooter Game",
"main": "index.html",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "na"
},
"keywords": [
"shooter",
"spacemania",
"2000",
"game",
"asdf"
],
"author": "Arne van Iterson",
"license": "ISC"
}

BIN
shooter/res/fonts/Keycaps Regular.ttf
View File

Binary file not shown.

BIN
shooter/res/fonts/keycaps.TTF
View File

Binary file not shown.

BIN
shooter/res/fonts/visitor1.ttf
View File

Binary file not shown.

BIN
shooter/res/images/baddie.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 235 B

BIN
shooter/res/images/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
shooter/res/images/bullet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 159 B

BIN
shooter/res/images/spaceship.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 405 B

56
shooter/res/main.css
View File

@ -1,56 +0,0 @@
@font-face {
font-family: "Visitor";
font-style: normal;
src: url("./fonts/visitor1.ttf") format("truetype");
}
@font-face {
font-family: "KeyCaps";
font-style: normal;
src: url("./fonts/keycaps.TTF") format("truetype");
}
.title {
font-family: "Visitor";
font-size: 40px;
color: white;
}
body {
background-color: rgba(42, 42, 46, 1);
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#board {
position: relative;
background-color: #111;
width: 640px;
height: auto;
margin: auto;
border: 5px solid whitesmoke;
}
.controls_container {
padding: 20px;
color: white;
text-align: center;
display: grid;
grid-template-areas:
'control_1 control_2'
'control_def_1 control_def_2';
grid-gap: 10px;
width: 300px;
left: calc(50% - 160px);
position: absolute;
}
.control {
font-family: "KeyCaps";
font-size: 33px;
display: inline-block;
vertical-align: middle;
width: 150px;
}
.control_definition {
font-family: "Visitor";
width: 150px;
}

178
shooter/src/main.js
View File

@ -1,178 +0,0 @@
import asdf from "../../asdf/index.js";
const { Container, CanvasRenderer, KeyControls, MouseControls, Text, Texture, Sprite } = asdf;
// Board Setup
const w = 640;
const h = 300;
const renderer = new CanvasRenderer(w, h);
document.querySelector("#board").appendChild(renderer.view);
// Setup game variables
let dt = 0;
let last = 0;
let lastShot = 0;
let lastSpawn = 0;
let spawnSpeed = 1.0;
let scoreAmount = 0;
let gameOver = false;
// Setup game objects
const scene = new Container();
// Load game textures
const textures = {
background: new Texture("./res/images/bg.png"),
spaceship: new Texture("./res/images/spaceship.png"),
bullet: new Texture("./res/images/bullet.png"),
baddie: new Texture("./res/images/baddie.png")
}
// Spaceship
const controls = new KeyControls();
const ship = new Sprite(textures.spaceship);
ship.pos.x = 120;
ship.pos.y = h / 2 - 16;
ship.update = function(dt, t) {
const { pos } = this;
pos.x += controls.x * dt * 300;
pos.y += controls.y * dt * 300;
if (pos.x < 0) pos.x = 0;
if (pos.x > w - 32) pos.x = w - 32;
if (pos.y < 0) pos.y = 0;
if (pos.y > h - 32) pos.y = h - 32;
}
// Bullets
const bullets = new Container();
function fireBullet(x, y) {
const bullet = new Sprite(textures.bullet);
bullet.pos.x = x;
bullet.pos.y = y;
bullet.update = function(dt, t) {
bullet.pos.x += 400 * dt;
}
bullets.add(bullet);
}
// Bad guys
const baddies = new Container();
function spawnBaddie(x, y, speed) {
const baddie = new Sprite(textures.baddie);
baddie.pos.x = x;
baddie.pos.y = y;
baddie.update = function(dt) {
this.pos.x += speed * dt;
this.pos.y += Math.sin(this.pos.x / 15) * 1;
};
baddies.add(baddie);
}
// Show score
const score = new Text(`${scoreAmount}`, {
font: "15pt Visitor",
fill: "#000000",
align: "left"
});
score.pos.x = 50;
score.pos.y = 15;
score.update = function() {
if (gameOver) {
score.pos.x = w / 2;
score.pos.y = (h / 3) * 2;
score.text = `Score: ` + `${scoreAmount}`;
score.style.align = "center";
score.style.font = "24pt Visitor"
} else {
score.text = `${scoreAmount}`;
}
}
// Gameover
function doGameOver() {
const gameOverMessage = new Text(`Game Over`, {
font: "45pt Visitor",
fill: "#000000",
align: "center"
});
gameOverMessage.pos.x = w / 2;
gameOverMessage.pos.y = h / 3;
scene.add(gameOverMessage);
scene.remove(ship);
scene.remove(baddies);
scene.remove(bullets);
gameOver = true;
}
// Add game objects
scene.add(new Sprite(textures.background));
scene.add(ship);
scene.add(bullets);
scene.add(baddies);
scene.add(score);
// Looping Code
function loopme(ms) {
requestAnimationFrame(loopme);
const t = ms / 1000;
dt = t - last;
last = t;
// Game logic code
if (controls.action && t - lastShot > 0.15) {
lastShot = t;
fireBullet(ship.pos.x + 24, ship.pos.y + 10);
}
// Spawn bad guys
if (t - lastSpawn > spawnSpeed) {
lastSpawn = t;
const speed = -50 - (Math.random() * Math.random() * 100);
const position = Math.random() * (h - 24);
spawnBaddie(w, position, speed);
spawnSpeed = spawnSpeed < 0.05 ? 0.6 : spawnSpeed * 0.97 + 0.001;
}
// Destroy bullets when they go out of the screen
baddies.children.forEach(baddie => {
bullets.children.forEach(bullet => {
let dx_b = baddie.pos.x + 16 - (bullet.pos.x + 8);
let dy_b = baddie.pos.y + 16 - (bullet.pos.y + 8);
if (Math.sqrt(dx_b * dx_b + dy_b * dy_b) < 24) {
bullet.dead = true;
baddie.dead = true;
if (!gameOver) {
scoreAmount += Math.floor(t);
}
}
if (bullet.pos.x > w + 20) {
bullet.dead = true;
}
});
let dx_s = baddie.pos.x + 16 - (ship.pos.x + 16)
let dy_s = baddie.pos.y + 16 - (ship.pos.y + 16)
if (Math.sqrt(dx_s * dx_s + dy_s * dy_s) < 32) {
if (!gameOver) {
doGameOver();
}
baddie.dead = true;
}
if (baddie.pos.x < -32) {
if (!gameOver) {
doGameOver();
}
baddie.dead = true;
}
});
scene.update(dt, t);
renderer.render(scene);
}
requestAnimationFrame(loopme);

41
tile-test/entities/King.js
View File

@ -1,41 +0,0 @@
import asdf from "../../asdf/index.js";
const { TileSprite, Texture, math } = asdf;
const texture = new Texture("./res/images/characters.png");
class King extends TileSprite {
constructor () {
super(texture, 32, 32);
this.scale = { x: 2, y: 2 };
this.rate = 0.1;
this.frames = [
{ x: 0, y: 1 },
{ x: 1, y: 1 },
{ x: 2, y: 1 },
{ x: 3, y: 1 }
];
this.curTime = 0;
this.curFrame = math.rand(0, this.frames.length);
this.frame = this.frames[this.curFrame];
this.speed = math.rand(20, 100)
this.pos.y = math.rand(-16, 304);
this.pos.x = math.rand(-32, 640);
}
update (dt, t) {
const { rate, frames } = this;
this.curTime += dt;
if (this.curTime > rate) {
this.frame = frames[this.curFrame++ % frames.length];
this.curTime -= rate;
}
this.pos.x += (dt * this.speed);
if (this.pos.x > 640 + 32) {
this.pos.y = math.rand(-16, 304);
this.pos.x = -32;
}
}
}
export default King;

41
tile-test/entities/Snake.js
View File

@ -1,41 +0,0 @@
import asdf from "../../asdf/index.js";
const { TileSprite, Texture, math } = asdf;
const texture = new Texture("./res/images/characters.png");
class Snake extends TileSprite {
constructor () {
super(texture, 32, 32);
this.scale = { x: 2, y: 2 };
this.rate = 0.1;
this.curTime = 0;
this.curFrame = 0;
this.frames = [
{ x: 0, y: 3 },
{ x: 1, y: 3 },
{ x: 2, y: 3 },
{ x: 3, y: 3 }
];
this.frame = this.frames[this.curFrame];
this.speed = math.rand(50, 100)
this.pos.y = math.rand(0, 320);
this.pos.x = math.rand(-32, 320);
}
update (dt, t) {
const { rate, frames } = this;
this.curTime += dt;
if (this.curTime > rate) {
this.frame = frames[this.curFrame++ % frames.length];
this.curTime -= rate;
}
this.pos.x += (dt * this.speed);
if (this.pos.x > 640 + 32) {
this.pos.y = math.rand(-16, 304);
this.pos.x = -32;
}
}
}
export default Snake;

BIN
tile-test/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 264 B

13
tile-test/index.html
View File

@ -1,13 +0,0 @@
<html>
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" href="res/main.css" />
</head>
<body>
<div id="board">
<!-- Renderer will push content here -->
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>

21
tile-test/package.json
View File

@ -1,21 +0,0 @@
{
"name": "asdf-tile-test",
"version": "1.0.0",
"description": "Spritesheet test",
"main": "index.html",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "na"
},
"keywords": [
"spritesheet",
"opengameart",
"tile",
"test",
"asdf"
],
"author": "Arne van Iterson",
"license": "ISC"
}

BIN
tile-test/res/images/building.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
tile-test/res/images/characters.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
tile-test/res/images/rc2000.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 57 KiB

BIN
tile-test/res/images/rick.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
tile-test/res/images/spaceship.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 405 B

BIN
tile-test/res/images/tiles_packed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

17
tile-test/res/main.css
View File

@ -1,17 +0,0 @@
body {
background-color: rgba(42, 42, 46, 1);
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#board {
position: relative;
background-color: #111;
width: max-content;
height: auto;
margin: auto;
border: 5px solid whitesmoke;
}

22
tile-test/src/main.js
View File

@ -1,22 +0,0 @@
import asdf from "../../asdf/index.js";
const { Game, Container, CanvasRenderer, math, KeyControls, MouseControls, Text, Texture, Sprite, TileSprite } = asdf;
const game = new Game(640, 320, true);
const { scene, w, h } = game;
import King from "../entities/King.js";
import Snake from "../entities/Snake.js";
scene.add(new Snake());
for (let index = 0; index < 250; index++) {
scene.add(new King());
}
const mouseAim = new MouseControls();
game.run((dt ,t) => {
if (mouseAim.isDown) {
console.log('cliccccccccccc');
}
});