本文介绍了一个使用HTML、JavaScript和Canvas技术实现的打飞机游戏。通过加载图片资源，创建游戏元素，如飞机、子弹和敌机，并进行碰撞检测，实现了游戏的基本功能。游戏还包含了游戏结束与重新开始的逻辑。
loading.js文件
// 三个参数：
// 1. 所有要加载的图片对象
// 2.加载进度函数
// 3.加载完成函数
function loading(imgsObj, handleObj) {
// 遍历对象，得到对象中属性的个数，即有多少张图片
var count = 0;
var currentIndex = 0;
for(prop in imgsObj) {
count++;
}
// 图片全部加载完成之后传出的对象
var imgObj = {};
for(prop in imgsObj) {
var img = new Image();
img.src = imgsObj[prop];
img.onload = (function(prop) {
return function() {
currentIndex++;
var scale = currentIndex / count * 100;
if(handleObj.progress) {
handleObj.progress(scale);
}
imgObj[prop] = this;
if(handleObj.complete) {
if(currentIndex == count) {
handleObj.complete(imgObj);
}
}
}
})(prop)
}
}
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#gameOver {
width: 80px;
height: 35px;
border: 1px solid #000;
border-radius: 8px;
position: absolute;
top: 400px;
left: 50%;
transform: translateX(-40px);
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="gameOver">游戏结束<button id="reStart">再来一次</button></div>
<canvas id="canvas" width="500" height="500"></canvas>
<script src=</
最低0.47元/天 解锁文章
扫一扫
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
