<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>塔块游戏</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Comfortaa");
html, body {
margin: 0;
overflow: hidden;
height: 100%;
width: 100%;
position: relative;
font-family: 'Comfortaa', cursive;
}
#container {
width: 100%;
height: 100%;
}
#container #score {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
font-size: 10vh;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
color: #333344;
-webkit-transform: translatey(-200px) scale(1);
transform: translatey(-200px) scale(1);
}
#container #game {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#container .game-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85%;
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;
}
#container .game-over * {
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
opacity: 0;
-webkit-transform: translatey(-50px);
transform: translatey(-50px);
color: #333344;
}
#container .game-over h2 {
margin: 0;
padding: 0;
font-size: 40px;
}
#container .game-ready {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
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;
-ms-flex-pack: distribute;
justify-content: space-around;
}
#container .game-ready #start-button {
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
opacity: 0;
-webkit-transform: translatey(-50px);
transform: translatey(-50px);
border: 3px solid #333344;
padding: 10px 20px;
background-color: transparent;
color: #333344;
font-size: 30px;
}
#container #instructions {
position: absolute;
width: 100%;
top: 16vh;
left: 0;
text-align: center;
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
opacity: 0;
}
#container #instructions.hide {
opacity: 0 !important;
}
#container.playing #score, #container.resetting #score {
-webkit-transform: translatey(0px) scale(1);
transform: translatey(0px) scale(1);
}
#container.playing #instructions {
opacity: 1;
}
#container.ready .game-ready #start-button {
opacity: 1;
-webkit-transform: translatey(0);
transform: translatey(0);
}
#container.ended #score {
-webkit-transform: translatey(6vh) scale(1.5);
transform: translatey(6vh) scale(1.5);
}
#container.ended .game-over * {
opacity: 1;
-webkit-transform: translatey(0);
transform: translatey(0);
}
#container.ended .game-over p {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
</style>
</head>
<body>
<meta name="viewport" content="width=device-width,user-scalable=no">
<div id="container">
<div id="game"></div>
<div id="score">0</div>
<div id="instructions">Click (or press the spacebar) to place the block</div>
<div class="game-over">
<h2>Game Over</h2>
<p>You did great, you're the best.</p>
<p>Click or spacebar to start again</p>
</div>
<div class="game-ready">
<div id="start-button">Start</div>
<div></div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script>
console.clear();
var Stage = /** @class */ (function () {
function Stage() {
// container
var _this = this;
this.render = function () {
this.renderer.render(this.scene, this.camera);
};
this.add = function (elem) {
this.scene.add(elem);
};
this.remove = function (elem) {
this.scene.remove(elem);
};
this.container = document.getElementById('game');
// renderer
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: false
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setClearColor('#D0CBC7', 1);
this.container.appendChild(this.renderer.domElement);
// scene
this.scene = new THREE.Scene();
// camera
var aspect = window.innerWidth / window.innerHeight;
var d = 20;
this.camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, -100, 1000);
this.camera.position.x = 2;
this.camera.position.y = 2;
this.camera.position.z = 2;
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
//light
this.light = new THREE.DirectionalLight(0xffffff, 0.5);
this.light.position.set(0, 499, 0);
this.scene.add(this.light);
this.softLight = new THREE.AmbientLight(0xffffff, 0.4);
this.scene.add(this.softLight);
window.addEventListener('resize', function () { return _this.onResize(); });
this.onResize();
}
Stage.prototype.setCamera = function (y, speed) {
if (speed === void 0) { speed = 0.3; }
TweenLite.to(this.camera.position, speed, { y: y + 4, ease: Power1.easeInOut });
TweenLite.to(this.camera.lookAt, speed, { y: y, ease: Power1.easeInOut });
};
Stage.prototype.onResize = function () {
var viewSize = 30;
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.camera.left = window.innerWidth / -viewSize;
this.camera.right = window.innerWidth / viewSize;
this.camera.top = window.innerHeight / viewSize;
this.camera.bottom = window.innerHeight / -viewSize;
this.camera.updateProjectionMatrix();
};
return Stage;
}());
var Block = /** @class */ (function () {
function Block(block) {
// set size and position
this.STATES = { ACTIVE: 'active', STOPPED: 'stopped', MISSED: 'missed' };
this.MOVE_AMOUNT = 12;
this.dimension = { width: 0, height: 0, depth: 0 };
this.position = { x: 0, y: 0, z: 0 };
this.targetBlock = block;
this.index = (this.targetBlock ? this.targetBlock.index : 0) + 1;
this.workingPlane = this.index % 2 ? 'x' : 'z';
this.workingDimension = this.index % 2 ? 'width' : 'depth';
// set the dimensions from the target block, or defaults.
this.dimension.width = this.targetBlock ? this.targetBlock.dimension.width : 10;
this.dimension.height = this.targetBlock ? this.targetBlock.dimension.height : 2;
this.dimension.depth = this.targetBl
h5 源码 游戏整合
需积分: 16 183 浏览量
2019-01-11
10:04:28
上传
评论
收藏 71.5MB ZIP 举报
h5 源码 游戏整合 （1911个子文件） 
models.atlas 2KB shop.atlas 1KB play.atlas 1KB preloader.atlas 1KB score.atlas 863B settings.atlas 772B menu.atlas 666B pause.atlas 564B index.html.bak 3KB
Chomper.bmp 18KB CoffeeBean.bmp 18KB PuffShroom.bmp 18KB TallNut.bmp 18KB Starfruit.bmp 18KB ScaredyShroom.bmp 18KB IceShroom.bmp 18KB CherryBomb.bmp 18KB PumpkinHead.bmp 18KB SnowPea.bmp 18KB Garlic.bmp 18KB FlowerPot.bmp 18KB LilyPad.bmp 18KB Cactus.bmp 18KB SeaShroom.bmp 18KB PotatoMine.bmp 18KB GatlingPea.bmp 18KB HypnoShroom.bmp 18KB SplitPea.bmp 18KB Squash.bmp 18KB FumeShroom.bmp 18KB Repeater.bmp 18KB Spikerock.bmp 18KB TwinSunflower.bmp 18KB Threepeater.bmp 18KB Blover.bmp 18KB SunShroom.bmp 18KB WallNut.bmp 18KB Plantern.bmp 18KB Peashooter.bmp 18KB Jalapeno.bmp 18KB SunFlower.bmp 18KB Torchwood.bmp 18KB GloomShroom.bmp 18KB DoomShroom.bmp 18KB Spikeweed.bmp 18KB voyager-71c9db55a2771fa00f1072bf4f5ea985.css 37KB main.css 19KB style.css 17KB rrssb.css 11KB game.css 9KB style.css 8KB components.css 7KB responsive.css 5KB VNkyVaVxUV.css 5KB m.min.css 5KB game.css 1KB gamestyles.css 1KB app.css 733B app.css 531B app.css 531B app.css 489B Thumbs.db 8KB Thumbs.db 7KB .DS_Store 8KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB .DS_Store 6KB m_Baveuse.eot 37KB Cowboy.ExportJson 105KB NewAnimation1.ExportJson 6KB NewAnimation.ExportJson 6KB VAG-Collapsed30.fnt 25KB VAG-Rounded30.fnt 25KB Occident_1.fnt 24KB name.fnt 8KB score.fnt 2KB text.fnt 2KB game_over_number.fnt 2KB cost.fnt 2KB count.fnt 2KB text.fnt 2KB
LostHeadWalk1.gif 140KB PoleVaultingZombieWalk.gif 104KB HeadWalk1.gif 94KB Zombie2.gif 78KB ConeheadZombie.gif 72KB PoleVaultingZombieLostHeadWalk.gif 71KB Zombie.gif 65KB FlagZombie.gif 63KB HeadWalk0.gif 61KB PoleVaultingZombieAttack.gif 61KB ZombieAttack.gif 58KB Zombie3.gif 56KB FlagZombieLostHead.gif 55KB Blover.gif 54KB JalapenoAttack.gif 53KB PoleVaultingZombie.gif 52KB LostNewspaper.gif 51KB共 1911 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
