Grey Plane

In this example below you will see how to do a Grey Plane with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 19920612, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 19920612 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Grey Plane</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
<title>打灰机</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body id="container">
<audio id ="bombPlayer" src="http://7xv88e.com1.z0.glb.clouddn.com/greyPlanebomb.mp3" autostart=false></audio>
<audio id ="errorPlayer" src="http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneerror.mp3" autostart=false></audio>
<audio id ="backPlayer" src="http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneback.mp3" autoplay="autoplay" loop></audio>
<div id="record">
    <div id="scoreRecorder">score:0</div>
    <div id="levelRecorder">level:0</div>
</div>
<div id="bloods">
    <img id="blood1" src="http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneblood.png"/>
    <img id="blood2" src="http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneblood.png"/>
    <img id="blood3" src="http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneblood.png"/>
</div>

<div id="Introduction">
Click grey plane to get points</br>
add your blood by click pills</br>
  enjoy the game</br>
</div>
<div id="menu">
    <button id="beginGame">Begin</button>
</div>
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/19920612/grey-plane-BQvgPx */
*{
    padding:0;
    margin:0;
}
html{
    height:100%;
    overflow:hidden;
}
#container{
  height: 100%;
}
#scoreRecorder, #levelRecorder{
    color:white;
    font-size:2.5em;
}
body{
    background:url('http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneback.jpg') no-repeat;
    background-color:black;
}
.classPlane{
    position:absolute;
    display:none;    
    top:0;
}
#bombPlayer,#backPlayer,#errorPlayer{
    visibility:hidden;
    position:absolute;
}
#record{
    float:left;
}
#scoreRecorder,#levelRecorder{
    visibility:hidden;
}
#menu{   
    position:absolute;
    top:40%;
    width:100%;
    text-align:center;
    padding:20px 0px;
}
#bloods{
    visibility:hidden;
}
#bloods img{
    float:right;
    width:50px;
}
#Introduction{
    position:absolute;
    top:15%;
    width:100%;
    text-align:center;
    font-size:2.5em;
    color:white;
}
button{ 
    border-radius:50%;
    background-color: yellow; /* Green */
    border: 5px solid grey;
    color: black;
    padding:15px;
    margin:15px;
    height:150px;
    width:200px;
    text-align: center;
    text-decoration: none;
    font-size: 2em;
}
button:active{
    background-color: black;
    color:white;
}

/*Downloaded from https://www.codeseek.co/19920612/grey-plane-BQvgPx */
var planeGame = {};

function init(){
    planeGame.planeClassName = "classPlane";

    planeGame.bombControl = document.getElementById("bombPlayer");
    planeGame.errorControl = document.getElementById("errorPlayer");
    planeGame.backControl = document.getElementById("backPlayer");
    planeGame.scoreRecorder = document.getElementById("scoreRecorder");
    planeGame.levelRecorder = document.getElementById("levelRecorder");

    planeGame.bodySize = {};
    planeGame.bodySize.width = document.body.clientWidth;
    planeGame.bodySize.height = document.body.clientHeight;

    planeGame.planeArr = {};
    planeGame.bloodArr = {};
    planeGame.planeType = ["blue","green","orange","grey","grey","pill"];

    planeGame.gameLevel = 1;
    planeGame.gameScore = 0;
    planeGame.totalNum = 50;
    planeGame.planeWidthParam = 5;
    planeGame.LevelUpInterval = 10;
    planeGame.currentBloods = 3;
    planeGame.intervalId = -1;
    
    planeGame.backControl.volume = 0.1;
    planeGame.bombControl.volume = 0.5;
    planeGame.errorControl.volume = 0.5;

    planeGame.stopGame = function(){
        clearInterval(planeGame.intervalId);
        for(var i = 0 ; i < planeGame.totalNum ; ++i){
            planeGame.planeArr[i].stopfly();
        }
    }
    document.getElementById("beginGame").addEventListener("click", function(){    
        var orignCreateInterval = 500;
        
        planeGame.scoreRecorder.style.visibility = "visible";
        planeGame.levelRecorder.style.visibility = "visible";
        
        document.getElementById("bloods").style.visibility = "visible";    
        document.getElementById("beginGame").style.visibility = "hidden";
        document.getElementById("Introduction").style.visibility = "hidden";
       
        planeGame.intervalId = setInterval(function(){
            var r = Math.floor(Math.random() * planeGame.totalNum);
            if(planeGame.planeArr[r].descripType == "pill" && planeGame.currentBloods == 3)
                return;
            if(planeGame.planeArr[r].running != true)
                planeGame.planeArr[r].fly();
        },orignCreateInterval / planeGame.gameLevel);  
    });
}
window.onload = function(){ 
    init();
    for(var i = 0 ; i < planeGame.totalNum ; ++i){
        planeGame.planeArr[i] = new Plane(planeGame.planeType[Math.floor(Math.random() * planeGame.planeType.length)], planeGame);
        document.body.appendChild(planeGame.planeArr[i].element);
    }    
    for(var i = 1 ; i <= planeGame.currentBloods ; ++i){
        planeGame.bloodArr[i] = document.getElementById("blood"+i);
    }   
}

function GameDialog(point){
    var dialogHeight = 350;
    var dialogWidth = 400;

    this.divBackground = document.createElement("div");
    this.divDialog = document.createElement("div");    
    this.divHead = document.createElement("div");    
    this.divContent = document.createElement("div");    
    this.closeButton = document.createElement("img");
    //Add background of dialog
    this.divBackground.style.position = "absolute";
    this.divBackground.style.background = "#000000";
    this.divBackground.style.width = "100%";
    this.divBackground.style.height = "100%";
    this.divBackground.style.left = "0px";
    this.divBackground.style.top = "0px";
    this.divBackground.style.zIndex = "99";
    this.divBackground.style.opacity = "0.6";  
    //ceate dialog    
    this.divDialog.style.width = dialogWidth + "px";
    this.divDialog.style.height = dialogHeight + "px";        
    this.divDialog.style.position = "absolute";
    this.divDialog.style.border = "1px solid #C0D7FA";
    this.divDialog.style.borderRight = "2px outset #DEDEDE";
    this.divDialog.style.borderLeft = "2px outset #DEDEDE";
    this.divDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) + "px";
    this.divDialog.style.top = (document.body.scrollTop + (document.body.clientHeight / 2) - (dialogHeight / 2)) + "px";
    this.divDialog.style.zIndex = "100";
    //create head
    this.divHead.appendChild(document.createTextNode("Game Over"));
    this.divHead.style.width = "100%";
    this.divHead.style.height = "25px";
    this.divHead.style.lineHeight = "25px";
    this.divHead.style.fontSize = "14px";        
    this.divHead.style.fontWeight = "bold";
    this.divHead.style.borderBottom = "1px outset #8989FF";
    this.divHead.style.color = "white";
    this.divHead.style.textIndent = "10px";
    this.divHead.style.backgroundColor = "blue";    
    //create content
    this.divContent.style.padding = "15px";
    this.divContent.style.fontSize = "2.5em";
    this.divContent.style.height = parseInt(dialogHeight - 55) + "px";
    this.divContent.style.backgroundColor = "#ffffff";
    this.divContent.style.textAlign = "center";
    this.divContent.innerHTML = "Game over<br/>Record:"+ point + "<br />";    
    //create close button
    this.closeButton.style.cursor = "hand";
    this.closeButton.setAttribute("alt", "OK");
    this.closeButton.style.position = "absolute";
    this.closeButton.style.bottom = "10px";
    this.closeButton.style.width = "50%";
    this.closeButton.style.height = "20%";
    this.closeButton.style.left = "25%";
    this.closeButton.onclick = function() {
        location.replace(window.location.href + "?t=" + Math.random() * 10); 
    };
}
GameDialog.prototype.show = function(){
    document.body.appendChild(this.divBackground);
    this.divDialog.appendChild(this.divHead);
    this.divContent.appendChild(this.closeButton);
    this.divDialog.appendChild(this.divContent);
    this.divDialog.focus();       
    document.body.appendChild(this.divDialog);    
}

function Plane(descripType, gameController){
    this.gameController = gameController;
    this.descripType = descripType;    
    this.running = false;
    this.animationID = -1;  
    
    this.element = document.createElement("img");
    this.element.className = this.gameController.planeClassName;
    this.element.src = "http://7xv88e.com1.z0.glb.clouddn.com/greyPlane" + descripType + ".png";
    this.element.width = this.gameController.bodySize.width / this.gameController.planeWidthParam;    
    this.element.style.top = 0;
    this.element.style.left = Math.random() * Math.floor(parseInt(this.gameController.bodySize.width, 10) * (1 - 1.0 / this.gameController.planeWidthParam));
    this.element.style.zIndex = descripType == "grey" ? "70" : "1"; 

    var that = this;
    this.element.onclick = function(){
        if(that.descripType === "grey"){
            ++that.gameController.gameScore;                      
            if(that.gameController.gameScore % that.gameController.LevelUpInterval === 0){
                ++that.gameController.gameLevel;
                that.gameController.LevelUpInterval += that.gameController.gameLevel * 10;
            }
            that.gameController.bombControl.currentTime = 0;
            that.gameController.bombControl.play();
            that.gameController.scoreRecorder.innerHTML = "score:" + that.gameController.gameScore;
            that.gameController.levelRecorder.innerHTML = "level:" + that.gameController.gameLevel;
            that.stopfly();
        }
        else if(that.descripType == "pill"){
            that.gameController.bombControl.currentTime = 0;
            that.gameController.bombControl.play();
            if(parseInt(that.gameController.currentBloods, 10) < 3){
                ++that.gameController.currentBloods;
                that.gameController.bloodArr[that.gameController.currentBloods].src = "http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneblood.png";
            }
            that.stopfly();
        }
        else{   
            that.gameController.errorControl.currentTime = 0;
            that.gameController.errorControl.play();
            if(that.gameController.currentBloods == 0){
            (new GameDialog(that.gameController.gameScore)).show();
            that.gameController.stopGame(that.gameController.intervalId);
            }else{
                that.gameController.bloodArr[that.gameController.currentBloods].src = "http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneblooded.png";
                --that.gameController.currentBloods;
            }
        }
    };    
    return this;
}
Plane.prototype = {
    construcor: Plane,
    fly: function(){
        var updateSpeed = 1;
        this.running = true;
        this.element.style.display = "inline";     

        var that = this;
        var updatePosition = function(){
            var currentHeight = parseInt(that.element.style.top, 10);
            if(currentHeight < that.gameController.bodySize.height){ 
                that.element.style.top = (currentHeight + that.gameController.gameLevel) + "px";  
            }else{             
                that.stopfly();
                if(that.descripType == "grey"){ 
                    if(that.gameController.currentBloods == 0){
                        (new GameDialog(that.gameController.gameScore)).show();
                        that.gameController.stopGame(that.gameController.intervalId);
                    }
                    else{
                        that.gameController.bloodArr[that.gameController.currentBloods].src = "http://7xv88e.com1.z0.glb.clouddn.com/greyPlaneblood.png";
                        --that.gameController.currentBloods;
                    }
                }
            }   
        };        
        this.animationID = setInterval(updatePosition,updateSpeed);
    },
    stopfly: function(){
        clearInterval(this.animationID);
        this.running = false;
        this.element.style.top = 0;
        this.element.style.display = "none";
    }    
}

Comments