Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 98179cc

Browse files
style-itstyle-it
committedDec 11, 2020
project init
1 parent 28d3f87 commit 98179cc

19 files changed

+8742
-0
lines changed
 

‎.babelrc

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"plugins": [
3+
[
4+
"babel-plugin-jsx-pragmatic",
5+
{
6+
"import": "dom",
7+
"module": "jsx-render"
8+
}
9+
]
10+
],
11+
"presets": [
12+
"babel-preset-primavera",
13+
[
14+
"@babel/preset-react",
15+
{
16+
"pragma": "dom"
17+
}
18+
]
19+
]
20+
}

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
build
3+
dist
4+
npm-debug.log
5+
.env
6+
.DS_Store

‎index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>starbot</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
</body>
10+
</html>

‎index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import App from "./src/App";
2+
3+
document.getElementById('app').appendChild(<App />);

‎package-lock.json

+7,612
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "jsx-without-react",
3+
"version": "0.1.0",
4+
"description": "Experiment with using JSX without React.",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack -p --env production",
8+
"dev": "webpack-dev-server --env development"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/viglucci/jsx-without-react.git"
13+
},
14+
"author": "",
15+
"license": "MIT",
16+
"bugs": {
17+
"url": "https://github.com/viglucci/jsx-without-react/issues"
18+
},
19+
"homepage": "https://github.com/viglucci/jsx-without-react#readme",
20+
"devDependencies": {
21+
"@babel/cli": "^7.2.3",
22+
"@babel/core": "^7.4.0",
23+
"@babel/plugin-syntax-jsx": "^7.2.0",
24+
"@babel/plugin-transform-react-jsx": "^7.3.0",
25+
"@babel/preset-react": "^7.0.0",
26+
"babel-loader": "^8.0.5",
27+
"babel-plugin-jsx-pragmatic": "^1.0.2",
28+
"babel-polyfill": "^6.26.0",
29+
"babel-preset-primavera": "^1.3.0",
30+
"css-loader": "^5.0.1",
31+
"file-loader": "^6.2.0",
32+
"h": "^0.1.0",
33+
"html-webpack-plugin": "^3.2.0",
34+
"jsx-render": "^1.1.2",
35+
"mini-css-extract-plugin": "^1.3.1",
36+
"raw-loader": "^2.0.0",
37+
"style-loader": "^2.0.0",
38+
"webpack": "^4.29.6",
39+
"webpack-cli": "^3.3.0",
40+
"webpack-dev-server": "^3.2.1"
41+
},
42+
"dependencies": {
43+
"styleit-api": "^1.0.15"
44+
}
45+
}

‎src/App.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Header from "./Header";
2+
import { startAppManager } from './engine/engine';
3+
4+
class App {
5+
componentDidMount() {
6+
alert()
7+
}
8+
render() {
9+
Promise.resolve().then(() => {
10+
onApplicationStart(component);
11+
});
12+
const component = <Header>
13+
<div>
14+
<canvas id="canvas" width={"1800px"} height={"1000px"}></canvas>
15+
</div>
16+
</Header>;
17+
return component;
18+
}
19+
}
20+
21+
export default App;
22+
function onApplicationStart(component) {
23+
startAppManager(component);
24+
//start skirmish
25+
}
26+

‎src/Header.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const Header = ({
2+
children
3+
}) => {
4+
return <div>{children}</div>;
5+
};
6+
7+
export default Header;

‎src/bullets/Bullet.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
import { createVec2D } from '../engine/createVec2D';
3+
4+
export class Bullet {
5+
6+
constructor(){
7+
const vec2D = createVec2D();
8+
this.radius = 4;
9+
this.color = "#FFF";
10+
this.pos = vec2D.create();
11+
this.vel = vec2D.create(),
12+
this.blacklisted = false;
13+
14+
this.update = () => {
15+
this.pos.add(this.vel);
16+
}
17+
this.reset = () =>{
18+
this.blacklisted = false;
19+
}
20+
}
21+
}

‎src/clans/Clans.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
import {Marine} from '../marine/marine';
3+
import {screen} from '../store/store';
4+
5+
export class Clan {
6+
7+
constructor(props = {}) {
8+
this.player = props.player || "AI" //TODO: enum
9+
this.flag = "",
10+
this.name = props.name;
11+
this.units = [new Marine(screen.getWidth() >> 1, screen.getHeight() >> 1),new Marine(screen.getWidth() >> 1, screen.getHeight()+100 >> 1)];
12+
this.selectedUnits = [];
13+
this.buildings = [] // should be with units ?
14+
}
15+
}
16+
export const TYPE = {
17+
AI:"AI",
18+
PLAYER:"PLAYER"
19+
}

‎src/engine/createVec2D.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
export function createVec2D() {
2+
3+
return (function () {
4+
var create = function (x = 0, y = 0) {
5+
var obj = {
6+
_x: 1,
7+
_y: 0,
8+
9+
getX: function () {
10+
return this._x;
11+
},
12+
13+
setX: function (value) {
14+
this._x = value;
15+
},
16+
17+
getY: function () {
18+
return this._y;
19+
},
20+
21+
setY: function (value) {
22+
this._y = value;
23+
},
24+
25+
getLength: function () {
26+
return Math.sqrt(this._x * this._x + this._y * this._y);
27+
},
28+
29+
setLength: function (length) {
30+
var angle = this.getAngle();
31+
this._x = Math.cos(angle) * length;
32+
this._y = Math.sin(angle) * length;
33+
},
34+
35+
getAngle: function () {
36+
return Math.atan2(this._y, this._x);
37+
},
38+
39+
setAngle: function (angle) {
40+
var length = this.getLength();
41+
this._x = Math.cos(angle) * length;
42+
this._y = Math.sin(angle) * length;
43+
},
44+
45+
add: function (vector) {
46+
this._x += vector.getX();
47+
this._y += vector.getY();
48+
},
49+
};
50+
obj.setX(x);
51+
obj.setY(y);
52+
return obj;
53+
};
54+
55+
return { create: create };
56+
}());
57+
}

‎src/engine/engine.bak.js

+320
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
import { canvas, context } from '../store/store';
2+
import { createVec2D } from './createVec2D';
3+
import {Marine} from '../marine/marine';
4+
export function startAppManager(component) {
5+
var Pool = (function () {
6+
var create = function (type, size) {
7+
var obj = Object.create(def);
8+
obj.init(type, size);
9+
10+
return obj;
11+
};
12+
13+
var def =
14+
{
15+
_type: null,
16+
_size: null,
17+
_pointer: null,
18+
_elements: null,
19+
20+
init: function (type, size) {
21+
this._type = type;
22+
this._size = size;
23+
this._pointer = size;
24+
this._elements = [];
25+
26+
var i = 0;
27+
var length = this._size;
28+
29+
for (i; i < length; ++i) {
30+
this._elements[i] = this._type.create();
31+
}
32+
},
33+
34+
getElement: function () {
35+
if (this._pointer > 0) return this._elements[--this._pointer];
36+
37+
return null;
38+
},
39+
40+
disposeElement: function (obj) {
41+
this._elements[this._pointer++] = obj;
42+
}
43+
};
44+
return { create: create };
45+
}());
46+
47+
var Vec2D = createVec2D();
48+
49+
var Bullet = (function () {
50+
var create = function () {
51+
var obj = Object.create(def);
52+
obj.radius = 4;
53+
obj.color = '#FFF';
54+
obj.pos = Vec2D.create();
55+
obj.vel = Vec2D.create();
56+
obj.blacklisted = false;
57+
58+
return obj;
59+
};
60+
61+
var def =
62+
{
63+
radius: null,
64+
color: null,
65+
pos: null,
66+
vel: null,
67+
blacklisted: null,
68+
69+
update: function () {
70+
this.pos.add(this.vel);
71+
},
72+
73+
reset: function () {
74+
this.blacklisted = false;
75+
}
76+
};
77+
78+
return { create: create };
79+
}());
80+
var Ship = (function () {
81+
var create = function (x, y) {
82+
var obj = Object.create(def);
83+
obj.angle = 0;
84+
obj.pos = Vec2D.create(x, y);
85+
obj.vel = Vec2D.create();
86+
obj.idle = false;
87+
obj.radius = 8;
88+
obj.idleDelay = 0;
89+
90+
return obj;
91+
};
92+
var def =
93+
{
94+
angle: null,
95+
pos: null,
96+
vel: null,
97+
bulletDelay: null,
98+
idle: null,
99+
radius: null,
100+
101+
update: function () {
102+
this.pos.add(this.vel);
103+
104+
if (this.vel.getLength() > 5) this.vel.setLength(5);
105+
106+
++this.bulletDelay;
107+
108+
if (this.idle) {
109+
if (++this.idleDelay > 120) {
110+
this.idleDelay = 0;
111+
this.idle = false;
112+
113+
}
114+
}
115+
},
116+
117+
shoot: function () {
118+
if (this.bulletDelay > 8) {
119+
generateShot();
120+
this.bulletDelay = 0;
121+
}
122+
}
123+
};
124+
125+
return { create: create };
126+
}());
127+
128+
var screenWidth;
129+
var screenHeight;
130+
var doublePI = Math.PI;
131+
132+
var ship;
133+
134+
135+
var bulletPool;
136+
var bullets;
137+
138+
var keySpace = false;
139+
140+
window.getAnimationFrame =
141+
window.requestAnimationFrame ||
142+
window.webkitRequestAnimationFrame ||
143+
window.mozRequestAnimationFrame ||
144+
window.oRequestAnimationFrame ||
145+
window.msRequestAnimationFrame ||
146+
function (callback) {
147+
window.setTimeout(callback, 16.6);
148+
};
149+
150+
window.onload = function () {
151+
152+
const can = component.querySelector('canvas');
153+
canvas.set(can);
154+
const ctx = can.getContext('2d');
155+
context.set(ctx);
156+
window.onresize();
157+
keyboardInit();
158+
bulletInit();
159+
shipInit();
160+
loop();
161+
};
162+
163+
window.onresize = function () {
164+
const can = canvas.get();
165+
if (!can) return;
166+
167+
screenWidth = can.clientWidth;
168+
screenHeight = can.clientHeight;
169+
170+
can.width = screenWidth;
171+
can.height = screenHeight;
172+
};
173+
174+
function keyboardInit() {
175+
window.onkeydown = function (e) {
176+
switch (e.keyCode) {
177+
case 32:
178+
case 75:
179+
keySpace = true;
180+
break;
181+
}
182+
e.preventDefault();
183+
};
184+
185+
window.onkeyup = function (e) {
186+
switch (e.keyCode) {
187+
//key Space
188+
case 75:
189+
case 32:
190+
keySpace = false;
191+
break;
192+
}
193+
194+
e.preventDefault();
195+
};
196+
}
197+
198+
function bulletInit() {
199+
bulletPool = Pool.create(Bullet, 40);
200+
bullets = [];
201+
}
202+
203+
204+
function shipInit() {
205+
ship = Ship.create(screenWidth >> 1, screenHeight >> 1, this);
206+
}
207+
208+
function loop() {
209+
updateShip();
210+
updateBullets();
211+
render();
212+
getAnimationFrame(loop);
213+
}
214+
215+
function updateShip() {
216+
ship.update();
217+
218+
if (ship.idle) return;
219+
220+
if (keySpace) ship.shoot();
221+
// const gX = ship.pos.getX();
222+
// ship.pos.setX( gX+1);
223+
// if (keyLeft) ship.angle -= 0.1;
224+
// if (keyRight) ship.angle += 0.1;
225+
226+
if (ship.pos.getX() > screenWidth) ship.pos.setX(0);
227+
else if (ship.pos.getX() < 0) ship.pos.setX(screenWidth);
228+
229+
if (ship.pos.getY() > screenHeight) ship.pos.setY(0);
230+
else if (ship.pos.getY() < 0) ship.pos.setY(screenHeight);
231+
}
232+
233+
234+
235+
236+
function updateBullets() {
237+
var i = bullets.length - 1;
238+
239+
for (i; i > -1; --i) {
240+
var b = bullets[i];
241+
242+
if (b.blacklisted) {
243+
b.reset();
244+
245+
bullets.splice(bullets.indexOf(b), 1);
246+
bulletPool.disposeElement(b);
247+
248+
continue;
249+
}
250+
251+
b.update();
252+
253+
if (b.pos.getX() > screenWidth) b.blacklisted = true;
254+
else if (b.pos.getX() < 0) b.blacklisted = true;
255+
256+
if (b.pos.getY() > screenHeight) b.blacklisted = true;
257+
else if (b.pos.getY() < 0) b.blacklisted = true;
258+
}
259+
}
260+
261+
function render() {
262+
const ctx = context.get();
263+
ctx.fillStyle = '#262626';
264+
ctx.globalAlpha = 0.4;
265+
ctx.fillRect(0, 0, screenWidth, screenHeight);
266+
ctx.globalAlpha = 1;
267+
268+
renderShip();
269+
renderBullets();
270+
}
271+
272+
function renderShip() {
273+
if (ship.idle) return;
274+
const ctx = context.get();
275+
ctx.save();
276+
ctx.translate(ship.pos.getX() >> 0, ship.pos.getY() >> 0);
277+
ctx.rotate(ship.angle);
278+
279+
ctx.strokeStyle = '#FFF';
280+
ctx.lineWidth = (Math.random() > 0.9) ? 2 : 1;
281+
ctx.beginPath();
282+
ctx.moveTo(10, 0);
283+
ctx.lineTo(-10, -10);
284+
ctx.lineTo(-10, 10);
285+
ctx.lineTo(10, 0);
286+
ctx.stroke();
287+
ctx.closePath();
288+
ctx.restore();
289+
}
290+
291+
function renderBullets() {
292+
const ctx = context.get();
293+
294+
var i = bullets.length - 1;
295+
296+
for (i; i > -1; --i) {
297+
var b = bullets[i];
298+
299+
ctx.beginPath();
300+
ctx.strokeStyle = b.color;
301+
302+
ctx.arc(b.pos.getX() >> 0, b.pos.getY() >> 0, b.radius, 0, doublePI);
303+
if (Math.random() > 0.4) ctx.stroke();
304+
ctx.closePath();
305+
}
306+
}
307+
308+
function generateShot() {
309+
var b = bulletPool.getElement();
310+
311+
b.radius = 1;
312+
b.pos.setX(ship.pos.getX() + Math.cos(ship.angle) * 14);
313+
b.pos.setY(ship.pos.getY() + Math.sin(ship.angle) * 14);
314+
315+
b.vel.setLength(10);
316+
b.vel.setAngle(ship.angle);
317+
bullets[bullets.length] = b;
318+
}
319+
}
320+

‎src/engine/engine.js

+321
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
import { canvas, context, scene, bulletsPool, screen, mouse } from '../store/store';
2+
import { skirmish } from '../scene/scenes';
3+
import { startMouseEvent, setEvent } from '../utilis/mouse.service';
4+
import { TYPE } from '../clans/Clans';
5+
6+
export function startAppManager(component) {
7+
8+
9+
var Pool = (function () {
10+
var create = function (type, size) {
11+
var obj = Object.create(def);
12+
obj.init(type, size);
13+
14+
return obj;
15+
};
16+
17+
var def =
18+
{
19+
_type: null,
20+
_size: null,
21+
_pointer: null,
22+
_elements: null,
23+
24+
init: function (type, size) {
25+
this._type = type;
26+
this._size = size;
27+
this._pointer = size;
28+
this._elements = [];
29+
30+
var i = 0;
31+
var length = this._size;
32+
33+
for (i; i < length; ++i) {
34+
this._elements[i] = this._type;
35+
}
36+
},
37+
38+
getElement: function () {
39+
if (this._pointer > 0) return this._elements[--this._pointer];
40+
41+
return null;
42+
},
43+
44+
disposeElement: function (obj) {
45+
this._elements[this._pointer++] = obj;
46+
}
47+
};
48+
return { create: create };
49+
}());
50+
51+
var screenWidth;
52+
var screenHeight;
53+
var doublePI = Math.PI;
54+
55+
var bulletPool;
56+
57+
var keySpace = false;
58+
59+
window.getAnimationFrame =
60+
window.requestAnimationFrame ||
61+
window.webkitRequestAnimationFrame ||
62+
window.mozRequestAnimationFrame ||
63+
window.oRequestAnimationFrame ||
64+
window.msRequestAnimationFrame ||
65+
function (callback) {
66+
window.setTimeout(callback, 16.6);
67+
};
68+
69+
window.onload = function () {
70+
71+
const can = component.querySelector('canvas');
72+
canvas.set(can);
73+
context.set(can.getContext('2d'));
74+
window.onresize();
75+
keyboardInit();
76+
startMouseEvent();
77+
bulletInit();
78+
sceneInit();
79+
80+
loop();
81+
82+
setEvent("mousedown", (e) => {
83+
const _x = mouse.getX();
84+
const _y = mouse.getY();
85+
const _scene = scene.get();
86+
const playerClan = Array.from(_scene.clans).find(c => c.player === TYPE.PLAYER);
87+
88+
switch (e.which) {
89+
case 1:
90+
if (playerClan) {
91+
Array.from(playerClan.units).forEach(_unit => {
92+
const isinRangeX = Math.abs(_x - _unit.pos.getX()) < _unit.width;
93+
const isInRangeY = Math.abs(_y - _unit.pos.getY()) < _unit.height;
94+
_unit.isSelected = false;
95+
playerClan.selectedUnits = [];
96+
if (isinRangeX && isInRangeY) {
97+
_unit.isSelected = true;
98+
}
99+
});
100+
}
101+
break;
102+
case 2:
103+
alert('Middle Mouse button pressed.');
104+
break;
105+
case 3:
106+
if(playerClan){
107+
Array.from(playerClan.units).forEach(_unit=>{
108+
if(_unit.isSelected)
109+
_unit.goTo(_x,_y);
110+
});
111+
}
112+
break;
113+
default:
114+
alert('You have a strange Mouse!');
115+
}
116+
117+
});
118+
};
119+
120+
window.onresize = function () {
121+
const can = canvas.get();
122+
if (!can) return;
123+
124+
screenWidth = can.clientWidth;
125+
screenHeight = can.clientHeight;
126+
127+
screen.setHeight(screenHeight);
128+
screen.setWidth(screenWidth);
129+
130+
131+
can.width = screenWidth;
132+
can.height = screenHeight;
133+
};
134+
135+
function keyboardInit() {
136+
window.onkeydown = function (e) {
137+
switch (e.keyCode) {
138+
case 32:
139+
case 75:
140+
keySpace = true;
141+
break;
142+
}
143+
e.preventDefault();
144+
};
145+
146+
window.onkeyup = function (e) {
147+
switch (e.keyCode) {
148+
//key Space
149+
case 75:
150+
case 32:
151+
keySpace = false;
152+
break;
153+
}
154+
155+
e.preventDefault();
156+
};
157+
}
158+
159+
function bulletInit() {
160+
bulletPool = Pool.create(null, 40);
161+
}
162+
163+
164+
function sceneInit() {
165+
const _scene = skirmish();
166+
scene.set(_scene);
167+
}
168+
169+
function loop() {
170+
171+
updateUnit();
172+
updateBullets();
173+
render();
174+
getAnimationFrame(loop);
175+
176+
}
177+
178+
function updateUnit() {
179+
180+
const _scene = scene.get();
181+
Array.from(_scene.clans).forEach(_clan => {
182+
Array.from(_clan.units).forEach(_unit => {
183+
_unit.update();
184+
const curX = _unit.pos.getX();
185+
const curY = _unit.pos.getY();
186+
// _unit.pos.setX( _unit.pos.getX()+1);
187+
if (_unit.angle < _unit.destAngle)
188+
_unit.angle += 5;
189+
else
190+
_unit.angle -= 5;
191+
192+
if (keySpace) _unit.shoot(generateShot);
193+
194+
if(_unit.moveX && _unit.moveX < curX){
195+
_unit.x -= _unit.xStep;
196+
_unit.pos.setX(_unit.x);
197+
198+
}else if(_unit.moveX){
199+
_unit.x += _unit.xStep;
200+
_unit.pos.setX(_unit.x);
201+
}
202+
if(_unit.moveY && _unit.moveY < curY){
203+
_unit.y -= _unit.yStep;
204+
_unit.pos.setY(_unit.y);
205+
}else if(_unit.moveX){
206+
_unit.y += _unit.yStep;
207+
_unit.pos.setY(_unit.y);
208+
}
209+
210+
});
211+
});
212+
}
213+
214+
function updateBullets() {
215+
const bullets = bulletsPool.get();
216+
var i = bullets.length - 1;
217+
218+
for (i; i > -1; --i) {
219+
var b = bullets[i];
220+
221+
if (b.blacklisted) {
222+
b.reset();
223+
224+
bullets.splice(bullets.indexOf(b), 1);
225+
bulletPool.disposeElement(b);
226+
227+
continue;
228+
}
229+
230+
b.update();
231+
232+
if (b.pos.getX() > screenWidth) b.blacklisted = true;
233+
else if (b.pos.getX() < 0) b.blacklisted = true;
234+
235+
if (b.pos.getY() > screenHeight) b.blacklisted = true;
236+
else if (b.pos.getY() < 0) b.blacklisted = true;
237+
}
238+
}
239+
240+
function render() {
241+
const ctx = context.get();
242+
const _scene = scene.get();
243+
ctx.fillStyle = '#262626';
244+
ctx.globalAlpha = 0.4;
245+
ctx.fillRect(0, 0, screenWidth, screenHeight);
246+
ctx.globalAlpha = 1;
247+
248+
renderUnit(ctx,_scene);
249+
renderBullets(ctx);
250+
}
251+
252+
function renderUnit(ctx,_scene) {
253+
254+
Array.from(_scene.clans).forEach(_clan => {
255+
Array.from(_clan.units).forEach(_unit => {
256+
257+
ctx.save();
258+
ctx.translate(_unit.pos.getX() >> 0, _unit.pos.getY() >> 0);
259+
ctx.rotate((_unit.angle) * (Math.PI/180));
260+
261+
ctx.strokeStyle = '#FFF';
262+
ctx.lineWidth = (Math.random() > 0.9) ? 2 : 1;
263+
ctx.beginPath();
264+
ctx.moveTo(10, 0);
265+
ctx.lineTo(-10, -10);
266+
ctx.lineTo(-10, 10);
267+
ctx.lineTo(10, 0);
268+
ctx.stroke();
269+
ctx.closePath();
270+
ctx.restore();
271+
if(_unit.isSelected){
272+
ctx.beginPath();
273+
ctx.arc(_unit.pos.getX(), _unit.pos.getY(), 20, 0, 20);
274+
ctx.stroke();
275+
ctx.closePath();
276+
ctx.restore();
277+
278+
}
279+
});
280+
});
281+
282+
}
283+
284+
function renderBullets(ctx) {
285+
const bullets = bulletsPool.get();
286+
var i = bullets.length - 1;
287+
288+
for (i; i > -1; --i) {
289+
var b = bullets[i];
290+
291+
ctx.beginPath();
292+
ctx.strokeStyle = b.color;
293+
294+
ctx.arc(b.pos.getX() >> 0, b.pos.getY() >> 0, b.radius, 0, doublePI);
295+
if (Math.random() > 0.4) ctx.stroke();
296+
ctx.closePath();
297+
}
298+
}
299+
300+
function generateShot() {
301+
302+
const _scene = scene.get();
303+
const bullets = bulletsPool.get();
304+
Array.from(_scene.clans).forEach(_clan => {
305+
Array.from(_clan.units).forEach(_unit => {
306+
Array.from(_unit.weapon.bullets).forEach(_bullet => {
307+
var b = _bullet;
308+
b.radius = 1;
309+
b.pos.setX(_unit.pos.getX() + Math.cos(_unit.angle) * 14);
310+
b.pos.setY(_unit.pos.getY() + Math.sin(_unit.angle) * 14);
311+
b.vel.setLength(10);
312+
b.vel.setAngle((_unit.angle) * (Math.PI/180));
313+
bullets[bullets.length] = b;
314+
});
315+
});
316+
});
317+
318+
319+
}
320+
}
321+

