Clicking Game

Click squares to get points

by Jia Nelson

HTML

<h1>
Click The Rectangles
</h1>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var colors = ["white", "red", "black", "orange", "green", "purple"];
var cut = [false, false, false, false, false, false];
ctx.fillStyle = "white";
ctx.fillRect(20, 20, 10, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 20, 10, 100);
ctx.fillStyle = "black";
ctx.fillRect(60, 20, 10, 100);
ctx.fillStyle = "orange";
ctx.fillRect(80, 20, 10, 100);
ctx.fillStyle = "green";
ctx.fillRect(100, 20, 10, 100);
ctx.fillStyle = "purple";
ctx.fillRect(120, 20, 10, 100);
c.addEventListener("click", cutWire);
var x = 20;
var y = 20;
function cutWire(e){
	for(var i = 1; i < 7; i++){
  	if(e.offsetX >= x*i && e.offsetX <= (x*i)+10 && e.offsetY >= y && e.offsetY <= y+100 && !cut[i]){
    	ctx.clearRect(x*i, y, 10, 100);
      ctx.fillStyle = colors[i-1];
      ctx.fillRect(x*i, y, 10, 50);
      ctx.fillRect(x*i, y+60, 10, 50);
      cut[i] = true;
    }else if(e.offsetX >= x*i && e.offsetX <= (x*i)+10 && e.offsetY >= y && e.offsetY <= y+110 && cut[i]){
    	ctx.clearRect(x*i, y, 10, 110);
      ctx.fillStyle = colors[i-1];
      ctx.fillRect(x*i, y, 10, 100);
      cut[i] = false;
    }
  }
}

function changeColor(e){
	if(e.offsetX >= 20 && e.offsetX <= 170 && e.offsetY >= 20 && e.offsetY <= 120){
  ctx.fillStyle = getRandomColor();
  ctx.fillRect(20, 20, 150, 100);
  }
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}