绘制function并用字母替换元素
[英]Draw function and replace elements with letters
问题描述
这个想法是创建简单的刽子手游戏，当您选择一个给定的类别并单击新单词按钮时，将显示给定列表中的相应随机单词（如下划线）。 然后，如果字母与该单词中出现的字母匹配，则显示该字母，如果不匹配，则抽取 hangman 的连续元素。
但我现在不知道如何将这些进一步实施到项目中。 如何创建一个function，它会在背景上随机生成一个单词，如果选择的字母不存在，让它画点东西，或者如果它存在于单词中，用这个字母改变下划线？
我想创建一个代码，允许玩主题中描述的刽子手游戏。 我找不到创建代码的解决方案，该代码将用字母替换下划线，并在给定字母不存在的情况下在背景上绘制元素。
let background; let width, heigth, margin; let animals, plants, clothes; let lives; let chosenCategory; let word; function initialize() { background = document.getElementById("background").getContext("2d"); width = document.getElementById("background").width; height = document.getElementById("background").height; margin = 25; lives = 10; word = "nothing"; animals = ["horse", "elephant", "squirell"]; plants = ["pineapple", "tomato", "lettuce"]; clothes = ["trousers", "shirt", "skirt"]; } function drawLetters() { for (let i = 0; i < word.length; i++) { background.fillRect(i * ((width * 0.9) / word.length) + margin, height / 2, 30, 5); } } function randomWord() { chosenCategory = document.getElementById("category").value; if (chosenCategory == "animals") { word = animals[Math.floor(Math.random() * animals.length)]; } else if (chosenCategory == "plants") { word = plants[Math.floor(Math.random() * plants.length)]; } else if (chosenCategory == "clothes") { word = clothes[Math.floor(Math.random() * clothes.length)]; } } function checkLetter(letter) { if (word.includes(letter)) { drawLetter(letter); } } function drawLetter(letter) { background.font = "30px Arial"; background.fillText(letter, word.indexOf(letter) * ((width * 0.9) / word.length) + margin, height / 2 - 10); }
body { text-align: center; background-color: #8EB19D; } #background { background-color: azure; border: 3px solid black; } h1 { color: rgb(190, 220, 254); font-Size: 40px; height: 50px; text-align: center; font-family: Tahoma; }.container { font-size: 16px; background-color: #ffffff; width: 64vw; max-width: 32em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 3em; border-radius: 0.6em; }.letter-row { padding-top: 0.5em; padding-bottom: 0.5em; }.letter-container { height: 2.4em; width: 2.4em; border-radius: 0.3em; font-weight: bold; background-color: #ffffff; cursor: pointer; }
<body onload="initialize()"> <h1>Hangman</h1> <div class="container"> <p> <select id="category"> <option value="">Category</option> <option id="animals" option value="animals">Animals</option> <option id="plants" option value="plants">Plants</option> <option id="clothes" option value="clothes">Clothes</option> </select> </p> <canvas id="background" width="350" height="250">No canvas support</canvas> <div id="text-container"> <div class="letter-row"> <input class="letter-container" type="button" value="A" onclick="checkLetter('a')" /> <input class="letter-container" type="button" value="B" onclick="checkLetter('b')" /> <input class="letter-container" type="button" value="C" onclick="checkLetter('c')" /> <input class="letter-container" type="button" value="D" onclick="checkLetter('d')" /> <input class="letter-container" type="button" value="E" onclick="checkLetter('e')" /> <input class="letter-container" type="button" value="F" onclick="checkLetter('f')" /> <input class="letter-container" type="button" value="G" onclick="checkLetter('g')" /> <input class="letter-container" type="button" value="H" onclick="checkLetter('h')" /> <input class="letter-container" type="button" value="I" onclick="checkLetter('i')" /> </div> <div class="letter-row"> <input class="letter-container" type="button" value="J" onclick="checkLetter('j')" /> <input class="letter-container" type="button" value="K" onclick="checkLetter('k')" /> <input class="letter-container" type="button" value="L" onclick="checkLetter('l')" /> <input class="letter-container" type="button" value="M" onclick="checkLetter('m')" /> <input class="letter-container" type="button" value="N" onclick="checkLetter('n')" /> <input class="letter-container" type="button" value="O" onclick="checkLetter('o')" /> <input class="letter-container" type="button" value="P" onclick="checkLetter('p')" /> <input class="letter-container" type="button" value="Q" onclick="checkLetter('q')" /> </div> <div class="letter-row"> <input class="letter-container" type="button" value="R" onclick="checkLetter('r')" /> <input class="letter-container" type="button" value="S" onclick="checkLetter('s')" /> <input class="letter-container" type="button" value="T" onclick="checkLetter('t')" /> <input class="letter-container" type="button" value="U" onclick="checkLetter('u')" /> <input class="letter-container" type="button" value="V" onclick="checkLetter('v')" /> <input class="letter-container" type="button" value="W" onclick="checkLetter('w')" /> <input class="letter-container" type="button" value="X" onclick="checkLetter('x')" /> <input class="letter-container" type="button" value="Y" onclick="checkLetter('y')" /> <input class="letter-container" type="button" value="Z" onclick="checkLetter('z')" /> </div> </div> <p></p> <div> <button id="New Word" type="button" onclick="randomWord()">New Word</button> <input type="button" value="Draw Lines" onclick="drawLetters()" /> </div> <div class="game-container"> <svg height="250" width="200" class="figure-container"> <line x1="60" y1="20" x2="140" y2="20" /> </svg> <div class="wrong-letter-container"> <div id="wrong-letters"></div> </div> <div class="word" id="word"></div> </div> <div class="popup-container" id="popup-container"> <div class="popup"> <h2 id="final-message"></h2> </div> </div> </div> </body>
2 个解决方案
解决方案1
0 2023-01-27 14:07:19
- 说清楚
- 不要使用内联事件处理程序
- 现在添加一个 console.log 来仔细检查
我还将 CSS 更改为不依赖 position 绝对和转换
let background; let width, heigth, margin; let animals, plants, clothes; let lives; let chosenCategory; let word; const clear = () => background.clearRect(0, 0, width, height); const initialize = () => { background = document.getElementById("background").getContext("2d"); width = document.getElementById("background").width; height = document.getElementById("background").height; margin = 25; lives = 10; word = "nothing"; animals = ["horse", "elephant", "squirell"]; plants = ["pineapple", "tomato", "lettuce"]; clothes = ["trousers", "shirt", "skirt"]; }; const drawLetters = () => { clear(); console.log(word) for (let i = 0; i < word.length; i++) { background.fillRect(i * ((width * 0.9) / word.length) + margin, height / 2, 30, 5); } }; const randomWord = () =>{ chosenCategory = document.getElementById("category").value; if (chosenCategory == "animals") { word = animals[Math.floor(Math.random() * animals.length)]; } else if (chosenCategory == "plants") { word = plants[Math.floor(Math.random() * plants.length)]; } else if (chosenCategory == "clothes") { word = clothes[Math.floor(Math.random() * clothes.length)]; } }; const drawLetter = (letter) => { background.font = "30px Arial"; background.fillText(letter, word.indexOf(letter) * ((width * 0.9) / word.length) + margin, height / 2 - 10); }; const checkLetter = (letter) => { if (word.includes(letter)) { drawLetter(letter); } }; window.addEventListener("DOMContentLoaded", initialize)
body { text-align: center; background-color: #8EB19D; } #background { background-color: azure; border: 3px solid black; } h1 { color: rgb(190, 220, 254); font-Size: 40px; height: 50px; text-align: center; font-family: Tahoma; }.container { font-size: 16px; background-color: #ffffff; width: 64vw; max-width: 32em; padding: 3em; border-radius: 0.6em; margin: auto; }.letter-row { padding-top: 0.5em; padding-bottom: 0.5em; }.letter-container { height: 2.4em; width: 2.4em; border-radius: 0.3em; font-weight: bold; background-color: #ffffff; cursor: pointer; }
<h1>Hangman</h1> <div class="container"> <p> <select id="category"> <option value="">Category</option> <option id="animals" option value="animals">Animals</option> <option id="plants" option value="plants">Plants</option> <option id="clothes" option value="clothes">Clothes</option> </select> </p> <canvas id="background" width="350" height="250">No canvas support</canvas> <div id="text-container"> <div class="letter-row"> <input class="letter-container" type="button" value="A" onclick="checkLetter('a')" /> <input class="letter-container" type="button" value="B" onclick="checkLetter('b')" /> <input class="letter-container" type="button" value="C" onclick="checkLetter('c')" /> <input class="letter-container" type="button" value="D" onclick="checkLetter('d')" /> <input class="letter-container" type="button" value="E" onclick="checkLetter('e')" /> <input class="letter-container" type="button" value="F" onclick="checkLetter('f')" /> <input class="letter-container" type="button" value="G" onclick="checkLetter('g')" /> <input class="letter-container" type="button" value="H" onclick="checkLetter('h')" /> <input class="letter-container" type="button" value="I" onclick="checkLetter('i')" /> </div> <div class="letter-row"> <input class="letter-container" type="button" value="J" onclick="checkLetter('j')" /> <input class="letter-container" type="button" value="K" onclick="checkLetter('k')" /> <input class="letter-container" type="button" value="L" onclick="checkLetter('l')" /> <input class="letter-container" type="button" value="M" onclick="checkLetter('m')" /> <input class="letter-container" type="button" value="N" onclick="checkLetter('n')" /> <input class="letter-container" type="button" value="O" onclick="checkLetter('o')" /> <input class="letter-container" type="button" value="P" onclick="checkLetter('p')" /> <input class="letter-container" type="button" value="Q" onclick="checkLetter('q')" /> </div> <div class="letter-row"> <input class="letter-container" type="button" value="R" onclick="checkLetter('r')" /> <input class="letter-container" type="button" value="S" onclick="checkLetter('s')" /> <input class="letter-container" type="button" value="T" onclick="checkLetter('t')" /> <input class="letter-container" type="button" value="U" onclick="checkLetter('u')" /> <input class="letter-container" type="button" value="V" onclick="checkLetter('v')" /> <input class="letter-container" type="button" value="W" onclick="checkLetter('w')" /> <input class="letter-container" type="button" value="X" onclick="checkLetter('x')" /> <input class="letter-container" type="button" value="Y" onclick="checkLetter('y')" /> <input class="letter-container" type="button" value="Z" onclick="checkLetter('z')" /> </div> </div> <p></p> <div> <button id="New Word" type="button" onclick="randomWord()">New Word</button> <input type="button" value="Draw Lines" onclick="drawLetters()" /> </div> <div class="game-container"> <svg height="250" width="200" class="figure-container"> <line x1="60" y1="20" x2="140" y2="20" /> </svg> <div class="wrong-letter-container"> <div id="wrong-letters"></div> </div> <div class="word" id="word"></div> </div> <div class="popup-container" id="popup-container"> <div class="popup"> <h2 id="final-message"></h2> </div> </div> </div>
解决方案2
0 2023-01-27 14:59:05
So when given category is chosen and New Word button is clicked, adequate to number of letters in this word, number underscores will be displayed. 就像这里一样：
function checkLetter(letter) {
if (word.includes(letter)) {
drawLetter(letter);
}
如果选择的字母存在，它将替换下划线。 如果不是这种情况 - 如果单词不包含字母，则将绘制 hangman 元素。 但我不知道如何让它发挥作用。 如果word.includes如何对这个条件进行某种否定，例如：如果word不包含字母，则绘制hangman的元素。
有没有办法在SVG文本路径上围绕单个字母绘制一个矩形
[英]Is there a way to draw a rectangle around single letters on a SVG textpath
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.