‎src/marine/marine.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { createVec2D } from '../engine/createVec2D';
2+
import { Bullet } from '../bullets/Bullet';
3+
export class Marine {
4+
5+
6+
constructor(x, y) {
7+
const Vec2D = createVec2D();
8+
this.angle = 0;
9+
this.pos = Vec2D.create(x, y);
10+
this.vel = Vec2D.create();
11+
this.thrust = Vec2D.create();
12+
this.width = 10;
13+
this.height = 10;
14+
this.idle = false;
15+
this.radius = 8;
16+
this.idleDelay = 0;
17+
this.bulletDelay = 1;
18+
this.moveY = 0;
19+
this.moveX = 0;
20+
this.xStep = 0;
21+
this.yStep = 0;
22+
this.x = x;
23+
this.y = y;
24+
this.destAngle = 0;
25+
this.weapon = {
26+
type: "MG-56",
27+
bullets: [new Bullet()]
28+
}
29+
30+
this.update = () => {
31+
this.pos.add(this.vel);
32+
33+
if (this.vel.getLength() > 5) this.vel.setLength(5);
34+
35+
++this.bulletDelay;
36+
37+
if (this.idle) {
38+
if (++this.idleDelay > 120) {
39+
this.idleDelay = 0;
40+
this.idle = false;
41+
42+
}
43+
}
44+
}
45+
this.goTo = (x,y) =>{
46+
// // move
47+
this.moveX = x;
48+
this.moveY = y;
49+
const xDistance = Math.abs(this.pos.getX()-x);
50+
const yDistance = Math.abs(this.pos.getY()-y);
51+
if (yDistance > xDistance){
52+
this.yStep = 1;
53+
this.xStep = xDistance / yDistance;
54+
} else {
55+
this.yStep = yDistance / xDistance;
56+
this.xStep = 1;
57+
}
58+
//console.log("Steps", this.xStep,this.yStep);
59+
60+
//Turn
61+
const opp = this.pos.getY()-y;
62+
const adj = this.pos.getX()-x;
63+
const angle = Math.atan2(opp,adj) * (180 / Math.PI);
64+
this.destAngle = angle;
65+
66+
}
67+
this.shoot = (generateShot) => {
68+
if (this.bulletDelay > 8) {
69+
generateShot();
70+
this.bulletDelay = 0;
71+
}
72+
}
73+
}
74+
}

‎src/scene/scenes.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Clan, TYPE } from '../clans/Clans';
2+
class Scene {
3+
4+
constructor(props) {
5+
6+
const { players = 1 } = props;
7+
8+
this.clans = [];
9+
10+
this.clans.push(new Clan({ player: TYPE.PLAYER }))
11+
12+
//A.I
13+
14+
// for (let i = 0; i < players; i++) {
15+
// this.clans.push(new Clan({ player: TYPE.AI }))
16+
// }
17+
}
18+
}
19+
export function skirmish(props = {}) {
20+
return new Scene(props);
21+
}

‎src/store/store.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
export const store = {
2+
canvas: null,
3+
context: null,
4+
scene: null,
5+
mouse: {
6+
x: 0,
7+
y: 0
8+
},
9+
screen: {
10+
height: null,
11+
width: null
12+
},
13+
bulletsPool: []
14+
}
15+
export const bulletsPool = {
16+
set: (_bullet) => {
17+
store.bulletsPool.push(_bullet);
18+
},
19+
get: () => store.bulletsPool
20+
}
21+
export const scene = {
22+
set: (_scene) => {
23+
store.scene = _scene;
24+
},
25+
get: () => store.scene
26+
}
27+
export const canvas = {
28+
set: (_canvas) => {
29+
store.canvas = _canvas;
30+
},
31+
get: () => store.canvas
32+
}
33+
export const context = {
34+
set: (_context) => {
35+
store.context = _context;
36+
},
37+
get: () => store.context
38+
}
39+
export const screen = {
40+
setWidth: (width) => {
41+
store.screen.width = width;
42+
},
43+
setHeight: (height) => {
44+
store.screen.height = height;
45+
},
46+
getHeight: () => store.screen.height,
47+
getWidth: () => store.screen.width
48+
}
49+
export const mouse = {
50+
setX: (x) => {
51+
store.mouse.x = x;
52+
},
53+
getX: () => store.mouse.x,
54+
setY: (y) => {
55+
store.mouse.y = y;
56+
},
57+
getY: () => store.mouse.y
58+
}

‎src/utilis/mouse.service.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
import { canvas, mouse } from '../store/store';
3+
4+
5+
const events = {
6+
click: [],
7+
mousedown:[]
8+
}
9+
function getCursorPosition(canvas, event) {
10+
const rect = canvas.getBoundingClientRect()
11+
const x = event.clientX - rect.left
12+
const y = event.clientY - rect.top
13+
console.log("x: " + x + " y: " + y);
14+
mouse.setX(x);
15+
mouse.setY(y);
16+
17+
18+
}
19+
20+
export function startMouseEvent() {
21+
22+
document.addEventListener('contextmenu', event => event.preventDefault());
23+
24+
document.addEventListener("click", (e) => {
25+
const innerEvent = events["click"];
26+
Array.from(innerEvent).forEach(ev => ev(e));
27+
});
28+
} document.addEventListener("mousedown", (e) => {
29+
const _can = canvas.get();
30+
getCursorPosition(_can,e)
31+
const innerEvent = events["mousedown"];
32+
Array.from(innerEvent).forEach(ev => ev(e));
33+
});
34+
export function setEvent(key, callback) {
35+
if (events[key]) {
36+
events[key].push(callback);
37+
}
38+
}

‎src/weapon/Weapon.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
import {context} from '../store/store';
3+
export function renderBullets() {
4+
const ctx = context.get();
5+
6+
var i = bullets.length - 1;
7+
8+
for (i; i > -1; --i) {
9+
var b = bullets[i];
10+
11+
ctx.beginPath();
12+
ctx.strokeStyle = b.color;
13+
14+
ctx.arc(b.pos.getX() >> 0, b.pos.getY() >> 0, b.radius, 0, doublePI);
15+
if (Math.random() > 0.4) ctx.stroke();
16+
ctx.closePath();
17+
}
18+
}

‎webpack.config.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const path = require('path');
2+
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
4+
const OUTPUT_PATH = path.join(__dirname, '/dist');
5+
6+
module.exports = (env) => {
7+
8+
const HTMLPlugin = new HtmlWebpackPlugin({
9+
template: 'index.html'
10+
});
11+
12+
const config = {
13+
mode: 'development',
14+
entry: {
15+
index: ['babel-polyfill', './index.js']
16+
},
17+
output: {
18+
path: OUTPUT_PATH,
19+
publicPath: 'http://localhost:9000/',
20+
chunkFilename: '[name].bundle.js',
21+
filename: '[name].bundle.js'
22+
},
23+
module: {
24+
rules: [
25+
{
26+
test: /\.(png|jpe?g|gif)$/i,
27+
use: [
28+
{
29+
loader: 'file-loader',
30+
},
31+
],
32+
},
33+
{
34+
test: /\.css$/i,
35+
use: ["style-loader", "css-loader"],
36+
},
37+
{
38+
test: /\.(js|jsx)$/,
39+
loader: 'babel-loader',
40+
exclude: /node_modules/
41+
},
42+
{
43+
test: /\.html$/,
44+
loader: 'raw-loader'
45+
}
46+
]
47+
},
48+
resolve: {
49+
extensions: ['.js']
50+
},
51+
plugins: [HTMLPlugin],
52+
devtool: 'inline-source-map',
53+
devServer: {
54+
contentBase: OUTPUT_PATH,
55+
historyApiFallback: true,
56+
compress: true,
57+
port: 9000,
58+
hot: true,
59+
headers: {
60+
'Access-Control-Allow-Origin': '*'
61+
}
62+
}
63+
};
64+
65+
return config;
66+
};

0 commit comments

Comments
 (0)
Please sign in to comment.