yuuki/catmario
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Touch control implemented.

Browse source
This commit is contained in:
Li Jia 2015-10-31 23:32:44 +08:00
parent b4c725cb12
commit e6f084346a
4 changed files with 236 additions and 215 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

192
index.html
View file

@ -3,75 +3,27 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; 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> <style>
body { body {
font-family: arial; font-family: arial;
margin: 0; margin: 0;
padding: none; padding: 0;
background-color: #282828;
} }
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } #canvas {
div.emscripten { text-align: center; } border: 0px none;
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */ outline: none;
canvas.emscripten { border: 0px none; } padding: 0;
margin-left: auto;
.spinner { margin-right: auto;
height: 30px; display: block;
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;
} }
#output { #output {
width: 100%; width: 470px;
height: 200px; height: 200px;
margin: 0 auto; margin: 0 auto;
margin-top: 10px; margin-top: 10px;
@ -80,96 +32,82 @@
color: white; color: white;
font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Console', Monaco, monospace;
outline: none; outline: none;
border: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="spinner" id='spinner'></div> <canvas id="canvas" width="480" height="640" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
<div class="emscripten" id="status">Downloading...</div> <textarea id="output" rows="8" readonly></textarea>
<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>
<script type='text/javascript'> <script type='text/javascript'>
var statusElement = document.getElementById('status'); var canvas = document.getElementById('canvas');
var progressElement = document.getElementById('progress');
var spinnerElement = document.getElementById('spinner');
var Module = { var Module = {
preRun: [], preRun: [],
postRun: [], postRun: [],
canvas: canvas,
setStatus: function (text) {
Module.setStatus.text = text;
console.log(text);
},
print: (function () { print: (function () {
var element = document.getElementById('output'); var element = document.getElementById('output');
if (element) element.value = ''; // clear browser cache if (element) element.value = '';
return function (text) { return function (text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); 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, "&amp;");
//text = text.replace(/</g, "&lt;");
//text = text.replace(/>/g, "&gt;");
//text = text.replace('\n', '<br>', 'g');
console.log(text); console.log(text);
if (element) { if (element) {
element.value += text + "\n"; 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...');
Module.setStatus('Loading...');
window.onerror = function (event) { 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.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>
<script async type="text/javascript" src="dlm.js"></script> <script async type="text/javascript" src="dlm.js"></script>
</body> </body>

27
lib.h
View file

@ -12,30 +12,21 @@ typedef uint8_t byte;
#define DX_INPUT_KEY_PAD1 (0x1001) // ¥­©`ÈëÁ¦¤È¥Ñ¥Ã¥É£±ÈëÁ¦ #define DX_INPUT_KEY_PAD1 (0x1001) // ¥­©`ÈëÁ¦¤È¥Ñ¥Ã¥É£±ÈëÁ¦
#define PAD_INPUT_DOWN (0x00000001) #define PAD_INPUT_LEFT (0x01)
#define PAD_INPUT_LEFT (0x00000002) #define PAD_INPUT_RIGHT (0x02)
#define PAD_INPUT_RIGHT (0x00000004) #define PAD_INPUT_DOWN (0x04)
#define PAD_INPUT_UP (0x00000008) #define PAD_INPUT_UP (0x08)
#define PAD_INPUT_JUMP (0x10)
#define KEY_INPUT_F1 1 #define PAD_INPUT_DECIDE (0x20)
#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
extern "C" { extern "C" {
void input_init(); void input_init();
int input_waitkey(void); int input_waitkey(void);
int input_keydown(int keycode); int input_get();
int input_getjoypad();
int graphics_init(); int graphics_init();
void begindraw();
void enddraw();
int loadimage(const char *FileName); int loadimage(const char *FileName);
int subimage(int SrcX, int SrcY, int Width, int Height, int SrcGraphHandle); int subimage(int SrcX, int SrcY, int Width, int Height, int SrcGraphHandle);

129
lib.js
View file

@ -155,44 +155,129 @@ var LibraryDLM = {
DLM.mirror = (mirror != 0); 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
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
input_init: function() { input_init: function() {
DLM.key = 0;
DLM.touch = 0;
DLM.mouse = 0;
var canvas = Module['canvas']; var canvas = Module['canvas'];
var keydown_callback = function (e) { var key_callback = function (e) {
e.preventDefault(); e.preventDefault();
if (e.repeat) if (e.repeat)
return; 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') { if (e.type == 'keydown') {
DLM.keyboard[e.keyCode] = 1; DLM.key |= buttons;
} }
else if (e.type == 'keyup') { 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); var mouse_callback = function (e) {
DLM.keyboard = []; 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_waitkey: function() {
}, },
input_keydown: function(key) { input_get: function() {
return DLM.keyboard[key] | 0; return DLM.key | DLM.touch | DLM.mouse;
},
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;
}, },
getrand: function(maxValue) { getrand: function(maxValue) {
@ -209,6 +294,7 @@ var LibraryDLM = {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
sound_init: function() { sound_init: function() {
return;
var audioCtx; var audioCtx;
try { try {
audioCtx = new (window.AudioContext || window.webkitAudioContext)(); audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@ -275,8 +361,10 @@ var LibraryDLM = {
if (audioCtx == null) if (audioCtx == null)
return; return;
var buf = DLM.audioBuffer[i];
if (buf) {
var source = audioCtx.createBufferSource(); var source = audioCtx.createBufferSource();
source.buffer = DLM.audioBuffer[i]; source.buffer = buf;
source.connect(audioCtx.destination); source.connect(audioCtx.destination);
source.start(0, s, d); source.start(0, s, d);
source.onended = function () { source.onended = function () {
@ -286,6 +374,7 @@ var LibraryDLM = {
} }
DLM.audioSources[x] = source; DLM.audioSources[x] = source;
} }
}
}, },
soundstop: function(x) { soundstop: function(x) {

13
main.cpp
View file

@ -1128,7 +1128,7 @@ void Mainprogram() {
//キー //キー
key = input_getjoypad(); key = input_get();
if (mainproc == 1 && tmsgtype == 0) { if (mainproc == 1 && tmsgtype == 0) {
@ -1216,13 +1216,13 @@ void Mainprogram() {
if (mkeytm <= 0) { 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; } if (actaon[1] == 10) {actaon[1] = 1; xx[0] = 1; }
actaon[2] = 1; actaon[2] = 1;
} }
} }
if (key & PAD_INPUT_UP) { if (key & PAD_INPUT_JUMP) {
if (mjumptm == 8 && md >= -900) { if (mjumptm == 8 && md >= -900) {
md = -1300; md = -1300;
//ダッシュ中 //ダッシュ中
@ -3207,7 +3207,7 @@ void Mainprogram() {
xx[7] = 46; xx[7] = 46;
//if (input_keydown(KEY_INPUT_1) == 1) {end(); } //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) { for (t = 0; t <= xx[7]; t += 1) {
xx[12 + t] -= 300; xx[12 + t] -= 300;
} }
@ -3276,7 +3276,8 @@ void Mainprogram() {
*/ */
//if (CheckHitKeyAll() == 0){end();} //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_SPACE)==1){xx[0]=1;}
//if (input_keydown(KEY_INPUT_Z) == 1) {xx[0] = 1; } //if (input_keydown(KEY_INPUT_Z) == 1) {xx[0] = 1; }
@ -3292,7 +3293,9 @@ void Mainprogram() {
//描画 //描画
begindraw();
rpaint(); rpaint();
enddraw();
} //Mainprogram() } //Mainprogram()