Touch control implemented.
This commit is contained in:
Li Jia
parent
b4c725cb12
commit
e6f084346a
4 changed files with 236 additions and 215 deletions
206
index.html
206
index.html
|
|
@ -1,77 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Emscripten-Generated Code</title>
|
||||
<meta name="viewport" content="width=480,user-scalable=no" />
|
||||
<title>变态马里奥</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: arial;
|
||||
margin: 0;
|
||||
padding: none;
|
||||
padding: 0;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
div.emscripten { text-align: center; }
|
||||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
|
||||
canvas.emscripten { border: 0px none; }
|
||||
|
||||
.spinner {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
-webkit-animation: rotation .8s linear infinite;
|
||||
-moz-animation: rotation .8s linear infinite;
|
||||
-o-animation: rotation .8s linear infinite;
|
||||
animation: rotation 0.8s linear infinite;
|
||||
|
||||
border-left: 5px solid rgb(235, 235, 235);
|
||||
border-right: 5px solid rgb(235, 235, 235);
|
||||
border-bottom: 5px solid rgb(235, 235, 235);
|
||||
border-top: 5px solid rgb(120, 120, 120);
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: rgb(189, 215, 46);
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
#status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 30px;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
color: rgb(120, 120, 120);
|
||||
}
|
||||
|
||||
#progress {
|
||||
height: 20px;
|
||||
width: 30px;
|
||||
#canvas {
|
||||
border: 0px none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
width: 470px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
|
|
@ -80,97 +32,83 @@
|
|||
color: white;
|
||||
font-family: 'Lucida Console', Monaco, monospace;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="spinner" id='spinner'></div>
|
||||
<div class="emscripten" id="status">Downloading...</div>
|
||||
|
||||
<div class="emscripten">
|
||||
<progress value="0" max="100" id="progress" hidden=1></progress>
|
||||
</div>
|
||||
|
||||
<span><input type="checkbox" id="resize" onchange="Module.enableSound=event.target.value">Sound</span>
|
||||
|
||||
<div id="container">
|
||||
<canvas class="emscripten" id="canvas" width="480" height="420" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
|
||||
</div>
|
||||
<textarea id="output" rows="8"></textarea>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="480" height="640" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
|
||||
<textarea id="output" rows="8" readonly></textarea>
|
||||
<script type='text/javascript'>
|
||||
var statusElement = document.getElementById('status');
|
||||
var progressElement = document.getElementById('progress');
|
||||
var spinnerElement = document.getElementById('spinner');
|
||||
var canvas = document.getElementById('canvas');
|
||||
|
||||
var Module = {
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
canvas: canvas,
|
||||
setStatus: function (text) {
|
||||
Module.setStatus.text = text;
|
||||
console.log(text);
|
||||
},
|
||||
print: (function () {
|
||||
var element = document.getElementById('output');
|
||||
if (element) element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
if (element) element.value = '';
|
||||
return function (text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
console.log(text);
|
||||
if (element) {
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = element.scrollHeight; // focus on bottom
|
||||
element.scrollTop = element.scrollHeight;
|
||||
}
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
||||
if (0) { // XXX disabled for safety typeof dump == 'function') {
|
||||
dump(text + '\n'); // fast, straight to the real console
|
||||
} else {
|
||||
console.error(text);
|
||||
}
|
||||
},
|
||||
canvas: (function () {
|
||||
return document.getElementById('canvas');
|
||||
})(),
|
||||
setStatus: function(text) {
|
||||
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
|
||||
if (text === Module.setStatus.text) return;
|
||||
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
||||
var now = Date.now();
|
||||
if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
|
||||
if (m) {
|
||||
text = m[1];
|
||||
progressElement.value = parseInt(m[2])*100;
|
||||
progressElement.max = parseInt(m[4])*100;
|
||||
progressElement.hidden = false;
|
||||
spinnerElement.hidden = false;
|
||||
} else {
|
||||
progressElement.value = null;
|
||||
progressElement.max = null;
|
||||
progressElement.hidden = true;
|
||||
if (!text) spinnerElement.style.display = 'none';
|
||||
}
|
||||
statusElement.innerHTML = text;
|
||||
},
|
||||
totalDependencies: 0,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
window.onerror = function(event) {
|
||||
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
|
||||
Module.setStatus('Exception thrown, see JavaScript console');
|
||||
spinnerElement.style.display = 'none';
|
||||
Module.setStatus = function(text) {
|
||||
if (text) Module.printErr('[post-exception status] ' + text);
|
||||
};
|
||||
|
||||
Module.setStatus('Loading...');
|
||||
|
||||
window.onerror = function (event) {
|
||||
};
|
||||
|
||||
Module.print(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
canvas.height = document.documentElement.clientHeight;
|
||||
|
||||
var angle = 0;
|
||||
var drawLoading = function () {
|
||||
if (Module.setStatus.text == '')
|
||||
return;
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.clearRect(0, 0, 480, 420);
|
||||
ctx.translate(480 / 2, 420 / 2);
|
||||
ctx.font = '12px sans-serif';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeStyle = 'white';
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.fillText('Loading...', 0, 18);
|
||||
|
||||
var t = Math.PI * 2 * 0.9;
|
||||
var step = t / 20;
|
||||
ctx.rotate(angle);
|
||||
for (var i = 0; i < t; i += step) {
|
||||
ctx.globalAlpha = i / t * 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, 10, i, i + step);
|
||||
ctx.stroke();
|
||||
}
|
||||
angle += 0.1;
|
||||
|
||||
ctx.restore();
|
||||
|
||||
window.requestAnimationFrame(drawLoading);
|
||||
}
|
||||
|
||||
drawLoading();
|
||||
|
||||
</script>
|
||||
<script async type="text/javascript" src="dlm.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
27
lib.h
27
lib.h
|
|
@ -12,30 +12,21 @@ typedef uint8_t byte;
|
|||
#define DX_INPUT_KEY_PAD1 (0x1001) // ¥©`ÈëÁ¦¤È¥Ñ¥Ã¥É£±ÈëÁ¦
|
||||
|
||||
|
||||
#define PAD_INPUT_DOWN (0x00000001)
|
||||
#define PAD_INPUT_LEFT (0x00000002)
|
||||
#define PAD_INPUT_RIGHT (0x00000004)
|
||||
#define PAD_INPUT_UP (0x00000008)
|
||||
|
||||
#define KEY_INPUT_F1 1
|
||||
#define KEY_INPUT_0 48
|
||||
#define KEY_INPUT_1 49
|
||||
#define KEY_INPUT_O 79
|
||||
#define KEY_INPUT_Z 90
|
||||
#define KEY_INPUT_ESCAPE 27
|
||||
#define KEY_INPUT_SPACE 32
|
||||
#define KEY_INPUT_RETURN 13
|
||||
|
||||
|
||||
|
||||
#define PAD_INPUT_LEFT (0x01)
|
||||
#define PAD_INPUT_RIGHT (0x02)
|
||||
#define PAD_INPUT_DOWN (0x04)
|
||||
#define PAD_INPUT_UP (0x08)
|
||||
#define PAD_INPUT_JUMP (0x10)
|
||||
#define PAD_INPUT_DECIDE (0x20)
|
||||
|
||||
extern "C" {
|
||||
void input_init();
|
||||
int input_waitkey(void);
|
||||
int input_keydown(int keycode);
|
||||
int input_getjoypad();
|
||||
int input_get();
|
||||
|
||||
int graphics_init();
|
||||
void begindraw();
|
||||
void enddraw();
|
||||
|
||||
int loadimage(const char *FileName);
|
||||
int subimage(int SrcX, int SrcY, int Width, int Height, int SrcGraphHandle);
|
||||
|
|
|
|||
129
lib.js
129
lib.js
|
|
@ -155,44 +155,129 @@ var LibraryDLM = {
|
|||
DLM.mirror = (mirror != 0);
|
||||
},
|
||||
|
||||
begindraw: function() {
|
||||
},
|
||||
|
||||
enddraw: function() {
|
||||
var canvas = Module['canvas'];
|
||||
var h = canvas.height;
|
||||
if (h <= 420)
|
||||
return;
|
||||
|
||||
var drawArrow = function () {
|
||||
}
|
||||
|
||||
gfxContext.clearRect(0, 420, canvas.width, h - 420);
|
||||
gfxContext.save();
|
||||
|
||||
var key = [];
|
||||
key[0] = (DLM.touch & 1) != 0;
|
||||
key[1] = (DLM.touch & 8) != 0;
|
||||
key[2] = (DLM.touch & 2) != 0;
|
||||
key[3] = (DLM.touch & 4) != 0;
|
||||
|
||||
gfxContext.fillStyle = 'white';
|
||||
gfxContext.strokeStyle = 'black';
|
||||
gfxContext.strokeWidth = 2;
|
||||
gfxContext.translate(140, 420 + (h - 420) / 2);
|
||||
for (var i = 0; i < 4; i++) {
|
||||
gfxContext.globalAlpha = key[i] ? 0.6 : 0.3;
|
||||
gfxContext.beginPath();
|
||||
gfxContext.moveTo(-5, 0);
|
||||
gfxContext.lineTo(-35, -30);
|
||||
gfxContext.lineTo(-80, -30);
|
||||
gfxContext.lineTo(-80, 30);
|
||||
gfxContext.lineTo(-35, 30);
|
||||
gfxContext.closePath();
|
||||
gfxContext.fill();
|
||||
gfxContext.stroke();
|
||||
gfxContext.rotate(Math.PI / 2);
|
||||
}
|
||||
|
||||
gfxContext.setTransform(1, 0, 0, 1, 340, 420 + (h - 420) / 2);
|
||||
gfxContext.globalAlpha = (DLM.touch & 0x10) != 0 ? 0.6 : 0.3;
|
||||
gfxContext.fillRect(-40, -40, 80, 80);
|
||||
gfxContext.strokeRect(-40, -40, 80, 80);
|
||||
|
||||
gfxContext.restore();
|
||||
},
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Input
|
||||
//------------------------------------------------------------------------------
|
||||
input_init: function() {
|
||||
DLM.key = 0;
|
||||
DLM.touch = 0;
|
||||
DLM.mouse = 0;
|
||||
|
||||
var canvas = Module['canvas'];
|
||||
var keydown_callback = function (e) {
|
||||
var key_callback = function (e) {
|
||||
e.preventDefault();
|
||||
if (e.repeat)
|
||||
return;
|
||||
|
||||
var buttons = 0;
|
||||
switch (e.keyCode) {
|
||||
case 37: buttons |= 1; break;
|
||||
case 38: buttons |= 16; break;
|
||||
case 39: buttons |= 2; break;
|
||||
case 40: buttons |= 4; break;
|
||||
case 13: buttons |= 32; break;
|
||||
}
|
||||
|
||||
if (e.type == 'keydown') {
|
||||
DLM.keyboard[e.keyCode] = 1;
|
||||
DLM.key |= buttons;
|
||||
}
|
||||
else if (e.type == 'keyup') {
|
||||
DLM.keyboard[e.keyCode] = 0;
|
||||
DLM.key = DLM.key & (~buttons);
|
||||
}
|
||||
};
|
||||
canvas.addEventListener('keydown', keydown_callback, true);
|
||||
canvas.addEventListener('keyup', keydown_callback, true);
|
||||
DLM.keyboard = [];
|
||||
|
||||
var mouse_callback = function (e) {
|
||||
switch (e.type) {
|
||||
case 'mousedown': DLM.mouse |= 32; break;
|
||||
case 'mouseup': DLM.mouse &= (~32); break;
|
||||
}
|
||||
}
|
||||
|
||||
var check_touch = function (t, x1, y1, x2, y2) {
|
||||
return (t.clientX > x1 && t.clientX < x2 &&
|
||||
t.clientY > y1 && t.clientY < y2);
|
||||
}
|
||||
|
||||
var touch_callback = function (e) {
|
||||
e.preventDefault();
|
||||
var touch = 0;
|
||||
var centerY = 420 + (Module['canvas'].height - 420) / 2;
|
||||
|
||||
for (var i = 0; i < e.touches.length; i++) {
|
||||
var t = e.touches.item(i);
|
||||
if (check_touch(t, 140 - 40, centerY + 20, 140 + 40, centerY + 100)) touch |= 4;
|
||||
else if (check_touch(t, 140 - 40, centerY - 100, 140 + 40, centerY - 40)) touch |= 8;
|
||||
else if (check_touch(t, 140 - 100, centerY - 40, 140, centerY + 40)) touch |= 1;
|
||||
else if (check_touch(t, 140, centerY - 40, 140 + 100, centerY + 40)) touch |= 2;
|
||||
|
||||
if (check_touch(t, 340 - 100, centerY - 100, 340 + 100, centerY + 100)) touch |= 0x10;
|
||||
touch |= 0x20;
|
||||
}
|
||||
DLM.touch = touch;
|
||||
}
|
||||
|
||||
canvas.addEventListener('keydown', key_callback, true);
|
||||
canvas.addEventListener('keyup', key_callback, true);
|
||||
canvas.addEventListener('mousedown', mouse_callback, true);
|
||||
canvas.addEventListener('mouseup', mouse_callback, true);
|
||||
canvas.addEventListener('touchstart', touch_callback, true);
|
||||
canvas.addEventListener('touchend', touch_callback, true);
|
||||
canvas.addEventListener('touchmove', touch_callback, true);
|
||||
canvas.addEventListener('touchcancel', touch_callback, true);
|
||||
},
|
||||
|
||||
input_waitkey: function() {
|
||||
},
|
||||
|
||||
input_keydown: function(key) {
|
||||
return DLM.keyboard[key] | 0;
|
||||
},
|
||||
|
||||
input_getjoypad: function() {
|
||||
joypad = 0;
|
||||
var key = DLM.keyboard;
|
||||
if (key[37]) joypad |= 2;
|
||||
if (key[38]) joypad |= 8;
|
||||
if (key[39]) joypad |= 4;
|
||||
if (key[40]) joypad |= 1;
|
||||
|
||||
return joypad;
|
||||
input_get: function() {
|
||||
return DLM.key | DLM.touch | DLM.mouse;
|
||||
},
|
||||
|
||||
getrand: function(maxValue) {
|
||||
|
|
@ -209,6 +294,7 @@ var LibraryDLM = {
|
|||
//------------------------------------------------------------------------------
|
||||
|
||||
sound_init: function() {
|
||||
return;
|
||||
var audioCtx;
|
||||
try {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
|
|
@ -275,8 +361,10 @@ var LibraryDLM = {
|
|||
if (audioCtx == null)
|
||||
return;
|
||||
|
||||
var buf = DLM.audioBuffer[i];
|
||||
if (buf) {
|
||||
var source = audioCtx.createBufferSource();
|
||||
source.buffer = DLM.audioBuffer[i];
|
||||
source.buffer = buf;
|
||||
source.connect(audioCtx.destination);
|
||||
source.start(0, s, d);
|
||||
source.onended = function () {
|
||||
|
|
@ -286,6 +374,7 @@ var LibraryDLM = {
|
|||
}
|
||||
DLM.audioSources[x] = source;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
soundstop: function(x) {
|
||||
|
|
|
|||
13
main.cpp
13
main.cpp
|
|
@ -1128,7 +1128,7 @@ void Mainprogram() {
|
|||
|
||||
|
||||
//キー
|
||||
key = input_getjoypad();
|
||||
key = input_get();
|
||||
|
||||
|
||||
if (mainproc == 1 && tmsgtype == 0) {
|
||||
|
|
@ -1216,13 +1216,13 @@ void Mainprogram() {
|
|||
|
||||
|
||||
if (mkeytm <= 0) {
|
||||
if (key & PAD_INPUT_UP) { //end();
|
||||
if (key & PAD_INPUT_JUMP) { //end();
|
||||
if (actaon[1] == 10) {actaon[1] = 1; xx[0] = 1; }
|
||||
actaon[2] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (key & PAD_INPUT_UP) {
|
||||
if (key & PAD_INPUT_JUMP) {
|
||||
if (mjumptm == 8 && md >= -900) {
|
||||
md = -1300;
|
||||
//ダッシュ中
|
||||
|
|
@ -3207,7 +3207,7 @@ void Mainprogram() {
|
|||
|
||||
xx[7] = 46;
|
||||
//if (input_keydown(KEY_INPUT_1) == 1) {end(); }
|
||||
if (input_keydown(KEY_INPUT_SPACE) == 1) {
|
||||
if (key != 0) {
|
||||
for (t = 0; t <= xx[7]; t += 1) {
|
||||
xx[12 + t] -= 300;
|
||||
}
|
||||
|
|
@ -3276,7 +3276,8 @@ void Mainprogram() {
|
|||
*/
|
||||
|
||||
//if (CheckHitKeyAll() == 0){end();}
|
||||
if (input_keydown(KEY_INPUT_RETURN) == 1) {xx[0] = 1; }
|
||||
if (key != 0) { xx[0] = 1; }
|
||||
//if (input_keydown(KEY_INPUT_RETURN) == 1) {xx[0] = 1; }
|
||||
//if (input_keydown(KEY_INPUT_SPACE)==1){xx[0]=1;}
|
||||
//if (input_keydown(KEY_INPUT_Z) == 1) {xx[0] = 1; }
|
||||
|
||||
|
|
@ -3292,7 +3293,9 @@ void Mainprogram() {
|
|||
|
||||
|
||||
//描画
|
||||
begindraw();
|
||||
rpaint();
|
||||
enddraw();
|
||||
|
||||
} //Mainprogram()
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue