Question

我是JavaScript新手，不过JsFiddle。

我和一位非常友好的先生通过JSfiddle编写了这段代码。 Here是指向所有代码的链接

＆＃13;

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');

var height = window.innerHeight;
var width = window.innerWidth;

canvas.width = width;
canvas.height = height;

var letter = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

var currentLetters = [];

var px = height / 20;
var y = [];
var x = [];
var speed;
var acceleration;
var score;
var newIntervalKey = 0;
var letternumber = 0;
var score = 0;

// This part will detect the clicks of your buttons. It's the preferred method for
// handling events in JS as opposed to using the onClick attribute of HTML elements.

var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function() {
	start();
}, false);

var stopButton = document.getElementById('stopButton');
stopButton.addEventListener('click', function() {
	stop();
}, false);

// This will get the key code of the keyboard key that the user pressed.
// Each letter corresponds to such a code, so that's how you can check
// if the user pressed the correct key. Obviously you will need to have
// some soft of a map of codes to letters.
document.addEventListener('keydown', function(e) {

  // Getting a letter from a code. We have a function that does that.
  var currentlyPressedKey = getKeyFromCode(e.keyCode);
  
  // If the user pressed one of the letters currently in play, we
  // remove it from our currentLetters array. We are using a bad
  // way of doing it (using a for loop) because I don't know if
  // you have covered array methods yet.
  for (var i = 0; i < currentLetters.length; i++) {
  	var letterObj = currentLetters[i];
    if (letterObj.l == currentlyPressedKey) {
    	currentLetters.splice(i, 1);
      score += 1;
    }
  }
}, false);

function getKeyFromCode(code) {
	switch (code) {
  	case 65:
    	return 'A';
    case 66:
    	return 'B';
    case 67:
    	return 'C';
    case 68:
    	return 'D';
    case 69:
    	return 'E';
    case 70:
    	return 'F';
    case 71:
    	return 'G';
    case 72:
    	return 'H';
    case 73:
    	return 'I';
    case 74:
    	return 'J';
    case 75:
    	return 'K';
    case 76:
    	return 'L'
    case 77:
    	return 'M';
    case 78:
    	return 'N';
    case 79:
    	return 'O';
    case 80:
    	return 'P';
    case 81:
    	return 'Q';
    case 82:
    	return 'R';
    case 83:
    	return 'S'
    case 84:
    	return 'T';
    case 85:
    	return 'U';
    case 86:
    	return 'V';
    case 87:
    	return 'W'
    case 88:
    	return 'X';
    case 89:
    	return 'Y';
    case 90:
    	return 'Z';
    //case 50:
    //	return 'W';
    
    default:
    	return null;
  }
}

function addRandomLetter() {
	var letternumber = Math.floor(Math.random() * 26);
  
  // This will pick the x and y coordinated for each letter. It will need to be
  // updated later, because right now it's technically possible to place a
  // letter all the way on the bottom or on the right, where the user won't be
  // able to see it.
  var positionX = Math.floor(Math.random() * width);
  var positionY = Math.floor(Math.random() * height);
  
  // This saves an object to our array of current letters. The object contains
  // the letter itself, but also its x and y coordinates that we generated above.
	currentLetters.push({l: letter[letternumber], x: positionX, y: positionY});
}

function start() {

	c.clearRect(0, 0, width, height);
	letternumber = 0;
  currentLetters = []
  score = 0;
  
	if(newIntervalKey != 0) {
		clearInterval(newIntervalKey)
	}
  
	newIntervalKey = setInterval(where, 1000);
}

function stop() {
	px = width / 20;
  
	if (currentLetters.length == 11) {
		clearInterval(newIntervalKey);
		c.clearRect(0, 0, width, height);
		c.font = 'bold italic ' + px + 'px Verdana';
    c.globalAlpha = 1;
    c.fillStyle = 'Red';
		c.fillText('GAME OVER', (width / 2 - width / 5.5), height / 2);
    
    c.font = 'bold italic' + px/2 + 'px Verdana'
    c.fillStyle = 'Black'
    c.globalAlpha = 0.1;
    c.fillText('Final Score:' + ' ' + score, (width / 2), (height / 2 + height / 10));
	}  
}

function where() {
  x = Math.floor(Math.random() * (width - width / 20));
  y = Math.floor(Math.random() * (height - width / 20)); 
    
  addRandomLetter();
  drawletters();
  letternumber += 1;
  stop();
}

function drawletters() {
  c.clearRect(0, 0, width, height);
  c.font = 'bold italic ' + px + 'px Verdana';
  c.globalAlpha = 1;
  c.fillStyle = 'Black';
  
  // This will loop through the array of our current letters and draw them
  // each on the specified coordinates. We get all that info from the objects
  // that we've stored in the array.
  currentLetters.forEach(function(char) {
    c.fillText(char.l, char.x, char.y);
  });
  
  c.font = 'bold italic ' + height / 1.5 + 'px Verdana';
  c.globalAlpha = 0.1;
  c.fillText(score, width / 3, height / 1.5);
}

＆＃13;

canvas { border: 2px solid blue; }
body { margin: 0; }

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Canvas</title>
  </head>
  <body>
    <canvas></canvas>
    <input type="button" value="Start" id="startButton" />
    <input type="button" value="Stop" id="stopButton" />
  </body>
</html>

＆＃13;

我需要以某种方式导出所有代码并使其在Brackets（我的编程软件）上运行

我尝试制作一个index.html和一个script.js文件，然后从那里粘贴来自jsfiddle的html和JS代码。但是当我尝试运行index.html时，我的整个画布都消失了。我知道它与jsfiddle的CSS部分有关，我只需要帮助将它合并到我的index.html文件中，这样我就可以从index.html运行整个程序

提前致谢！

Answer 1

这与JS Fiddle本身无关。这只是HTML，CSS和JavaScript如何组织的问题。它可以通过多种方式组合在一起，但最基本的是将它们全部放在一个文件中，并将该文件分成不同的部分。请参阅下面的组合代码。您可以复制所有内容并将其保存到<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <div class="form"> <div class="form-row"> <div class="form-unit"> <div class="multi-attribute"> <label class="form-input-label">Multi-Attributes Input</label> <div class="add-multi">Add item <i class="fas fa-plus"></i></div> <ul class="multi-list"> <li class="multi-list-each"> <div class="col-33 multi-col"> <label class="form-input-label">Year</label> <div class="multi-form-group"> <input class="year-input input-text input-with-spinner" type="number" min="0" placeholder="Add year"> <a /> <div class="spinner-group spinner-group-year"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </div> </div> <div class="col-33 multi-col"> <label class="form-input-label">Balance Increase</label> <div class="balance-group multi-form-group"> <input class="balance-input input-text input-with-spinner" type="text" placeholder="Add balance"> <a /> <div class="spinner-group spinner-group-year"> <a class="spinner-up"><i class="fas fa-caret-up"></i></a> <a class="spinner-down"><i class="fas fa-caret-down"></i></a> </div> </div> </div> <div class="col-33 multi-col"> <div class="panel-data panel-data-vertical"> <div class="panel-data-label"> Total Balance </div> <div class="panel-data-value"> Formula </div> </div> </div> <div class="multi-list-each-delete"><i class="fas fa-trash"></i></div> </li> </ul> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>文件中：

＆＃13;

index.html

＆＃13;

如何导出jsfiddle css part（JavaScript）

1 个答案: