0
点赞
收藏
分享

微信扫一扫

Canvas打飞机游戏

深夜瞎琢磨 2022-01-14 阅读 82

 打飞机.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: black;
padding: 0;
margin: 0;
}
</style>
<script>
let c, ctx, ctx2
var ship = {
p: {
x: 500,
y: 800
}

}
var balls = []
var enemy = []
let getEn
var game
let las = false
var lasT = null
window.onload = () => {
c = document.getElementById('c')
ctx = c.getContext('2d')

ctx.strokeStyle = '#00FFFF'
ctx.fillStyle = '#00FFFF'

let getEn = getEnemy()
game = setInterval(() => {
ctx.clearRect(0, 0, c.width, c.height)
drawShip()
drawAttack()
getEn()
drawEnemy()
killEnemy()
killYou()
if (las) {
laser()
}
}, 1)
}

function drawShip() {
ctx.fillStyle = '#00FFFF'
ctx.beginPath()
ctx.arc(ship.p.x, ship.p.y, 20, 0, Math.PI * 2)
ctx.stroke()
ctx.closePath()
}

function laser() {
ctx.fillStyle = '#00FFFF55'
ctx.beginPath()
ctx.rect(ship.p.x - 10, 0, 20, ship.p.y - 10)
ctx.fill()
ctx.fillStyle = '#00FFFF'
ctx.beginPath()
ctx.rect(ship.p.x - 3, 0, 6, ship.p.y - 3)
ctx.fill()
ctx.closePath()
}

function attack() {
ballAttack();

}

function ballAttack() {
balls.push({
p: {
x: ship.p.x,
y: ship.p.y
}
})
balls.push({
p: {
x: ship.p.x - 20,
y: ship.p.y + 20
}
})
balls.push({
p: {
x: ship.p.x + 20,
y: ship.p.y + 20
}
})
}

function getEnemy() {
let j = 0
let k = Math.floor(Math.random() * 50 + 10)
return function() {
j++
if (j === k) {
j = 0
k = Math.floor(Math.random() * 50 + 10)
enemy.push({
p: {
x: Math.floor(Math.random() * 900),
y: 0
},
heal: Math.floor(Math.random() * 20 + 5),
size: Math.floor(Math.random() * 50 + 10),
boss:Math.random()>0.5
})
}
}
}

function killEnemy() {
for (let i = 0; i < enemy.length; i++) {
for (let j = 0; j < balls.length; j++) {
let a = Math.abs(enemy[i].p.x - balls[j].p.x)
let b = Math.abs(enemy[i].p.y - balls[j].p.y)
let c = enemy[i].size / 2 + 5
if (a < c && b < c) {
enemy[i].heal--
balls.splice(j, 1)
if (enemy[i].heal < 0) {
enemy.splice(i, 1)
}
break
}

}

}
if (las&&!lasT) {
lasT = setTimeout(() => {
clearTimeout(lasT)
lasT = null
}, 10)
for (let i = 0; i < enemy.length; i++) {
let a = Math.abs(enemy[i].p.x - ship.p.x)
let b = Math.abs(enemy[i].p.y - ship.p.y)
let c = enemy[i].size / 2 + 10
if (a < c && enemy[i].p.y < ship.p.y) {
enemy[i].heal--
if (enemy[i].heal < 0) {
enemy.splice(i, 1)
}
}

}

}
}

function killYou() {
for (let i = 0; i < enemy.length; i++) {
let a = Math.abs(enemy[i].p.x - ship.p.x)
let b = Math.abs(enemy[i].p.y - ship.p.y)
let c = enemy[i].size / 2
if (a < c && b < c) {
alert('you died!!!')
clearInterval(game)
break
}
}
}

//enemy
function drawAttack() {
ctx.fillStyle = '#00FFFF'
for (let i = 0; i < balls.length; i++) {
ctx.beginPath()
ctx.arc(balls[i].p.x, balls[i].p.y, 2, 0, Math.PI * 2)
ctx.fill()
ctx.closePath()
balls[i].p.y -= 10
if (balls[i].p.y < -10) {
balls.splice(i, 1)
}
}
}

function drawEnemy() {

for (let i = 0; i < enemy.length; i++) {
if(enemy[i].boss){
ctx.fillStyle = '#FF000099'
}else{
ctx.fillStyle = '#00FFFF99'
}
ctx.beginPath();
ctx.rect(enemy[i].p.x - enemy[i].size / 2, enemy[i].p.y - enemy[i].size / 2, enemy[i].size, enemy[i].size);
ctx.fill();
ctx.closePath();
enemy[i].p.y += 1;

if (enemy[i].p.y > 900+ enemy[i].size / 2) {
enemy.splice(i, 1)
}
}
}
function openLaser(){
las = true;
}
function closeLaser(){
las = false;
}
let upTimer = null
let leftTimer = null
let rightTimer = null
let downTimer = null
let attackTimer = null
window.onkeydown = function(e) {
switch (e.keyCode) {
case 38:
if (upTimer !== null) {
return
}
if (ship.p.y > -10) {
ship.p.y -= 10
}

upTimer = setInterval(() => {
if (ship.p.y > -10) {
ship.p.y -= 10
}
}, 10)
break
case 39:

if (rightTimer !== null) {
return
}
if (ship.p.x < 910) {
ship.p.x += 10
}

rightTimer = setInterval(() => {
if (ship.p.x < 910) {
ship.p.x += 10
}
}, 10)
break
case 40:

if (downTimer !== null) {
return
}
if (ship.p.y < 910) {
ship.p.y += 10
}
downTimer = setInterval(() => {
if (ship.p.y < 910) {
ship.p.y += 10
}
}, 10)
break
case 37:

if (leftTimer !== null) {
return
}
if (ship.p.x > -10) {
ship.p.x -= 10
}

leftTimer = setInterval(() => {
if (ship.p.x > -10) {
ship.p.x -= 10
}
}, 10)
break
case 90:

if (attackTimer !== null) {
return
}
attack()
attackTimer = setInterval(() => {
attack()
}, 10)

break
case 88:

openLaser();

break
}

}
window.onkeyup = function(e) {
switch (e.keyCode) {
case 38:
clearInterval(upTimer)
upTimer = null
break
case 39:
clearInterval(rightTimer)
rightTimer = null
break
case 40:
clearInterval(downTimer)
downTimer = null

break
case 37:
clearInterval(leftTimer)
leftTimer = null
break
case 90:
clearInterval(attackTimer)
attackTimer = null

break
case 88:

closeLaser();

break
}

}
</script>

</head>
<body>
<canvas id="c" width="900" height="900" style="border: 1px solid white;"></canvas>
</body>
</html>
举报

相关推荐

0 条评论