fgouin2014/ctrlframe8bit.markdown

## ctrlframe8bit.markdown

      
    Raw
  

              ctrlframe8bit.markdown
            
          
    CtrlFrame8bit

A Pen by fgouin2014 on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manette 3D</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

  <canvas id="nesCanvas"></canvas>


    <script>
    const canvas = document.getElementById('nesCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function drawController() {
      const controllerWidth = 400;
      const controllerHeight = 150;
      const scale = Math.min(canvas.width / controllerWidth, canvas.height / controllerHeight) * 0.8;
      const x = (canvas.width - controllerWidth * scale) / 2;
      const y = (canvas.height - controllerHeight * scale) / 2;
      ctx.save();
      ctx.translate(x, y);
      ctx.scale(scale, scale);
      drawBody();
      drawDPad();
      drawButtons();
      drawStartSelectButtons();
      ctx.restore();
    }

    function drawBody() {
      ctx.fillStyle = '#ccc';
      ctx.fillRect(0, 0, 400, 150);
      ctx.strokeStyle = '#000';
      ctx.lineWidth = 5;
      ctx.strokeRect(0, 0, 400, 150);
      ctx.fillStyle = '#333';
      ctx.fillRect(10, 10, 380, 130);
    }

    function drawDPad() {
      const dpadX = 60;
      const dpadY = 75;
      const size = 20;
      const offset = 2;
      ctx.fillStyle = '#000';
      ctx.beginPath();
      ctx.moveTo(dpadX - size, dpadY);
      ctx.lineTo(dpadX + size, dpadY);
      ctx.lineTo(dpadX + size + offset, dpadY - offset);
      ctx.lineTo(dpadX + size + offset, dpadY + offset);
      ctx.lineTo(dpadX + size, dpadY + size);
      ctx.lineTo(dpadX + size + offset, dpadY + size + offset);
      ctx.lineTo(dpadX - size - offset, dpadY + size + offset);
      ctx.lineTo(dpadX - size, dpadY + size);
      ctx.lineTo(dpadX - size - offset, dpadY + offset);
      ctx.lineTo(dpadX - size - offset, dpadY - offset);
      ctx.lineTo(dpadX - size, dpadY);
      ctx.closePath();
      ctx.fill();
      ctx.strokeStyle = '#666';
      ctx.lineWidth = 1;
      ctx.stroke();
    }

    function drawButtons() {
      drawCircleButton(310, 75, 15, 'red', 'B');
      drawCircleButton(350, 75, 15, 'red', 'A');
    }

    function drawCircleButton(x, y, radius, color, label) {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.closePath();
      ctx.fill();
      ctx.strokeStyle = '#666';
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.fillStyle = '#fff';
      ctx.font = 'bold 12px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(label, x, y);
    }

    function drawStartSelectButtons() {
      drawRectButton(200, 50, 60, 10, 'SELECT');
      drawRectButton(200, 90, 60, 10, 'START');
    }

    function drawRectButton(x, y, width, height, label) {
      ctx.fillStyle = '#999';
      ctx.fillRect(x, y, width, height);
      ctx.strokeStyle = '#666';
      ctx.lineWidth = 1;
      ctx.strokeRect(x, y, width, height);
      ctx.fillStyle = '#fff';
      ctx.font = 'bold 10px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(label, x + width / 2, y + height / 2);
    }
    drawController();
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      drawController();
    });
  </script>
</body>
</html>

## script.js
//   <div class="main-container">
//     <div class="text-container">
//       <h1>8-bit Nintendo Controller</h1>
//       <p>Interact with the controller and see the effects on the game screen.</p>
//     </div>

//   </div>

## style.css
body {
    display: flex;
  flex-direction : column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
    margin: 0;
}

.controller {
    width: 500px;
    height: 200px;
    background: #555;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
  flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    perspective: 1000px;
}

.agroup {
    display: flex;
    align-items: center;
}

.d-pad {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(3, 40px);
    gap: 5px;
    align-items: center;
    justify-items: center;
}

.d-pad .up {
    grid-column: 2;
    grid-row: 1;
    width: 20px;
    height: 40px;
}

.d-pad .left {
    grid-column: 1;
    grid-row: 2;
    width: 40px;
    height: 20px;
}

.d-pad .center {
    grid-column: 2;
    grid-row: 2;
    width: 30px;
    height: 30px;
}

.d-pad .right {
    grid-column: 3;
    grid-row: 2;
    width: 40px;
    height: 20px;
}

.d-pad .down {
    grid-column: 2;
    grid-row: 3;
    width: 20px;
    height: 40px;
}

.d-pad div {
    background: #666;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-transform: uppercase;
}

.buttons {
    display: flex;
    align-items: center;
}

.buttons .button {
    width: 30px;
    height: 30px;
    margin: 5px;
    background: #666;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-transform: uppercase;
}

.buttons .a { background: red; }
.buttons .b { background: green; }
.buttons .x { background: blue; }
.buttons .y { background: yellow; }

.controller:hover .d-pad, .controller:hover .buttons {
    transform: rotateX(20deg);
}

