Я новичок в JavaScript, тем не менее, JsFiddle.
Я и очень добрый сэр запрограммировали этот код через JSfiddle. Здесь - ссылка на весь код
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);
}
canvas { border: 2px solid blue; }
body { margin: 0; }
<!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>
Мне нужно каким-то образом экспортировать весь код и заставить его работать в скобках (мое программное обеспечение для программирования)
Я пыталсясоздайте index.html и файл script.js, а затем вставьте туда html и JS-код из jsfiddle.Но затем, когда я пытаюсь запустить index.html, весь мой холст исчезает.Я знаю, что это как-то связано с CSS-частью jsfiddle, мне просто нужна помощь, чтобы включить его в мой файл index.html, чтобы я мог запустить всю программу из index.html
Заранее спасибо!