forked from arne/asdf-games
Added example
This commit is contained in:
parent
e89128c6ab
commit
1beb74f252
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,2 +1,2 @@
|
||||
projects/
|
||||
node_modules/
|
||||
node_modules/
|
||||
projects/
|
||||
@ -9,8 +9,8 @@ To try out asdf library and the projects for yourself, you need to:
|
||||
* Download node.js
|
||||
* Clone this repository
|
||||
* Go the the folder where you cloned this repository
|
||||
* Run startHTTP.bat or run
|
||||
```
|
||||
* Run `npm start` or run
|
||||
```bash
|
||||
node list.js --dir ./
|
||||
```
|
||||
|
||||
|
||||
BIN
examples/shooter/favicon.png
Normal file
BIN
examples/shooter/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
20
examples/shooter/index.html
Normal file
20
examples/shooter/index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<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
examples/shooter/package.json
Normal file
21
examples/shooter/package.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"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
examples/shooter/res/fonts/Keycaps Regular.ttf
Normal file
BIN
examples/shooter/res/fonts/Keycaps Regular.ttf
Normal file
Binary file not shown.
BIN
examples/shooter/res/fonts/keycaps.TTF
Normal file
BIN
examples/shooter/res/fonts/keycaps.TTF
Normal file
Binary file not shown.
BIN
examples/shooter/res/fonts/visitor1.ttf
Normal file
BIN
examples/shooter/res/fonts/visitor1.ttf
Normal file
Binary file not shown.
BIN
examples/shooter/res/images/baddie.png
Normal file
BIN
examples/shooter/res/images/baddie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 B |
BIN
examples/shooter/res/images/bg.png
Normal file
BIN
examples/shooter/res/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
examples/shooter/res/images/bullet.png
Normal file
BIN
examples/shooter/res/images/bullet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
BIN
examples/shooter/res/images/spaceship.png
Normal file
BIN
examples/shooter/res/images/spaceship.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
56
examples/shooter/res/main.css
Normal file
56
examples/shooter/res/main.css
Normal file
@ -0,0 +1,56 @@
|
||||
@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
examples/shooter/src/main.js
Normal file
178
examples/shooter/src/main.js
Normal file
@ -0,0 +1,178 @@
|
||||
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);
|
||||
761
package-lock.json
generated
761
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,13 +4,14 @@
|
||||
"description": "Me making games using HTML5 Games: Novice to Ninja by Sitepoint.",
|
||||
"main": "list.js",
|
||||
"dependencies": {
|
||||
"browserify": "^16.5.0",
|
||||
"browserify": "^16.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"budo": "^11.6.3",
|
||||
"serve-index": "^1.9.1"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"test": "startHTTP.bat"
|
||||
"start": "node list.js --dir ./ --live"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
node list.js --dir ./ --live
|
||||
Loading…
Reference in New Issue
Block a user