Comments (3)
every time I try to replace icon with an image game got stuck, kindly help
from pacman.
Hello, what are you trying to replace? The pacman player icon, or the page title icon (the icon that shows up on the browser tab)?
from pacman.
for the pacman player, you'll need to edit pacman.js, and find the function drawPacman(). This function is responsible for drawing the player character (pacman), and it does this by drawing lines and shapes (which is also how the animation works in this case!). To replace the image, do something lie this:
pacman.js drawPacman():
`
var ctx = getPacmanCanevasContext();
ctx.fillStyle = "#fff200";
ctx.beginPath();
var startAngle = 0;
var endAngle = 2 * Math.PI;
var lineToX = PACMAN_POSITION_X;
var lineToY = PACMAN_POSITION_Y;
var img = document.getElementById("pacmanImage");
if (PACMAN_DIRECTION === 1) {
img = document.getElementById("pacmanImageflipped"); //right
ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16);
//startAngle = (0.35 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//endAngle = (1.65 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//lineToX -= 8;
} else if (PACMAN_DIRECTION === 2) {
img = document.getElementById("pacmanImagedown"); //down
ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16);
//startAngle = (0.85 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//endAngle = (0.15 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//lineToY -= 8;
} else if (PACMAN_DIRECTION === 3) { //left
img = document.getElementById("pacmanImage");
ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16);
//startAngle = (1.35 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//endAngle = (0.65 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//lineToX += 8;
} else if (PACMAN_DIRECTION === 4) {
img = document.getElementById("pacmanImage"); //up
ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16);
//startAngle = (1.85 - (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//endAngle = (1.15 + (PACMAN_MOUNTH_STATE * 0.05)) * Math.PI;
//lineToY += 8;
}
ctx.drawImage(img, PACMAN_POSITION_X, PACMAN_POSITION_Y, 16, 16);
//ctx.arc(PACMAN_POSITION_X, PACMAN_POSITION_Y, PACMAN_SIZE, startAngle, endAngle, false);
//ctx.lineTo(lineToX, lineToY);
//ctx.fill();
ctx.closePath();
`
and index.html:
(add these at the start of the body)
<img id="pacmanImage" width="16" height="16" src="beans.png" alt="pacmanlmao"> <img id="pacmanImageflipped" width="16" height="16" src="beansflipped.png" alt="pacmanlmao1"> <img id="pacmanImagedown" width="16" height="16" src="beansdown.png" alt="pacmanlmao2">
this will replace the images, but you will have to change the img src names to match yours.
from pacman.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pacman.