js+css实现像素滑雪游戏代码
代码语言：html
所属分类：游戏
代码描述：js+css实现像素滑雪游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--color-01: #000;
--color-02: #0000ff;
--color-03: #ff0000;
--color-04: #eee;
--color-05: #ccc;
--color-06: #ff00fe;
--color-07: #00ff00;
--color-08: #00ffff;
--font-family: "Press Start 2p";
--font-size: 16px;
--title-font-size: 10cqw;
--min-width: 756px;
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK0nS.ttf) format('truetype');
}
canvas {
width: 100vw;
height: 100vh;
min-width: var(--min-width);
}
.scoreboard {
position: fixed;
top: 0;
left: 0;
font-family: "Press Start 2p";
font-style: normal;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
color: #333;
width: 100%;
min-width: var(--min-width);
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 1;
padding: 0.5em;
}
.scoreboard > div {
text-align: center;
}
.overlay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
place-content: center;
background-color: rgba(255, 255, 255, 0.5);
min-height: 100vh;
font-family: "Press Start 2p";
font-style: normal;
font-size: clamp(1.5rem, 8vw, 15rem);
font-weight: 700;
text-transform: uppercase;
color: #333;
/*
.free-ski {
width: 756px;
height: 756px;
padding: 0;
aspect-ratio: 1;
display: grid;
grid-template-rows: repeat(63, 12px);
grid-template-columns: repeat(63, 12px);
}
*/
}
.overlay p {
font-family: "Press Start 2p";
font-style: normal;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
color: #333;
}
.overlay .overlay--content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.overlay .overlay--content h1 {
text-align: center;
font-size: 5vw;
}
.overlay.hidden {
display: none;
}
@layer base {
body ::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
}
html {
scrollbar-width: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100vh;
position: relative;
min-width: 756px;
}
}
@layer start-button {
.btn {
position: relative;
transition: all 0.2s ease;
letter-spacing: 0.025em;
font-size: 0.6rem;
border-radius: 0.125rem;
padding: 0.6rem 2rem;
max-height: 37px;
}
.btn:before,
.btn:after {
content: "";
position: absolute;
box-sizing: border-box;
display: block;
background: transparent;
z-index: 9;
top: 0;
left: 0;
}
.btn:before {
width: 100%;
height: 100%;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid #858585;
border-bottom: 2px solid #858585;
}
.btn:not(:disabled):not(.disabled):active:before,
.btn:not(:disabled):not(.disabled):active:focus:before {
border-color: transparent;
color: #000;
}
.btn .btn-text {
border: 1px solid transparent;
}
.btn:not(:disabled):not(.disabled):active .btn-text,
.btn:not(:disabled):not(.disabled):active:focus .btn-text {
border: 1px dotted #000;
}
.btn-primary {
color: #000;
background-color: #c0c0c0;
border-color: #a0a0a0;
}
.btn-primary:hover {
color: #000;
background-color: #c0c0c0;
border-color: #a0a0a0;
}
.btn-primary:focus,
.btn-primary.focus {
box-shadow: none;
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #000;
background-color: #c0c0c0;
border-color: #c0c0c0;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
color: #000;
background-color: #c0c0c0;
border-color: #c0c0c0;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus {
box-shadow: none;
}
.btn-lg {
font-size: 1rem !important;
padding: 0.6rem 2rem;
max-height: 46px;
}
}
.free-ski {
width: 756px;
height: 756px;
min-width: var(--min-width);
padding: 0;
aspect-ratio: 1;
display: grid;
grid-template-rows: repeat(63, 12px);
grid-template-columns: repeat(63, 12px);
}
.free-ski span {
height: 12px;
font-size: 0;
text-align: center;
display: block;
}
.border {
background-color: var(--color-01);
}
.gator,
.pom-pom {
background-color: var(--color-02);
}
.hat {
background-color: var(--color-03);
}
.face-color {
background-color: var(--color-04);
}
.face-color-shadow {
background-color: var(--color-05);
}
.sweater {
background-color: var(--color-06);
}
.lenses {
background-color: var(--color-07);
}
.ski {
background-color: var(--color-08);
}
.ski-letters {
background-color: var(--color-09);
}
</style>
</head>
<body translate="no">
<header class="scoreboard">
<div>Score: <span class="scoreboard--score">0</span></div>
<div>Lives: <span class="scoreboard--lives">0</span></div>
<div>Level: <span class="scoreboard--level">0</span></div>
</header>
<canvas id="canvas"></canvas>
<div class="overlay" id="gameOverlay">
<div class="overlay--content">
<div class="free-ski">
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="border"></span>
<span class="border"></span>
<span class="border"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class="hat"></span>
<span class.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0