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

  • 前言
  • 一、HTML
  • 二、CSS
  • 三、JS

前言

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

一、HTML

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

<!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>

二、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']; //长度为6let wordArr_normal = ['underline', 'transform', 'arguments']; //长度为9let wordArr_difficult = ['application', 'programming', 'constructor']; //长度为11let wordAll=[wordArr_easy,wordArr_normal,wordArr_difficult];let stars=0;//记录游戏levellet 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. 												


											

html+css+js之20个练手小项目（一）相关推荐
	

    
								
  1. 台式小风扇（HTML+CSS+JS练手小项目）
		
    台式小风扇(HTML+CSS+JS练手小项目) 功能介绍 外观展示 HTML代码 CSS代码 JS代码 总结 功能介绍 前段时间看到这样的风扇特效,感觉还挺好玩,就自己也写一个练练手. 风扇有四个档位 ...
    
		
    2. 
						
  2. ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
		
    前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
    
		
    3. 
						
  3. springboot+vue练手小项目[前台搭建+后台编写]（非常详细）
		
    [ springboot+vue练手小项目 ] 技术栈: springboot+vue3+element-plus +Mybaties-plus+hutool +mysql8 项目介绍 :最近刚学了s ...
    
		
    4. 
						
  4. 练手小项目，爬取3DM图片
		
    博客原文:https://weweweha.com 1. 概述 ​ 爬取3DM指定网页的游戏壁纸,并且通过多线程来加速爬取图片的速度. 2.使用库 ​ request库用来1解析指定网页,re库用来搜 ...
    
		
    5. 
						
  5. c语言模拟器怎么打程序,C语言初学者练手小项目——万花模拟器
		
    原标题:C语言初学者练手小项目--万花模拟器 还记得小时候玩的万花尺么?好好玩,各种不同的点距能画出各种各样形状图形. C语言程序万花尺模拟 函数功能:每隔5秒随机生成万花图形 并自动保存作图参数以及 ...
    
		
    6. 
						
  6. 练手小项目（5）安全卫士_程序锁
		
    最近想做的小新工具箱,一直想做一个程序锁,其实原理,很简单,先注册一个服务,检测手机所有进程,如果发现被加锁的app启动,马上弹出一个输入程序锁界面,但是这样子bug很多.我先做一个基本后面慢慢把bu ...
    
		
    7. 
						
  7. 爬虫练手小项目：豆瓣高分图书TOP100
		
    爬虫练手小项目:豆瓣高分图书TOP100 import requests import re from requests.exceptions import RequestException impo ...
    
		
    8. 
						
  8. 数据结构练手小项目（AVL树、哈希表、循环链表、MySQL数据库）
		
    文章目录 前言 正文(无删减) 我的想法(删减修改版) 数据导入与数据存储 功能实现 数据结构 用户结构 SIM卡结构 AVL树数据结构 哈希表结构 数据表 用户表 SIM卡表 时间安排 前言 本月主 ...
    
		
    9. 
						
  9. Golang练手小项目系列
		
    Golang练手小项目系列 本系列整理了10个工作量和难度适中的Golang小项目,适合已经掌握Go语法的工程师进一步熟练语法和常用库的用法. golang练手小项目系列(1)-位向量 golang练 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. C#+Mapxtreme 实现一些GIS系统基本的功能
		
    2. 
						
  2. 量子计算机到底神在哪里说明文,“九章”量子计算机到底有多神！
		
    3. 
						
  3. 170304 地铁修建 ccf
		
    4. 
						
  4. JAVA并行框架：Fork/Join
		
    5. 
						
  5. html css页脚代码,HTML CSS - 页脚 - 下面的空格
		
    6. 
						
  6. 第七节：框架搭建之页面静态化的剖析
		
    7. 
						
  7. vue 执行函数this_在vue中使用回调函数,this调用无效的解决
		
    8. 
						
  8. vue怎么根据id获取组件_vue子组件，如何根据父组件传进来的id，去查询详情，并在子组件中显示？...
		
    9. 
						
  9. eclipse及myeclipse改变编码
		
    10. 
						
  10. Sqoop 数据增量导出，--update-key添加多个字段
		
    11. 
						
  11. 《图解算法》学习笔记之快速排序
		
    12. 
						
  12. 光缆厂家介绍OTDR测试仪使用方法（小白必看）
		
    13. 
						
  13. python中db是什么意思_Python3爬虫中MongoDB的存储操作是什么
		
    14. 
						
  14. fisco bcos 调用接口报错WeBASE-Node-Manager user not logged in 版本：v1.5.2
		
    15. 
						
  15. snf快速开发平台试用演示地址
		
    16. 
						
  16. Android R 通知新特性—人与对话（气泡窗）
		
    17. 
						
  17. 天玥运维安全网关_中国工业网络安全厂商综合能力概览
		
    18. 
						
  18. BUUCTF misc 二维码1解题思路
		
    19. 
						
  19. 某程序员哀叹：做码农真的很悲哀，有的35岁就没人要了
		
    20. 
						
  20. git删除远端分支命令
		
    21. 
		

	


热门文章
	

    
									
  1. 深度中国——课后随感
			
    2. 
						
  2. matlab求最小割,matlab實現圖割算法中的最大流最小割Max-flow/min-cut問題（一）
			
    3. 
						
  3. google play支付提示“此版本的应用程序未配置为通过Google Play结算。有关详情，请访问帮助中心。”
			
    4. 
						
  4. csi mipi信号解析
			
    5. 
						
  5. 学习笔记——Day1——Python歌词解析
			
    6. 
						
  6. 高频率Vue面试题总结，vue面试就靠它！
			
    7. 
						
  7. 看繁华一世，三千浮生若水
			
    8. 
						
  8. 网络安全主要面临的威胁
			
    9. 
						
  9. Python搭建自己[IP代理池]
			
    10. 
						
  10. 安卓手机管理软件_手机文件管理真的很难吗？
			
    11.