Skip to content

Commit d7daa3e

Browse files
MattyRadMattyRad
committed
Jump when the spacebar is pressed
1 parent 3dee8be commit d7daa3e

File tree

3 files changed

+128
-0
lines changed

3 files changed

+128
-0
lines changed

‎public/THREEx.KeyboardState.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// THREEx.KeyboardState.js keep the current state of the keyboard.
2+
// It is possible to query it at any time. No need of an event.
3+
// This is particularly convenient in loop driven case, like in
4+
// 3D demos or games.
5+
//
6+
// # Usage
7+
//
8+
// **Step 1**: Create the object
9+
//
10+
// ```var keyboard = new THREEx.KeyboardState();```
11+
//
12+
// **Step 2**: Query the keyboard state
13+
//
14+
// This will return true if shift and A are pressed, false otherwise
15+
//
16+
// ```keyboard.pressed("shift+A")```
17+
//
18+
// **Step 3**: Stop listening to the keyboard
19+
//
20+
// ```keyboard.destroy()```
21+
//
22+
// NOTE: this library may be nice as standaline. independant from three.js
23+
// - rename it keyboardForGame
24+
//
25+
// # Code
26+
//
27+
28+
/** @namespace */
29+
var THREEx = THREEx || {};
30+
31+
/**
32+
* - NOTE: it would be quite easy to push event-driven too
33+
* - microevent.js for events handling
34+
* - in this._onkeyChange, generate a string from the DOM event
35+
* - use this as event name
36+
*/
37+
THREEx.KeyboardState = function()
38+
{
39+
// to store the current state
40+
this.keyCodes = {};
41+
this.modifiers = {};
42+
43+
// create callback to bind/unbind keyboard events
44+
var self = this;
45+
this._onKeyDown = function(event){ self._onKeyChange(event, true); };
46+
this._onKeyUp = function(event){ self._onKeyChange(event, false);};
47+
48+
// bind keyEvents
49+
document.addEventListener("keydown", this._onKeyDown, false);
50+
document.addEventListener("keyup", this._onKeyUp, false);
51+
}
52+
53+
/**
54+
* To stop listening of the keyboard events
55+
*/
56+
THREEx.KeyboardState.prototype.destroy = function()
57+
{
58+
// unbind keyEvents
59+
document.removeEventListener("keydown", this._onKeyDown, false);
60+
document.removeEventListener("keyup", this._onKeyUp, false);
61+
}
62+
63+
THREEx.KeyboardState.MODIFIERS = ['shift', 'ctrl', 'alt', 'meta'];
64+
THREEx.KeyboardState.ALIAS = {
65+
'left' : 37,
66+
'up' : 38,
67+
'right' : 39,
68+
'down' : 40,
69+
'space' : 32,
70+
'pageup' : 33,
71+
'pagedown' : 34,
72+
'tab' : 9
73+
};
74+
75+
/**
76+
* to process the keyboard dom event
77+
*/
78+
THREEx.KeyboardState.prototype._onKeyChange = function(event, pressed)
79+
{
80+
// log to debug
81+
//console.log("onKeyChange", event, pressed, event.keyCode, event.shiftKey, event.ctrlKey, event.altKey, event.metaKey)
82+
83+
// update this.keyCodes
84+
var keyCode = event.keyCode;
85+
this.keyCodes[keyCode] = pressed;
86+
87+
// update this.modifiers
88+
this.modifiers['shift']= event.shiftKey;
89+
this.modifiers['ctrl'] = event.ctrlKey;
90+
this.modifiers['alt'] = event.altKey;
91+
this.modifiers['meta'] = event.metaKey;
92+
}
93+
94+
/**
95+
* query keyboard state to know if a key is pressed of not
96+
*
97+
* @param {String} keyDesc the description of the key. format : modifiers+key e.g shift+A
98+
* @returns {Boolean} true if the key is pressed, false otherwise
99+
*/
100+
THREEx.KeyboardState.prototype.pressed = function(keyDesc)
101+
{
102+
var keys = keyDesc.split("+");
103+
for(var i = 0; i < keys.length; i++){
104+
var key = keys[i];
105+
var pressed;
106+
if( THREEx.KeyboardState.MODIFIERS.indexOf( key ) !== -1 ){
107+
pressed = this.modifiers[key];
108+
}else if( Object.keys(THREEx.KeyboardState.ALIAS).indexOf( key ) != -1 ){
109+
pressed = this.keyCodes[ THREEx.KeyboardState.ALIAS[key] ];
110+
}else {
111+
pressed = this.keyCodes[key.toUpperCase().charCodeAt(0)]
112+
}
113+
if( !pressed) return false;
114+
};
115+
return true;
116+
}

‎public/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
body { margin: 0; }
66
canvas { width: 640px; height: 360px }
77
</style>
8+
<script src="/THREEx.KeyboardState.js"></script>
89
</head>
910
<body>
1011
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

‎public/scripts.js

+11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
var scene = new THREE.Scene();
22
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
3+
var keyboard = new THREEx.KeyboardState();
34

45
var renderer = new THREE.WebGLRenderer();
56
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -23,6 +24,8 @@ scene.add( obstacle );
2324

2425
camera.position.z = 5;
2526

27+
var jumping = false;
28+
2629
var animate = function () {
2730
requestAnimationFrame( animate );
2831

@@ -32,6 +35,14 @@ var animate = function () {
3235
obstacle.position.x = 1;
3336
}
3437

38+
if (keyboard.pressed("space")) {
39+
jumping = true;
40+
}
41+
42+
if (jumping) {
43+
player.position.y += 0.01;
44+
}
45+
3546
renderer.render(scene, camera);
3647
};
3748

0 commit comments

Comments
 (0)