Eski 25-11-21, 16:47 #1
T-Rons T-Rons çevrimdışı

bynogame
Varsayılan PHP & HTML & CSS & JS Yapılarıyla Uyumlu Tower Blocks Oyunu

bynogame
HTML Kodlarımız

Kullandığınız Emulator'e göre kolay bir şekilde kopyala yapıştır yaparak bakabilirsiniz. Proje Responsive olduğu için basit bir emulator ile app yapıp google play store'a bile ekleyebilirsiniz. Özgün olması adına kodları çok basit bir şekilde değiştirebilirsiniz.

HTML Code:
<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>
SCSS Kodlarımız

HTML Code:
@import url('https://fonts.googleapis.com/css?family=Comfortaa');

$color-dark: #333344;

html, body
{
	margin: 0;
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: relative;
	font-family: 'Comfortaa', cursive;
}

#container
{
	width: 100%;
	height: 100%;
	
	#score
	{
		position: absolute;
		top: 20px;
		width: 100%;
		text-align: center;
		font-size: 10vh;
		transition: transform 0.5s ease;
		color: $color-dark;
		transform: translatey(-200px) scale(1);
	}

	#game
	{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	.game-over
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 85%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		*
		{
			transition: opacity 0.5s ease, transform 0.5s ease;
			opacity: 0;
			transform: translatey(-50px);
			color: $color-dark;
		}
		
		h2
		{
			margin: 0;
			padding: 0;
			font-size: 40px;
		}
	}
	
	.game-ready
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		
		#start-button
		{
			transition: opacity 0.5s ease, transform 0.5s ease;
			opacity: 0;
			transform: translatey(-50px);
			
			border: 3px solid $color-dark;
			padding: 10px 20px;
			background-color: transparent;
			color: $color-dark;
			font-size: 30px;
		}
	}
	
	#instructions
	{
		position: absolute;
		width: 100%;
		top: 16vh;
		left: 0;
		text-align: center;
		transition: opacity 0.5s ease, transform 0.5s ease;
		
		opacity: 0;
		
		&.hide
		{
			opacity: 0 !important;
		}
	}
	
	&.playing, &.resetting
	{
		#score
		{
			transform: translatey(0px) scale(1);
		}
	}
	
	&.playing
	{
		#instructions
		{
			opacity: 1;
		}
	}
	
	&.ready
	{
		
		
		.game-ready
		{
			#start-button
			{
				opacity: 1;
				transform: translatey(0);
			}
		}
	}
	
	&.ended
	{
		#score
		{
			transform: translatey(6vh) scale(1.5);
		}
		
		.game-over
		{
			*
			{
				opacity: 1;
				transform: translatey(0);
			}
			
			p
			{
				transition-delay: 0.3s;
			}
		}
	}
}


JS Kodlarımız

PHP Code:
console.clear();

interface 
BlockReturn
{
    
placed?:any;
    
chopped?:any;
    
plane'x' 'y' 'z';
    
directionnumber;
    
bonus?: boolean;
}

class 
Stage
{
    private 
containerany;
    private 
cameraany;
    private 
sceneany;
    private 
rendererany;
    private 
lightany;
    private 
softLightany;
    private 
groupany;
    
    
constructor()
    {
        
// container
        
        
this.container document.getElementById('game');
        
        
// renderer
        
        
this.renderer = new THREE.WebGLRenderer({
            
antialiastrue,
            
alphafalse
        
});
        
        
this.renderer.setSize(window.innerWidthwindow.innerHeight);
        
this.renderer.setClearColor('#D0CBC7'1);
        
this.container.appendChildthis.renderer.domElement );
        
        
// scene

        
this.scene = new THREE.Scene();

        
// camera

        
let aspect window.innerWidth window.innerHeight;
        
let d 20;
        
this.camera = new THREE.OrthographicCamera( - aspectaspectd, - d, -1001000);
        
this.camera.position.2;
        
this.camera.position.2
        
this.camera.position.2
        
this.camera.lookAt(new THREE.Vector3(000));
        
        
//light

        
this.light = new THREE.DirectionalLight(0xffffff0.5);
        
this.light.position.set(04990);
        
this.scene.add(this.light);

        
this.softLight = new THREE.AmbientLight0xffffff0.4 );
        
this.scene.add(this.softLight)
        
        
window.addEventListener('resize', () => this.onResize());
        
this.onResize();
    }
    
    
