[Mobile] Add mobile controls.
They're invisible. Dpad on left, drift button on right, reverse button above it. Pressing the dpad starts holding an item - releasing touch releases the item. Flick forward or back to choose item direction.
This commit is contained in:
riperiperi committed
1 parent
a773b60b95
commit
446d07f1b4
6 files changed
+105
-6
No files matched your search
@@ -7,6 +7,11 @@
|
||||
// includes: main.js
|
||||
//
|
||||
|
||||
function getPlayerControls() {
|
||||
if (mobile) return controlMobile;
|
||||
else return controlDefault;
|
||||
}
|
||||
|
||||
window.controlDefault = function() {
|
||||
|
||||
var thisObj = this;
|
||||
@@ -28,7 +33,96 @@ window.controlDefault = function() {
|
||||
|
||||
//-1 to 1, intensity.
|
||||
turn: (keysArray[37]?-1:0)+(keysArray[39]?1:0),
|
||||
airTurn: (keysArray[40]?-1:0)+(keysArray[38]?1:0) //air excitebike turn, doesn't really have much function
|
||||
airTurn: (keysArray[40]?-1:0)+(keysArray[38]?1:0) //air excitebike turn, item fire direction
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.controlMobile = function() {
|
||||
var thisObj = this;
|
||||
this.local = true;
|
||||
var kart;
|
||||
var item = false;
|
||||
|
||||
this.setKart = function(k) {
|
||||
kart = k;
|
||||
thisObj.kart = k;
|
||||
}
|
||||
this.fetchInput = fetchInput;
|
||||
|
||||
function searchForTouch(rect) { //{touch: Touch, enterLeave: number} 1 is enter, leave is 2,
|
||||
for (var i=0; i<touches.length; i++) {
|
||||
var touch = touches[i];
|
||||
var inNow = (touch.x > rect[0] && touch.y > rect[1] && touch.x < rect[2] && touch.y < rect[3]);
|
||||
var inBefore = (touch.lastx > rect[0] && touch.lasty > rect[1] && touch.lastx < rect[2] && touch.lasty < rect[3]);
|
||||
|
||||
var active = inNow && !touch.released;
|
||||
|
||||
if (inNow == inBefore && inNow) {
|
||||
return {touch: touch, enterLeave: 0, active: active};
|
||||
} else if (inNow) {
|
||||
return {touch: touch, enterLeave: 1, active: active};
|
||||
} else if (inBefore) {
|
||||
return {touch: touch, enterLeave: 2, active: active};
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function step(start, end, value) {
|
||||
return Math.max(0, Math.min(1, (value-start)/(end-start)));
|
||||
}
|
||||
|
||||
function fetchInput() {
|
||||
var targW = 1136;
|
||||
var targH = 640;
|
||||
//window.touches array is filled by the game container
|
||||
//touches [{x:number (0-1), y:number (0-1), pressed:boolean, released:boolean, lastx:number (0-1), lasty:number (0-1)}]
|
||||
|
||||
//accel unless reverse button is pressed
|
||||
var reverse = searchForTouch([955/targW, 320/targH, (955+125)/targW, (320+125)/targH]);
|
||||
reverse = (reverse != null) && reverse.active;
|
||||
|
||||
var driftTouch = searchForTouch([780/targW, 468/targH, (780+300)/targW, (468+125)/targH]); //drift button on the right
|
||||
var itemTouch = searchForTouch([50/targW, 468/targH, (50+300)/targW, (468+125)/targH]); //touch the button exactly
|
||||
var dPadTouch = searchForTouch([0/targW, (468-50)/targH, (0+400)/targW, (468+225)/targH]); //allow for some space
|
||||
|
||||
var turn = 0;
|
||||
if (dPadTouch != null && dPadTouch.active) {
|
||||
turn = step(0/targW, 400/targW, dPadTouch.touch.x);
|
||||
//digitize
|
||||
turn = Math.floor(turn*3) - 1;
|
||||
}
|
||||
|
||||
var itemDir = 0;
|
||||
if (!item) {
|
||||
//if we touch the dpad (more exact than direction), start pressing item
|
||||
if (itemTouch != null && itemTouch.active && itemTouch.touch.pressed) {
|
||||
item = true;
|
||||
}
|
||||
} else {
|
||||
//if we release dpad, fire the item
|
||||
if (dPadTouch == null || !dPadTouch.active) {
|
||||
if (dPadTouch != null) {
|
||||
//set direction based on flick direction or position
|
||||
var vel = dPadTouch.touch.lasty - dPadTouch.touch.y;
|
||||
if (vel > 5/targH) itemDir = -1; //flicked down
|
||||
if (vel < -5/targH) itemDir = 1; //flicked up
|
||||
}
|
||||
item = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
accel: !reverse, //x
|
||||
decel: reverse, //z
|
||||
drift: (driftTouch != null && driftTouch.active), //s
|
||||
item: item, //a
|
||||
|
||||
//-1 to 1, intensity.
|
||||
turn: turn,
|
||||
airTurn: itemDir //air excitebike turn, item fire direction
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -101,7 +101,7 @@ window.clientScene = function(wsUrl, wsInstance, res) {
|
||||
wsH["$+"] = function(obj) { //add kart. only used in debug circumstances. (people can't join normal gamemodes midgame)
|
||||
console.log("kart added");
|
||||
if (t.mode != 1) return;
|
||||
var kart = new Kart([0, -2000, 0], 0, 0, obj.k.kart, obj.k.char, new ((obj.p)?((window.prompt("press y for cpu controlled") == "y")?controlRaceCPU:controlDefault):controlNetwork)(t.activeScene.nkm, {}), t.activeScene);
|
||||
var kart = new Kart([0, -2000, 0], 0, 0, obj.k.kart, obj.k.char, new ((obj.p)?((window.prompt("press y for cpu controlled") == "y")?controlRaceCPU:getPlayerControls()):controlNetwork)(t.activeScene.nkm, {}), t.activeScene);
|
||||
t.activeScene.karts.push(kart);
|
||||
}
|
||||
|
||||
@@ -130,7 +130,7 @@ window.clientScene = function(wsUrl, wsInstance, res) {
|
||||
var k = obj.k[i];
|
||||
var pKart = (i == obj.p);
|
||||
//TODO: custom character support
|
||||
chars.push({charN:k.char, kartN:k.kart, controller:((pKart)?((window.prompt("press y for cpu controlled") == "y")?controlRaceCPU:controlDefault):controlNetwork), raceCam:pKart, extraParams:[{k:"name", v:k.name}, {k:"active", v:k.active}]});
|
||||
chars.push({charN:k.char, kartN:k.kart, controller:((pKart)?((window.prompt("press y for cpu controlled") == "y")?controlRaceCPU:getPlayerControls()):controlNetwork), raceCam:pKart, extraParams:[{k:"name", v:k.name}, {k:"active", v:k.active}]});
|
||||
|
||||
if (pKart) {
|
||||
for (var i=0; i<7; i++) {
|
||||
|
||||
@@ -63,7 +63,7 @@ window.singleScene = function(course, wsInstance, res) {
|
||||
|
||||
function setUpCourse(mainNarc, texNarc, course) {
|
||||
var chars = [];
|
||||
chars.push({charN:mchar, kartN:mkart, controller:((window.prompt("press y for cpu controlled") == "y")?controlRaceCPU:controlDefault), raceCam:true, extraParams:[{k:"name", v:"single"}, {k:"active", v:true}]});
|
||||
chars.push({charN:mchar, kartN:mkart, controller:((window.prompt("press y for cpu controlled") == "y")?controlRaceCPU:getPlayerControls()), raceCam:true, extraParams:[{k:"name", v:"single"}, {k:"active", v:true}]});
|
||||
|
||||
for (var i=0; i<7; i++) {
|
||||
var tchar = Math.floor(Math.random()*12);
|
||||
|
||||
@@ -120,7 +120,7 @@ window.BombC = function(item, scene, type) {
|
||||
this.canBeDropped = true;
|
||||
this.isDestructive = true;
|
||||
|
||||
this.isExploding = false;
|
||||
this.explodeTime = 0;
|
||||
|
||||
this.collideKart = collideKart;
|
||||
this.onRest = onRest;
|
||||
@@ -135,6 +135,10 @@ window.BombC = function(item, scene, type) {
|
||||
}
|
||||
|
||||
function update(argument) {
|
||||
if (item.deadTimer > 0 && t.explodeTime == 0) {
|
||||
//begin explosion
|
||||
t.explodeTime = 1;
|
||||
}
|
||||
if (!item.held && item.colRadius < 6) {
|
||||
item.colRadius += 0.2;
|
||||
if (item.colRadius > 6) item.colRadius = 6;
|
||||
|
||||
@@ -79,6 +79,7 @@ window.GreenShellC = function(item, scene) {
|
||||
//sliding plane
|
||||
var proj = vec3.dot(item.vel, n);
|
||||
vec3.sub(item.vel, item.vel, vec3.scale(vec3.create(), n, proj));
|
||||
item.stuckTo = dat.object;
|
||||
} else {
|
||||
adjustPos = false;
|
||||
ignoreList.push(plane);
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="mkjs">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, user-scalable=no">
<!-- Client Code Includes -->
<script src="code/engine/largeSphereCollider.js"></script>
<script src="code/engine/collisionTypes.js"></script>
<script src="code/engine/mkdsConst.js"></script>
<script src="code/engine/ingameRes.js"></script>
<script src="code/engine/itemController.js"></script>
<script src="code/IndexedDBShim.min.js"></script>
<script src="code/engine/storage/fileStore.js"></script>
<script src="code/engine/controls/controlDefault.js"></script>
<script src="code/engine/controls/controlRaceCPU.js"></script>
<script src="code/engine/controls/controlNetwork.js"></script>
<script src="code/engine/cameras/cameraIngame.js"></script>
<script src="code/engine/cameras/cameraSpectator.js"></script>
<script src="code/engine/cameras/cameraIntro.js"></script>
<script src="code/engine/scenes/sceneDrawer.js"></script>
<script src="code/engine/scenes/courseScene.js"></script>
<script src="code/engine/scenes/clientScene.js"></script>
<script src="code/engine/scenes/singleScene.js"></script>
<script src="code/engine/2d/tileFlattener.js"></script>
<script src="code/ui/race3DUI.js"></script>
<script src="code/formats/net/netKart.js"></script>
<script src="code/entities/objDatabase.js"></script>
<script src="code/entities/trafficCar.js"></script>
<script src="code/entities/water.js"></script>
<script src="code/entities/itembox.js"></script>
<script src="code/entities/decorations.js"></script>
<script src="code/entities/rotatingGear.js"></script>
<script src="code/entities/bowserPlatforms.js"></script>
<script src="code/entities/soundMaker.js"></script>
<script src="code/particles/itemboxShard.js"></script>
<script src="code/particles/nitroParticle.js"></script>
<script src="code/particles/nitroEmitter.js"></script>
<script src="code/entities/shell.js"></script>
<script src="code/entities/kart.js"></script>
<script src="code/entities/kartItems.js"></script>
<script src="code/entities/items/bananas.js"></script>
<script src="code/entities/items/powerups.js"></script>
<script src="code/entities/items/shells.js"></script>
<script src="code/entities/item.js"></script>
<script src="code/formats/kcl.js"></script>
<script src="code/formats/ndsFS.js"></script>
<script src="code/formats/nitro.js"></script>
<script src="code/formats/nsbtx.js"></script>
<script src="code/formats/nsbmd.js"></script>
<script src="code/formats/nsbta.js"></script>
<script src="code/formats/nsbca.js"></script>
<script src="code/formats/nsbtp.js"></script>
<script src="code/formats/nftr.js"></script>
<script src="code/formats/narc.js"></script>
<script src="code/formats/lz77.js"></script>
<script src="code/formats/spa.js"></script>
<script src="code/formats/2d/ncer.js"></script>
<script src="code/formats/2d/ncgr.js"></script>
<script src="code/formats/2d/nclr.js"></script>
<script src="code/formats/2d/nscr.js"></script>
<script src="code/formats/nkm.js"></script>
<script src="code/formats/kartphysicalparam.js"></script>
<script src="code/formats/kartoffsetdata.js"></script>
<script src="code/render/nitroRender.js"></script>
<script src="code/render/nitroShaders.js"></script>
<script src="code/render/shadowRender.js"></script>
<script src="code/render/nitroAnimator.js"></script>
<script src="code/glmatrix/gl-matrix.js"></script>
<script src="code/formats/sdat.js"></script>
<script src="code/formats/swav.js"></script>
<script src="code/formats/swar.js"></script>
<script src="code/formats/sbnk.js"></script>
<script src="code/formats/sseq.js"></script>
<script src="code/formats/ssar.js"></script>
<script src="code/audio/sseqPlayer.js"></script>
<script src="code/audio/nitroAudio.js"></script>
<!-- Inline code (because that's always a good idea) -->
<script>
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var files = {};
var fileQuota;
var filesLoaded = 0;
var mobile = (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|cLine truncated
|
||||
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="mkjs">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, user-scalable=no">
<!-- Client Code Includes -->
<script src="code/engine/largeSphereCollider.js"></script>
<script src="code/engine/collisionTypes.js"></script>
<script src="code/engine/mkdsConst.js"></script>
<script src="code/engine/ingameRes.js"></script>
<script src="code/engine/itemController.js"></script>
<script src="code/IndexedDBShim.min.js"></script>
<script src="code/engine/storage/fileStore.js"></script>
<script src="code/engine/controls/controlDefault.js"></script>
<script src="code/engine/controls/controlRaceCPU.js"></script>
<script src="code/engine/controls/controlNetwork.js"></script>
<script src="code/engine/cameras/cameraIngame.js"></script>
<script src="code/engine/cameras/cameraSpectator.js"></script>
<script src="code/engine/cameras/cameraIntro.js"></script>
<script src="code/engine/scenes/sceneDrawer.js"></script>
<script src="code/engine/scenes/courseScene.js"></script>
<script src="code/engine/scenes/clientScene.js"></script>
<script src="code/engine/scenes/singleScene.js"></script>
<script src="code/engine/2d/tileFlattener.js"></script>
<script src="code/ui/race3DUI.js"></script>
<script src="code/formats/net/netKart.js"></script>
<script src="code/entities/objDatabase.js"></script>
<script src="code/entities/trafficCar.js"></script>
<script src="code/entities/water.js"></script>
<script src="code/entities/itembox.js"></script>
<script src="code/entities/decorations.js"></script>
<script src="code/entities/rotatingGear.js"></script>
<script src="code/entities/bowserPlatforms.js"></script>
<script src="code/entities/soundMaker.js"></script>
<script src="code/particles/itemboxShard.js"></script>
<script src="code/particles/nitroParticle.js"></script>
<script src="code/particles/nitroEmitter.js"></script>
<script src="code/entities/shell.js"></script>
<script src="code/entities/kart.js"></script>
<script src="code/entities/kartItems.js"></script>
<script src="code/entities/items/bananas.js"></script>
<script src="code/entities/items/powerups.js"></script>
<script src="code/entities/items/shells.js"></script>
<script src="code/entities/item.js"></script>
<script src="code/formats/kcl.js"></script>
<script src="code/formats/ndsFS.js"></script>
<script src="code/formats/nitro.js"></script>
<script src="code/formats/nsbtx.js"></script>
<script src="code/formats/nsbmd.js"></script>
<script src="code/formats/nsbta.js"></script>
<script src="code/formats/nsbca.js"></script>
<script src="code/formats/nsbtp.js"></script>
<script src="code/formats/nftr.js"></script>
<script src="code/formats/narc.js"></script>
<script src="code/formats/lz77.js"></script>
<script src="code/formats/spa.js"></script>
<script src="code/formats/2d/ncer.js"></script>
<script src="code/formats/2d/ncgr.js"></script>
<script src="code/formats/2d/nclr.js"></script>
<script src="code/formats/2d/nscr.js"></script>
<script src="code/formats/nkm.js"></script>
<script src="code/formats/kartphysicalparam.js"></script>
<script src="code/formats/kartoffsetdata.js"></script>
<script src="code/render/nitroRender.js"></script>
<script src="code/render/nitroShaders.js"></script>
<script src="code/render/shadowRender.js"></script>
<script src="code/render/nitroAnimator.js"></script>
<script src="code/glmatrix/gl-matrix.js"></script>
<script src="code/formats/sdat.js"></script>
<script src="code/formats/swav.js"></script>
<script src="code/formats/swar.js"></script>
<script src="code/formats/sbnk.js"></script>
<script src="code/formats/sseq.js"></script>
<script src="code/formats/ssar.js"></script>
<script src="code/audio/sseqPlayer.js"></script>
<script src="code/audio/nitroAudio.js"></script>
<!-- Inline code (because that's always a good idea) -->
<script>
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var files = {};
var fileQuota;
var filesLoaded = 0;
var mobile = (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|cLine truncated
|
||||
Reference in new issue
Block a user