js+svg实现Wordscapes拼单词拼字游戏代码-html代码-BFW代码库

js+svg实现Wordscapes拼单词拼字游戏代码

代码语言：html

所属分类：游戏

代码描述：js+svg实现Wordscapes拼单词拼字游戏代码，按住鼠标左键不放将字母连成一个单词。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
/* ["#5CEEAD","#8FDDE0","#C2AAEB","#F577B8","#D64485"] */
body {
	background: #8fdde0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cpattern id='p' width='250' height='30' viewBox='0 0 1000 120' patternUnits='userSpaceOnUse'%3E%3Cg fill='none' stroke='%235CEEAD' stroke-width='10'%3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30' opacity='0.6' /%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30' opacity='0.4' /%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30' opacity='0.3' /%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30' opacity='0.3' /%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30' opacity='0.4' /%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30' opacity='0.6' /%3E%3C/g%3E%3C/pattern%3E%3Crect height='100%25' width='100%25' fill='url(%23p)' /%3E%3C/svg%3E");
	margin: 0 auto;
	height: 100vh;
	width: 100vw;
}
#wordscapesGame {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translate(-50%);
	height: 400px;
	width: 400px;
	max-height: 100vh;
	max-width: 100vw;
	z-index: 10;
}
#wordscapesGame text {
	font-family: "Roboto", sans-serif;
}
.blurry {
	position: absolute;
	height: 15px;
	width: 100px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	backdrop-filter: blur(6px);
	-moz-backdrop-filter: blur(6px); /* For Safari */
	-webkit-backdrop-filter: blur(6px); /* For Safari */
/* 	background-color: #C2AAEB; */
	transition: height 200ms;
}
.reveal:focus > .blurry, .reveal:active > .blurry {
	height: 0px;
}
.strike {
	text-decoration: line-through;
}
.letter:hover > circle {
	fill: #f577b8;
}

.letterText {
	user-select: none;
	pointer-events: none;
	-webkit-transition: transform 400ms; /* Safari */
	-moz-transition: transform 400ms; /* Safari */
	transition: transform 400ms;
}
.letterCircle {
	-webkit-transition: transform 400ms; /* Safari */
	-moz-transition: transform 400ms; /* Safari */
	transition: transform 400ms;
}

.letter {
	-webkit-transition: transform 400ms; /* Safari */
	-moz-transition: transform 400ms; /* Safari */
	transition: transform 400ms;
	cursor: pointer;
}
.shuffle, .awards {
	cursor: pointer;
	background: none;
	color: #fff;
	padding: 10px;
	height: 65px;
	width: 65px;
	position: absolute;
	top: 50%;
	left: 20px;
	transform:translate(0, -50%);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.awards {
	top: 20p.........完整代码请登录后点击上方下载按钮下载查看