setCamera(y:numberspeed:number 0.3)
    {
        
TweenLite.to(this.camera.positionspeed, {y4easePower1.easeInOut});
        
TweenLite.to(this.camera.lookAtspeed, {yyeasePower1.easeInOut});
    }
    
    
onResize()
    {
        
let viewSize 30;
        
this.renderer.setSize(window.innerWidthwindow.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();
    }
    
    
render = function()
    {
        
this.renderer.render(this.scenethis.camera);
    }

    
add = function(elem)
    {
        
this.scene.add(elem);
    }

    
remove = function(elem)
    {
        
this.scene.remove(elem);
    }
}

class 
Block
{
    const 
STATES = {ACTIVE'active'STOPPED'stopped'MISSED'missed'};
    const 
MOVE_AMOUNT 12;

    
dimension = { width0height0depth0}
    
position = {x0y0z0};
    
    
mesh:any;
    
state:string;
    
index:number;
    
speed:number;
    
direction:number;
    
colorOffset:number;
    
color:number;
    
material:any;

    
workingPlane:string;
    
workingDimension:string;

    
targetBlock:Block;
    
    
constructor(block:Block)
    {
        
// set size and position
        
        
this.targetBlock block;
        
        
this.index = (this.targetBlock this.targetBlock.index 0) + 1;
        
this.workingPlane this.index 'x' 'z';
        
this.workingDimension this.index '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.targetBlock this.targetBlock.dimension.depth 10;
        
        
this.position.this.targetBlock this.targetBlock.position.0;
        
this.position.this.dimension.height this.index;
        
this.position.this.targetBlock this.targetBlock.position.0;
        
        
this.colorOffset this.targetBlock this.targetBlock.colorOffset Math.round(Math.random() * 100);
        
        
// set color
        
if(!this.targetBlock
        {
            
this.color 0x333344;
        }
        else
        {
            
let offset this.index this.colorOffset;
            var 
Math.sin(0.3 offset) * 55 200;
            var 
Math.sin(0.3 offset 2) * 55 200;
            var 
Math.sin(0.3 offset 4) * 55 200;
            
this.color = new THREE.Color255255255 );
        }
        
        
// state
        
        
this.state this.index this.STATES.ACTIVE this.STATES.STOPPED;
        
        
// set direction
        
        
this.speed = -0.1 - (this.index 0.005);
        if(
this.speed < -4this.speed = -4;
        
this.direction this.speed;
        
        
// create block
        
        
let geometry = new THREE.BoxGeometrythis.dimension.widththis.dimension.heightthis.dimension.depth);
        
geometry.applyMatrix( new THREE.Matrix4().makeTranslation(this.dimension.width2this.dimension.height2this.dimension.depth2) );
        
this.material = new THREE.MeshToonMaterial( {colorthis.colorshadingTHREE.FlatShading} );
        
this.mesh = new THREE.Meshgeometrythis.material );
        
this.mesh.position.set(this.position.xthis.position.+ (this.state == this.STATES.ACTIVE 0), this.position.z);
        
        if(
this.state == this.STATES.ACTIVE
        {
            
this.position[this.workingPlane] = Math.random() > 0.5 ? -this.MOVE_AMOUNT this.MOVE_AMOUNT;
        }
    } 

    
reverseDirection()
    {
        
this.direction this.direction this.speed Math.abs(this.speed);     
    }

    
place():BlockReturn
    
{
        
this.state this.STATES.STOPPED;
        
        
let overlap this.targetBlock.dimension[this.workingDimension] - Math.abs(this.position[this.workingPlane] - this.targetBlock.position[this.workingPlane]);
        
        
let blocksToReturn:BlockReturn = {
            
planethis.workingPlane,
            
directionthis.direction
        
};
        
        if(
this.dimension[this.workingDimension] - overlap 0.3)
        {
            
overlap this.dimension[this.workingDimension];
            
blocksToReturn.bonus true;
            
this.position.this.targetBlock.position.x;
            
this.position.this.targetBlock.position.z;
            
this.dimension.width this.targetBlock.dimension.width;
            
this.dimension.depth this.targetBlock.dimension.depth;
        }
        
        if(
overlap 0)
        {
            
let choppedDimensions = { widththis.dimension.widthheightthis.dimension.heightdepththis.dimension.depth };
            
choppedDimensions[this.workingDimension] -= overlap;
            
this.dimension[this.workingDimension] = overlap;
                    
            
let placedGeometry = new THREE.BoxGeometrythis.dimension.widththis.dimension.heightthis.dimension.depth);
            
placedGeometry.applyMatrix( new THREE.Matrix4().makeTranslation(this.dimension.width2this.dimension.height2this.dimension.depth2) );
            
let placedMesh = new THREE.MeshplacedGeometrythis.material );
            
            
let choppedGeometry = new THREE.BoxGeometrychoppedDimensions.widthchoppedDimensions.heightchoppedDimensions.depth);
            
choppedGeometry.applyMatrix( new THREE.Matrix4().makeTranslation(choppedDimensions.width2choppedDimensions.height2choppedDimensions.depth2) );
            
let choppedMesh = new THREE.MeshchoppedGeometrythis.material );
            
            
let choppedPosition = {
                
xthis.position.x,
                
ythis.position.y,
                
zthis.position.z
            
}
            
            if(
this.position[this.workingPlane] < this.targetBlock.position[this.workingPlane])
            {
                
this.position[this.workingPlane] = this.targetBlock.position[this.workingPlane]
            }
            else
            {
                
choppedPosition[this.workingPlane] += overlap;
            }
            
            
placedMesh.position.set(this.position.xthis.position.ythis.position.z);
            
choppedMesh.position.set(choppedPosition.xchoppedPosition.ychoppedPosition.z);
            
            
blocksToReturn.placed placedMesh;
            if(!
blocksToReturn.bonusblocksToReturn.chopped choppedMesh;
        }
        else
        {
            
this.state this.STATES.MISSED;
        }
        
        
this.dimension[this.workingDimension] = overlap;

        return 
blocksToReturn;
    }
    
    
tick()
    {
        if(
this.state == this.STATES.ACTIVE)
        {
            
let value this.position[this.workingPlane];
            if(
value this.MOVE_AMOUNT || value < -this.MOVE_AMOUNTthis.reverseDirection();
            
this.position[this.workingPlane] += this.direction;    
            
this.mesh.position[this.workingPlane] = this.position[this.workingPlane];    
        }
    }
}

class 
Game
{
    const 
STATES = {
        
'LOADING''loading',
        
'PLAYING''playing',
        
'READY''ready',
        
'ENDED''ended',
        
'RESETTING''resetting'
    
}
    
blocks:Block[] = [];
    
state:string this.STATES.LOADING;
    
    
// groups

    
newBlocks:any;
    
placedBlocks:any;
    
choppedBlocks:any;

    
// UI elements

    
scoreContainer:any;
    
mainContainer:any;
    
startButton:any;
    
instructions:any;
    
    
constructor()
    {
        
this.stage = new Stage();
        
        
this.mainContainer document.getElementById('container');
        
this.scoreContainer document.getElementById('score');
        
this.startButton document.getElementById('start-button');
        
this.instructions document.getElementById('instructions');
        
this.scoreContainer.innerHTML '0';
        
        
this.newBlocks = new THREE.Group();
        
this.placedBlocks = new THREE.Group();
        
this.choppedBlocks = new THREE.Group();
        
        
this.stage.add(this.newBlocks);
        
this.stage.add(this.placedBlocks);
        
this.stage.add(this.choppedBlocks);
        
        
this.addBlock();
        
this.tick();
        
        
this.updateState(this.STATES.READY);
        
        
document.addEventListener('keydown'=>
        {
            if(
e.keyCode == 32this.onAction()
        });
        
        
document.addEventListener('click'=>
        {
            
this.onAction();
        });        
        
        
document.addEventListener('touchstart'=>
        {
            
e.preventDefault();
            
// this.onAction();
            
            // ☝️ this triggers after click on android so you
            // insta-lose, will figure it out later.
        
});
    }

    
updateState(newState)
    {
        for(
let key in this.STATESthis.mainContainer.classList.remove(this.STATES[key]);
        
this.mainContainer.classList.add(newState);
        
this.state newState;
    }

    
onAction()
    {
        switch(
this.state)
        {
            case 
this.STATES.READY:
                
this.startGame();
                break;
            case 
this.STATES.PLAYING:
                
this.placeBlock();
                break;
            case 
this.STATES.ENDED:
                
this.restartGame();
                break;    
        }
    }
    
    
startGame()
    {
        if(
this.state != this.STATES.PLAYING)
        {
            
this.scoreContainer.innerHTML '0';
            
this.updateState(this.STATES.PLAYING);
            
this.addBlock();
        }
    }

    
restartGame()
    {
        
this.updateState(this.STATES.RESETTING);
        
        
let oldBlocks this.placedBlocks.children;
        
let removeSpeed 0.2;
        
let delayAmount 0.02;
        for(
let i 0oldBlocks.lengthi++)
        {
            
TweenLite.to(oldBlocks[i].scaleremoveSpeed, {x0y0z0delay: (oldBlocks.length i) * delayAmounteasePower1.easeInonComplete: () => this.placedBlocks.remove(oldBlocks[i])})
            
TweenLite.to(oldBlocks[i].rotationremoveSpeed, {y0.5delay: (oldBlocks.length i) * delayAmounteasePower1.easeIn})
        }
        
let cameraMoveSpeed removeSpeed + (oldBlocks.length delayAmount);
        
this.stage.setCamera(2cameraMoveSpeed);
        
        
let countdown = {valuethis.blocks.length 1};
        
TweenLite.to(countdowncameraMoveSpeed, {value0onUpdate: () => {this.scoreContainer.innerHTML String(Math.round(countdown.value))}})
        
        
this.blocks this.blocks.slice(01);
        
        
setTimeout(() => {
            
this.startGame();
        }, 
cameraMoveSpeed 1000)
        
    }
    
    
placeBlock()
    {
        
let currentBlock this.blocks[this.blocks.length 1];
        
let newBlocks:BlockReturn currentBlock.place();
        
this.newBlocks.remove(currentBlock.mesh);
        if(
newBlocks.placedthis.placedBlocks.add(newBlocks.placed);
        if(
newBlocks.chopped)
        {
            
this.choppedBlocks.add(newBlocks.chopped);
            
let positionParams = {y'-=30'easePower1.easeInonComplete: () => this.choppedBlocks.remove(newBlocks.chopped)}
            
let rotateRandomness 10;
            
let rotationParams = {
                
delay0.05,
                
xnewBlocks.plane == 'z' ? ((Math.random() * rotateRandomness) - (rotateRandomness2)) : 0.1,
                
znewBlocks.plane == 'x' ? ((Math.random() * rotateRandomness) - (rotateRandomness2)) : 0.1,
                
yMath.random() * 0.1,
            };
            if(
newBlocks.chopped.position[newBlocks.plane] > newBlocks.placed.position[newBlocks.plane])
            {
                
positionParams[newBlocks.plane] = '+=' + (40 Math.abs(newBlocks.direction));
            }
            else
            {
                
positionParams[newBlocks.plane] = '-=' + (40 Math.abs(newBlocks.direction));
            }
            
TweenLite.to(newBlocks.chopped.position1positionParams);
            
TweenLite.to(newBlocks.chopped.rotation1rotationParams);
            
        }
        
        
this.addBlock();
    }
    
    
addBlock()
    {
        
let lastBlock this.blocks[this.blocks.length 1];
        
        if(
lastBlock && lastBlock.state == lastBlock.STATES.MISSED)
        {
            return 
this.endGame();
        }
        
        
this.scoreContainer.innerHTML String(this.blocks.length 1);
        
        
let newKidOnTheBlock = new Block(lastBlock);
        
this.newBlocks.add(newKidOnTheBlock.mesh);
        
this.blocks.push(newKidOnTheBlock);

        
this.stage.setCamera(this.blocks.length 2);
        
        if(
this.blocks.length >= 5this.instructions.classList.add('hide');
    }
    
    
endGame()
    {
        
this.updateState(this.STATES.ENDED);
    }

    
tick()
    {
        
this.blocks[this.blocks.length 1].tick();
        
this.stage.render();
        
requestAnimationFrame(() => {this.tick()});
    }
}

let game = new Game(); 
  Alıntı Yaparak CevaplaAlıntı Yaparak Cevapla
Cevapla

Bu konunun kısa yolunu aşağıdaki sitelere ekleyebilirsiniz

Konu Araçları

Gönderme Kuralları
Yeni konu açamazsınız
Cevap yazamazsınız
Dosya gönderemezsiniz
Mesajlarınızı düzenleyemezsiniz

BB code is Açık
Smiley Açık
[IMG] kodu Açık
HTML kodu Kapalı



Tüm saatler GMT +3. Şuan saat: 14:15
(Türkiye için artık GMT +3 seçilmelidir.)

 
5651 sayılı yasaya göre forumumuzdaki mesajlardan doğabilecek her türlü sorumluluk yazan kullanıcılara aittir. Şikayet Mailimiz. İçerik, Yer Sağlayıcı Bilgilerimiz. Tatil


bynogame