docs: add README to CAR demo

ranpeng · ranpeng · commit 67a68f03d1d1 · 2023-03-02T17:39:33.000+08:00
diff --git a/samples/car/README.md b/samples/car/README.md
@@ -0,0 +1,19 @@
+# CAR(Cloud Application Rendering)
+
+> In theory, this demo is compatible with both PC and mobile clients (touch events on the mobile client have been processed in `onTouchEvent`).
+
+
+Detailed description of [interface(index.d.ts)](../../dist/tcg-sdk/index.d.ts).
+
+To add the queue feature, use the [queue demo](../queue).
+
+For more information about TCGSDK, see the [TCGSDK docs](https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs/index.html).
+
+
+For backend implementation, see the [backend demo](https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs/tutorial-02-cloud-application-backend.html)/[backend demo_en](https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs_en/tutorial-02-cloud-application-backend_EN-US.html) solution.
+
+
+
+## Importing the Plugin
+
+For movement operations on the mobile client, Real-Time Cloud Rendering provides an official joystick plugin ([Joystick](../../plugin/joystick/)) to map W/A/S/D or up/down/left/right keys on the keyboard.
diff --git a/samples/car/index.html b/samples/car/index.html
@@ -24,14 +24,24 @@
       width: 100%;
       height: 100%;
     }
+
+    #plugin-point {
+      position: absolute;
+      left: 100px;
+      bottom: 150px;
+      width: 0px;
+      height: 0px;
+    }
   </style>
 </head>
 
 <body>
   <div id="demo-container">
     <div id="mount-point"></div>
+    <div id="plugin-point"></div>
   </div>
-  <script type="text/javascript" src="path/to/tcg-sdk"></script>
+  <script type="text/javascript" src="../../dist/tcg-sdk/index.js"></script>
+  <script type="text/javascript" src="../../plugin/joystick/joystick.js"></script>
   <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
   <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
   <script>
@@ -73,6 +83,11 @@
       // Connected successfully.
       onConnectSuccess: async (res) => {
         console.log('onConnectSuccess', res);
+
+        // // Add joystick
+        // const j = new CloudGamingPlugin.joystick({
+        //   zone: document.querySelector('#plugin-point'),
+        // });
       },
       // The network was disconnected or the user was kicked out.
       onDisconnect: (res) => {
diff --git a/samples/gs/pc-game/index.html b/samples/gs/pc-game/index.html
@@ -70,6 +70,10 @@
       }
     }
 
+    // For two-finger touch, record the position of the last touch point to facilitate coordinate calculation.
+    let lastX = null;
+    let lastY = null;
+
     // For more information on the SDK lifecycle, visit https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs/index.html.
     TCGSDK.init({
       appid: 1234567,

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,10 @@`
`70`	`70`	`}`
`71`	`71`	`}`
`72`	`72`
	`73`	`+ // For two-finger touch, record the position of the last touch point to facilitate coordinate calculation.`
	`74`	`+ let lastX = null;`
	`75`	`+ let lastY = null;`
	`76`	`+`
`73`	`77`	`// For more information on the SDK lifecycle, visit https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs/index.html.`
`74`	`78`	`TCGSDK.init({`
`75`	`79`	`appid: 1234567,`