jsfx+rx实现带声效和视觉差异的贪吃蛇游戏代码
代码语言：html
所属分类：游戏
代码描述：jsfx+rx实现带声效和视觉差异的贪吃蛇游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=VT323");
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #d2e0d2;
overflow: hidden;
}
h1 {
margin: 0;
}
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
text-transform: uppercase;
font-family: 'VT323', monospace;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#container #board-container {
border-radius: 8px;
margin: 20px;
padding: 20px 20px 10px 20px;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
background-color: white;
background-image: radial-gradient(farthest-corner at 10px 10px, #7ca256 0%, #799f54 100%);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.5s ease;
transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.5s ease;
transition: transform 0.3s ease, box-shadow 0.5s ease;
transition: transform 0.3s ease, box-shadow 0.5s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.5s ease;
}
#container #board-container #board {
border-radius: 5px;
border: solid 1px #212121;
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
}
#container #board-container .shine-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
overflow: hidden;
}
#container #board-container .shine-container .shine {
position: absolute;
top: -40px;
left: -40px;
right: -40px;
bottom: -40px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 60%);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
#container #board-container .info-container {
height: 100%;
width: 100%;
min-height: 50px;
margin-top: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transform: translateZ(20px);
transform: translateZ(20px);
}
#container #board-container .info-container .label {
margin: 5px 5px 0 0;
}
#container #board-container .info-container #score {
font-size: 1.5em;
font-weight: 300;
padding: 10px 20px;
}
#container #board-container .info-container .flex {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
#container.PLAYING #board-container {
-webkit-box-shadow: 0 45px 100px rgba(0, 0, 0, 0.3);
box-shadow: 0 45px 100px rgba(0, 0, 0, 0.3);
-webkit-transform: translateZ(40px);
transform: translateZ(40px);
}
#container.PLAYING #board-container.up {
-webkit-transform: rotateX(10deg);
transform: rotateX(10deg);
}
#container.PLAYING #board-container.up .shine-container .shine {
-webkit-transform: rotateX(10deg) translateX(-40px) translateZ(1px);
transform: rotateX(10deg) translateX(-40px) translateZ(1px);
}
#container.PLAYING #board-container.down {
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
#container.PLAYING #board-container.down .shine-container .shine {
-webkit-transform: rotateX(-10deg) translateX(40px) translateZ(1px);
transform: rotateX(-10deg) translateX(40px) translateZ(1px);
}
#container.PLAYING #board-container.left {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
#container.PLAYING #board-container.left .shine-container .shine {
-webkit-transform: rotateY(-10deg) translateY(-40px) translateZ(1px);
transform: rotateY(-10deg) translateY(-40px) translateZ(1px);
}
#container.PLAYING #board-container.right {
-webkit-transform: rotateY(10deg);
transform: rotateY(10deg);
}
#container.PLAYING #board-container.right .shine-container .shine {
-webkit-transform: rotateY(10deg) translateY(40px) translateZ(1px);
transform: rotateY(10deg) translateY(40px) translateZ(1px);
}
#container #start-button {
font-family: inherit;
text-transform: uppercase;
font-size: 1.5em;
background-color: transparent;
color: #212121;
padding: 10px 20px;
border: 0;
border-radius: 2px;
cursor: pointer;
outline: none;
}
#container #start-button:hover {
color: white;
border-color: #7ca256;
}
#container .state-driven {
display: none;
}
#container.READY #start-button {
display: block;
}
#container.ENDED #start-button {
display: block;
}
#container.ENDED .re {
display: inline;
}
#container .controls .keyboard {
display: inline;
}
#container .controls .touch {
display: none;
}
@media (any-hover: none) and (any-pointer: coarse) {
#container .controls .keyboard {
display: none;
}
#container .controls .touch {
display: inline;
}
}
@-webkit-keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
#board {
--grid-columns: 0;
--grid-rows: 0;
--grid-size: 0;
width: calc(var(--grid-size) * var(--grid-columns) * 1px);
height: calc(var(--grid-size) * var(--grid-rows) * 1px);
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-gap: 1px;
}
#board > div {
background-color: transparent;
}
#board > div.food, #board > div.snake {
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: -webkit-box-shadow 0.3s ease;
transition: -webkit-box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;
}
#board > div.food {
background-color: #212121;
border-radius: 50%;
margin: 1px;
}
#board > div.snake {
background-color: #212121;
}
#board > div.snake.head.up {
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
#board > div.snake.head.down {
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
#board > div.snake.head.left {
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
#board > div.snake.head.right {
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
#board > div.snake.tail.up {
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
}
#board > div.snake.tail.down {
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
}
#board > div.snake.tail.right {
border-bottom-left-radius: 100% 50%;
border-top-left-radius: 100% 50%;
}
#board > div.snake.tail.left {
border-bottom-right-radius: 100% 50%;
border-top-right-radius: 100% 50%;
}
#board > div.snake.turn-left.up {
border-top-right-radius: 50%;
}
#board > div.snake.turn-left.down {
border-bottom-right-radius: 50%;
}
#board > div.snake.turn-right.up {
border-top-left-radius: 50%;
}
#board > div.snake.turn-right.down {
border-bottom-left-radius: 50%;
}
#board > div.snake.turn-up.left {
border-bottom-left-radius: 50%;
}
#board > div.snake.turn-up.right {
border-bottom-right-radius: 50%;
}
#board > div.snake.turn-down.left {
border-top-left-radius: 50%;
}
#board > div.snake.turn-down.right {
border-top-right-radius: 50%;
}
#board > div.snake.dead {
-webkit-animation: flash 0.3s steps(1) infinite;
animation: flash 0.3s steps(1) infinite;
}
.up #board > div.food, .up #board > div.snake {
-webkit-box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.1);
}
.down #board > div.food, .down #board > div.snake {
-webkit-box-shadow: 0px -5px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px -5px 0px 0px rgba(0, 0, 0, 0.1);
}
.left #board > div.food, .left #board > div.snake {
-webkit-box-shadow: 5px 0px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 5px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.right #board > div.food, .right #board > div.snake {
-webkit-box-shadow: -5px 0px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: -5px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="container">
<div id="board-container">
<div class="shine-container">
<div class="shine"></div>
</div>
<div id="board"></div>
<div class="info-container">
<button id="start-button" class="state-driven"><span class="re state-driven">RE</span>开始</button>
<div class="flex"></div>
<div id="score">0</div>
</div>
</div>
<div class="controls">
<span class="keyboard"> 使用键盘箭头键来控制</span>
<span class="touch">向上，向下滑动，向左或向右滑动即可控制。</span>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jsfx.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Rx.5.0.1.js"></script>
<script>
console.clear();
var GAME_STATES;
(function (GAME_STATES) {
GAME_STATES["ready"] = "READY";
GAME_STATES["playing"] = "PLAYING";
GAME_STATES["ended"] = "ENDED";
GAME_STATES["paused"] = "PAUSED";
})(GAME_STATES || (GAME_STATES = {}));
var SOUND;
(function (SOUND) {
SOUND["move"] = "move";
SOUND["dead"] = "dead";
SOUND["collect"] = "collect";
SOUND["start"] = "start";
})(SOUND || (SOUND = {}));
var App = /** @class */ (function () {
function App() {
this.setupUI();
this.setupGame();
}
App.prototype.setupUI = function () {
var _this = this;
this.score = document.getElementById('score');
this.container = document.getElementById('container');
this.boardContainer = document.getElementById('board-container');
var startButton = Rx.Observable.fromEvent(document.getElementById('start-button'), 'click');
startButton.subscribe(function (e) { console.log('click'); _this.startGame(); });
};
App.prototype.setupGame = function () {
var _this = this;
var board = document.getElementById('board');
this.game = new Snake(board);
this.game.score.subscribe(function (score) { return _this.score.innerHTML = String(score); });
this.game.state.subscribe(function (state) {
_this.gameState = state;
_this.container.setAttribute('class', state);
});
this.game.direction.subscribe(function (direction) { return _this.boardContainer.setAttribute('class', direction); });
this.game.reset();
};
App.prototype.startGame = function () {
if (this.gameState == GAME_STATES.ready || this.gameState == GAME_STATES.ended) {
this.game.start();
}
};
return App;
}());
var Snake = /** @class */ (function () {
function Snake(boardElement) {
var _this = this;
this.SETTINGS = {
grid: { size: 10, rows: 20, columns: 28 },
game: { scoreIncrement: 10 },
snake: { startLength: 3, startSpeed: 300, speedIncrement: 10, minSpeed: 100, growBy: 2 }
};
this.DIRECTION = {
up: { name: 'up', x: 0, y: -1 },
down: { name: 'down', x: 0, y: 1 },
left: { name: 'left', x: -1, y: 0 },
right: { name: 'right', x: 1, y: 0 }
};
this.states = {
direction: this.DIRECTION.up,
nextDirection: [this.DIRECTION.up],
speed: 0,
game: GAME_STATES.ready,
timeStamp: 0,
snakeLength: 0,
score: 0
};
//http://loov.io/jsfx
this.sfxLibrary = {
"start": {
"Frequency": { "Start": 463.2977575242697, "Slide": 0.4268311992714056, "RepeatSpeed": 0.6870767779635416 },
"Generator": { "A": 0.015696072909390766 },
"Volume": { "Sustain": 0.11353385475559997, "Decay": 0.15242709930669884 }
},
"collect1": {
"Frequency": { "Start": 1183.9224793246758, "ChangeSpeed": 0.12793431035602038, "ChangeAmount": 4.8612434857196085 },
"Volume": { "Sustain": 0.011448880380128946, "Decay": 0.3895997546965799, "Punch": 0.4554389528366015 }
},
"collect2": {
"Frequency": { "Start": 1070.9337014976563, "ChangeSpeed": 0.1375978771153015, "ChangeAmount": 5.9409661118536246 },
"Volume": { "Sustain": 0.04890791064198004, "Decay": 0.3415421194668815, "Punch": 0.46291381941601983 }
},
"dead": {
"Frequency": { "Start": 194.70758491034655, "Slide": -0.011628522004559189, "ChangeSpeed": 0.6591296059731018, "ChangeAmount": 2.6287197798189297 },
"Generator": { "Func": "noise" },
"Volume": { "Sustain": 0.17655222296084297, "Deca.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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