mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-07-22 09:37:09 +00:00
300 lines
6.5 KiB
HTML
300 lines
6.5 KiB
HTML
<html>
|
|
|
|
<style>
|
|
textarea {
|
|
width: 60%;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
|
|
<select id="gameOp">
|
|
<option value="Contra.nes">Contra.nes</option>
|
|
<option value="Kirby's Adventure.nes">Kirby's Adventure.nes</option>
|
|
<option value="Mega Man 2.nes">Mega Man 2.nes</option>
|
|
<option value="Metal Gear.nes">Metal Gear.nes</option>
|
|
<option value="Mortal Kombat 4.nes">Mortal Kombat 4.nes</option>
|
|
<option value="Super Mario Bros 2.nes">Super Mario Bros 2.nes</option>
|
|
<option value="Super Mario Bros 3.nes">Super Mario Bros 3.nes</option>
|
|
<option value="Super Mario Bros.nes">Super Mario Bros.nes</option>
|
|
<option value="Teenage Mutant Ninja Turtles 3.nes">Teenage Mutant Ninja Turtles 3.nes</option>
|
|
<option value="VS Super Mario Bros.nes">VS Super Mario Bros.nes</option>
|
|
<option value="supermariobros.rom">supermariobros.rom</option>
|
|
<option value="zelda.rom">zelda.rom</option>
|
|
</select>
|
|
<button id="play" onclick="window.startGame()">Play</button>
|
|
Room ID: <input type="text" id="roomID">
|
|
Play as player(1,2): <select id="playerIndex">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
|
|
<br/><br/>
|
|
|
|
<body scroll="no" style="overflow: hidden">
|
|
<div id="remoteVideos"></div> <br />
|
|
|
|
<h3>Instruction</h3>
|
|
<div>
|
|
C is start button. Use it to start game<br />
|
|
V is select button <br />
|
|
|
|
Player 1
|
|
Use Up, Down, Left, Right to Move <br />
|
|
Z to jump (A) <br />
|
|
X to sprint (B) <br />
|
|
S to save <br />
|
|
L to load <br />
|
|
<!--Fullscreen media for better gaming experience<br /-->
|
|
</div><br>
|
|
|
|
<h3>Log:</h3>
|
|
<pre id="div"></pre>
|
|
|
|
<div>
|
|
🎮<u><i>Refresh to retry when checking is too long</i></u>
|
|
</div>
|
|
<script>
|
|
|
|
// miscs
|
|
DEBUG = true;
|
|
|
|
let log = msg => {
|
|
if (DEBUG) {
|
|
document.getElementById('div').innerHTML += msg + '<br>'
|
|
console.log(msg);
|
|
}
|
|
}
|
|
|
|
// web socket
|
|
|
|
window.startGame = () => {
|
|
// clear
|
|
endInput();
|
|
document.getElementById('div').innerHTML = "";
|
|
aa = document.getElementsByTagName("video");
|
|
for (i = 0; i < aa.length ; ++i) {
|
|
aa[i].remove();
|
|
}
|
|
// end clear
|
|
|
|
|
|
conn = new WebSocket(`ws://${location.host}/ws`);
|
|
|
|
conn.onopen = () => {
|
|
log("WebSocket is opened. Send ping");
|
|
conn.send(JSON.stringify({"id": "ping", "data": gameOp.value, "room_id": roomID.value, "player_index": parseInt(playerIndex.value, 10)}));
|
|
}
|
|
|
|
conn.onerror = error => {
|
|
log(`Websocket error: ${error}`);
|
|
}
|
|
|
|
conn.onclose = () => {
|
|
log("Websocket closed");
|
|
// pc.close();
|
|
}
|
|
|
|
conn.onmessage = e => {
|
|
d = JSON.parse(e.data);
|
|
switch (d["id"]) {
|
|
case "pong":
|
|
log("Recv pong. Start webrtc");
|
|
startWebRTC();
|
|
break;
|
|
case "sdp":
|
|
log("Got remote sdp");
|
|
pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(atob(d["data"]))));
|
|
break;
|
|
case "start":
|
|
log("Got start");
|
|
roomID.value = d["room_id"]
|
|
break;
|
|
}
|
|
}
|
|
|
|
// webrtc
|
|
pc = new RTCPeerConnection({iceServers: [{urls: 'stun:stun.l.google.com:19302'}]})
|
|
// input channel
|
|
inputChannel = pc.createDataChannel('foo')
|
|
inputChannel.onclose = () => {
|
|
log('inputChannel has closed');
|
|
}
|
|
|
|
inputChannel.onopen = () => {
|
|
log('inputChannel has opened');
|
|
}
|
|
|
|
inputChannel.onmessage = e => {
|
|
log(`Message from DataChannel '${inputChannel.label}' payload '${e.data}'`);
|
|
}
|
|
|
|
|
|
pc.oniceconnectionstatechange = e => {
|
|
log(`iceConnectionState: ${pc.iceConnectionState}`);
|
|
|
|
if (pc.iceConnectionState === "connected") {
|
|
conn.send(JSON.stringify({"id": "start", "data": ""}));
|
|
startInput();
|
|
}
|
|
else if (pc.iceConnectionState === "disconnected") {
|
|
// else { // not sure about this =]
|
|
endInput();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// stream channel
|
|
pc.ontrack = function (event) {
|
|
var el = document.createElement(event.track.kind);
|
|
// console.log(event.streams);
|
|
el.srcObject = event.streams[0];
|
|
el.autoplay = true;
|
|
el.width = 800;
|
|
el.height = 600;
|
|
el.poster = new URL("https://orig00.deviantart.net/cdcd/f/2017/276/a/a/october_2nd___gameboy_poltergeist_by_wanyo-dbpdmnd.gif");
|
|
|
|
document.getElementById('remoteVideos').appendChild(el)
|
|
}
|
|
|
|
|
|
|
|
// candidate packet from STUN
|
|
pc.onicecandidate = event => {
|
|
if (event.candidate === null) {
|
|
// send to ws
|
|
session = btoa(JSON.stringify(pc.localDescription));
|
|
localSessionDescription = session;
|
|
log("Send SDP to remote peer");
|
|
conn.send(JSON.stringify({"id": "sdp", "data": session}));
|
|
}
|
|
else {
|
|
console.log(JSON.stringify(event.candidate));
|
|
// conn.send(JSON.stringify({"id": "candidate", "data": JSON.stringify(event.candidate)}));
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// webrtc
|
|
var pc, inputChannel;
|
|
var localSessionDescription = "";
|
|
var remoteSessionDescription = "";
|
|
var conn;
|
|
|
|
|
|
|
|
|
|
|
|
// Input handler
|
|
keyState = {
|
|
// controllers
|
|
a: false,
|
|
b: false,
|
|
start: false,
|
|
select: false,
|
|
|
|
// navigators
|
|
up: false,
|
|
down: false,
|
|
left: false,
|
|
right: false,
|
|
|
|
// game meta keys
|
|
save: false,
|
|
load: false,
|
|
}
|
|
|
|
keyMap = {
|
|
37: "left",
|
|
38: "up",
|
|
39: "right",
|
|
40: "down",
|
|
|
|
90: "a",
|
|
88: "b",
|
|
67: "start",
|
|
86: "select",
|
|
83: "save",
|
|
76: "load",
|
|
}
|
|
|
|
INPUT_FPS = 100;
|
|
INPUT_STATE_PACKET = 5;
|
|
|
|
stateUnchange = true;
|
|
unchangePacket = INPUT_STATE_PACKET;
|
|
|
|
function setState(e, bo) {
|
|
if (e.keyCode in keyMap) {
|
|
keyState[keyMap[e.keyCode]] = bo;
|
|
stateUnchange = false;
|
|
unchangePacket = INPUT_STATE_PACKET;
|
|
}
|
|
}
|
|
|
|
document.body.onkeydown = function(e){
|
|
setState(e, true);
|
|
};
|
|
|
|
document.body.onkeyup = function(e){
|
|
setState(e, false);
|
|
};
|
|
|
|
var timer = null;
|
|
|
|
function sendInput() {
|
|
// prepare key
|
|
/*
|
|
const (
|
|
ButtonA = iota
|
|
ButtonB
|
|
ButtonSelect
|
|
ButtonStart
|
|
ButtonUp
|
|
ButtonDown
|
|
ButtonLeft
|
|
ButtonRight
|
|
)
|
|
*/
|
|
|
|
if (stateUnchange || unchangePacket > 0) {
|
|
st = "";
|
|
["a", "b", "select", "start", "up", "down", "left", "right", "save", "load"].reverse().forEach(elem => {
|
|
st += keyState[elem]?1:0;
|
|
});
|
|
ss = parseInt(st, 2);
|
|
console.log(`Key state string: ${st} ==> ${ss}`);
|
|
|
|
// send
|
|
inputChannel.send(ss);
|
|
|
|
stateUnchange = false;
|
|
unchangePacket--;
|
|
}
|
|
}
|
|
|
|
function startInput() {
|
|
if (timer == null) {
|
|
timer = setInterval(sendInput, 1000 / INPUT_FPS)
|
|
}
|
|
}
|
|
|
|
function endInput() {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
|
|
|
|
function startWebRTC() {
|
|
// receiver only tracks
|
|
pc.addTransceiver('video', {'direction': 'recvonly'});
|
|
|
|
// create SDP
|
|
pc.createOffer({offerToReceiveVideo: true, offerToReceiveAudio: false}).then(d => {
|
|
pc.setLocalDescription(d).catch(log);
|
|
})
|
|
}
|
|
|
|
</script>
|
|
</html>
|