Modern Scratch Modifier GUI

Provides a modern GUI to modify Scratch blocks and create games using the Scratch API.

  1. // ==UserScript==
  2. // @name Modern Scratch Modifier GUI
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.2
  5. // @description Provides a modern GUI to modify Scratch blocks and create games using the Scratch API.
  6. // @match *://scratch.mit.edu/*
  7. // @match *://scratch.mit.edu/projects/*
  8. // @grant none
  9. // @require https://code.jquery.com/jquery-3.6.0.min.js
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // Add CSS for the modern GUI
  16. const style = `
  17. #scratch-modifier-gui {
  18. position: fixed;
  19. top: 10px;
  20. right: 10px;
  21. width: 350px;
  22. background-color: #f9f9f9;
  23. border: 1px solid #ddd;
  24. border-radius: 8px;
  25. padding: 15px;
  26. box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  27. z-index: 9999;
  28. font-family: Arial, sans-serif;
  29. transition: opacity 0.3s ease;
  30. }
  31. #scratch-modifier-gui .section {
  32. margin-bottom: 15px;
  33. position: relative;
  34. }
  35. #scratch-modifier-gui .close-btn {
  36. position: absolute;
  37. top: 5px;
  38. right: 10px;
  39. cursor: pointer;
  40. color: #333;
  41. font-size: 18px;
  42. transition: color 0.3s ease;
  43. }
  44. #scratch-modifier-gui .close-btn:hover {
  45. color: #f00;
  46. }
  47. #scratch-modifier-gui h2 {
  48. font-size: 16px;
  49. color: #333;
  50. margin-bottom: 10px;
  51. }
  52. #scratch-modifier-gui input[type="color"] {
  53. border: none;
  54. border-radius: 4px;
  55. width: 100%;
  56. height: 30px;
  57. cursor: pointer;
  58. outline: none;
  59. }
  60. #scratch-modifier-gui textarea {
  61. border: 1px solid #ddd;
  62. border-radius: 4px;
  63. width: 100%;
  64. padding: 8px;
  65. box-sizing: border-box;
  66. resize: vertical;
  67. }
  68. #scratch-modifier-gui button {
  69. background-color: #007bff;
  70. border: none;
  71. border-radius: 4px;
  72. color: #fff;
  73. padding: 10px 15px;
  74. cursor: pointer;
  75. transition: background-color 0.3s ease;
  76. width: 100%;
  77. font-size: 14px;
  78. margin-top: 10px;
  79. }
  80. #scratch-modifier-gui button:hover {
  81. background-color: #0056b3;
  82. }
  83. #scratch-modifier-gui #tips {
  84. background-color: #e9ecef;
  85. border: 1px solid #ddd;
  86. border-radius: 4px;
  87. padding: 10px;
  88. margin-top: 10px;
  89. display: none;
  90. }
  91. `;
  92.  
  93. $('<style>').text(style).appendTo('head');
  94.  
  95. // Create GUI structure
  96. const guiHTML = `
  97. <div id="scratch-modifier-gui">
  98. <div class="section">
  99. <div class="close-btn">×</div>
  100. <h2>Block Modifier</h2>
  101. <label for="block-color">Block Color:</label>
  102. <input type="color" id="block-color">
  103. <label for="inside-color">Inside Color:</label>
  104. <input type="color" id="inside-color">
  105. <button id="apply-colors">Apply Colors</button>
  106. </div>
  107. <div class="section">
  108. <h2>Game Generator</h2>
  109. <textarea id="game-prompt" rows="4" placeholder="Enter your game prompt here..."></textarea>
  110. <button id="generate-game">Generate Game</button>
  111. </div>
  112. <div class="section">
  113. <h2>Tips & Tricks</h2>
  114. <button id="show-tips">Show Tips</button>
  115. <div id="tips">
  116. <p>Tip 1: Use variables to keep track of scores.</p>
  117. <p>Tip 2: Test your game frequently to catch bugs.</p>
  118. </div>
  119. </div>
  120. </div>
  121. `;
  122.  
  123. $('body').append(guiHTML);
  124.  
  125. // Close button functionality
  126. $('#scratch-modifier-gui .close-btn').click(function() {
  127. $('#scratch-modifier-gui').fadeOut();
  128. });
  129.  
  130. // Apply colors functionality
  131. $('#apply-colors').click(function() {
  132. const blockColor = $('#block-color').val();
  133. const insideColor = $('#inside-color').val();
  134. // Here you would use the Scratch API to apply these colors to blocks
  135. console.log(`Applying Block Color: ${blockColor}, Inside Color: ${insideColor}`);
  136. });
  137.  
  138. // Generate game functionality
  139. $('#generate-game').click(function() {
  140. const prompt = $('#game-prompt').val();
  141. // Here you would use the Scratch API to generate a game based on the prompt
  142. console.log(`Generating game with prompt: ${prompt}`);
  143. });
  144.  
  145. // Show tips functionality
  146. $('#show-tips').click(function() {
  147. $('#tips').toggle();
  148. });
  149.  
  150. // Add additional functionality and API integration as needed
  151. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址