Jump to content

Canvas and Scripting

Reizvoller

By Reizvoller
in JavaScript

 Share

Recommended Posts

Reizvoller Wayfarer

Reizvoller

Posted
Posted

Greetings!

I am having an issue that I can't seem to be able to figure out. I would really appreciate an extra pair of eyes to validate my work so far.

All this is, so far, is just a bunch of shapes on an HTML page. It is to be a very simple game ( just exploring Javascript through making this ) but right now I am just building the framework/elements.

The script is this  

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #canvas-container {
   width: 100%;
   text-align:center;
}

canvas {
   display: inline;
}
    </style>
    

  </head>
  <body onload="startUp()">

  <div id="canvas-container">
    <canvas id="game" width="300" height="500"></canvas>
  </div>
 
<script>
    
    var canvas = document.getElementById('game');
    var ctx = canvas.getContext('2d');
    
    var x = canvas.width;
    var y = canvas.height;
    var scoreVal = 0;
    var itemXRand = Math.floor(Math.random() * x) + 1
    
    ctx.stroke();
    
    function cloud(){
    
    ctx.beginPath();
      ctx.moveTo(170, 30);
      ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
      ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
      ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
      ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
      ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
      ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.fillStyle = '#8ED6FF';
      ctx.fill();
      ctx.strokeStyle = '#0000ff';
      ctx.stroke();
    
    }

    function workArea(){
      ctx.beginPath();
      ctx.rect(0, 0, x, y);
      ctx.fillStyle = "#2ab9ff";
      ctx.fill();
      ctx.stroke = 1;
}

    function topRect(){
      ctx.beginPath();
      ctx.rect(0, 0, x, 30);
      ctx.fillStyle = "#D3D3D3";
      ctx.fill();
      ctx.stroke = 1;
}

    function scoreKeep(){   
    ctx.font = "15px Arial";
    ctx.fillStyle = "#000000";
    ctx.fillText("Score "+scoreVal,5, 25);  
    }

    function bttmRect(){
      ctx.beginPath();
      ctx.rect(0, y-30, x, 30);
      ctx.fillStyle = '#5bc928';
      ctx.fill();
      ctx.stroke = 1;
}


    function monstRect(){
      ctx.beginPath();
      ctx.rect(0, y-80, x, 30);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.stroke = 1;
}

    function itemCirc(){
    var centerX = itemXRand
    var radius = 15;
    var positionY = 45;
    
      ctx.beginPath();
      ctx.arc(centerX, positionY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = randomColor();
      ctx.fill();
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#003300';
      ctx.stroke();
}

    function startUp(){
    workArea();
    topRect();
    bttmRect();
    scoreKeep();
    itemCirc();
    monstRect();
    cloud();
    }
    
    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
}
    
</script>

  </body>
</html>

The issue is that cloud() and monstRect() will not show up when the page loads. If I comment out workArea(), topRect(), and bttmRect() in the function "startUp()" then monstRect() and cloud() show up. I've re-read those little snippets of code for those three areas that I comment out and I can't see where I have gone wrong.

Any advice or if you can spot my mistake I would really appreciate it.

Thank you!

-Reiz

guinness Universalist

guinness

Posted
Posted
  1. Bad use of ASI (automatic semi-colon insertion)
  2. Polluting the global scope (use an IIFE or ES2015 module)
  3. I am not really seeing your issue, though I do see errors when I move your code to http://jsbin.com/wededadera/edit?html,js,console,output. Check the console and you will see what I mean.

UDF List:

 
_AdapterConnections() • _AlwaysRun() • _AppMon() • _AppMonEx() • _ArrayFilter/_ArrayReduce • _BinaryBin() • _CheckMsgBox() • _CmdLineRaw() • _ContextMenu() • _ConvertLHWebColor()/_ConvertSHWebColor() • _DesktopDimensions() • _DisplayPassword() • _DotNet_Load()/_DotNet_Unload() • _Fibonacci() • _FileCompare() • _FileCompareContents() • _FileNameByHandle() • _FilePrefix/SRE() • _FindInFile() • _GetBackgroundColor()/_SetBackgroundColor() • _GetConrolID() • _GetCtrlClass() • _GetDirectoryFormat() • _GetDriveMediaType() • _GetFilename()/_GetFilenameExt() • _GetHardwareID() • _GetIP() • _GetIP_Country() • _GetOSLanguage() • _GetSavedSource() • _GetStringSize() • _GetSystemPaths() • _GetURLImage() • _GIFImage() • _GoogleWeather() • _GUICtrlCreateGroup() • _GUICtrlListBox_CreateArray() • _GUICtrlListView_CreateArray() • _GUICtrlListView_SaveCSV() • _GUICtrlListView_SaveHTML() • _GUICtrlListView_SaveTxt() • _GUICtrlListView_SaveXML() • _GUICtrlMenu_Recent() • _GUICtrlMenu_SetItemImage() • _GUICtrlTreeView_CreateArray() • _GUIDisable() • _GUIImageList_SetIconFromHandle() • _GUIRegisterMsg() • _GUISetIcon() • _Icon_Clear()/_Icon_Set() • _IdleTime() • _InetGet() • _InetGetGUI() • _InetGetProgress() • _IPDetails() • _IsFileOlder() • _IsGUID() • _IsHex() • _IsPalindrome() • _IsRegKey() • _IsStringRegExp() • _IsSystemDrive() • _IsUPX() • _IsValidType() • _IsWebColor() • _Language() • _Log() • _MicrosoftInternetConnectivity() • _MSDNDataType() • _PathFull/GetRelative/Split() • _PathSplitEx() • _PrintFromArray() • _ProgressSetMarquee() • _ReDim() • _RockPaperScissors()/_RockPaperScissorsLizardSpock() • _ScrollingCredits • _SelfDelete() • _SelfRename() • _SelfUpdate() • _SendTo() • _ShellAll() • _ShellFile() • _ShellFolder() • _SingletonHWID() • _SingletonPID() • _Startup() • _StringCompact() • _StringIsValid() • _StringRegExpMetaCharacters() • _StringReplaceWholeWord() • _StringStripChars() • _Temperature() • _TrialPeriod() • _UKToUSDate()/_USToUKDate() • _WinAPI_Create_CTL_CODE() • _WinAPI_CreateGUID() • _WMIDateStringToDate()/_DateToWMIDateString() • Au3 script parsing • AutoIt Search • AutoIt3 Portable • AutoIt3WrapperToPragma • AutoItWinGetTitle()/AutoItWinSetTitle() • Coding • DirToHTML5 • FileInstallr • FileReadLastChars() • GeoIP database • GUI - Only Close Button • GUI Examples • GUICtrlDeleteImage() • GUICtrlGetBkColor() • GUICtrlGetStyle() • GUIEvents • GUIGetBkColor() • Int_Parse() & Int_TryParse() • IsISBN() • LockFile() • Mapping CtrlIDs • OOP in AutoIt • ParseHeadersToSciTE() • PasswordValid • PasteBin • Posts Per Day • PreExpand • Protect Globals • Queue() • Resource Update • ResourcesEx • SciTE Jump • Settings INI • SHELLHOOK • Shunting-Yard • Signature Creator • Stack() • Stopwatch() • StringAddLF()/StringStripLF() • StringEOLToCRLF() • VSCROLL • WM_COPYDATA • More Examples...

Updated: 22/04/2018

  • 4 weeks later...
Reizvoller Wayfarer

Reizvoller

Posted
  • Author
Posted

Greetings!

Your reply is amazingly helpful and friendly.

I actually ended up scrapping the entire thing and went to work in Python for fun :)

I will review my old ( this one ) code and apply the information you provided.

Thank you for your time and assistance!

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...