lots of stuff
buttons for user input (touch enabled) changed css to scss (and added sass-loader)
This commit is contained in:
parent
1cc25c81ca
commit
0f14f75c69
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
let Canvas = function(container, width, height) {
|
||||
let Canvas = function(container, width, height, scale) {
|
||||
|
||||
/* html element that the canvas will be created in */
|
||||
this.container = container;
|
||||
|
|
@ -13,10 +13,17 @@
|
|||
/* canvas height */
|
||||
this.height = height;
|
||||
|
||||
/* canvas scale */
|
||||
this.scale = scale || 1;
|
||||
|
||||
/* container element - set properties */
|
||||
container.style.width = (this.width * this.scale) + 'px';
|
||||
container.style.height = (this.height * this.scale) + 'px';
|
||||
|
||||
/* canvas element - create and set properties */
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.canvas.setAttribute('width', this.width);
|
||||
this.canvas.setAttribute('height', this.height);
|
||||
this.canvas.setAttribute('width', this.width * this.scale);
|
||||
this.canvas.setAttribute('height', this.height * this.scale);
|
||||
this.canvas.setAttribute('id', 'canvas');
|
||||
|
||||
/* insert in dom */
|
||||
|
|
@ -49,7 +56,7 @@
|
|||
|
||||
var image = new Image();
|
||||
image.onload = () => {
|
||||
this.context.drawImage(image, 0, 0);
|
||||
this.context.drawImage(image, 0, 0, image.width, image.height, 0, 0, this.canvas.width, this.canvas.height);
|
||||
};
|
||||
image.src = this.images[name];
|
||||
|
||||
|
|
|
|||
|
|
@ -31,12 +31,56 @@
|
|||
|
||||
};
|
||||
|
||||
/* begins the game */
|
||||
/* begins the game (actually runs the whole game) */
|
||||
/* @TODO lol everything is implemented here, if this needs to grow it will become ugly
|
||||
* think about refactoring all the code in here later */
|
||||
Director.prototype.begin = function() {
|
||||
|
||||
/* enable user input */
|
||||
let enableUserInput = () => {
|
||||
|
||||
/* add event listeners */
|
||||
window.addEventListener('keydown', keyListener, false);
|
||||
|
||||
/* LOL there is no forEach in DOMNodeList
|
||||
* http://stackoverflow.com/questions/13433799/why-doesnt-nodelist-have-foreach */
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('user-action'), (element) => {
|
||||
|
||||
/* add event listeners */
|
||||
element.addEventListener('mouseup', mouseListener, false);
|
||||
element.addEventListener('touchup', touchListener, false);
|
||||
|
||||
});
|
||||
|
||||
/* hide user input area */
|
||||
document.getElementById('ul-teclas').className = '';
|
||||
|
||||
};
|
||||
|
||||
/* disable user input */
|
||||
let disableUserInput = () => {
|
||||
|
||||
/* add event listeners */
|
||||
window.removeEventListener('keydown', keyListener, false);
|
||||
|
||||
/* see above */
|
||||
Array.prototype.forEach.call(document.getElementsByClassName('user-action'), (element) => {
|
||||
|
||||
/* remove event listeners */
|
||||
element.removeEventListener('mouseup', mouseListener, false);
|
||||
element.removeEventListener('touchup', touchListener, false);
|
||||
|
||||
});
|
||||
|
||||
/* hide user input area */
|
||||
document.getElementById('ul-teclas').className = 'hidden';
|
||||
|
||||
};
|
||||
|
||||
/* consequence of user action (key pressed) */
|
||||
let choice = (scene) => {
|
||||
window.removeEventListener('keydown', listener, true);
|
||||
|
||||
disableUserInput();
|
||||
|
||||
/* play the selected choice screen */
|
||||
this.scenes['choice_' + scene].play()
|
||||
|
|
@ -49,31 +93,36 @@
|
|||
};
|
||||
|
||||
/* keydown window event listener */
|
||||
let listener = (event) => {
|
||||
let keyListener = function(event) {
|
||||
|
||||
switch (event.keyCode) {
|
||||
let actions = {
|
||||
67: 'anal',
|
||||
70: 'vaginal',
|
||||
66: 'oral'
|
||||
};
|
||||
|
||||
case 67:
|
||||
choice('anal');
|
||||
break;
|
||||
|
||||
case 70:
|
||||
choice('vaginal');
|
||||
break;
|
||||
|
||||
case 66:
|
||||
choice('oral');
|
||||
break;
|
||||
let action = actions[event.keyCode];
|
||||
|
||||
if (action) {
|
||||
choice(action);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
let mouseListener = function(event) {
|
||||
let action = this.getAttribute('data-action');
|
||||
choice(action);
|
||||
};
|
||||
|
||||
let touchListener = function(event) {
|
||||
let action = this.getAttribute('data-action');
|
||||
choice(action);
|
||||
};
|
||||
|
||||
/* the game starts by calling this */
|
||||
let main = () => {
|
||||
return this.scenes.choice.play()
|
||||
.then(() => {
|
||||
window.addEventListener('keydown', listener, true);
|
||||
});
|
||||
.then(enableUserInput);
|
||||
};
|
||||
|
||||
return main();
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
'use strict';
|
||||
|
||||
/* css stuff */
|
||||
require('../assets/style.css');
|
||||
require('../assets/style.scss');
|
||||
|
||||
/* load title image into title div because im using a stupid fucking
|
||||
* plugin to generate index.html automagically and i dont know how
|
||||
* pass content to the template */
|
||||
const image = require('../assets/page/paradise.gif');
|
||||
document.getElementById('titleImg').src = image;
|
||||
document.getElementById('img-title').src = image;
|
||||
|
||||
/* Canvas abstraction */
|
||||
const Canvas = require('./canvas');
|
||||
|
|
@ -18,7 +18,10 @@
|
|||
const Director = require('./director');
|
||||
|
||||
/* create a canvas */
|
||||
let canvas = new Canvas(document.getElementById("canvasDiv"), 512, 272);
|
||||
const scale = 1;
|
||||
const width = 512;
|
||||
const height = 272;
|
||||
let canvas = new Canvas(document.getElementById("div-canvas"), width, height, scale);
|
||||
|
||||
/* create game director with this canvas */
|
||||
let director = new Director(canvas);
|
||||
|
|
|
|||
|
|
@ -5,15 +5,19 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="titleDiv"><img id="titleImg" /></div>
|
||||
<div id="canvasDiv"></div>
|
||||
<div id="infoDiv">
|
||||
Teclas:
|
||||
<ul>
|
||||
<li>c - anal</li>
|
||||
<li>f - vaginal</li>
|
||||
<li>b - oral</li>
|
||||
</ul>
|
||||
|
||||
<img id="img-title" />
|
||||
|
||||
<div id="div-canvas">
|
||||
|
||||
</div>
|
||||
|
||||
<ul id="ul-teclas">
|
||||
<li class="user-action" id="li-anal" data-action="anal">c<div>anal</div></li>
|
||||
<li class="user-action" id="li-vaginal" data-action="vaginal">f<div>vaginal</div></li>
|
||||
<li class="user-action" id="li-oral" data-action="oral">b<div>oral</div></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
body {
|
||||
background-color: #0000C8;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
div#canvasDiv {
|
||||
border-style: solid;
|
||||
border-color: #C80000;
|
||||
height: 272px;
|
||||
}
|
||||
|
||||
div#canvasDiv, div#titleDiv, div#infoDiv {
|
||||
width: 512px;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div#titleDiv {
|
||||
text-align:center;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
div#infoDiv {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
body {
|
||||
background-color: #0000C8;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#div-canvas {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #FFF;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img#img-title {
|
||||
text-align:center;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
ul#ul-teclas {
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
margin: 20px auto;
|
||||
|
||||
li {
|
||||
|
||||
display: inline-block;
|
||||
font-family: monospace;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid white;
|
||||
width: 70px;
|
||||
height: 60px;
|
||||
display: inline-block;
|
||||
background-color: #000;
|
||||
padding: 10px 5px 10px 5px;
|
||||
|
||||
div {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -28,6 +28,8 @@
|
|||
"handlebars-loader": "^1.4.0",
|
||||
"html-webpack-plugin": "^2.22.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"node-sass": "^3.10.1",
|
||||
"sass-loader": "^4.0.2",
|
||||
"style-loader": "^0.13.1",
|
||||
"url-loader": "^0.5.7",
|
||||
"webpack": "^1.13.2",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ module.exports = {
|
|||
{ test: /\.css$/, loader: "style!css" },
|
||||
{ test: /\.json$/, loader: "json" },
|
||||
{ test: /\.hbs$/, loader: "handlebars-loader" },
|
||||
{ test: /\.(woff|png|jpg|gif)$/, loader: 'url-loader?limit=10000' }
|
||||
{ test: /\.(woff|png|jpg|gif)$/, loader: 'url-loader?limit=10000' },
|
||||
{ test: /\.scss$/, loaders: ["style", "css", "sass"] }
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue