我花了一周时间完成的第一个JS做的游戏，用了一点点canvas，话不多说，直接码上，没图片因为美工是别人做的(*^_^*)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#canvas {
box-shadow: 0 0 10px #333;
background-color: #333;
}
#canvas,
/* #canvas2, */
#bulletCanvas,
#heroCanvas,
#enemyCanvas,
#hedan,
#boss,
#bossBulletCanvas {
position: absolute;
border-radius: 5px;
left: 250px;
}
#point {
display: none;
position: absolute;
width: 350px;
height: 50px;
color: #fff;
top: 100px;
right: 400px;
font-size: 30px;
z-index: 1000 !important;
}
#imgWidth {
position: absolute;
}
#imgWidth img {
width: 1400px;
height: 700px;
border-radius: 5px;
}
#font1 {
display: none;
position: absolute;
color: red;
left: 42%;
top: 550px;
height: 80px;
}
#font1 img {
width: 100%;
height: 100%;
}
#down29 {
position: absolute;
top: 30%;
left: 2.5%;
display: none;
}
#shezhiDiv {
display: none;
position: absolute;
width: 180px;
box-sizing: content-box;
padding: 30px;
top: 580px;
left: 750px;
z-index: 1000 !important;
}
#shezhiDiv img {
width: 100%;
height: 100%;
}
#jiaoseDiv {
display: none;
position: absolute;
width: 180px;
box-sizing: content-box;
padding: 30px;
top: 250px;
left: 880px;
z-index: 1000 !important;
}
#jiaoseDiv img {
width: 100%;
height: 100%;
}
#nanduDiv {
display: none;
position: absolute;
width: 180px;
box-sizing: content-box;
padding: 30px;
top: -20px;
left: 750px;
z-index: 1000 !important;
}
#nanduDiv img {
width: 100%;
height: 100%;
}
#false {
display: none;
position: absolute;
width: 680px;
box-sizing: content-box;
top: 100px;
left: 350px;
z-index: 1000 !important;
}
#false img {
width: 100%;
height: 100%;
}
#yingle {
display: none;
position: absolute;
width: 680px;
box-sizing: content-box;
top: 100px;
left: 350px;
z-index: 1000 !important;
}
#yingle img {
width: 100%;
height: 100%;
}
#Border {
display: none;
position: absolute;
width: 1400px;
height: 700px;
box-sizing: content-box;
top: 0px;
left: 0px;
z-index: 1000 !important;
}
#Border img {
width: 100%;
height: 100%;
}
#shezhijiemian {
display: none;
position: absolute;
width: 500px;
height: 700px;
box-sizing: content-box;
top: 0px;
left: 450px;
z-index: 1000 !important;
}
#shezhijiemian img {
width: 100%;
height: 100%;
}
#bossBloodDIv {
/* display: none; */
position: absolute;
height: 10px;
background-color: #FF0000;
box-sizing: content-box;
top: 20px;
left: 450px;
border-radius: 5px;
z-index: 1000 !important;
}
#heroBloodDiv {
display: none;
position: absolute;
width: 75px;
height: 63px;
box-sizing: content-box;
top: 600px;
left: 260px;
z-index: 1000 !important;
}
#heroBloodDiv img {
width: 100%;
height: 100%;
}
#EasyOrDiff {
display: none;
position: absolute;
width: 399px;
height: 135px;
box-sizing: content-box;
top: 580px;
left: 0px;
z-index: 1000 !important;
}
#EasyOrDiff img {
width: 100%;
height: 100%;
}
#jiaosetupian {
display: none;
position: absolute;
width: 1400px;
height: 700px;
box-sizing: content-box;
top: 0px;
left: 0px;
z-index: 1000 !important;
}
#jiaosetupian img {
width: 100%;
height: 100%;
}
#Jbutton1 {
display: none;
position: absolute;
width: 135px;
height: 156px;
box-sizing: content-box;
top: 300px;
left: 0px;
z-index: 1000 !important;
}
#Jbutton1 img {
width: 100%;
height: 100%;
}
#Jbutton2 {
display: none;
position: absolute;
width: 135px;
height: 156px;
box-sizing: content-box;
top: 300px;
left: 1250px;
z-index: 1000 !important;
}
#Jbutton2 img {
width: 100%;
height: 100%;
}
#back2 {
display: none;
position: absolute;
top: 50px;
left: 50px;
width: 156px;
height: 87px;
z-index: 1000 !important;
}
#back2 img {
width: 100%;
height: 100%;
}
index body界面
<body onload="drawAirPlane()">
<canvas id="canvas" width="865" height="700"></canvas>
<!-- <canvas id="canvas2" width="865" height="700"></canvas> -->
<canvas id="heroCanvas" width="865" height="700"></canvas>
<canvas id="bulletCanvas" width="865" height="700"></canvas>
<canvas id="enemyCanvas" width="865" height="700"></canvas>
<canvas id="hedan" width="865" height="700"></canvas>
<canvas id="boss" width="865" height="700"></canvas>
<canvas id="bossBulletCanvas" width="865" height="700"></canvas>
<div id="point">
<span>分数：</span>
<span id="POINT"></span>
<span>核弹数：</span>
<span id="HEDANNUM"></span>
</div>
<div id="imgWidth" style="background-color: #333333;">
<img src="./img/begin1.gif" id="begin1">
<div id="font1">
</div>
</div>
<div id="down29">
<img src="./img/begins.gif" style="width: 500px;" id="up29">
</div>
<div id="shezhiDiv">
<img src='./img/down37.png' id="img111" >
</div>
<div id="shezhijiemian">
<img src="img/shezhijiemian.png">
<div style="font-size: 35px;position: absolute;top: 250px;left:100px; color: #fff;">游戏音效：开</div>
<div style="font-size: 35px;position: absolute;top: 300px;left:100px; color: #fff;">游戏控制：<br>上下左右键<br>空格发射核弹
</div>
<div id="back">
<img src="img/back.png" style="position: absolute;top: 500px;left:60px; width: 156px;height: 87px;">
</div>
</div>
<div id="jiaoseDiv">
<img src='./img/28.png' id="img222">
</div>
<div id="jiaosejiemian">
<div id="jiaosetupian">
<img src="img/jiaosejiemian2.gif">
</div>
<div id="Jbutton1">
<img src="img/Jbutton1.png">
</div>
<div id="Jbutton2">
<img src="img/Jbutton2.png">
</div>
<div id="back2">
<img src="img/back.png" id="back222">
</div>
</div>
<div id="nanduDiv">
<img src='./img/40.png' id="img333">
</div>
<div id="EasyOrDiff">
<img src="img/backEasy.png">
</div>
<div id="false">
<img src="img/false.png">
</div>
<div id="yingle">
<img src="img/yingle.png">
</div>
<div id="Border">
<img src="img/fightBorder.png">
</div>
<div id="bossBloodDIv"></div>
<div id="heroBloodDiv">
<img src="img/68.png">
<div id="heroBloodDivFont" style="font-size: 50px;margin-top: -70px;margin-left: 80px;color: #fff;"></div>
</div>
</body>
<script src="js/loudBackground.js"></script>
<script src="js/hero.js"></script>
<script src="js/createBullet.js" type="text/javascript" charset="utf-8"></script>
<script src="js/enemy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/BOSS.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bossMode.js" type="text/javascript" charset="utf-8"></script>index js：
<script type="text/javascript">
function drawAirPlane() {
//开始界面
var begin1 = document.getElementById('begin1')
var imgWidth = document.getElementById('imgWidth')
var font1 = document.getElementById('font1')
var point1 = document.getElementById('point')
var font1Bool = true
var down29 = document.getElementById('down29')
var shezhiDiv = document.getElementById('shezhiDiv')
var img111 = document.getElementById('img111')
var shezhijiemian = document.getElementById('shezhijiemian')
var back = document.getElementById('back')
var jiaoseDiv = document.getElementById('jiaoseDiv')
var img222 = document.getElementById('img222')
var Jbutton1 = document.getElementById('Jbutton1')
var Jbutton2 = document.getElementById('Jbutton2')
var jiaosetupian = document.getElementById('jiaosetupian')
var back2 = document.getElementById('back2')
var back222 = document.getElementById('back222')
var nanduDiv = document.getElementById('nanduDiv')
var img333 = document.getElementById('img333')
var EasyOrDiff = document.getElementById('EasyOrDiff')
var False = document.getElementById('false')
var yingle = document.getElementById('yingle')
var Border = document.getElementById('Border')
var bossBloodDIv = document.getElementById('bossBloodDIv')
var heroBloodDiv = document.getElementById('heroBloodDiv')
var heroBloodDivFont = document.getElementById('heroBloodDivFont')
var gameBegin = false
var buttonSound = new Audio('music/buttonSound.mp3')
var bossbommsound = new Audio('music/bossbommSound.mp3')
/* shezhiDiv.innerHTML = "<img src='./img/down37.png' style='width: 180px;' >" */
/* jiaoseDiv.innerHTML = "<img src='./img/28.png' style='width: 180px;'>" */
/* nanduDiv.innerHTML = "<img src='./img/40.png' style='width: 180px;'>" */
shezhiDiv.addEventListener("mouseover", function() {
buttonSound.play()
img111.src = './img/up37.png'
/* shezhiDiv.innerHTML = "<img src='./img/up37.png'>" */
});
shezhiDiv.addEventListener("mouseleave", function() {
buttonSound.play()
img111.src = './img/down37.png'
/* shezhiDiv.innerHTML = "<img src='./img/down37.png' >" */
});
shezhiDiv.addEventListener("click", function() {
shezhijiemian.style = 'display:block'
});
back.addEventListener("click", function() {
shezhijiemian.style = 'display:none'
});
jiaoseDiv.addEventListener("mouseover", function() {
buttonSound.play()
img222.src = './img/36.png'
/* jiaoseDiv.innerHTML = "<img src='./img/36.png' >" */
});
jiaoseDiv.addEventListener("mouseleave", function() {
buttonSound.play()
img222.src = './img/28.png'
/* jiaoseDiv.innerHTML = "<img src='./img/28.png'>" */
});
jiaoseDiv.addEventListener("click", function() {
Jbutton1.style = 'display:block'
Jbutton2.style = 'display:block'
back2.style = 'display: block'
jiaosetupian.style = 'display:block'
});
Jbutton1.addEventListener("click", function() {
jiaosetupian.innerHTML = "<img src='img/jiaosejiemian1.gif'>"
});
Jbutton2.addEventListener("click", function() {
jiaosetupian.innerHTML = "<img src='img/jiaosejiemian2.gif'>"
});
back2.addEventListener("click", function() {
jiaosetupian.style = 'display:none'
Jbutton1.style = 'display:none'
Jbutton2.style = 'display:none'
back2.style = 'display:none'
});
nanduDiv.addEventListener("mouseover", function() {
buttonSound.play()
img333.src = './img/38.png'
/* nanduDiv.innerHTML = "<img src='./img/38.png' >" */
});
nanduDiv.addEventListener("mouseleave", function() {
buttonSound.play()
img333.src = './img/40.png'
/* nanduDiv.innerHTML = "<img src='./img/40.png'>" */
});
var nanduBool = true
nanduDiv.addEventListener("click", function() {
if (nanduBool) {
EasyOrDiff.innerHTML = "<img src='./img/backDiffc.png'>"
} else if (!nanduBool) {
EasyOrDiff.innerHTML = "<img src='./img/backEasy.png' >"
}
nanduBool = !nanduBool
});
down29.onclick = function() {
gameBegin = true
return down29.onclick
}
setTimeout(function() {
font1.style = 'display: block;'
var font1Timer = setInterval(function() {
if (font1Bool) {
font1.innerHTML = "<img src='img/5.png' >"
} else if (!font1Bool) {
font1.innerHTML =
"<img src='img/39.png' style='height: 100px;margin-left: -20px;margin-top: -10px;'>"
}
font1Bool = !font1Bool
}, 1000)
}, 2000)
var bgSound = new Audio('music/chooseMusic.mp3')
var testClickTimer = setInterval(function() {
//检测是否点击了任意键
//点击进入begin2图片
font1.onclick = function() {
bgSound.loop = true
bgSound.play() //谷歌不允许网站自动播放 最后来处理这个问题
font1.style = 'display:none'
font1.innerHTML = ''
begin1.src = 'img/begin2.gif'
font1Timer = null
var timer = setTimeout(function() {
EasyOrDiff.style = 'display:block'
down29.style = 'display:block'
shezhiDiv.style = 'display:block'
jiaoseDiv.style = 'display:block'
nanduDiv.style = 'display:block'
}, 6000)
}
if (gameBegin == true) {
clearInterval(testClickTimer)
bgSound.pause()
bgSound = new Audio('music/boos.mp3')
bgSound.play()
EasyOrDiff.style = 'display:none'
Border.style = 'display:block'
down29.style = 'display:none'
shezhiDiv.style = 'display:none'
jiaoseDiv.style = 'display:none'
nanduDiv.style = 'display:none'
begin1.remove()
imgWidth.remove()
font1.remove()
}
}, 100)
//游戏开始
var FUCKER = setInterval(function() {
if (gameBegin) {
var heroBlood = 5
point.style = 'display: block;'
heroBloodDiv.style = 'display: block;'
gameBegin = false
clearInterval(FUCKER)
var bgCanvas = document.getElementById('canvas')
/* var bgCanvas2 = document.getElementById('canvas2') */
if (bgCanvas.getContext) {
var bgUrl = 'img/map2.png'
/* var bgUrl2 = 'img/yun2.png' */
//1.加载图片方法
loudBackground(bgUrl, bgCanvas, moveBackgound)
/* loudBackground(bgUrl2, bgCanvas2, moveBackgound) */
function moveBackgound(bgImage) {
var bgmovE = setInterval(function() {
var speed = 1 //执行速度
animateBackground(bgCanvas, bgImage, speed) //执行背景移动的方法
}, 8)
//主角出场
var heroCanvas = document.getElementById('heroCanvas')
var ctx = heroCanvas.getContext('2d')
var img = 'img/44.png'
var hero = createHero(142, 93, heroCanvas, img, heroLoaded)
function heroLoaded(image) {
hero.draw(heroCanvas)
}
//飞机动起来
var HeroTimer = setInterval(function() {
ctx.clearRect(0, 0, 865, 700)
hero.draw(heroCanvas)
}, 20)
//让子弹飞
var bCanvas = document.getElementById('bulletCanvas')
var bctx = bCanvas.getContext('2d')
var bWidth = 50
var bHeight = 50
var bUrl = 'img/myb_1.png'
var bulletArray = new Array()
var createBulletTimerr = setInterval(function() {
var bullet = createBullet(bWidth, bHeight, bUrl, hero)
bulletArray.push(bullet)
}, 150)
var Point = 0 //分数设置
var P = document.getElementById('POINT')
//分数
var gameover = setInterval(function() {
/* console.log('分数：'+ Point) */
P.innerHTML = Point
}, 500)
var b = 1 //血量设置
var H = document.getElementById('HEDANNUM')
var heDanNum = 2 //核弹数
H.innerHTML = 2
//如果核弹发射 全场敌机销毁
var hedaN = setInterval(function() {
if (heDanNum > 0) {
if (hero.number == 32) {
enemyArray.splice(0, enemyArray.length)
Point += 1250
hero.number = 10
heDanNum--
H.innerHTML = heDanNum
}
}
}, 20)
var bloodSpeed = 500
var fucker = setInterval(function() {
bctx.clearRect(0, 0, 865, 700)
for (var i = 0; i < bulletArray.length; i++) {
bulletArray[i].move()
bulletArray[i].draw(bCanvas)
//判断子弹是否出屏，出去的子弹自动从数组中删除
if (bulletArray[i].bullisOutOfScreen()) {
bulletArray.splice(i, 1)
}
if (isEnemyHitHero2(bulletArray[i], boss) && hero.number1 === 13) {
bulletArray.splice(i, 1)
boss.bossBlood -= 1
bloodSpeed -= 5
bossBloodDIv.style.width = bloodSpeed + 'px'
if (boss.bossBlood <= 0) {
boss.BOOOOM(bossCanvas)
bossbommsound.play()
boss = null
var gameOver = setTimeout(function() {
yingle.style = 'display:block'
clearInterval(bossTime)
bossTime = null
clearInterval(bgmovE)
bgmovE = null
clearInterval(HeroTimer)
HeroTimer = null
clearInterval(createBulletTimerr)
createBulletTimerr = null
clearInterval(hedaN)
hedaN = null
clearInterval(fucker)
fucker = null
clearInterval(gameover)
gameover = null
clearInterval(eeeTimer)
eeeTimer = null
clearInterval(eTimer)
eTimer = null
}, 3000)
}
}
//循环敌机
for (var j = 0; j < enemyArray.length; j++) {
/* if(heDanNum>0){
if(hero.number==32){
enemyArray[j].BOOOOM(eCanvas)
enemyArray.splice(0,enemyArray.length)
Point += 1250
hero.number = 10
heDanNum--
H.innerHTML = heDanNum
}
} */
if (isEnemyHitHero(bulletArray[i], enemyArray[j])) {
/* enemyArray[j].crash()//敌机受伤动画效果 */
bulletArray.splice(i, 1)
enemyArray[j].blood -= 1
if (enemyArray[j].blood <= 0) {
enemyArray[j].BOOOOM(eCanvas) /* '敌机爆炸效果' */
Point += enemyArray[j].point
enemyArray.splice(j, 1)
}
}
}
}
}, 20)
//随机产生核弹
var hCanvas = document.getElementById('hedan')
var hctx = hCanvas.getContext('2d')
var randnumX = getRandForNum(0, 280)
var hSpeedX = 2
var hSpeedY = 2
function HeDan(x, y, w, h, hUrl, hSpeedX, hSpeedY, hCanvas) {
this.x = x
this.y = y
this.w = w
this.h = h
this.hImage = new Image()
this.hImage.src = hUrl
this.hSpeedX = hSpeedX
this.hSpeedY = hSpeedY
}
var hedan = new HeDan(randnumX, 1, 132, 96, 'img/hedan.png', hSpeedX, hSpeedY, hCanvas)
timery = setInterval(function() {
if (isEnemyHitHero(hero, hedan)) {
heDanNum++
H.innerHTML = heDanNum
hedan = null
clearInterval(timery)
}
}, 500)
HeDan.prototype.move = function() {
this.x += this.hSpeedX
this.y += this.hSpeedY
if (this.x > hCanvas.width - this.w) {
this.hSpeedX *= -1
} else if (this.x < 0) {
this.hSpeedX *= -1
}
if (this.y > hCanvas.height - this.h) {
this.hSpeedY *= -1
} else if (this.y < 0) {
this.hSpeedY *= -1
}
}
HeDan.prototype.draw = function(hCanvas) {
var hctx = hCanvas.getContext('2d')
hctx.drawImage(this.hImage, this.x, this.y, this.w, this.h)
}
var hedanTimers = setTimeout(ANIMATE, 20000)
function ANIMATE() {
setInterval(function() {
hctx.clearRect(0, 0, 865, 700)
hedan.move()
hedan.draw(hCanvas)
}, 10)
/* window.requestAnimationFrame(ANIMATE) */
}
/* ANIMATE() */
//创建敌机
var eCanvas = document.getElementById('enemyCanvas')
var ectx = eCanvas.getContext('2d')
var enemyArray = new Array()
var eeeTimer = setInterval(function() {
var number = getRandForNum(1, 3)
var enemy
switch (number) {
case 1:
/* w, h, imageURL, canvas, point, blood, i */
enemy = createEnemy(45.5, 63, 'img/enemy1.png', eCanvas, 50, 1, 3)
break
case 2:
enemy = createEnemy(68, 80, 'img/eneny1.png', eCanvas, 100, 3, 7)
break
case 3:
enemy = createEnemy(230, 249, 'img/enemy3.png', eCanvas, 300, 8, 7)
break
}
enemyArray.push(enemy)
}, 700)
//让敌机降落
var eTimer = setInterval(function() {
ectx.clearRect(0, 0, eCanvas.width, eCanvas.height)
for (var i = 0; i < enemyArray.length; i++) {
enemyArray[i].move()
enemyArray[i].draw(eCanvas)
//碰撞检测
if (isEnemyHitHero(enemyArray[i], hero)) {
False.style = 'display: block'
clearInterval(bgmovE)
bgmovE = null
clearInterval(HeroTimer)
HeroTimer = null
clearInterval(createBulletTimerr)
createBulletTimerr = null
clearInterval(hedaN)
hedaN = null
clearInterval(fucker)
fucker = null
clearInterval(gameover)
gameover = null
clearInterval(eeeTimer)
eeeTimer = null
clearInterval(eTimer)
eTimer = null
clearInterval(bossTime)
bossTime = null
/* alert('game over') */
}
//判断敌机是否出屏
if (enemyArray[i].isOutOfScreen(eCanvas)) {
enemyArray.splice(i, 1)
}
}
}, 50)
var bossCanvas = document.getElementById('boss')
var bossBulletCanvas = document.getElementById('bossBulletCanvas')
var bossCtx = bossCanvas.getContext('2d')
var bossShutCtx = bossBulletCanvas.getContext('2d')
var bossPoint = setInterval(function() {
if (Point >= 8000) {
bgSound.pause()
bgSound = new Audio('music/bgMusic.mp3')
var warningImg = new Image()
warningImg.src = 'img/warning.png'
bossCtx.drawImage(warningImg, 100, 0, 600, 600)
enemyArray.splice(0, enemyArray.length)
clearInterval(eeeTimer)
eeeTimer = null
clearInterval(eTimer)
eTimer = null
clearInterval(createBulletTimerr)
createBulletTimerr = null
ectx.clearRect(0, 0, 865, 700)
/* console.log(hero.number1) */
if (hero.number1 === 13) {
clearInterval(bossPoint)
bossCtx.clearRect(0, 0, 865, 700)
warningImg = null
createBulletTimerr = setInterval(function() {
var bullet = createBullet(bWidth, bHeight, bUrl, hero)
bulletArray.push(bullet)
}, 200)
}
}
}, 20)
//传入BOSS的宽度，高度，默认x值，默认y值,boss画布,boss血量
var boss = creatBoss(1800, 243, 300, 0, bossCanvas, 100)
var modebulletArray = []
var whitch = 1
setInterval(function() {
whitch += 1
if (whitch >= 4) {
whitch = 1
}
}, 10000)
var BossBullet = 'img/51.png'
var bossW = 50
var bossH = 50
var speedY = 5
var creatModeTimer = setInterval(function() {
if (hero.number1 === 13) {
if (whitch == 1) {
BossBullet = 'img/51.png'
bossW = 80
bossH = 150
speedY = 20
} else if (whitch == 2) {
BossBullet = 'img/BossBullet.png'
bossW = 100
bossH = 100
speedY = 2
} else if (whitch == 3) {
BossBullet = 'img/53.png'
bossW = 150
bossH = 150
speedY = 5
}
//mode参数：boss子弹的宽度，高度，boss子弹的图片地址，boss子弹的画布，boss的x值，boss的y值,boss的w，boss的h
var mode = beginMode(bossW, bossH, BossBullet, bossBulletCanvas, boss.x,
boss.y, boss.w, boss.h, hero.x, speedY)
modebulletArray.push(mode)
}
}, 1000)
var bossTime = setInterval(function() {
heroBloodDivFont.innerHTML = 'X' + heroBlood
bossShutCtx.clearRect(0, 0, 865, 700)
for (let i = 0; i < modebulletArray.length; i++) {
modebulletArray[i].move(whitch)
modebulletArray[i].draw(bossBulletCanvas)
if (isEnemyHitHero(modebulletArray[i], hero)) {
heroBlood -= 1
modebulletArray.splice(i, 1)
if (heroBlood <= 0) {
heroBloodDivFont.innerHTML = 'X' + 0
False.style = 'display: block'
clearInterval(bossTime)
bossTime = null
clearInterval(bgmovE)
bgmovE = null
clearInterval(HeroTimer)
HeroTimer = null
clearInterval(createBulletTimerr)
createBulletTimerr = null
clearInterval(hedaN)
hedaN = null
clearInterval(fucker)
fucker = null
clearInterval(gameover)
gameover = null
clearInterval(eeeTimer)
eeeTimer = null
clearInterval(eTimer)
eTimer = null
}
}
//判断子弹是否出屏，出去的子弹自动从数组中删除
if (modebulletArray[i].bullisOutOfScreen()) {
modebulletArray.splice(i, 1)
}
}
if (hero.number1 === 13) {
bgSound.play()
bossCtx.clearRect(0, 0, 865, 700)
boss.move()
boss.draw(bossCanvas)
if (isEnemyHitHero(boss, hero)) {
False.style = 'display: block'
clearInterval(bossTime)
bossTime = null
clearInterval(bgmovE)
bgmovE = null
clearInterval(HeroTimer)
HeroTimer = null
clearInterval(createBulletTimerr)
createBulletTimerr = null
clearInterval(hedaN)
hedaN = null
clearInterval(fucker)
fucker = null
clearInterval(gameover)
gameover = null
clearInterval(eeeTimer)
eeeTimer = null
clearInterval(eTimer)
eTimer = null
}
}
}, 50)
}
}
}
}, 20)
}
</script>BOSS.js
function creatBoss(w, h, x, y, bossCanvas,bossBlood) {
const boss = new Boss(w, h, x, y, bossCanvas,bossBlood)
return boss
}
function Boss(w, h, x, y, bossCanvas,bossBlood) {
this.bossImg = new Image()
this.bossImg.src = 'img/boss_2.png'
this.w = w
this.h = h
this.x = x
this.y = y
this.bossBlood = bossBlood
this.bossCanvas = bossCanvas
this.speedX = 5
this.speedY = 5
this.i = 0
this.xxx = 0
}
Boss.prototype.draw = function(bossCanvas){
this.i++
if(this.i<2){
this.xxx+=this.w/7
}else if(this.i ==2){
this.i = 0
this.xxx = 0
}
const ctx = bossCanvas.getContext('2d')
ctx.drawImage(this.bossImg,this.xxx,0,this.bossImg.width/7,this.bossImg.height,this.x,this.y,this.w/7,this.h)
}
Boss.prototype.move = function(){
this.x+=this.speedX
this.y+=this.speedY
if(this.x<0){
this.speedX*=-1
}else if(this.x>865-this.w/7){
this.speedX*=-1
}
if(this.y<0){
this.speedY*=-1
}else if(this.y>100){
this.speedY*=-1
}
}
Boss.prototype.BOOOOM = function (canvas) {
const ctx = canvas.getContext('2d');
let x =1043;
const that = this;
let timer = setInterval(function () {
ctx.clearRect(0, 0, 865, 700)
ctx.drawImage(that.bossImg,x,0,that.w/7,that.h,that.x,that.y,that.w/7,that.h)
x += that.w/7
if (x >= that.w) {
clearInterval(timer)
timer = null
}
}, 100)
}bossMode.js
//mode参数：boss子弹的宽度，高度，boss子弹的图片地址，boss子弹的画布，boss的x值，boss的y值
function beginMode(w,h,bossBulletSrc,bossBulletCanvas,bossx,bossy,bossw,bossh,herox,speedY) {
var x = bossx + bossw/18 - w/2
var y = bossy + bossh-h
var mode = new Mode(w,h,bossBulletSrc,bossBulletCanvas,x,y,herox,bossx,speedY)
return mode
}
function Mode(w,h,bossBulletSrc,bossBulletCanvas,x,y,herox,bossx,speedY){
this.w = w
this.h = h
this.x = x
this.y = y
this.image = new Image()
this.image.src = bossBulletSrc
this.canvas = bossBulletCanvas
this.moveY = y
this.herox = herox
this.bossx = bossx
this.speedY = speedY
this.bool = true
}
Mode.prototype.draw = function(bossBulletCanvas){
var ctx = bossBulletCanvas.getContext('2d')
/* const x = this.w * this.bool;
ctx.drawImage(this.image, x, 0, w, h, this.x, this.y, w, h)
this.bool = !this.bool */
ctx.drawImage(this.image,0,0,this.image.width,this.image.height,this.x,this.y,this.w,this.h)
}
Mode.prototype.move = function(whitch){
switch(whitch){
case 1 : {
this.y+=this.speedY
break
}
case 2 : {
this.y+=10
if(this.bossx-this.herox>300){
this.x-=12
}else if(this.bossx-this.herox>200){
this.x-=7
}else if(this.bossx-this.herox>100){
this.x-=5
}
else if(this.herox-this.bossx>300){
this.x+=12
}else if(this.herox-this.bossx>200){
this.x+=7
}else if(this.herox-this.bossx>100){
this.x+=5
}
break
}
case 3 : {
this.y+=this.speedY
break
}
}
}
Mode.prototype.bullisOutOfScreen = function() {
if (this.y > 700 ) {
return true
} else {
return false
}
}createBullet.js
function createBullet(bWidth, bHeight, bUrl, hero) {
const x = hero.x + hero.w / 2 - bWidth / 2;
const y = hero.y - bHeight;
const bullet = new Bullet(x, y, bWidth, bHeight, bUrl);
//子弹声音
/* var bSound = new Audio('music/bulletShut.mp3')
bSound.play() */
return bullet
}
function Bullet(x, y, w, h, imageURL) {
this.x = x
this.y = y
this.w = w
this.h = h
this.image = new Image()
this.image.src = imageURL
}
Bullet.prototype.draw = function(canvas) {
const ctx = canvas.getContext('2d');
ctx.drawImage(this.image, this.x, this.y, this.w, this.h)
}
Bullet.prototype.move = function() {
this.y -= 10
}
Bullet.prototype.bullisOutOfScreen = function() {
if (this.y < -this.y) {
return true
} else {
return false
}
}
enemy.js
function getRandForNum(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
function createEnemy(w, h, imageURL, canvas, point, blood, i) {
const enemy = new Enemy(w, h, imageURL, canvas, point, blood, i);
return enemy
}
function Enemy(w, h, imageURL, canvas, point, blood, i) {
const canvasWidth = canvas.width;
const x = getRandForNum(0, canvasWidth - w);
this.x = x
this.y = -h
this.w = w
this.h = h
this.i = i
this.point = point
this.blood = blood
this.speed = getRandForNum(1, 10)
this.image = new Image()
this.image.src = imageURL
}
Enemy.prototype.draw = function (canvas) {
const ctx = canvas.getContext('2d');
ctx.drawImage(this.image, 0, 0, this.w, this.h, this.x, this.y, this.w, this.h)
}
Enemy.prototype.move = function () {
this.y += this.speed
}
Enemy.prototype.isOutOfScreen = function (canvas) {
if (this.y > canvas.height) {
return true
} else {
return false
}
}
Enemy.prototype.crash = function () {
/* var endSound = new Audio('')
endSound.play('music/boom.mp3') */
}
Enemy.prototype.BOOOOM = function (canvas) {
const ctx = canvas.getContext('2d');
let x = 0;
const that = this;
let timer = setInterval(function () {
ctx.clearRect(that.x, that.y, that.image.width, that.image.height)
ctx.drawImage(that.image, x, 0, that.image.width / that.i, that.image.height, that.x, that.y, that.image.width / that.i, that.image.height)
x += that.image.width / that.i
console.log('外部' + that.image.src + x)
if (x >= that.image.width - 0.5) {
console.log('内部' + that.image.src + x)
clearInterval(timer)
timer = null
}
}, 50)
/* return timer */
}
function isEnemyHitHero(obj1, obj2) {
const minx1 = obj1.x;
const minx2 = obj2.x;
const miny1 = obj1.y;
const miny2 = obj2.y;
const maxx1 = obj1.x + obj1.w;
const maxx2 = obj2.x + obj2.w;
const maxy1 = obj1.y + obj1.h;
const maxy2 = obj2.y + obj2.h;
const minx = Math.max(minx1, minx2);
const miny = Math.max(miny1, miny2);
const maxx = Math.min(maxx1, maxx2);
const maxy = Math.min(maxy1, maxy2);
if (30 < maxx-minx && 30 < maxy - miny) {
return true
} else {
return false
}
}
function isEnemyHitHero2(obj1, obj2) {
const minx1 = obj1.x;
const minx2 = obj2.x;
const miny1 = obj1.y;
const miny2 = obj2.y;
const maxx1 = obj1.x + obj1.w;
const maxx2 = obj2.x + obj2.w/7;
const maxy1 = obj1.y + obj1.h;
const maxy2 = obj2.y + obj2.h;
const minx = Math.max(minx1, minx2);
const miny = Math.max(miny1, miny2);
const maxx = Math.min(maxx1, maxx2);
const maxy = Math.min(maxy1, maxy2);
if (30 < maxx-minx && 30 < maxy - miny) {
return true
} else {
return false
}
}
hero.js
function createHero(w, h, canvas, imageUrl, completeCallBack) {
const ctx = canvas.getContext('2d');
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const x = canvasWidth / 2 - w / 2;
const y = canvasHeight - h;
const hero = new Hero(x, y, w, h, imageUrl, completeCallBack);
let timer;
document.onkeydown = function (event) {
const e = event;
switch (e.keyCode) {
case 13:{
hero.number1 = 13
break
}
case 32: {
hero.number = 32
break
}
case 37: {
hero.left = true;
break;
}
case 38: {
hero.up = true;
break
}
case 39: {
hero.right = true;
break
}
case 40: {
hero.down = true;
break
}
}
}
document.onkeyup = function (e) {
switch (e.keyCode) {
case 37: {
hero.left = false;
break
}
case 38: {
hero.up = false;
break
}
case 39: {
hero.right = false;
break
}
case 40: {
hero.down = false;
break
}
}
}
timer = setInterval(function () {
if (hero.left === true) hero.x -= 2
if (hero.up === true) hero.y -= 2
if (hero.right === true) hero.x += 2
if (hero.down === true) hero.y += 2
//让飞机飞不出边缘
if (hero.x <= 0) {
hero.x = 0
}
if (hero.x >= canvasWidth - hero.w) {
hero.x = canvasWidth - hero.w
}
if (hero.y <= 0) {
hero.y = 0
}
if (hero.y >= canvasHeight - hero.h) {
hero.y = canvasHeight - hero.h
}
}, 7)
return hero
}
function Hero(x, y, w, h, imageUrl, completeCallBack) {
this.x = x
this.y = y
this.w = w
this.h = h
this.number1 = 4
this.number = 10
this.image = new Image()
//加载图片
this.image.onload = function () {
if (completeCallBack) {
completeCallBack(this)
console.log(this)
}
}
//添加图片源
this.image.src = imageUrl
//图片开关
this.bool = true
}
Hero.prototype.draw = function (canvas) {
const ctx = canvas.getContext('2d');
const x = this.w * this.bool;
const w = this.w;
const h = this.h;
ctx.drawImage(this.image, x, 0, w, h, this.x, this.y, w, h)
this.bool = !this.bool
}
loudBackground.js
function loudBackground(bgUrl, canvas, completeCallBack) {
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const image = new Image();
image.src = bgUrl
image.onload = function() {
ctx.drawImage(this, 0, 0, width, height)
ctx.drawImage(this, 0, -height, width, height)
if (completeCallBack) {
completeCallBack(image)
}
}
}
//实现背景移动
let bgOffset = 0;
function animateBackground(canvas,image,speed){
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
ctx.clearRect(0,0,width,height)//清除画布
ctx.save()//存储状态
bgOffset += speed
if(bgOffset>height){
bgOffset = 0
}
ctx.translate(0,bgOffset)//更新位置
ctx.drawImage(image,0,0,width,height)
ctx.drawImage(image,0,-height,width,height)//绘制背景图片
ctx.restore()//释放原始状态
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
