20 small projects of html+css+js to practice hands (1) - Hangman
foreword
Front-end novice practice, record is not lost.
Mainly practice html and CSS layout and JS.
Source github, reference link: Use html+css and pure js to realize small project
Hangman is a small word spelling game, the main functions include:
(1) Use svg to draw a little figure
(2) Generate random words and display
(3) Words Right and wrong reminders
1. HTML
The HTML structure is relatively simple, mainly using SVG to construct villains. Learn about line, circle in label svg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hangman</title>
<link rel="stylesheet" href="style.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="action.js"></script>
</head>
<body>
<h1>Hangman</h1>
<p>Find the hidden word - Enter a letter</p>
<div class="game-wrapper">
<svg height="250" width="200">
<!-- Rod -->
<line x1="60" y1="20" x2="140" y2="20"></line>
<line x1="140" y1="20" x2="140" y2="50"></line>
<line x1="60" y1="20" x2="60" y2="230"></line>
<line x1="20" y1="230" x2="100" y2="230"></line>
<!-- Head -->
<circle cx="140" cy="70" r="20" class="figure-part"></circle>
<!-- Body -->
<line x1="140" y1="90" x2="140" y2="150" class="figure-part"></line>
<!-- Arms -->
<line x1="140" y1="120" x2="120" y2="100" class="figure-part"></line>
<line x1="140" y1="120" x2="160" y2="100" class="figure-part"></line>
<!-- Arms -->
<line x1="140" y1="150" x2="120" y2="180" class="figure-part"></line>
<line x1="140" y1="150" x2="160" y2="180" class="figure-part"></line>
</svg>
<div class="wrong-letters-wrapper">
<div class="wrong-letters">
</div>
</div>
<div class="enter-letters">
</div>
</div>
<div class="pop">
<h2 class="final-message"></h2>
<h3 class="reval-word-message"></h3>
<button id="play-button">Play Again</button>
</div>
<div class="notification">
<p>You have already entered this letter</p>
</div>
</body>
</html>
2. CSS
The original text mainly uses flex for layout. For the sake of practice, some flex layouts are deleted.
*{
box-sizing: border-box;/* 设置的宽高包括content+padding+border */
}
body{
margin:0;
padding:0;
background-color:#34495e;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
/* text-align:center;居中 */
display: flex;
align-items: center;/* 这两行可以设置居中 */
overflow: hidden;
flex-direction:column;/* 作为列，垂直地显示弹性项目。*/
height:80vh;
}
h1{
margin:20px 0 0;
}
.game-wrapper{
padding:20px 30px;
position: relative;
margin:auto;
height:350px;
width:450px;
}
svg{
stroke:#fff;
stroke-width:4px;
fill:transparent;
stroke-linecap: round;
}
.wrong-letters-wrapper{
position: absolute;
top:20px;
right:20px;
text-align:right;
}
.wrong-letters-wrapper p{
margin:0 0 5px;
}
.wrong-letters-wrapper span{
font-size:24px;
}
.enter-letters{
display:block;
position: absolute;
bottom:10px;
left:50%;
transform: translateX(-50%);/* 虽然设置了居中，但仍然占用原来的位置 */
white-space: nowrap;/* 这一行很重要，防止换行 */
}
.enter-letters .letter{
display:inline-block;
border-bottom:3px solid #2980b9;
font-size:30px;
margin:0 3px;
height:50px;
width:20px;
vertical-align: bottom;
}
.notification{
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px 10px 0 0;
padding: 15px 20px;
position: absolute;
bottom: -80px;
}
.pop{
display: none;
background-color:#2980b9;
border-radius:5px;
box-shadow:0 15px 10px 3px rgb(0, 0, 0, 10%);
padding:20px;
text-align: center;
z-index:1;
position:fixed;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
.pop button{
cursor:pointer;
background-color: #fff;
border:0;
margin-top:20px;
padding:12px 20px;
font-size:16px;
color:#2980b9;
}
.figure-part{
display: none;
}
3. JS
The original author uses all native JS implementations. For the sake of practice, this is mainly done through Jquery. The code is simple + rudimentary, please advise. Main logic: Based on the game level, generate random words and monitor keyboard input.
$(document).ready(function () {
//定义一个单词数组，三种长度
let wordArr_easy = ['return', 'double', 'static']; //长度为6
let wordArr_normal = ['underline', 'transform', 'arguments']; //长度为9
let wordArr_difficult = ['application', 'programming', 'constructor']; //长度为11
let wordAll=[wordArr_easy,wordArr_normal,wordArr_difficult];
let stars=0;//记录游戏level
let output;//随机生成的单词
let trueCount=0;//记录正确字母输入次数
let falCount=0;//记录错误字母输入次数
let saveinput=[];//记录所有输入
let flag=true;//控制字母是否重复输入
gamelistener();
$("#play-button").click(intial);
//清除所有样式
function intial(){
$('.enter-letters').html("");
$('.wrong-letters').html("");
$(".pop").css("display","none");
$(".pop .final-message").text("");
$(".pop .reval-word-message").text("");
$(".figure-part").css("display","none");
trueCount=0;
falCount=0;
saveinput=[];
output = randon_word(wordAll[stars]);
//写入,html() 函数的作用原理是先移除匹配元素内部的html代码，然后将新的html添加到匹配元素
//append() 方法向匹配元素集合中的每个元素结尾插入由参数指定的内容
for (let i = 0; i < output.length; i++) {
$('.enter-letters').append("<span class='letter'></span>");
}
}
//监听键盘输入
function gamelistener() {
intial();
$(document).keyup(function(e){
flag=true;
var value=e.key;
var re = /[A-z]/; //查找从大写 A 到小写 z 范围内的字符，即所有大小写的字母。
//判断是否是字母
if (re.test(value)) {
//判断是否是数组中的单词字母
value = value.toLowerCase();
saveinput.forEach(e =>{
if(value==e){
notify();
flag=false;
}
});
if(flag){
saveinput.push(value);
let infer = findall(output, value);
if (infer.length > 0) {
trueCount+=infer.length;
//是，对应位置输出
infer.forEach(event => {
$('.enter-letters').children().eq(event).text(value);
});
if(trueCount==output.length){
stars++;
if(stars>2){
stars=0;
}
playAgain(output,1);
}
} else {
mancontrol(falCount);
falCount++;
if(falCount>1){
$('.wrong-letters').append(",");
}
else{
$('.wrong-letters').append("<p>Wrong</p>");
}
$('.wrong-letters').append("<span>"+value+"</sapn>");
if(falCount>5){
//再玩一次
playAgain(output,0);
}
}
}
}
})
}
//在数组中查找所有出现的x，并返回一个包含匹配索引的数组
function findall(a, x) {
var results = [],
len = a.length,
pos = 0;
while (pos < len) {
pos = a.indexOf(x, pos);
if (pos === -1) {
//未找到就退出循环完成搜索
break;
}
results.push(pos); //找到就存储索引
pos += 1; //并从下个位置开始搜索
}
return results;
}
//功能1，产生随机单词
function randon_word(Arr) {
let infer = Math.round(Math.random() * Arr.length);
return Arr[infer];
}
//功能2，控制小人
function mancontrol(falsec){
$(".figure-part").eq(falsec).css("display","block");
}
//功能3，字母重复输入提醒
function notify(){
$(".notification").animate({"bottom":"-20px"},500);
setTimeout(function(){
$(".notification").animate({"bottom":"-80px"},500);
},2000);
}
//功能4，通关成功与失败提醒
function playAgain(word,flag){
$(".pop").css("display","block");
if(flag){
$(".pop .final-message").text("Congratulation you win. ??");
}
else{
$(".pop .final-message").text("Unfortunately you lost. ??");
$(".pop .reval-word-message").text("...the word was:"+word);
}
}
});