html+css+js之20个练手小项目（一）

#html+css+js之20个练手小项目（一）| 来源: 网络整理| 查看: 265

html+css+js之20个练手小项目（一）——Hangman 前言一、HTML二、CSS三、JS

前言

前端新手练习，记录不迷失。主要练习html和CSS布局以及JS。来源github，参考链接：使用html+css和纯js实现小项目 Hangman是一个单词拼写的小游戏，主要功能包括：（1）利用svg画小人图（2）生成随机单词并展示（3）单词正确与错误提醒 Hangman单词拼写小游戏

一、HTML

HTML结构比较简单，主要使用了SVG构造小人。学习一下标签svg中的line,circle。

DOCTYPE html> Hangman Hangman Find the hidden word - Enter a letter Play Again You have already entered this letter 二、CSS

原文主要是使用flex进行布局，在这为了练习，删去了一些flex布局。

*{ 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; } 三、JS

原文作者全部使用原生JS 实现。为了练习，在这主要是通过Jquery实现。代码简单+简陋，大佬请指教。主要逻辑：基于游戏等级，生成随机单词，监听键盘输入。

$(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 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("

Wrong

"); } $('.wrong-letters').append(""+value+""); if(falCount>5){ //再玩一次 playAgain(output,0); } } } } }) } //在数组中查找所有出现的x，并返回一个包含匹配索引的数组 function findall(a, x) { var results = [], len = a.length, pos = 0; while (pos //未找到就退出循环完成搜索 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); } } });

【本文地址】

公司简介

联系我们