A rock-paper-scissors game using HTML, CSS, and JavaScript

I created an online rock-paper-scissors game using GAS. GAS also clearly explains the basics of HTML, CSS, and JavaScript. It also explains how to use image files stored in Google Drive on a website, so please take a look.

Code.gs

function doGet() {
   return HtmlService.createTemplateFromFile('index').evaluate().addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <?!= include('style'); ?>
    <title>Rock Paper Scissors Game</title>
</head>
<body>

    <h1>Rock Paper Scissors</h1>

    <div id="choices">
        <img src="https://lh3.googleusercontent.com/d/｛image-file-ID｝" alt="Rock" onclick="userChoice('rock')">
        <img src="https://lh3.googleusercontent.com/d/｛image-file-ID｝" alt="Paper" onclick="userChoice('paper')">
        <img src="https://lh3.googleusercontent.com/d/｛image-file-ID｝" alt="Scissors" onclick="userChoice('scissors')">
    </div>

    <div id="result">Choose your move!</div>

    <?!= include('java') ?>
    

</body>
</html>

CSS

 <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
        }

        #result {
            font-size: 24px;
            margin-top: 20px;
        }

        #choices img {
            width: 100px;
            margin: 10px;
            cursor: pointer;
        }
    </style>

JavaScript

<script>
        function userChoice(choice) {
            var choices = ['rock', 'paper', 'scissors'];
            var computerChoice = choices[Math.floor(Math.random() * 3)];

            document.getElementById('result').innerText = "You chose: " + choice + ", Computer chose: " + computerChoice;

            if (choice === computerChoice) {
                document.getElementById('result').innerText += "\nIt's a tie!";
            } else if (
                (choice === 'rock' && computerChoice === 'scissors') ||
                (choice === 'paper' && computerChoice === 'rock') ||
                (choice === 'scissors' && computerChoice === 'paper')
            ) {
                document.getElementById('result').innerText += "\nYou win!";
            } else {
                document.getElementById('result').innerText += "\nYou lose!";
            }
        }
</script>

Code.gs
HTML
CSS
JavaScript

Inserting an image file

Inserting an image file

The image file is inserted as follows:

Copy the link from the Google Drive image file share to get the URL, then enter the image file ID.

<img src="https://lh3.googleusercontent.com/d/{image-file-ID}" />