141 lines
4.6 KiB
JavaScript
141 lines
4.6 KiB
JavaScript
//
|
|
// Applesoft BASIC in Javascript
|
|
// Paddle and Joystick Emulation
|
|
//
|
|
|
|
// Copyright (C) 2009-2011 Joshua Bell
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
|
|
// Usage:
|
|
//
|
|
// initPaddle( device_element, thumb_element, callback_function );
|
|
// initJoystick( device_element, thumb_element, callback_function_x, callback_function_y );
|
|
//
|
|
// Example:
|
|
//
|
|
// <script>
|
|
// initPaddle( device.getElementById('paddle'), device.getElementById('knob'), function ( v ) { window.status = v; /* v = 0...1 */ } );
|
|
// initJoystick( device.getElementById('joystick'), device.getElementById('stick'), function ( v ) { window.status = v; /* v = 0...1 */ }, function ( v ) { window.status = v; /* v = 0...1 */ } );
|
|
// </script>
|
|
// <style>
|
|
// #paddle { border-style: inset; border-width: 2px; border-color: gray; background-color: #c0c0c0; height: 20px;
|
|
// width: 300px; text-align: center; }
|
|
// #knob { border-style: outset; border-width: 2px; border-color: gray; background-color: #404040; height: 16px; width: 10px; }
|
|
// #joystick { border-style: inset; border-width: 2px; border-color: gray; background-color: #c0c0c0;
|
|
// width: 100px; height: 100px; text-align: center; vertical-align: middle; line-height: 100px; }
|
|
// #stick { border-style: outset; border-width: 2px; border-color: gray; background-color: #404040; height: 16px; width: 16px; }
|
|
// </style>
|
|
// <div id="paddle"> <div id="knob"></div> Slide the Paddle! </div>
|
|
// <div id="joystick"> <div id="stick"></div> Twiddle me!</div>
|
|
|
|
/*extern document,window,addEvent,removeEvent */
|
|
|
|
function initDevice(device, thumb, fn_x, fn_y) {
|
|
device.style.position = "relative";
|
|
device.style.overflow = "hidden";
|
|
|
|
thumb.style.position = "absolute";
|
|
thumb.style.left = 0;
|
|
thumb.style.top = 0;
|
|
|
|
thumb.last_x = 0;
|
|
thumb.last_y = 0;
|
|
|
|
var onStickDrag = function (e) {
|
|
e.returnValue = false;
|
|
e.cancelBubble = true;
|
|
if (e.stopPropagation) { e.stopPropagation(); }
|
|
if (e.preventDefault) { e.preventDefault(); }
|
|
|
|
if (fn_x) {
|
|
var x = e.clientX - thumb.originX + thumb.posX;
|
|
var min_x = 0;
|
|
var max_x = device.clientWidth - thumb.offsetWidth;
|
|
if (x < min_x) { x = min_x; }
|
|
if (x > max_x) { x = max_x; }
|
|
|
|
if (x != thumb.last_x) {
|
|
thumb.last_x = x;
|
|
thumb.style.left = x + "px";
|
|
fn_x((x - min_x) / (max_x - min_x));
|
|
}
|
|
}
|
|
|
|
if (fn_y) {
|
|
var y = e.clientY - thumb.originY + thumb.posY;
|
|
var min_y = 0;
|
|
var max_y = device.clientHeight - thumb.offsetHeight;
|
|
if (y < min_y) { y = min_y; }
|
|
if (y > max_y) { y = max_y; }
|
|
|
|
if (y != thumb.last_y) {
|
|
thumb.last_y = y;
|
|
thumb.style.top = y + "px";
|
|
fn_y((y - min_y) / (max_y - min_y));
|
|
}
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
var onStickUp = function (e) {
|
|
e.returnValue = false;
|
|
e.cancelBubble = true;
|
|
if (e.stopPropagation) { e.stopPropagation(); }
|
|
if (e.preventDefault) { e.preventDefault(); }
|
|
|
|
removeEvent(document, "mousemove", onStickDrag);
|
|
removeEvent(document, "mouseup", onStickUp);
|
|
if (thumb.releaseCapture) { thumb.releaseCapture(true); }
|
|
|
|
return false;
|
|
};
|
|
|
|
var onStickDown = function (e) {
|
|
e.returnValue = false;
|
|
e.cancelBubble = true;
|
|
if (e.stopPropagation) { e.stopPropagation(); }
|
|
if (e.preventDefault) { e.preventDefault(); }
|
|
|
|
addEvent(document, "mousemove", onStickDrag);
|
|
addEvent(document, "mouseup", onStickUp);
|
|
if (thumb.setCapture) { thumb.setCapture(true); }
|
|
|
|
if (fn_x) {
|
|
thumb.originX = e.clientX;
|
|
thumb.posX = parseInt(thumb.style.left, 10);
|
|
}
|
|
|
|
if (fn_y) {
|
|
thumb.originY = e.clientY;
|
|
thumb.posY = parseInt(thumb.style.top, 10);
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
device.appendChild(thumb);
|
|
|
|
addEvent(thumb, "mousedown", onStickDown);
|
|
}
|
|
|
|
function initPaddle(device, control, fn) {
|
|
initDevice(device, control, fn);
|
|
}
|
|
|
|
function initJoystick(device, control, fn_x, fn_y) {
|
|
initDevice(device, control, fn_x, fn_y);
|
|
}
|