Skip to content

Instantly share code, notes, and snippets.

@jrichardsz
Created September 17, 2021 06:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jrichardsz/5a0a99a459992682c41bbc2c0fb5ef48 to your computer and use it in GitHub Desktop.
Save jrichardsz/5a0a99a459992682c41bbc2c0fb5ef48 to your computer and use it in GitHub Desktop.
scratch js snippet
function Sprite(e,t,i){this.x=e,this.y=t,this.direction=0,this.isHidden=!1,spritesArray.push(this);var n=this;this.updateLocation=function(){this.element.style.left=page.originOffsetX+this.x+"px",this.element.style.top=page.originOffsetY-this.y+"px"},this.updateX=function(){this.element.style.left=page.originOffsetX+this.x+"px"},this.updateY=function(){this.element.style.top=page.originOffsetY-this.y+"px"},this.updateRotation=function(){this.element.style.transform="rotate("+-1*this.direction+"deg)"},this.resize=function(e){var t=this.element.clientWidth;this.element.width=t*e};var s=/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i.test(i);if(s){var o=document.createElement("div");o.innerHTML=i,this.element=o.firstChild,this.updateLocation(),document.body.appendChild(o),this.isImage=!1}else if(this.element=document.createElement("img"),this.element.src=i,this.updateLocation(),document.body.appendChild(this.element),this.isImage=!0,void 0!==arguments[3]){var a=arguments[3];this.element.onload=function(){n.resize(a)}}this.goTo=function(){if(void 0!=arguments[1])this.x=arguments[0],this.y=arguments[1],this.updateLocation();else if(arguments[0]){var e=arguments[0];this.x=e.x,this.y=e.y,this.updateLocation()}},this.setXTo=function(e){this.x=e,this.updateX()},this.setYTo=function(e){this.y=e,this.updateY()},this.changeXBy=function(e){this.x+=e,this.updateX()},this.changeYBy=function(e){this.y+=e,this.updateY()},this.turn=function(e){this.direction+=e,this.updateRotation()},this.pointInDirection=function(e){this.direction=e,this.updateRotation()},this.move=function(e){var t=Math.cos(this.direction*Math.PI/180)*e,i=Math.sin(this.direction*Math.PI/180)*e;this.x+=t,this.y+=i,this.updateLocation()};var r=function(e,t,i,n){return Math.sqrt((e-i)*(e-i)+(t-n)*(t-n))};return this.distanceTo=function(){return void 0!=arguments[1]?r(this.x,this.y,arguments[0],arguments[1]):r(this.x,this.y,arguments[0].x,arguments[0].y)},this.show=function(){this.element.style.display="initial",this.isHidden=!1},this.hide=function(){this.element.style.display="none",this.isHidden=!0},this.glideTo=function(){var e,t,i,s=void 0!==arguments[2];s?(i=arguments[0],t=arguments[1],e=arguments[2]):(i=arguments[0].x,t=arguments[0].y,e=arguments[1]),this.element.style.transition="left "+e+"ms linear, top "+e+"ms linear",wait(1).then(function(){n.goTo(i,t)}),setTimeout(function(){n.element.style.transition="left 0ms, top 0ms"},e)},this.changeCostume=function(e){var t,i=/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i.test(e);!i&&this.isImage?(this.element.src=e,this.isImage=!0):i&&this.isImage?(document.body.removeChild(this.element),t=document.createElement("div"),t.innerHTML=e,this.element=t.firstChild,this.updateLocation(),document.body.appendChild(t),this.isImage=!1):i&&!this.isImage?(t=this.element.parentNode,t.innerHTML=e,this.element=t.firstChild,this.updateLocation(),this.isImage=!1):i||this.isImage||(document.body.removeChild(this.element.parentNode),this.element=document.createElement("img"),this.element.src=e,this.updateLocation(),document.body.appendChild(this.element),this.isImage=!0)},this}function repeat(e,t){for(var i=0;e>i;i++)t()}function wait(e){return new Promise(function(t){setTimeout(function(){t()},e)})}function forever(e){return setInterval(function(){e()},1)}function stop(e){clearInterval(e)}function say(e){alert(e)}function ask(e){return prompt(e)}var spritesArray=[],whenPageLoads=function(){},page={},bodyDiv;window.onload=function(){page.originOffsetX=window.innerWidth/2,page.originOffsetY=window.innerHeight/2,page.maxX=page.originOffsetX,page.maxY=page.originOffsetY,bodyDiv=document.createElement("div"),bodyDiv.style.width=2*page.originOffsetX+"px",bodyDiv.style.height=2*page.originOffsetY+"px",bodyDiv.style.left="0px",document.body.appendChild(bodyDiv),whenPageLoads()},window.onresize=function(){page.originOffsetX=window.innerWidth/2,page.originOffsetY=window.innerHeight/2,page.maxX=page.originOffsetX,page.maxY=page.originOffsetY;for(var e in spritesArray)e.updateLocation();bodyDiv.style.width=2*page.originOffsetX+"px",bodyDiv.style.height=2*page.originOffsetY+"px"};var mouse={ready:!1};mouse.setCostume=function(e){var t,i=arguments,n=!/alias|all-scroll|auto|cell|context-menu|col-resize|copy|crosshair|default|e-resize|ew-resize|grab|grabbing|help|move|n-resize|ne-resize|nesw-resize|ns-resize|nw-resize|nwse-resize|no-drop|none|not-allowed|pointer|progress|row-resize|s-resize|se-resize|sw-resize|text|vertical-text|w-resize|wait|zoom-in|zoom-out|initial/.test(e);if(console.log("Is custom: "+n),n){document.body.style.cursor="none";for(var s=0;s<document.body.getElementsByTagName("*").length;s++)console.log(document.body.getElementsByTagName("*")[s]),document.body.getElementsByTagName("*")[s].style.cursor="none";var o=forever(function(){mouse.ready&&(stop(o),t=void 0!==i[1]?new Sprite(0,0,e,i[1]):new Sprite(0,0,e),t.element.id="cursorImage",t.element.draggable="none",forever(function(){t.goTo(mouse)}))})}else document.body.style.cursor=e},document.onmousemove=function(){mouse.x=event.x-page.originOffsetX,mouse.y=page.originOffsetY-event.y,mouse.ready=!0};
<title>Scratch JS</title> <style> * { position: absolute; }
    body {
        margin: 0;
        overflow: hidden;
    }

    #cursorImage {
        pointer-events: none
    }
</style>
<script src="index.js"></script>
<script> whenPageLoads = function(){ var mySprite = new Sprite(0, 0, "sprite.png"); mySprite.turn(45) mySprite.move(50) wait(1000).then(function(){ mySprite.goTo(100,0); }) } </script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment