Native JS to implement the aircraft war game
|
This article example shares the specific code of JS to implement the aircraft war game for your reference. The specific content is as follows
<html>
<head>
<title> Aircraft Wars</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"Microsoft yahei"}
body{overflow:hidden;;}
</style>
</head>
<body>
<script>
window.onload = function(){
Game.exe();
};
var Game = {
//Start the program exe: function(){
document.body.style.background = '#fff';
var oDiv = document.createElement('div');
oDiv.id = 'GameBox';
oDiv.style.cssText = 'width:600px;height:500px;border:10px solid #999;margin:50px auto;font-family:"Microsoft yahei";text-align:center;position:relative;overflow:hidden;background:#fff';
document.body.appendChild(oDiv);
this.init();
},
score : 0 ,
ifEnd : false,
//initialization init: function(){
var This = this;
var oDiv = document.getElementById('GameBox');
oDiv.innerHTML = '';
Game.score = 0;
Game.ifEnd = false;
var oH = document.createElement('h1');
oH.innerHTML = 'Aircraft War v1.0';
oH.style.cssText = 'color:#555555;font-size:30px;padding-top:50px;';
oDiv.appendChild( oH );
for (var i=0;i<4;i++)
{
var oP = document.createElement('p');
oP.index = i;
oP.style.cssText = 'font-size:18px;color:white;width:180px;height:50px;margin:40px auto;text-align:center;background:#999;line-height:40px;font-family:"Microsoft yahei";font-weight:bold;cursor:pointer;'
var html = '';
oP.onmouseenter = function(){
this.style.background = '#ff9933';
this.style.color = '##ff6600'
};
oP.onmouseleave = function(){
this.style.background = '#999';
this.style.color = 'white'
};
oP.onclick = function( e ){
e = e || window.event;
This.start( this.index , oDiv , e );
};
switch( i ){
case 0:
html = 'Easy Difficulty';
break;
case 1:
html = 'Medium difficulty';
break;
case 2:
html = 'Difficulty';
break;
case 3:
html = 'Little genius possessed';
break;
}
oP.innerHTML = html;
oDiv.appendChild(oP);
};
},
//Start the game start: function(index, oGameBox, e){
oGameBox.innerHTML = '';
var oS = document.createElement('span');
oS.innerHTML = this.score;
oS.style.cssText = 'position:absolute;left:20px;top:20px;font-size:14px;color:black;';
oGameBox.appendChild( oS );
this.plane( oGameBox , e ,index );
this.enemy( oGameBox ,oS ,index );
},
//About the plane plane: function(oGameBox, e, index){
var x = e.pageX;
y = e.pageY;
var oPlane = new Image();
oPlane.src = 'images/plane.png';
oPlane.width = 60;
oPlane.height = 36;
oPlane.id = 'plane';
var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2;
var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
window.onresize = function(){
lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
};
var top = y- tY;
var left = x- lX;
oPlane.style.cssText = 'display:block;position:absolute;top:'+top+'px;left:'+left+'px;';
oGameBox.appendChild( oPlane );
var leftMin = - oPlane.width/2;
var leftMax = oGameBox.clientWidth - oPlane.width/2;
var topMin = 0;
var topMax = oGameBox.clientHeight - oPlane.height;
document.onmousemove = function(e){
if( !Game.ifEnd )
{
e = e || window.event;
var top = e.pageY -tY;
var left = e.pageX -lX;
top = Math.min( top , topMax ); //Take the smallest parameter if( top > topMax )top = topMax;
top = Math.max( top ,topMin );//Take the largest parameter left = Math.min( left , leftMax );//Take the smallest parameter if( top > topMax )top = topMax;
left = Math.max( left ,leftMin );
oPlane.style.left = left + 'px';
oPlane.style.top = top + 'px';
}
};
this.biu( oPlane , oGameBox ,index );
},
biu : function( oPlane , oGameBox ,index ){
var speed ;
switch ( index )
{
case 0:
speed = 30;
break;
case 1:
speed = 40;
break;
case 2:
speed = 50;
break;
case 3:
speed = 10;
break;
}
this.BiuTimer = setInterval(function(){
var oBiu = new Image();
oBiu.src = 'images/bullet.png';
oBiu.width = 6;
oBiu.height = 22;
oBiu.className = 'bullet';
var top = oPlane.offsetTop - oBiu.height + 3;
var left = oPlane.offsetLeft + oPlane.width/2 - oBiu.width/2;
oBiu.style.cssText = 'position:absolute;top:'+top+'px;left:'+left+'px;';
oGameBox.appendChild( oBiu );
oBiu.timer = setInterval( function(){
if( !oBiu.parentNode){
clearInterval( oBiu.timer );
}
oBiu.style.top = oBiu.offsetTop - 10 + 'px';
if( oBiu.offsetTop < -oBiu.height ){
clearInterval( oBiu.timer );
oBiu.parentNode.removeChild( oBiu );
}
}, 13 );
} ,speed );
},
enemy : function( oGameBox , oS , index ){
var a , x;
switch ( index )
{
case 0:
a = 1;
x = 500;
break;
case 1:
a = 2;
x = 300;
break;
case 2:
a = 3;
x = 200;
break;
case 3:
a = 5;
x = 100;
break;
}
this.EnemyTimer = setInterval( function(){
var oEnemy = new Image();
oEnemy.src = 'images/enemy.png';
oEnemy.width = 23;
oEnemy.height = 30;
var lMin = 0;
var lMax = oGameBox.clientWidth - oEnemy.width;
var left = Math.random()*(lMax-lMin) + lMin;
oEnemy.style.cssText = 'position:absolute;top: -'+(-oEnemy.height)+'px; left:'+left+'px;';
oGameBox.appendChild( oEnemy );
var b = Math.random() * a + 1;
oEnemy.timer = setInterval(function(){
oEnemy.style.top = oEnemy.offsetTop + b + 'px'; //Enemy's falling speed if( oEnemy.offsetTop >= oGameBox.clientHeight ){
clearInterval( oEnemy.timer );
oEnemy.parentNode.removeChild( oEnemy );
}
},13);
//Collision monitoring with bullets var allBiu = Game.getClass('bullet');
oEnemy.pzBiu = setInterval(function(){
for(var i = 0;i < allBiu.length;i++)
{
if( Game.boom( oEnemy ,allBiu[i]))
{
Game.score++;
oS.innerHTML = Game.score;
oEnemy.src = 'images/boom.png';
clearInterval( oEnemy.pzBiu );
clearInterval( oEnemy.pzPlane );
allBiu[i].parentNode.removeChild( allBiu[i] );
setTimeout(function(){
if( oEnemy.parentNode ){
oEnemy.parentNode.removeChild( oEnemy );
};
},300);
break;
}
}
},50);
//Collision monitoring with fighter planes var oPlane = document.getElementById('plane');
oEnemy.pzPlane = setInterval(function(){
if( Game.ifEnd ){
clearInterval( oEnemy.pzPlane);
}
if( Game.boom( oEnemy , oPlane ))
{
Game.ifEnd = true;
clearInterval( oEnemy.pzPlane);
clearInterval( Game.BiuTimer);
clearInterval( Game.EnemyTimer);
oEnemy.src = 'images/boom.png';
oPlane.src = 'images/boom2.png';
setTimeout(function(){
Game.over( oGameBox );
},300);
}
},50);
}, x); //Enemy generation speed},
//Collision detection boom: function(obj1, obj2){
var T1 = obj1.offsetTop;
var B1 = T1 + obj1.clientHeight;
var L1 = obj1.offsetLeft;
var R1 = L1 + obj1.clientWidth;
var T2 = obj2.offsetTop;
var B2 = T2 + obj2.clientHeight;
var L2 = obj2.offsetLeft;
var R2 = L2 + obj2.clientWidth;
if ( R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1 )
{
return false; // No collision}
else
{
return true; // hit }
},
//Game over over : function ( oGameBox ) {
oGameBox.innerHTML = '';
var oDiv = document.createElement('div');
oDiv.style.cssText = 'width:300px;height:200px;margin:100px auto;background:#e0e0e0;border:5px solid #858585';
var oT = document.createElement('h3');
oT.innerHTML = 'Game Over';
oT.style.cssText = 'padding-top:50px;font-size:25px;';
var oP1 = document.createElement('p');
oP1.innerHTML = 'Your score is:' + '<span style="color:#ffffff;font-weight:bold;">' + this.score + '</span>';
oP1.style.cssText = 'font-size:16px;color:#fff;';
var oRestart = document.createElement('div');
oRestart.style.cssText = 'width:100px;height:40px;font-size:14px;text-align:center;line-height:40px;color:white;background:#999;margin:20px auto;cursor:pointer;';
oRestart.innerHTML = 'Restart';
oRestart.onclick = function(){
Game.init();
};
oDiv.appendChild( oT );
oDiv.appendChild( oP1 );
oDiv.appendChild( oRestart );
oGameBox.appendChild( oDiv );
},
//getclass method getClass : function( cName , parent ) {
parent = parent || document;
if( document.getElementsByClassName ){
return parent.getElementsByClassName(cName);
}
else
{
var all = parent.getElementsByTagName('*');
var arr = [];
for( var i = 0;i<all.length;i++ )
{
var arrClass = all.className.split(' ');
for( var j = 0; j < arrClass.length; j++ ){
if(arrClass[j] == cName)
{
arr.push( all[i]);
break;
}
}
}
return arr;
}
},
};
</script>
</body>
</html>Rendering
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to implement Docker Registry to build a private image warehouse
>>: The architecture and practice of synchronizing Meituan DB data to the data warehouse
Recommend
Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)
Preface The Windows system that can be activated ...
HTML insert image example (html add image)
Inserting images into HTML requires HTML tags to ...
mysql trigger creation and usage examples
Table of contents What is a trigger Create a trig...
Solution to prevent caching in pages
Solution: Add the following code in <head>: ...
CentOS configures local yum source/Alibaba Cloud yum source/163yuan source and configures the priority of yum source
1. Use Centos image to build local yum source Sin...
A brief introduction to the simple use of CentOS7 firewall and open ports
Overview (official has more detailed description)...
Docker-compose creates a bridge, adds a subnet, and deletes a network card
1. Create a docker network card [root@i ~]# brctl...
MySQL 8.0.24 installation and configuration method graphic tutorial
This article shares the installation tutorial of ...
Detailed explanation of the execution order of JavaScript Alert function
Table of contents question analyze solve Replace ...
Possible reasons why the input type="reset" tag in HTML is invalid (does not work).
When using the <html:reset> tag, sometimes w...
Two ways to visualize ClickHouse data using Apache Superset
Apache Superset is a powerful BI tool that provid...
jQuery implements time selector
This article example shares the specific code of ...
In-depth exploration of whether Mysql fuzzy query is case-sensitive
Preface Recently, I have been busy writing a smal...
Personal opinion: Talk about design
<br />Choose the most practical one to talk ...
Some indicators of excellent web front-end design
The accessibility of web pages seems to be somethi...