From the moment we received this
assignment I knew I wanted to do a Pac-Man game for my graphic. I started by printing out a graph and
drawing the layout of the game, looking at a Google image of a Pac-Man game to
make sure everything looked the same.
At first the graph helped me immensely with the coding for the border,
however, once it was time to create the ghosts, some of the points had to be
guesstimated. In order to get the
exact colors from the game I uploaded the Google image of the Pac-Man game onto
PhotoShop. Then I used the eyedropper tool to pick up the different colors and
used their RGB codes to enter into TextWrangler. The borders of the game, as well as some of the odd shapes,
were made with lines. Some of the
other boxes were made using rectangles. Pac-Man was made using 2 circles; I
just played around with the points until it made just what I wanted! The ghosts were started using quadratic
curves and then finished off using lines. In order to make the cherry’s stems I
used quadratic and Bezier curves. The actual cherry and the circles that
Pac-Man eats are simply just made of circles.
I think my piece is successful
because it is immediately recognizable. Most people know Pac-Man, have played
the game, or at least know what the game is about. I love the way the graphic
turned out and I am extremely proud of it. Below is the Google image I used as a reference,
the graph I drew on as a guide, and my code.
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//BLACK BACKGROUND
context.beginPath();
context.rect(0, 0, 800, 600);
//COLOR FILL
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//LEFT LINE
context.beginPath();
context.moveTo(5, 200);
context.lineTo(5, 5);
context.lineTo(375, 5);
context.lineTo(375, 100);
context.lineTo(425, 100);
context.lineTo(425, 5);
context.lineTo(795, 5);
context.lineTo(795, 200);
context.lineTo(650, 200);
context.lineTo(650, 280);
context.lineTo(795, 280);
context.lineTo(795, 340);
context.lineTo(650, 340);
context.lineTo(650, 420);
context.lineTo(796, 420);
context.lineTo(795, 500);
context.lineTo(720, 500);
context.lineTo(720, 530);
context.lineTo(795, 530);
context.lineTo(795, 595);
context.lineTo(5, 595);
context.lineTo(5, 530);
//LEFT SIDE BOTTOM
context.lineTo(90, 530);
context.lineTo(90, 500);
context.lineTo(5, 500);
context.lineTo(5, 420);
context.lineTo(150, 420);
context.lineTo(150, 340);
context.lineTo(5, 340);
context.lineTo(5, 280);
context.lineTo(150, 280);
context.lineTo(150, 200);
context.lineTo(5, 200);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 4;
context.stroke();
//INNER RECTANGLE
context.beginPath();
context.moveTo(375, 280);
context.lineTo(300, 280);
context.lineTo(300, 380);
context.lineTo(500, 380);
context.lineTo(500, 280);
context.lineTo(425, 280);
context.lineWidth = 5;
context.stroke();
//LINE ABOVE INNER RECTANGLE
context.beginPath();
context.moveTo(375, 278);
context.lineTo(425, 278);
context.strokeStyle = 'rgb(255, 171, 255)';
context.lineWidth = 3.5;
context.stroke();
//MAZE UNDER BOX
context.beginPath();
context.moveTo(300, 430);
context.lineTo(500, 430);
context.lineTo(500, 450);
context.lineTo(430, 450);
context.lineTo(430, 489);
context.lineTo(380, 489);
context.lineTo(380, 450);
context.lineTo(300, 450);
context.lineTo(300, 430);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 3;
context.stroke();
//MAZE UNDER BOX2
context.beginPath();
context.moveTo(300, 530);
context.lineTo(500, 530);
context.lineTo(500, 550);
context.lineTo(430, 550);
context.lineTo(430, 585);
context.lineTo(380, 585);
context.lineTo(380, 550);
context.lineTo(300, 550);
context.lineTo(300, 530);
context.stroke();
//LEFT BOX TOP-BOTTOM
context.beginPath();
context.rect(50, 140, 130, 30);
context.stroke();
//MIDDLE MAZE-LEFT SIDE
context.beginPath();
context.moveTo(220, 170);
context.lineTo(220, 340);
context.lineTo(240, 340);
context.lineTo(240, 255);
context.lineTo(280, 255);
context.lineTo(280, 235);
context.lineTo(240, 235);
context.lineTo(240, 170);
context.lineTo(220, 170);
context.stroke();
//MIDDLE MAZE-RIGHT SIDE
context.beginPath();
context.moveTo(580, 170);
context.lineTo(580, 340);
context.lineTo(560, 340);
context.lineTo(560, 255);
context.lineTo(520, 255);
context.lineTo(520, 235);
context.lineTo(560, 235);
context.lineTo(560, 170);
context.lineTo(580, 170);
context.stroke();
//UNDERNEATH MIDDLE MAZE-LEFT
context.beginPath();
context.moveTo(220, 400);
context.lineTo(220, 460);
context.lineTo(240, 460);
context.lineTo(240, 400);
context.lineTo(220, 400);
context.stroke();
//BOTTOM MAZE--LEFT
context.beginPath();
context.moveTo(220, 520);
context.lineTo(220, 555);
context.lineTo(128, 555);
context.lineTo(128, 578);
context.lineTo(250, 578);
context.lineTo(250, 520);
context.lineTo(220, 520);
context.stroke();
//BOTTOM MAZE--RIGHT***
context.beginPath();
context.moveTo(580, 520);
context.lineTo(580, 555);
context.lineTo(672, 555);
context.lineTo(672, 578);
context.lineTo(550, 578);
context.lineTo(550, 520);
context.lineTo(580, 520);
context.stroke();
//UNDERNEATH MIDDLE MAZE--RIGHT
context.beginPath();
context.moveTo(580, 400);
context.lineTo(580, 460);
context.lineTo(560, 460);
context.lineTo(560, 400);
context.lineTo(580, 400);
context.stroke();
//LEFT SIDE CORNER MAZE
context.beginPath();
context.moveTo(60, 455);
context.lineTo(155, 455);
context.lineTo(155, 530);
context.lineTo(130, 530);
context.lineTo(130, 480);
context.lineTo(60, 480);
context.lineTo(60, 455);
context.stroke();
//RIGHT SIDE CORNER MAZE
context.beginPath();
context.moveTo(740, 455);
context.lineTo(645, 455);
context.lineTo(645, 530);
context.lineTo(670, 530);
context.lineTo(670, 480);
context.lineTo(740, 480);
context.lineTo(740, 455);
context.stroke();
//BIG--ENERGY CIRCLE
context.beginPath();
context.arc(28, 60, 13, 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//BIG--ENERGY CIRCLE2 (RIGHT SIDE)
context.beginPath();
context.arc(768, 470, 13, 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE1
context.beginPath();
context.arc(28, 90, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE2
context.beginPath();
context.arc(28, 115, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE3
context.beginPath();
context.arc(55, 115, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE4
context.beginPath();
context.arc(85, 115, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE5
context.beginPath();
context.arc(115, 115, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE6
context.beginPath();
context.arc(145, 115, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE7
context.beginPath();
context.arc(175, 115, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY CIRCLE8
context.beginPath();
context.arc(205, 115, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY1--RIGHT SIDE
context.beginPath();
context.arc(650, 438, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY2--RIGHT SIDE
context.beginPath();
context.arc(680, 438, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY3--RIGHT SIDE
context.beginPath();
context.arc(710, 438, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY4--RIGHT SIDE
context.beginPath();
context.arc(740, 438, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY5--RIGHT SIDE
context.beginPath();
context.arc(770, 438, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY1--MIDDLE
context.beginPath();
context.arc(407, 510, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY2--MIDDLE
context.beginPath();
context.arc(437, 510, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY3--MIDDLE
context.beginPath();
context.arc(467, 510, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY4--MIDDLE
context.beginPath();
context.arc(497, 510, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY5--MIDDLE
context.beginPath();
context.arc(377, 510, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY6--MIDDLE
context.beginPath();
context.arc(347, 510, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY7--MIDDLE
context.beginPath();
context.arc(317, 510, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY1--TOP RIGHT
context.beginPath();
context.arc(772, 110, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY2--TOP RIGHT
context.beginPath();
context.arc(772, 140, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY3--TOP RIGHT
context.beginPath();
context.arc(772, 170, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY4--TOP RIGHT
context.beginPath();
context.arc(772, 80, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//SMALL ENERGY5 --TOP RIGHT
context.beginPath();
context.arc(772, 50, 3 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 171)';
context.fillStyle = 'rgb(255, 255, 171)';
context.fill();
context.stroke();
//PACMAN
context.beginPath();
context.arc(250, 111, 19, 2.9, 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 87)';
context.fillStyle = 'rgb(255, 255, 87)';
context.fill();
context.arc(250, 111, 19, 3.7, 2 * Math.PI, false);
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 87)';
context.fillStyle = 'rgb(255, 255, 87)';
context.fill();
context.stroke();
//MAZE ABOVE BOX
context.beginPath();
context.moveTo(300, 140);
context.lineTo(500, 140);
context.lineTo(500, 160);
context.lineTo(430, 160);
context.lineTo(430, 200);
context.lineTo(380, 200);
context.lineTo(380, 160);
context.lineTo(300, 160);
context.lineTo(300, 140);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 3;
context.stroke();
//FIRST SQUARE FAR LEFT
context.beginPath();
context.rect(50, 30, 130, 55);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 3;
context.stroke();
//SQUARE 2 TOP LEFT
context.beginPath();
context.rect(230, 30, 100, 55);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 3;
context.stroke();
//SQUARE 3 RIGHT SIDE
context.beginPath();
context.rect(475, 30, 100, 55);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 3;
context.stroke();
//SQUARE 4 FAR RIGHT
context.beginPath();
context.rect(620, 30, 130, 55);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 3;
context.stroke();
//UNDERNEARTH SQUARE 4--RIGHT SIDE
context.beginPath();
context.rect(620, 130, 130, 30);
context.strokeStyle = 'rgb(87, 87, 255)';
context.lineWidth = 3;
context.stroke();
//GHOST1(ORANGE)
context.beginPath();
context.moveTo(400, 350);
context.quadraticCurveTo(425, 295, 455, 350);
context.strokeStyle = 'rgb(255, 87, 3)';
context.fillStyle = 'rgb(255, 87, 3)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400, 350);
context.lineTo(400, 375);
context.lineTo(417, 359);
context.lineTo(427, 375);
context.lineTo(435, 359);
context.lineTo(454, 375);
context.lineTo(455, 350);
context.fillStyle = 'rgb(255, 87, 3)';
context.fill();
context.stroke();
//ORANGE WHITE EYES
context.beginPath();
context.arc(415, 343, 6 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(251, 251, 251)';
context.fillStyle = 'rgb(251, 251, 251)';
context.fill();
context.stroke();
context.beginPath();
context.arc(437, 343, 6 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(251, 251, 251)';
context.fillStyle = 'rgb(251, 251, 251)';
context.fill();
context.stroke();
//ORANGE BLUE--EYES
context.beginPath();
context.arc(415, 346, 2 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(87, 87, 255)';
context.fillStyle = 'rgb(87, 87, 255)';
context.fill();
context.stroke();
context.beginPath();
context.arc(437, 346, 2 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(87, 87, 255)';
context.fillStyle = 'rgb(87, 87, 255)';
context.fill();
context.stroke();
//GREEN GHOST
context.beginPath();
context.moveTo(155, 250);
context.quadraticCurveTo(180, 200, 210, 250);
context.strokeStyle = 'rgb(39, 196, 40)';
context.fillStyle = 'rgb(39, 196, 40)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(155, 250);
context.lineTo(155, 275);
context.lineTo(172, 259);
context.lineTo(182, 275);
context.lineTo(190, 259);
context.lineTo(209, 275);
context.lineTo(210, 250);
context.fillStyle = 'rgb(39, 196, 40)';
context.fill();
context.stroke();
//GREEN--WHITE EYES
context.beginPath();
context.arc(171, 242, 6 , 0 , 2 * Math.PI, true);
context.strokeStyle = 'rgb(251, 251, 251)';
context.fillStyle = 'rgb(251, 251, 251)';
context.fill();
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.arc(193, 242, 6 , 0 , 2 * Math.PI, true);
context.strokeStyle = 'rgb(251, 251, 251)';
context.fillStyle = 'rgb(251, 251, 251)';
context.fill();
context.lineWidth = 3;
context.stroke();
//GREEN GHOST--BLUE EYES
context.beginPath();
context.arc(171, 238, 2 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(87, 87, 255)';
context.fillStyle = 'rgb(87, 87, 255)';
context.fill();
context.stroke();
context.beginPath();
context.arc(193, 238, 2 , 0 , 2 * Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = 'rgb(87, 87, 255)';
context.fillStyle = 'rgb(87, 87, 255)';
context.fill();
context.stroke();
//CHERRY
context.beginPath();
context.arc(395, 415, 6 , 0 , 2 * Math.PI, true);
context.strokeStyle = 'rgb(255, 0, 0)';
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.lineWidth = 4.5;
context.stroke();
context.beginPath();
context.arc(408, 418, 9 , 0 , 2 * Math.PI, true);
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.lineWidth = 1;
context.stroke();
//STEM
context.beginPath();
context.moveTo(397, 415);
context.bezierCurveTo(398, 405, 399, 400, 412, 393);
context.strokeStyle = 'rgb(222, 148, 82)';
context.fillStyle = 'rgb(222, 148, 82)';
context.lineWidth = 1.3
context.fill();
context.quadraticCurveTo(406, 395, 397, 415);
context.strokeStyle = 'rgb(222, 148, 82)';
context.fillStyle = 'rgb(222, 148, 82)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(412, 393);
context.quadraticCurveTo(406, 405, 408, 418);
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(222, 148, 82)';
context.fill();
context.quadraticCurveTo(408, 405, 412, 393);
context.strokeStyle = 'rgb(222, 148, 82)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment