当我点击“开始游戏”按钮时,我试图启动sketch.js
。
这是我的代码:
//THIS IS THE CODE FOR SKETCH.JS WITH THE PACMAN GAME....
var rocaImage;
var foodImage;
var grapeImage;
var pacManImage;
var roca;
var myMaze;
var arrayRocasMapa = [];
var arrayComidaMapa = [];
var arrayGrapesMapa = [];
var myPacman;
var font;
var username = "Eduardo";
var song;
//Pacman resources: http://www.classicgaming.cc/classics/pac-man/
function preload() {
rocaImage = loadImage("images/roca.bmp");
foodImage = loadImage("images/food.png");
grapeImage = loadImage("images/grape.png");
pacManImage = loadImage("images/pac.png");
song = loadSound("assets/pacman_chomp.wav");
// font = loadFont('assets/SourceSansPro-Regular.otf');
}
function setup() {
createCanvas(COLUMNS * IMAGE_SIZE, ROWS * IMAGE_SIZE + HEIGHT_TEXT);
roca = new Roca(200, 300);
myMaze = new Maze();
for (var i = 0; i < myMaze.rows; i++)
for (var j = 0; j < myMaze.columns; j++) {
if (myMaze.mapa[i][j] == 0) {
arrayRocasMapa.push(new Roca(j * IMAGE_SIZE, i * IMAGE_SIZE));
} else if (myMaze.mapa[i][j] == 1) {
arrayComidaMapa.push(new Food(j * IMAGE_SIZE, i * IMAGE_SIZE));
} else if (myMaze.mapa[i][j] == 2) {
arrayGrapesMapa.push(new Grapes(j * IMAGE_SIZE, i * IMAGE_SIZE));
} else if (myMaze.mapa[i][j] == 3) {
myPacman = new Pacman(j * IMAGE_SIZE, i * IMAGE_SIZE);
}
}
// Set text characteristics
textFont("monospace"); //https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts
textSize(14);
textAlign(LEFT, CENTER); // Constant:horizontal alignment, vertical aligntment either LEFT, CENTER, or RIGHT
textStyle(NORMAL); //Italic o Bold
}
function draw() {
background(0);
// roca.show();
//with i i count the rows, with j the columns
for (var i = 0; i < arrayRocasMapa.length; i++) {
console.log("Imprimo una roca:" + i);
arrayRocasMapa[i].show();
}
i = 0;
for (i = 0; i < arrayComidaMapa.length; i++) {
console.log("Imprimo una bola de comida:" + i);
arrayComidaMapa[i].show();
}
i = 0;
for (i = 0; i < arrayGrapesMapa.length; i++) {
console.log("Imprimo una uva de poder:" + i);
arrayGrapesMapa[i].show();
}
myPacman.show();
for (i = 0; i < arrayComidaMapa.length; i++) {
console.log("Compruebo si hay comida en la :" + i);
if (myPacman.eatFood(arrayComidaMapa[i])) {
arrayComidaMapa.splice(i, 1);
}
}
for (i = 0; i < arrayGrapesMapa.length; i++) {
if (myPacman.eatGrapes(arrayGrapesMapa[i])) {
arrayGrapesMapa.splice(i, 1);
}
}
for (i = 0; i < arrayRocasMapa.length; i++) {
if (myPacman.eatRock(arrayRocasMapa[i])) {
//arrayRocaMapa.splice(i,1);
}
}
drawtext();
// addSound();
if (arrayGrapesMapa.length == 0 && arrayComidaMapa.length == 0) {
alert("Victory !!!");
remove();
}
if (myPacman.lives == 0) {
alert("Defeat !!!");
remove();
}
}
function addSound() {
if (song.isPlaying()) { // .isPlaying() returns a boolean
} else {
song.play(); // playback will resume from the pause position
}
}
function drawtext() {
// textSize(18);
var textCoordY = ROWS * IMAGE_SIZE + HEIGHT_TEXT / 2;
var txtUser = "User :" + username;
var txtScore = "Score :" + myPacman.score;
var txtLives = "Lives :" + myPacman.lives;
fill('white');
text(txtUser, 30, textCoordY);
var cWidthUser = textWidth(txtUser) + 10 + 30;
fill('blue');
text(txtScore, cWidthUser, textCoordY);
cWidthScore = textWidth(txtScore) + 10;
fill('red');
text(txtLives, cWidthUser + cWidthScore, textCoordY);
// /*
// textSize(24);
// text('User', 30, ROWS*32+HEIGHT_TEXT/2);
// fill(0, 102, 153);
// text('Score', 100, ROWS*32+HEIGHT_TEXT/2);
// fill(0, 102, 153, 51);
// fill(0);
// text('Lives', 250, ROWS*32+HEIGHT_TEXT/2);
}
function mousePressed() {
if (song.isPlaying()) { // .isPlaying() returns a boolean
song.pause();
background(255, 0, 0);
} else {
song.play(); // playback will resume from the pause position
background(0, 255, 0);
}
}
function keyPressed() {
// console.log("Algo pasa nenn");
if (keyCode === 68 || keyCode === RIGHT_ARROW) //Letra d
{
console.log("Estoy dentro de mover derecha");
myPacman.moveRight();
//console.log("Estoy dentro de mover derecha");
}
if (keyCode === 65 || keyCode === LEFT_ARROW) // Letra a
{
console.log("Estoy dentro de mover izquierda");
myPacman.moveLeft();
//console.log("Estoy dentro de mover derecha");
}
if (keyCode === 87 || keyCode === UP_ARROW) // Letra W
{
console.log("Estoy dentro de mover arriba");
myPacman.moveUp();
//console.log("Estoy dentro de mover derecha");
}
if (keyCode === 88 || keyCode === DOWN_ARROW) // Letra X
{
console.log("Estoy dentro de mover abajo");
myPacman.moveDown();
//console.log("Estoy dentro de mover derecha");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pacman</title>
<link rel="icon" href="images/ghost.png" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<script src="library/p5.js" type="text/javascript"></script>
<script src="library/addons/p5.dom.js" type="text/javascript"></script>
<script src="library/addons/p5.sound.js" type="text/javascript"></script>
<!-- <script src="sketch.js" type="text/javascript"></script> -->
<script src="roca.js" type="text/javascript"></script>
<script src="maze.js" type="text/javascript"></script>
<script src="food.js" type="text/javascript"></script>
<script src="grapes.js" type="text/javascript"></script>
<script src="pacman.js" type="text/javascript"></script>
<script>
function startGame() {
//HERE I WANT TO LAUNCH SKETCH.JS BUT I CANT I HAVE TESTED MANY DIFFERENT ORDERS
document.write("<script src='sketch.js' type='text\/javascript'><\/script>");
}
</script>
<header>
<h1> Pacman Game by Eduardo</h1>
</header>
<img src="./images/splash-image.jpg" alt="Splash image of Pacman" />
<nav class="topnav">
<a href="/">Settings</a>
<a href="">Start Game</a>
<button onclick="startGame()" class="topnav"> Start Game</button>
<a href="">Credits</a>
</nav>
</body>
</html>
所以如果我评论(就像在代码中)脚本sketch.js的加载,我不能去我的sketch.js加载迷宫和游戏背景…但是我尝试了很多东西(document.write,innerHTML等等…)我只想在单击startGame按钮时加载sketch(这样startGame函数就会启动)…如果我删除评论,使用脚本,它可以正常工作,但是我想控制何时启动sketch.js(当我按下按钮开始游戏时,而不是之前)
如果你知道任何简单的事情都会很好…
另外,我还有一个疑问……我想打印一些文本,比如分数、生命和剩余时间……你是用另一张画布把文本放在上面(也许在屏幕的一边或底部),还是在同一张画布上腾出足够的空间来写作??
谢谢
最佳答案
您可以在草图顶部的变量中存储游戏是否开始:
var started = false;
function draw(){
if(started){
// draw your game
}
}
function mousePressed(){
started = true;
}
按下按钮时,您可以将
started
设置为true
。或者您可以查看实例模式,该模式允许您动态加载草图。您可以阅读有关实例模式here的更多信息。
另外,我还有一个疑问……我想打印一些文本,比如分数、生命和剩余时间……你是用另一张画布把文本放在上面(也许在屏幕的一边或底部),还是在同一张画布上腾出足够的空间来写作??
两种方法都可以。这完全取决于你。你也可以修改网页并在那里打印分数。图书馆可以派上用场。