This commit is contained in:
Adrian Hinz 2017-11-17 15:53:25 +01:00
commit 27b4d153bf
23 changed files with 20685 additions and 0 deletions

1567
css/bootstrap-grid.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
css/bootstrap-grid.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

342
css/bootstrap-reboot.css vendored Normal file
View File

@ -0,0 +1,342 @@
/*!
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
@-ms-viewport {
width: device-width;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: none !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
dfn {
font-style: italic;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: 0;
}
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
table {
border-collapse: collapse;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #868e96;
text-align: left;
caption-side: bottom;
}
th {
text-align: inherit;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
overflow: auto;
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
output {
display: inline-block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

File diff suppressed because one or more lines are too long

8
css/bootstrap-reboot.min.css vendored Normal file
View File

@ -0,0 +1,8 @@
/*!
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */

File diff suppressed because one or more lines are too long

8374
css/bootstrap.css vendored Normal file

File diff suppressed because it is too large Load Diff

1
css/bootstrap.css.map Normal file

File diff suppressed because one or more lines are too long

7
css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
css/main.css Normal file
View File

@ -0,0 +1,4 @@
canvas {
border: 2px solid #423f3f;
background-color: #e1e1e1;
}

33
index.html Normal file
View File

@ -0,0 +1,33 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JSGame</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1>Game One</h1>
<p class="lead">Wstępny projekt
<br> Micro Vehicle Game.</p>
<hr />
<canvas id="mainCanvas"></canvas>
</div>
<div class="col-md-2"></div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
startGame();
</script>
</body>
</html>

6287
js/bootstrap.bundle.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
js/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

3850
js/bootstrap.js vendored Normal file

File diff suppressed because it is too large Load Diff

1
js/bootstrap.js.map Normal file

File diff suppressed because one or more lines are too long

7
js/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
js/bootstrap.min.js.map Normal file

File diff suppressed because one or more lines are too long

182
js/main.js Normal file
View File

@ -0,0 +1,182 @@
var firstCar;
var secondCar;
var myPuddle;
var myX;
var myY;
var mySpeed;
class Substrate {
constructor(x, y, height, width, friction, ) {
this.height = height;
this.width = width;
}
}
function startGame() {
firstCar = new component(30, 50, "blue", 25, 225, 'car');
myPuddle = new component(100, 100, "#5FC4D8", 150, 225, 'substrate');
myX = new component("14px", "Consolas", "black", 180, 5, "text");
myY = new component("14px", "Consolas", "black", 180, 10, "text");
mySpeed = new component("30px", "Consolas", "red", 30, 15, "text");
myGameArea.start();
}
var myGameArea = {
canvas : document.getElementById("mainCanvas"),
start : function() {
this.canvas.width = 1080;
this.canvas.height = 580;
this.context = this.canvas.getContext("2d");
this.frameNo = 0;
this.friction = 0.05; // wspolczynik tarcia
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
e.preventDefault();
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.lightsColor = 'yellow';
this.width = width;
this.height = height;
this.speed = 0;
if (this.type == "text") {
this.angle = 0;
} else {
this.angle = Math.PI / 2;
}
this.maxForwardSpeed = 4;
this.maxBackwardSpeed = -2;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
if (this.type === 'car') {
ctx.fillStyle = this.lightsColor;
ctx.fillRect(this.width / -2 + 1, this.height / -2, this.width - (this.width - 5), this.height - (this.height - 7));
ctx.fillRect(this.width / -2 + this.width - 6, this.height / -2, this.width - (this.width - 5), this.height - (this.height - 7));
ctx.fillStyle = 'white';
ctx.fillRect(this.width / -2 + (this.width /4), this.height / -2 + (this.height / 3), this.width / 2, this.height / 3);
}
}
ctx.restore();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
function accelerate(n, myGamePiece) {
if (n>0) {
if (myGamePiece.speed < myGamePiece.maxForwardSpeed) {
myGamePiece.speed = myGamePiece.speed + n;
if (myGamePiece.speed > myGamePiece.maxForwardSpeed) {
myGamePiece.speed = myGamePiece.maxForwardSpeed;
}
} else if (myGamePiece.speed == myGamePiece.maxForwardSpeed) {
// nothing to do in this case
} else {
slowdown(myGameArea.friction, myGamePiece);
}
} else {
if (myGamePiece.speed > myGamePiece.maxBackwardSpeed) {
myGamePiece.speed = myGamePiece.speed + n;
if (myGamePiece.speed < myGamePiece.maxBackwardSpeed) {
myGamePiece.speed = myGamePiece.maxBackwardSpeed;
}
} else if (myGamePiece.speed == myGamePiece.maxBackwardSpeed) {
// nothing to do in this case
} else {
slowdown(myGameArea.friction, myGamePiece);
}
}
}
function slowdown(n, myGamePiece) {
if (myGamePiece.speed > 0) {
myGamePiece.speed = myGamePiece.speed - n;
if (myGamePiece.speed < 0) {myGamePiece.speed = 0;}
} else if (myGamePiece.speed < 0) {
myGamePiece.speed = myGamePiece.speed + n;
if (myGamePiece.speed > 0) {myGamePiece.speed = 0;}
}
}
function boosterOn(lmyGamePiece) {
lmyGamePiece.maxForwardSpeed = 8;
lmyGamePiece.maxBackwardSpeed = -5;
lmyGamePiece.lightsColor = 'red';
}
function boosterOff(lmyGamePiece) {
lmyGamePiece.maxForwardSpeed = 4;
lmyGamePiece.maxBackwardSpeed = -2;
lmyGamePiece.lightsColor = 'yellow';
}
function checkSubstrate(x,y) {
}
function updateGameArea() {
var direction = 0;
myGameArea.clear();
firstCar.moveAngle = 0;
if (myGameArea.keys && myGameArea.keys[32]) { //space
slowdown(0.2, firstCar);
//myGamePiece.speed = 0;
}
if (myGameArea.keys && myGameArea.keys[69]) { boosterOn(firstCar);} // E
if (myGameArea.keys && myGameArea.keys[81]) { boosterOff(firstCar);} // Q
if (myGameArea.keys && (myGameArea.keys[37] || myGameArea.keys[65])) {
if (firstCar.speed > 0) firstCar.moveAngle = -2;
if (firstCar.speed < 0) firstCar.moveAngle = 2;
} // left arrow || A
if (myGameArea.keys && (myGameArea.keys[39] || myGameArea.keys[68])) {
if (firstCar.speed > 0) firstCar.moveAngle = 2;
if (firstCar.speed < 0) firstCar.moveAngle = -2;
} // right arrow || D
if (myGameArea.keys && (myGameArea.keys[38] || myGameArea.keys[87]) && !myGameArea.keys[32]) {accelerate(0.2, firstCar); direction = 1;} // up arrow || W
if (myGameArea.keys && (myGameArea.keys[40] || myGameArea.keys[83]) && !myGameArea.keys[32]) {accelerate(-0.1, firstCar); direction = -1;} // down arrow || S
if (direction === 0) {
slowdown(myGameArea.friction, firstCar);
}
myX.text="X: " + firstCar.x.toFixed(2);
myX.update();
myY.text="Y: " + firstCar.y.toFixed(2);
myY.update();
mySpeed.text="SPEED: " + firstCar.speed.toFixed(2);
mySpeed.update();
myPuddle.update();
firstCar.newPos();
firstCar.update();
}