Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <script>
​
    
    
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var moveGuy = 0;
            
        
            context.lineWidth = 2;
            context.strokeStyle = "black";
            context.font = "30pt Calibri";
            context.fillText('Survival Politics', 270, 40);
            
            var guyHealth = 230;
        
            
                    
            //Draw separator block
            context.fillRect(0,465,810,20);
            // Create Data Boxes
            context.font = "10pt Calibri";
            context.strokeRect(180, 490, 40, 20);
            context.fillText('Day:       '+ moveGuy, 155, 505);
            
            
        
        
            //Game format 
            context.beginPath();
            context.moveTo(0,230);
            context.lineTo(810, 230);
            context.stroke();
            context.beginPath();
            context.lineTo(0,230);
            
            
            
            
        
        
            context.font = "10pt Calibri";      
            context.fillText('Click on  the above blue square', 30, 570);
            context.fillText('to see the results of your decisions.', 30, 590);
            context.fillStyle = "#FF0000";
            
            context.fillText('Click the circular arrow in the top left of your screen for a new game.', 230, 710);
                
            // Draw box lower to check for input
            context.fillStyle = "blue";
            context.fillRect(50, 500, 50, 50);
            context.fillStyle = "#FF0000";  
                
            // Coordinates of hit boxs to check against
            let hitBoxs = {
                blueBox: {
                    x: 50,
                    y: 500,
                    width: 50,
                    height: 50
                }
            };
            
            function hitCheck(event, hitBoxs){
                // Get the x/y position of the mouse inside the canvas
                let rect = event.target.getBoundingClientRect();
                let x = event.clientX - rect.left;
                let y = event.clientY - rect.top;
                // Loop through the hitBoxs and check to see if the x/y is within the cords of the box
                // If so then return the name of the hit box that was clicked
                for (let box of Object.keys(hitBoxs)){
                    if (x > hitBoxs[box].x && x < hitBoxs[box].x+hitBoxs[box].width && y > hitBoxs[box].y && y < hitBoxs[box].y + hitBoxs[box].height) return box;
                }
            }
    
                // Add a click event to canvas and check for hits within the hit boxs
            canvas.addEventListener("click", function (event) {
                // Check to see if a box was hit
                let hitBox = hitCheck(event, hitBoxs);
                // If a box was hit
                if (hitBox){
                    // Then respond to which box was hit
                    if (hitBox=="blueBox"){
                        alert("You clicked on the blue Box.  Now click this to advance one day.");
                            context.strokeStyle = "red";
                        
                    
                                    moveGuy = moveGuy + 1;              
                            
                            context.fillText('Day:       '+ moveGuy, 155, 505);
                            
                        
                                                                                                
                            }
                }
            });
    
    
    
        }
    
    
    
    </script>
​
</head>
​
<body>
    <div align="center">
        <canvas id="myCanvas" width="800" height="720" style="border:1px solid black;">
        </canvas>
    </div>
</body>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers