刚学玩原生JS,自己写了一个小游戏，希望在以后能不断地进步加以改善
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了刚学玩原生JS,自己写了一个小游戏，希望在以后能不断地进步加以改善相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒险岛</title>
</head>
<style type="text/css">
body{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
#game{
width: 1200px;
height:580px;
/*border:1px solid red;*/
margin:20px auto;
background:url("sucai/readyBg.jpg") repeat-x ;
background-position: 0 0;
background-size: 1300px 700px ;
overflow: hidden;
position: relative;
}
#anniu{
width: 300px;
height:400px;
/*border:1px solid red;*/
float: left;
margin:80px 60px;
background-color: rgba(29,157,254,0.4);
}
#anniu p{
font-size: 36px;
color:blueviolet;
width: 150px;
border:1px solid #88d0f1;
margin: auto;
margin-top: 40px;
border-radius: 3px;
}
#anniu p:hover{
color: deeppink;
cursor: pointer;
}
#xueliang{
width: 350px;
height:100px;
position: absolute;
top:5px;
left:85px;
z-index: 2;
display: none;
}
#xue{
width: 400px;
height:150px;
}
#xueliang div{
width: 35px;
height:6px;
/*border:1px solid red;*/
position: absolute;
}
#xue1{
left:120px;
top:57px;
background-color: #ff8c19;
}
#xue2{
left:170px;
top:57px;
background-color: #ff8c19;
}
#xue3{
left:240px;
top:57px;
background-color: #ff8c19;
}
#xue4{
left:290px;
top:57px;
background-color: #ff8c19;
}
#lan1{
left:125px;
top:81px;
background-color: #21add1;
}
#lan2{
left:171px;
top:81px;
background-color: #21add1;
}
#lan3{
left:238px;
top:81px;
background-color: #21add1;
}
#lan4{
left:284px;
top:81px;
background-color: #21add1;
}
#exp1{
left:140px;
top:104px;
background-color: #ffe695;
display: none;
}
#exp2{
left:200px;
top:104px;
background-color: #ffe695;
display: none;
}
#exp3{
left:260px;
top:104px;
background-color: #ffe695;
display: none;
}
#zhuangtai{
width: 50px;
height: 50px;
position: absolute;
top:18px;
left:22px;
}
#zhuangtai img{
width: 85px;
height: 85px;
}
#jifen{
width:220px;
height:250px;
/*border:1px solid red;*/
margin:auto;
position:absolute ;
top:200px;
left:530px;
z-index: 3;
display: none;
}
#jifen p{
/*border:1px solid red;*/
position: relative;
font-size: 23px;
top:-240px;
left:30px;
width: 180px;
}
#jifen span{
color:red;
}
#playfenshu{
width: 139px;
height:50px;
/*border:1px solid red;*/
position: absolute;
z-index: 3;
right:100px;
top:30px;
display: none;
}
#playfenshu p{
position: relative;
color:red;
font-size: 14px;
top:-40px;
left:35px;
}
#gk{
position: absolute;
top: 92px;
left:97px;
z-index: 3;
width: 30px;
height:30px;
}
#dazhao{
position: absolute;
top:12px;
left:75px;
z-index: 3;
display: none;
}
#Pause{
width: 55px;
height: 55px;
position: absolute;
top:30px;
left:700px;
z-index: 3;
display: none;
cursor: pointer;
}
#pauseoff{
width: 200px;
height:130px;
/*border:1px solid red;*/
position: absolute;
top:250px;
left:600px;
z-index: 3;
display: none;
}
#pauseoff button{
width: 200px;
height:30px;
border:none;
background-color: #df5f14;
margin-top: 5px;
border-radius: 5px;
color: white;
}
#pauseoff button:hover{
background-color: #fcdb6a;
color:#df5f14;
}
#bj{
/*width: 0;*/
/*height: 0;*/
/*border:1px solid red;*/
margin-left: 700px;
margin-top: 22px;
}
#bk{
display: none;
width: 0;
height: 0;
border:1px solid red;
}
#kill{
display: none;
width: 0;
height: 0;
border:1px solid red;
}
#biu{
display: none;
width: 0;
height: 0;
border:1px solid red;
}
#next{
margin-left: 70px;
cursor: pointer;
}
#guize{
width: 500px;
height:430px;
margin-left: 500px;
margin-top: 60px;
background-color: lightblue;
box-shadow: 2px 4px 5px ;
position: relative;
display: none;
}
#guize p:nth-of-type(1){
font-size: 18px;
color:chocolate;
line-height:60px;
margin-left: 20px;
}
#guize p:nth-of-type(2){
font-size: 18px;
color:darkorchid;
line-height:25px;
margin-left: 20px;
}
#guize p:nth-of-type(3){
font-size: 18px;
color:hotpink;
line-height:25px;
margin-left: 20px;
}
#guize p:nth-of-type(4){
font-size: 18px;
color:lightseagreen;
line-height:25px;
margin-left: 20px;
}
#guize p:nth-of-type(5){
font-size: 18px;
color:fuchsia;
line-height:25px;
margin-left: 20px;
}
#guize p:nth-of-type(6){
font-size: 22px;
position: absolute;
right: 5px;
top: -20px;
cursor: pointer;
}
#guize p:nth-of-type(6):hover{
color: red;
}
#shuoming{
width: 600px;
height:200px;
margin-left:400px;
margin-top:180px;
background-color:#ffd9cc;
border:1px solid #ffd9cc;
border-radius: 5px;
box-shadow: 2px 2px 2px ;
display: none;
}
#shuoming p{
font-size: 18px;
color:orchid;
margin-top: 30px;
}
#shuoming p:nth-of-type(2){
margin-left: 250px;
}
#shuoming p:nth-of-type(3){
width:76px;
height:30px;
background-color: lightcoral;
color: #090909;
border-radius: 3px;
margin-left: 250px;
cursor: pointer;
}
#shuoming p:nth-of-type(3):hover{
background-color:#30363a;
color: chocolate;
}
</style>
<body>
<div id="pauseoff">
<button id="start" onclick="continuestart()">开始游戏</button>
<br/>
<button id="outgame" onclick="outgame()">退出游戏</button>
<br/>
<button id="alloutgame" onclick="alloutgame()">结束游戏</button>
</div>
<img src="sucai/ui/Pause.png" id="Pause" onclick="pause()"/>
<img src="sucai/skill.gif" id="dazhao"/>
<div id="playfenshu">
<img src="sucai/ui/RunnerGame.gif" alt="fen"/>
<p>当前分数：<span id="thisfenshu"></span></p>
</div>
<div id="xueliang">
<img src="sucai/ui/1.png" alt="xue" id="xue"/>
<img src="sucai/num/1.gif" id="gk"/>
<div id="zhuangtai">
<img src="sucai/dragon/small/move.gif" alt="zt" id="zt" />
</div>
<div id="xue1"></div>
<div id="xue2"></div>
<div id="xue3"></div>
<div id="xue4"></div>
<div id="lan1"></div>
<div id="lan2"></div>
<div id="lan3"></div>
<div id="lan4"></div>
<div id="exp1"></div>
<div id="exp2"></div>
<div id="exp3"></div>
</div>
<div id="jifen">
<img src="sucai/ui/tipBg.png" />
<img src="sucai/ui/tipY.gif" alt=" " id="next" onclick="outgame()"/>
<p id="guanka">当前的关卡：<span id="thisgk"></span></p>
<p id="fenshu">您的分数：<span id="thiszf"></span></p>
<p id="pingjia">评价：<span id =thispj></span></p>
</div>
<div id="game">
<audio src="sucai/help/21.mp3" id="bj" controls autoplay loop></audio>
<embed src="sucai/help/13.mp3" id="bk">
<audio src="sucai/help/27.mp3" id="kill"></audio>
<audio src="sucai/help/17.mp3" id="biu"></audio>
<audio src="sucai/help/2314.mp3" id="bianshen" ></audio>
<div id="anniu">
<p onclick="gamestart()">开始游戏</p>
<p onclick="guize()">游戏规则</p>
<p onclick="alloutgame()">结束游戏</p>
<p onclick="shuoming()">游戏申明</p>
</div>
<div id="guize">
<p>欢迎进入守卫冒险岛，一起来守卫我们的王国吧。</p>
<p>1.点击“开始游戏”你就可以进入到我们的王国中了，我们的王国正在被攻击，让我们一起来守卫它吧，战斗吧！英雄！</p>
<p>2.按下键盘的<span><img src="sucai/help/Help.png" alt="h"/></span>你就可以操控英雄。</p>
<p>3.按下键盘的 <span><img src="sucai/help/Help1.png" alt="l"/></span>你就可以攻击怪物。</p>
<p>4.按下键盘的 <span><img src="sucai/help/Help2.png" alt="l"/></span>你就可以开启大招。</p>
<p onclick="qxguize()">X</p>
</div>
<div id="shuoming">
<p>本游戏由国信安 131部 项目4组 赵宇翔 个人制作，其他人不得抄袭。</p>
<p>谢谢合作。</p>
<p onclick="qxshuoming()">关闭说明</p>
</div>
</div>
<script src="maoxiandao.js" charset="utf-8"></script>
<script type="text/javascript">
//设置游戏开始之前的动态效果
/*setInterval(readbgmove,200);*/
//1.返回id节点的一个函数
function $(id){
return document.getElementById(id);
}
//规则显示
function guize(){
$("guize").style.display="block";
}
//规则隐藏
function qxguize(){
$("guize").style.display="none";
}
//说明显示
function shuoming(){
$("shuoming").style.display="block";
}
//说明隐藏
function qxshuoming(){
$("shuoming").style.display="none";
}
var timos=$("kill");
var biubiu=$("biu");
var bs=$("bianshen")
/**
* 下面放的是各种数组
*/
var guaiwu1arr=[];
var guaiwu2arr=[];
var guaiwu3arr=[];
var guaiwubossarr=[];
var play1zidanarr=[];
//下面是各种需要的全局变量
var play1;
var play1zidan;
var blooul;
var lefttn=false;
var toptn=false;
var bottomtn=false;
var righttn=false;
var shoolt=false;
var thisfenshu=0;
var guanka=1;
var pj="c";
var lanliang=4;
var dazhaoj
//这里放的使各种定时器的变量
var greatguiwu1,moveguaiwu1d,greatguaiwu2,moveguaiwu2d,greatguaiwu3,moveguaiwu3d,greatguaiwuboss,moveguaiwubossd,moveplay1d;
var moveplay1zidand,moveshooltd,movebloould,zidanpengzhuangd,shoushid,play1pengzhuangd,playdeadd,xiaguand,xuetiaod,bianshend;
var lanliangd
function gamestart(){
//加载进入游戏界面
$("pauseoff").style.display="none";
$("dazhao").style.display="none";
$("game").style.backgroundImage="url(sucai/bg.jpg)";
$("anniu").style.display="none";
$("xueliang").style.display="block"
$("playfenshu").style.display="block";
$("Pause").style.display="block";
$("bk").style.display="block";
$("thisfenshu").innerText=thisfenshu;
greatguiwu1=setInterval(grearguaiwu1,2000);//创建怪物1
moveguaiwu1d=setInterval(moveguaiwu1,50);//怪物一的移动方法
greatguaiwu3=setInterval(grearguaiwu3,3000);//创建怪物3
moveguaiwu3d=setInterval(moveguaiwu3,60);//怪物3的移动
moveplay1d=setInterval(moveplay1,10);//玩家移动
moveplay1zidand=setInterval(moveplay1zidan,10);//玩家子弹的移动
moveshooltd=setInterval(moveshoolt,100);//玩家移动发射
movebloould=setInterval(moveblooul,10);//玩家血条移动
zidanpengzhuangd=setInterval(zidanpengzhuang,10);//子弹和怪物的碰撞
shoushid=setInterval(shoushi,600);//收集尸体
play1pengzhuangd=setInterval(playpengzhuang,600);//玩家和怪物的碰撞
playdeadd=setInterval(playdead,100);//玩家是否死亡
xiaguand=setInterval(xiaguan,10000);//检测是否进行下一关
xuetiaod=setInterval(xuetiao,1000);//检测玩家的血量是否减少
bianshend=setInterval(srcb,600)//检测玩家积分进行变身
// 这里放的是大BOSS的定时器 等需要的时候调用
// greatguiwuboss=setInterval(grearguaiwuboss,1000);
// moveguaiwubossd=setInterval(moveguaiwuboss,60);
greatplay1();//创建玩家到游戏
playblooul();//创建玩家血条到游戏
}
function gameover(){
window.clearInterval(greatguiwu1);
window.clearInterval(movebloould);
window.clearInterval(moveguaiwu1d);
window.clearInterval(greatguaiwu2);
window.clearInterval(moveguaiwu2d);
window.clearInterval(greatguaiwu3);
window.clearInterval(moveguaiwu3d);
window.clearInterval(moveplay1d);
window.clearInterval(moveplay1zidand);
window.clearInterval(zidanpengzhuangd);
window.clearInterval(shoushid);
window.clearInterval(play1pengzhuangd);
window.clearInterval(playdeadd);
window.clearInterval(greatguaiwuboss);
window.clearInterval(moveguaiwubossd);
window.clearInterval(xiaguand);
}
//创建第一种怪物到加载后的页面上
function grearguaiwu1(){
var y = parseInt(Math.random() * 521);
var gauiwu1=new gauiwu1prototype("sucai/enemy/plane/move.gif",0,y,3,2,59,41);
guaiwu1arr.push(gauiwu1);
}
//让第一种怪物在网页中移动起来
function moveguaiwu1(){
for(var i=0;i<guaiwu1arr.length;i++){
if(parseInt(guaiwu1arr[i].imgNode.style.right)>1100){
game.removeChild(guaiwu1arr[i].imgNode);
guaiwu1arr.splice(i,1);
i--;
}else{
guaiwu1arr[i].move();
}
}
}
//创建第二种怪物到加载后的页面上
function grearguaiwu2(){
var y = parseInt(Math.random() * 521);
var gauiwu2=new gauiwu1prototype("sucai/enemy/ghost/move.gif",0,y,2,5);
guaiwu2arr.push(gauiwu2);
}
//让第二种怪物在网页中移动起来
function moveguaiwu2(){
for(var i=0;i<guaiwu2arr.length;i++){
if(parseInt(guaiwu2arr[i].imgNode.style.right)>1100){
game.removeChild(guaiwu2arr[i].imgNode);
guaiwu2arr.splice(i,1);
i--;
}else{
guaiwu2arr[i].move();
}
}
}
//创建第三种怪物到加载后的页面上
function grearguaiwu3(){
var y = parseInt(Math.random() * 561);
var gauiwu3=new gauiwu1prototype("sucai/enemy/bird/move.gif",0,y,3,2);
guaiwu3arr.push(gauiwu3);
}
//让第三种怪物在网页中移动起来
function moveguaiwu3(){
for(var i=0;i<guaiwu3arr.length;i++){
if(parseInt(guaiwu3arr[i].imgNode.style.right)>1100){
game.removeChild(guaiwu3arr[i].imgNode);
guaiwu3arr.splice(i,1);
i--;
}else{
guaiwu3arr[i].move();
}
}
}
//创建怪物boss到加载后的页面上
function grearguaiwuboss(){
var y = parseInt(Math.random() * 580);
var gauiwuboss=new gauiwu1prototype("sucai/enemy/boss/move.gif",0,y,1,15);
guaiwubossarr.push(gauiwuboss);
}
//让第怪物boss在网页中移动起来
function moveguaiwuboss(){
for(var i=0;i<guaiwubossarr.length;i++){
if(parseInt(guaiwubossarr[i].imgNode.style.right)>1100){
game.removeChild(guaiwubossarr[i].imgNode);
guaiwubossarr.splice(i,1);
i--;
}else{
guaiwubossarr[i].move();
}
}
}
//创建玩家到加载后的页面上
function greatplay1(){
play1=new play1prototype("sucai/dragon/small/move.gif",1100,280,5,7,57,52);
}
//让玩家在网页中移动起来1.监听网页的按键
//玩家按下按键时的监听与判断
document.body.onkeydown=function() {
var e = window.event || arguments[0];
// console.log(e.keyCode);
if (e.keyCode == 37) {
lefttn = true;
}
if (e.keyCode == 38) {
toptn = true;
}
if (e.keyCode == 39) {
righttn = true;
}
if (e.keyCode == 40) {
bottomtn = true;
}
if (e.keyCode == 32) {
shoolt = true;
biubiu.currentTime = 0;
biubiu.play();
play1.shoolt();
if(thisfenshu<30){
play1.imgNode.src="sucai/dragon/small/magicmissile.gif";
}
if(thisfenshu>30){
play1.imgNode.src="sucai/dragon/middle/magicmissile.gif";
}
if(thisfenshu>100){
play1.imgNode.src="sucai/dragon/large/magicmissile.gif";
}
if(thisfenshu>150){
play1.imgNode.src="sucai/dragon/big/magicmissile.gif";
}
}
//玩家按下大招并判断蓝量的多少，
if(e.keyCode==13){
lanliang-=1;
dazhaoj();
if(lanliang==3){
$("lan4").style.display="none";
}
if(lanliang==2){
$("lan3").style.display="none";
}
if(lanliang==1){
$("lan2").style.display="none";
}
if(lanliang==0){
$("lan1").style.display="none";
}
if(lanliang<0){
$("dazhao").src="";
$("game").removeChild("kill");
}
timos.currentTime = 0;
timos.play();
}
}
//玩家松开按键时的监听与判断
document.body.onkeyup = function () {
var e = window.event || arguments[0];
// console.log(e.keyCode);
if (e.keyCode == 37) {
lefttn = false;
}
if (e.keyCode == 38) {
toptn = false;
}
if (e.keyCode == 39) {
righttn = false;
}
if (e.keyCode == 40) {
bottomtn = false;
}
if(e.keyCode==32){
shoolt = false;
setTimeout(srcb,500)
}
}
//玩家发射子弹变身的函数
function srcb(){
if(thisfenshu<30){
play1.imgNode.src="sucai/dragon/small/move.gif";
$("zt").src="sucai/dragon/small/move.gif";
for(var i=0;i<play1zidanarr.length;i++){
play1zidanarr[i].imgNode.src="sucai/dragon/small/att.gif"
}
}
if(thisfenshu>30){
play1.imgNode.src="sucai/dragon/middle/move.gif";
$("zt").src="sucai/dragon/middle/move.gif";
for(var i=0;i<play1zidanarr.length;i++){
play1zidanarr[i].imgNode.src="sucai/dragon/middle/att.gif"
}
// bianshen.shoolt();
// bianshen.play();
}
if(thisfenshu>100){
play1.imgNode.src="sucai/dragon/large/move.gif";
$("zt").src="sucai/dragon/large/move.gif";
for(var i=0;i<play1zidanarr.length;i++){
play1zidanarr[i].imgNode.src="sucai/dragon/large/att.gif"
}
}
if(thisfenshu>150){
play1.imgNode.src="sucai/dragon/big/move.gif";
$("zt").src="sucai/dragon/big/move.gif";
}
}
// 给玩家添加按下移动按键后玩家的移动方法
function moveplay1() {
if (lefttn) {
play1.moveleft();
}
if (toptn) {
play1.movetop();
}
if (righttn) {
play1.moveright();
}
if (bottomtn) {
play1.movebottom();
}
}
//子弹移动的方法
function moveplay1zidan(){
for(var i= 0;i<play1zidanarr.length;i++){
if(parseInt(play1zidanarr[i].imgNode.style.right)<0){
$("game").removeChild(play1zidanarr[i].imgNode);
play1zidanarr.splice(i,1);
i--;
}else{
play1zidanarr[i].move();
}
}
}
//飞机在移动时发射子弹的方法
function moveshoolt(){
if(shoolt==true){
play1.shoolt();
biubiu.play();
}
}
//给玩家创建一个显示头部的血条
function playblooul(){
var x=1105;
var y=270;
blooul=new playbloouprototype("sucai/ui/boom/boom7.png",x,y,5);
}
//给玩家的血条添加移动的方法
function moveblooul(){
if (lefttn) {
blooul.moveleft();
}
if (toptn) {
blooul.movetop();
}
if (righttn) {
blooul.moveright();
}
if (bottomtn) {
blooul.movebottom();
}
}
function zidanpengzhuang(){
var play1zidanright,play1zidantop,guaiwu1right,guaiwu1top,guaiwu2right,guaiwu2top;
var guaiwu3right,guaiwu3top,bossarrright,bossarrtop,play1right,play1top;
play1right=parseInt(play1.imgNode.style.right);
play1top=parseInt(play1.imgNode.style.top);
for(var i=0;i<play1zidanarr.length;i++){
play1zidanright=parseInt(play1zidanarr[i].imgNode.style.right);
play1zidantop=parseInt(play1zidanarr[i].imgNode.style.top);
for(var j=0;j<guaiwu1arr.length;j++){
guaiwu1right=parseInt(guaiwu1arr[j].imgNode.style.right);
guaiwu1top=parseInt(guaiwu1arr[j].imgNode.style.top);
if(guaiwu1arr[j].isdead==false){
if(play1zidanright+30<=guaiwu1right+59&&play1zidanright>=guaiwu1right&&play1zidantop+21>=guaiwu1top&&play1zidantop+21<=guaiwu1top+62){
$("game").removeChild(play1zidanarr[i].imgNode);
play1zidanarr.splice(i,1);
i--;
guaiwu1arr[j].bloou-=1;
if(guaiwu1arr[j].bloou<0){
thisfenshu+=1;
guaiwu1arr[j].isdead=true;
guaiwu1arr[j].imgNode.src="sucai/enemy/plane/die.gif"
}
}
}
for(var n= 0;n<guaiwu3arr.length;n++){
guaiwu3right=parseInt(guaiwu3arr[n].imgNode.style.right);
guaiwu3top=parseInt(guaiwu3arr[n].imgNode.style.top);
if(guaiwu3arr[n].isdead==false){
if(play1zidanright+30<=guaiwu3right+59&&play1zidanright>=guaiwu3right&&play1zidantop+21>=guaiwu3top&&play1zidantop+21<=guaiwu3top+62){
$("game").removeChild(play1zidanarr[i].imgNode);
play1zidanarr.splice(i,1);
i--;
guaiwu3arr[n].bloou-=1;
if(guaiwu3arr[n].bloou<0){
thisfenshu+=3;
guaiwu3arr[n].isdead=true;
guaiwu3arr[n].imgNode.src="sucai/enemy/bird/die.gif"
}
}
}
for(var k=0;k<guaiwu2arr.length;k++){
guaiwu2right=parseInt(guaiwu2arr[k].imgNode.style.right);
guaiwu2top=parseInt(guaiwu2arr[k].imgNode.style.top);
if(guaiwu2arr[k].isdead==false){
if(play1zidanright+30<=guaiwu2right+59&&play1zidanright>=guaiwu2right&&play1zidantop+21>=guaiwu2top&&play1zidantop+21<=guaiwu2top+62){
$("game").removeChild(play1zidanarr[i].imgNode);
play1zidanarr.splice(i,1);
i--;
guaiwu2arr[k].bloou-=1;
if(guaiwu2arr[k].bloou<0){
thisfenshu+=5;
guaiwu2arr[k].isdead=true;
guaiwu2arr[k].imgNode.src="sucai/enemy/ghost/die.gif"
}
}
}
for(var m= 0;m<guaiwubossarr.length;m++){
bossarrright=parseInt(guaiwubossarr[m].imgNode.style.right);
bossarrtop=parseInt(guaiwubossarr[m].imgNode.style.top);
if(guaiwubossarr[m].isdead==false){
if(play1zidanright+30<=bossarrright+59&&play1zidanright>=bossarrright&&play1zidantop+21>=bossarrtop&&play1zidantop+21<=bossarrtop+62){
$("game").removeChild(play1zidanarr[i].imgNode);
play1zidanarr.splice(i,1);
i--;
guaiwubossarr[m].bloou-=1;
if(guaiwubossarr[m].bloou<0){
thisfenshu+=10;
guaiwubossarr[m].isdead=true;
guaiwubossarr[m].imgNode.src="sucai/enemy/boss/die.gif"
}
}
}
}
}
}
}
}
}
/**
* 玩家和怪物的碰撞事件
* 判断玩家本身是否和怪物碰撞，如果发生碰撞，怪物死亡，玩家血量-1；
*/
function playpengzhuang(){
var guaiwu1right,guaiwu1top,guaiwu2right,guaiwu2top;
var guaiwu3right,guaiwu3top,bossarrright,bossarrtop,play1right,play1top;
play1right=parseInt(play1.imgNode.style.right);
play1top=parseInt(play1.imgNode.style.top);
for(var j=0;j<guaiwu1arr.length;j++){
guaiwu1right=parseInt(guaiwu1arr[j].imgNode.style.right);
guaiwu1top=parseInt(guaiwu1arr[j].imgNode.style.top);
if(play1.isdead==false){
if(play1right>guaiwu1right&&play1right-118<guaiwu1right-59&&play1top>=guaiwu1top-52&&play1top+52<=guaiwu1top+93){
play1.bloou-=1;
guaiwu1arr[j].isdead=true;
if(guaiwu1arr[j].isdead==true){
play1.bloou=play1.bloou;
console.log(play1.bloou)
guaiwu1arr[j].imgNode.src="sucai/enemy/plane/die.gif";
}
}
}
}
for(var n= 0;n<guaiwu3arr.length;n++){
guaiwu3right=parseInt(guaiwu3arr[n].imgNode.style.right);
guaiwu3top=parseInt(guaiwu3arr[n].imgNode.style.top);
if(play1.isdead==false){
if(play1right>guaiwu3right&&play1right-118<guaiwu3right-59&&play1top>=guaiwu3top-52&&play1top+52<=guaiwu3top+93){
play1.bloou-=1;
guaiwu3arr[n].isdead=true;
if(guaiwu3arr[n].isdead==true){
play1.bloou=play1.bloou;
console.log(play1.bloou)
guaiwu3arr[n].imgNode.src="sucai/enemy/bird/die.gif";
}
}
}
}
for(var k=0;k<guaiwu2arr.length;k++){
guaiwu2right=parseInt(guaiwu2arr[k].imgNode.style.right);
guaiwu2top=parseInt(guaiwu2arr[k].imgNode.style.top);
if(play1.isdead==false){
if(play1right>guaiwu2right&&play1right-118<guaiwu2right-59&&play1top>=guaiwu2top-52&&play1top+52<=guaiwu2top+93){
play1.bloou-=1;
guaiwu2arr[k].isdead=true;
if(guaiwu2arr[k].isdead==true){
play1.bloou=play1.bloou;
console.log(play1.bloou)
guaiwu2arr[k].imgNode.src="sucai/enemy/ghost/die.gif";
}
}
}
}
for(var m= 0;m<guaiwubossarr.length;m++){
bossarrright=parseInt(guaiwubossarr[m].imgNode.style.right);
bossarrtop=parseInt(guaiwubossarr[m].imgNode.style.top);
if(play1.isdead==false){
if(play1right>bossarrright&&play1right-118<bossarrright-59&&play1top>=bossarrtop-52&&play1top+52<=bossarrtop+93){
play1.bloou-=1;
guaiwu2arr[k].isdead=true;
if(guaiwu2arr[k].isdead==true){
play1.bloou=play1.bloou;
console.log(play1.bloou)
guaiwu2arr[k].imgNode.src="sucai/enemy/ghost/die.gif";
}
}
}
}
}
//判断玩家血量是否小于0，如果小于1 收掉所有尸体
function playdead(){
if(play1.bloou<1){
for(var j=0;j<guaiwu1arr.length;j++){
if(guaiwu1arr[j].isdead==false){
guaiwu1arr[j].isdead=true;
}
}
for(var n= 0;n<guaiwu3arr.length;n++){
if( guaiwu3arr[n].isdead==false){
guaiwu3arr[n].isdead=true;
}
}
for(var k=0;k<guaiwu2arr.length;k++){
if( guaiwu2arr[k].isdead==false){
guaiwu2arr[k].isdead=true;
}
}
for(var m= 0;m<guaiwubossarr.length;m++){
if( guaiwubossarr[m].isdead==false)
guaiwubossarr[m].isdead=true;
}
play1.imgNode.src="sucai/dragon/small/hit.gif";
play1.isdead=true;
$("game").innerHTML="" ;
gameover();
$("jifen").style.display="block";
$("thiszf").innerText=thisfenshu;
$("thisgk").innerText=guanka;
$("thispj").innerText=pj;
var shiti=$("game").getElementsByTagName("img");
for(var i=0;i<shiti.length;i++){
$("game").removeChild(shiti[i]);
}
}
}
//判断当怪物死后收掉怪物的尸体
function shoushi(){
for(var i=0;i<guaiwu1arr.length;i++){
if(guaiwu1arr[i].isdead==true){
$("game").removeChild(guaiwu1arr[i].imgNode);
guaiwu1arr.splice(i,1);
i--;
$("thisfenshu").innerText=thisfenshu;
}
}
for(var n=0;n<guaiwu3arr.length;n++){
if(guaiwu3arr[n].isdead==true){
$("game").removeChild(guaiwu3arr[n].imgNode);
guaiwu3arr.splice(n,1);
n--;
$("thisfenshu").innerText=thisfenshu;
}
}
for(var k=0;k<guaiwu2arr.length;k++){
if(guaiwu2arr[k].isdead==true){
$("game").removeChild(guaiwu2arr[k].imgNode);
guaiwu2arr.splice(k,1);
k--;
$("thisfenshu").innerText=thisfenshu;
}
}
for(var m= 0;m<guaiwubossarr.length;m++) {
if (guaiwubossarr[m].isdead == true) {
$("game").removeChild(guaiwubossarr[m].imgNode);
guaiwubossarr.splice(m, 1);
m--;
$("thisfenshu").innerText=thisfenshu;
}
}
if(play1.isdead==true){
$("game").removeChild(play1.imgNode);
$("thisfenshu").innerText=thisfenshu;
}
}
//进入第下一关；
function xiaguan(){
if(thisfenshu>30){
// 这里放的是蝙蝠的定时器
greatguaiwu2=setInterval(grearguaiwu2,10000);
moveguaiwu2d=setInterval(moveguaiwu2,120);
guanka=2;
pj="B";
$("gk").src="sucai/num/2.gif";
$("exp1").style.display="block";
// play1.imgNode.src="sucai/dragon/middle/move.gif";
// play1zidan.imgNode.src="sucai/dragon/middle/att.gif";
if(thisfenshu>100){
// 这里放的是大BOSS的定时器
greatguaiwuboss=setInterval(grearguaiwuboss,50000);
moveguaiwubossd=setInterval(moveguaiwuboss,150);
guanka=3;
pj="A";
$("gk").src="sucai/num/3.gif";
$("exp2").style.display="block";
}
if(thisfenshu>150){
greatguiwu1=setInterval(grearguaiwu1,1500);
moveguaiwu1d=setInterval(moveguaiwu1,100);
guanka=4;
pj="S";
$("gk").src="sucai/num/4.gif";
$("exp3").style.display="block";
}
if(thisfenshu>249){
greatguaiwu3=setInterval(grearguaiwu3,2000);//创建怪物3
moveguaiwu3d=setInterval(moveguaiwu3,80);//怪物3的移动
guanka=5;
pj="SS";
$("gk").src="sucai/num/5.gif";
}
if(thisfenshu>500){
greatguaiwu2=setInterval(grearguaiwu2,9000);
moveguaiwu2d=setInterval(moveguaiwu2,100);
guanka=6;
pj="SSS";
$("gk").src="sucai/num/6.gif";
}
if(thisfenshu>1500){
greatguaiwu3=setInterval(grearguaiwu3,1800);//创建怪物3
moveguaiwu3d=setInterval(moveguaiwu3,60);//怪物3的移动
guanka=7;
pj="SSSS";
$("gk").src="sucai/num/7.gif";
}
}
}
//玩家的血条减少
function xuetiao(){
switch (play1.bloou){
case 0:
blooul.imgNode.src="sucai/ui/boom/boom0.png";
$("xue1").style.display="none";
break;
case 1:
blooul.imgNode.src="sucai/ui/boom/boom1.png";
break;
case 2:
blooul.imgNode.src="sucai/ui/boom/boom2.png";
$("xue2").style.display="none";
break;
case 3:
blooul.imgNode.src="sucai/ui/boom/boom3.png";
$("xue3").style.display="none";
break;
case 4:
blooul.imgNode.src="sucai/ui/boom/boom4.png";
break;
case 5:
blooul.imgNode.src="sucai/ui/boom/boom5.png";
$("xue4").style.display="none";
break;
case 6:
blooul.imgNode.src="sucai/ui/boom/boom6.png";
break;
case 7:
blooul.imgNode.src="sucai/ui/boom/boom7.png";
break;
}
}
//玩家按下大招的方法
function dazhaoj() {
$("dazhao").style.display="block";
$("dazhao").style.display="block";
for(var j=0;j<guaiwu1arr.length;j++){
if(guaiwu1arr[j].isdead==false){
guaiwu1arr[j].isdead=true;
thisfenshu+=2;
}
}
for(var n= 0;n<guaiwu3arr.length;n++){
if( guaiwu3arr[n].isdead==false)
guaiwu3arr[n].isdead=true;
thisfenshu+=3;
}
for(var k=0;k<guaiwu2arr.length;k++){
if(guaiwu2arr[k].isdead==false){
guaiwu2arr[k].isdead=true;
thisfenshu+=5;
}
}
for(var m= 0;m<guaiwubossarr.length;m++){
if(guaiwubossarr[m].isdead==false)
guaiwubossarr[m].isdead=true;
thisfenshu+=10;
}
setTimeout(qinchudazhao,1500);
}
//清除大招的方法
function qinchudazhao(){
$("dazhao").style.display="none";
}
//暂停游戏的方法
function pause(){
$("pauseoff").style.display="block";
gameover();
}
//重新开始游戏地方法
function continuestart(){
//加载进入游戏界面
$("pauseoff").style.display="none";
$("dazhao").style.display="none";
$("game").style.backgroundImage="url(sucai/bg.jpg)";
$("anniu").style.display="none";
$("xueliang").style.display="block"
$("playfenshu").style.display="block";
$("Pause").style.display="block";
$("thisfenshu").innerText=thisfenshu;
greatguiwu1=setInterval(grearguaiwu1,2000);//创建怪物1
moveguaiwu1d=setInterval(moveguaiwu1,50);//怪物一的移动方法
greatguaiwu3=setInterval(grearguaiwu3,3000);//创建怪物3
moveguaiwu3d=setInterval(moveguaiwu3,60);//怪物3的移动
moveplay1d=setInterval(moveplay1,10);//玩家移动
moveplay1zidand=setInterval(moveplay1zidan,10);//玩家子弹的移动
moveshooltd=setInterval(moveshoolt,100);//玩家移动发射
movebloould=setInterval(moveblooul,10);//玩家血条移动
zidanpengzhuangd=setInterval(zidanpengzhuang,10);//子弹和怪物的碰撞
shoushid=setInterval(shoushi,600);//收集尸体
play1pengzhuangd=setInterval(playpengzhuang,600);//玩家和怪物的碰撞
playdeadd=setInterval(playdead,100);//玩家是否死亡
xiaguand=setInterval(xiaguan,3000);//检测是否进行下一关
xuetiaod=setInterval(xuetiao,1000);//检测玩家的血量是否减少
bianshend=setInterval(srcb,600)//检测玩家积分进行变身
}
//退出当前游戏的方法
function outgame(){
location.reload()
}
//推出整个游戏页面
function alloutgame(){
window.close()
}
//这里是所需要的JS原型
/**玩家的原型属性：
* [email protected] imgsrc 玩家图片的地址.
* 2.玩家的生成地址 x y.
* 3.玩家移动的速度 sudu.
* 4.玩家的血量 bloou.
* 5.玩家的创建方法 creat().
*/
var game=document.getElementById("game");
function play1prototype(imgsrc,x,y,sudu,bloou,width,height){
this.img=imgsrc;
this.imgNode=document.createElement("img");
this.x=x;
this.y=y;
this.width=width;
this.height=height;
this.isdead=false;
this.sudu=sudu;
this.bloou=bloou;
this.movebottom=function(){
if(parseInt( this.imgNode.style.top)<540){
this.imgNode.style.top=parseInt( this.imgNode.style.top)+this.sudu+"px";
}
}
this.movetop=function(){
if(parseInt( this.imgNode.style.top)>0){
this.imgNode.style.top=parseInt( this.imgNode.style.top)-this.sudu+"px";
}
}
this.moveleft=function(){
//console.log(this.imgNode.style.left);
if(parseInt( this.imgNode.style.right)<1150){
this.imgNode.style.right=parseInt( this.imgNode.style.right)+this.sudu+"px";
}
}
this.moveright=function(){
if(parseInt( this.imgNode.style.right)>0){
this.imgNode.style.right=parseInt( this.imgNode.style.right)-this.sudu+"px";
}
}
this.creat=function(){
this.imgNode.src= this.img;
this.imgNode.style.position="absolute";
this.imgNode.style.top=this.y+"px";
this.imgNode.style.right=this.x+"px";
game.appendChild(this.imgNode);
}
this.shoolt=function(){
var x=parseInt(this.imgNode.style.right)-35;
var y=parseInt(this.imgNode.style.top)+15;
//console.log(x)
play1zidan=new playzidanprototype("sucai/dragon/small/att.gif",x,y,5);
play1zidanarr.push(play1zidan);
}
this.creat();
}
/**创建玩家子弹的原型
*
* @param imgsrc 子弹的地址
* @param x 子弹产生的X轴
* @param y 子弹产生的Y轴
* @param sudu 子弹移动的速度
*/
function playzidanprototype(imgsrc,x,y,sudu){
this.img=imgsrc;
this.imgNode=document.createElement("img");
this.x=x;
this.y=y;
this.sudu=sudu;
this.move=function(){
this.imgNode.style.right=parseInt(this.imgNode.style.right)-this.sudu+"px";
}
this.creat=function(){
this.imgNode.src=this.img;
this.imgNode.style.position="absolute";
this.imgNode.style.top=y+"px";
this.imgNode.style.right=x+"px";
game.appendChild(this.imgNode);
}
this.creat();
}
/**创建玩家血条的原型
* 1.血条的图片地址SRC
* 2.血条的x
* 3血条的Y
* 4.血条的创建
*/
function playbloouprototype(imgsrc,x,y,sudu){
this.imgsrc=imgsrc;
this.imgNode=document.createElement("img");
this.x=x;
this.y=y;
this.sudu=sudu;
this.creat=function(){
this.imgNode.src=this.imgsrc;
this.imgNode.style.position="absolute";
this.imgNode.style.top=y+"px";
this.imgNode.style.right=x+"px";
game.appendChild(this.imgNode);
}
this.movebottom=function(){
if(parseInt( this.imgNode.style.top)<540){
this.imgNode.style.top=parseInt( this.imgNode.style.top)+this.sudu+"px";
}
}
this.movetop=function(){
if(parseInt( this.imgNode.style.top)>-10){
this.imgNode.style.top=parseInt( this.imgNode.style.top)-this.sudu+"px";
}
}
this.moveleft=function(){
//console.log(this.imgNode.style.left);
if(parseInt( this.imgNode.style.right)<1160){
this.imgNode.style.right=parseInt( this.imgNode.style.right)+this.sudu+"px";
}
}
this.moveright=function(){
if(parseInt( this.imgNode.style.right)>10){
this.imgNode.style.right=parseInt( this.imgNode.style.right)-this.sudu+"px";
}
}
this.creat();
}
//进入游戏第一件事，创建怪物的原型//
/**怪物的原型属性：
* [email protected] imgsrc 怪物图片的地址.
* 2.怪物的生成地址 x y.
* 3.怪物移动的速度 sudu.
* 4.怪物的血量 bloou.
* 5.怪物的创建方法 creat().
*/
function gauiwu1prototype(imgsrc,x,y,sudu,bloou,width,height){
this.img=imgsrc;
this.imgNode=document.createElement("img");
this.x=x;
this.y=y;
this.width=width;
this.height=height;
this.isdead=false;
this.sudu=sudu;
this.bloou=bloou;
this.move=function(){
this.imgNode.style.right=parseInt( this.imgNode.style.right)+this.sudu+"px";
};
this.creat=function(){
this.imgNode.src= this.img;
this.imgNode.style.position="absolute";
this.imgNode.style.top=this.y+"px";
this.imgNode.style.right=this.x+"px";
game.appendChild(this.imgNode);
}
this.creat();
}
</script>
</body>
</html>
以上是关于刚学玩原生JS,自己写了一个小游戏，希望在以后能不断地进步加以改善的主要内容，如果未能解决你的问题，请参考以下文章