.d-pad, .buttons {
    transition: transform 0.3s;
}


    canvas {
      display: block;
    }
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Manette 3D</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>

	<canvas id="nesCanvas"></canvas>


	<script>
	const canvas = document.getElementById('nesCanvas');
	const ctx = canvas.getContext('2d');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	function drawController() {
	const controllerWidth = 400;
	const controllerHeight = 150;
	const scale = Math.min(canvas.width / controllerWidth, canvas.height / controllerHeight) * 0.8;
	const x = (canvas.width - controllerWidth * scale) / 2;
	const y = (canvas.height - controllerHeight * scale) / 2;
	ctx.save();
	ctx.translate(x, y);
	ctx.scale(scale, scale);
	drawBody();
	drawDPad();
	drawButtons();
	drawStartSelectButtons();
	ctx.restore();
	}

	function drawBody() {
	ctx.fillStyle = '#ccc';
	ctx.fillRect(0, 0, 400, 150);
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 5;
	ctx.strokeRect(0, 0, 400, 150);
	ctx.fillStyle = '#333';
	ctx.fillRect(10, 10, 380, 130);
	}

	function drawDPad() {
	const dpadX = 60;
	const dpadY = 75;
	const size = 20;
	const offset = 2;
	ctx.fillStyle = '#000';
	ctx.beginPath();
	ctx.moveTo(dpadX - size, dpadY);
	ctx.lineTo(dpadX + size, dpadY);
	ctx.lineTo(dpadX + size + offset, dpadY - offset);
	ctx.lineTo(dpadX + size + offset, dpadY + offset);
	ctx.lineTo(dpadX + size, dpadY + size);
	ctx.lineTo(dpadX + size + offset, dpadY + size + offset);
	ctx.lineTo(dpadX - size - offset, dpadY + size + offset);
	ctx.lineTo(dpadX - size, dpadY + size);
	ctx.lineTo(dpadX - size - offset, dpadY + offset);
	ctx.lineTo(dpadX - size - offset, dpadY - offset);
	ctx.lineTo(dpadX - size, dpadY);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#666';
	ctx.lineWidth = 1;
	ctx.stroke();
	}

	function drawButtons() {
	drawCircleButton(310, 75, 15, 'red', 'B');
	drawCircleButton(350, 75, 15, 'red', 'A');
	}

	function drawCircleButton(x, y, radius, color, label) {
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.arc(x, y, radius, 0, 2 * Math.PI);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#666';
	ctx.lineWidth = 1;
	ctx.stroke();
	ctx.fillStyle = '#fff';
	ctx.font = 'bold 12px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.fillText(label, x, y);
	}

	function drawStartSelectButtons() {
	drawRectButton(200, 50, 60, 10, 'SELECT');
	drawRectButton(200, 90, 60, 10, 'START');
	}

	function drawRectButton(x, y, width, height, label) {
	ctx.fillStyle = '#999';
	ctx.fillRect(x, y, width, height);
	ctx.strokeStyle = '#666';
	ctx.lineWidth = 1;
	ctx.strokeRect(x, y, width, height);
	ctx.fillStyle = '#fff';
	ctx.font = 'bold 10px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	ctx.fillText(label, x + width / 2, y + height / 2);
	}
	drawController();
	window.addEventListener('resize', () => {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	drawController();
	});
	</script>
	</body>
	</html>
	// <div class="main-container">
	// <div class="text-container">
	// <h1>8-bit Nintendo Controller</h1>
	// <p>Interact with the controller and see the effects on the game screen.</p>
	// </div>

	// </div>
	body {
	display: flex;
	flex-direction : column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #333;
	margin: 0;
	}

	.controller {
	width: 500px;
	height: 200px;
	background: #555;
	border-radius: 20px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	padding: 20px;
	perspective: 1000px;
	}

	.agroup {
	display: flex;
	align-items: center;
	}

	.d-pad {
	display: grid;
	grid-template-columns: repeat(3, 40px);
	grid-template-rows: repeat(3, 40px);
	gap: 5px;
	align-items: center;
	justify-items: center;
	}

	.d-pad .up {
	grid-column: 2;
	grid-row: 1;
	width: 20px;
	height: 40px;
	}

	.d-pad .left {
	grid-column: 1;
	grid-row: 2;
	width: 40px;
	height: 20px;
	}

	.d-pad .center {
	grid-column: 2;
	grid-row: 2;
	width: 30px;
	height: 30px;
	}

	.d-pad .right {
	grid-column: 3;
	grid-row: 2;
	width: 40px;
	height: 20px;
	}

	.d-pad .down {
	grid-column: 2;
	grid-row: 3;
	width: 20px;
	height: 40px;
	}

	.d-pad div {
	background: #666;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-transform: uppercase;
	}

	.buttons {
	display: flex;
	align-items: center;
	}

	.buttons .button {
	width: 30px;
	height: 30px;
	margin: 5px;
	background: #666;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-transform: uppercase;
	}

	.buttons .a { background: red; }
	.buttons .b { background: green; }
	.buttons .x { background: blue; }
	.buttons .y { background: yellow; }

	.controller:hover .d-pad, .controller:hover .buttons {
	transform: rotateX(20deg);
	}

	.d-pad, .buttons {
	transition: transform 0.3s;
	}





	canvas {
	display: block;
	}