<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="刘攀登/animate.css" />
<style type="text/css">
body {
text-align: center;
}
#myCanvas {
border: 1px solid black;
}
.loading {
background: yellow;
position: relative;
top: -300px;
left: -180px;
z-index: 100;
}
.start {
width: 100px;
height: 50px;
margin: 0px auto;
color: red;
border-radius: 10px;
line-height: 50px;
/*position: relative;
left: 600px;
top: -180px;*/
background: gray;
display: none;
}
.start:hover {
cursor: pointer;
animation: 1s bounce;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="320" height="568"></canvas>
<img src="img/loading.gif" class="loading" />
<div class="start" class="animated bounce">
开始游戏
</div>
</body>
<script type="text/javascript">
//获取界面元素
var myCanvas = document.getElementById("myCanvas");
var startBnt = document.getElementsByClassName("start")[0];
var loading = document.getElementsByClassName("loading")[0];
var context = myCanvas.getContext("2d");
//定义变量
var isloadingFinish = false;
var isStartGame = false;
//C创建游戏所用的到所有图片对象
var background1Img = new Image();
background1Img.src = "img/background.png";
var background2Img = new Image();
background2Img.src = "img/background.png";
var heroImg = new Image();
heroImg.src = "img/herofly.png";
var enemy1 = new Image();
enemy1.src = "img/enemy1.png";
var enemy2 = new Image();
enemy2.src = "img/enemy2.png";
var enemy3 = new Image();
enemy3.src = "img/enemy3.png";
var bullet1 = new Image();
bullet1.src = "img/bullet1.png";
var bullet2 = new Image();
bullet2.src = "img/bullet2.png";
var prop = new Image();
prop.src = "img/prop.png";
var cw = myCanvas.width;
var ch = myCanvas.height;
var bulletImg = bullet1;
var bulletWidth = 6;
var bulletHeight = 14;
var backgroundTop1 = 0;
var backgroundTop2 = -ch;
var backgroundSpeed = 4;
//c创建背景的方法
//清空画布
function clearCanvasRect() {
context.clearRect(0, 0, cw, ch);
}
function createbackground() {
backgroundTop1 += backgroundSpeed;
backgroundTop2 += backgroundSpeed;
if(backgroundTop1 >= ch) {
backgroundTop1 = -ch;
}
if(backgroundTop2 >= ch) {
backgroundTop2 = -ch;
}
context.drawImage(background1Img, 0, backgroundTop1, cw, ch);
context.drawImage(background2Img, 0, backgroundTop2, cw, ch);
}
// 游戏资源正在加载 >>isloadingFinish = true;
//开始加载所有资源
var imgs = ["img/background.png", "img/bomb.png", "img/bullet1.png", "img/bullet2.png", "img/enemy1.png", "img/enemy2.png", "img/enemy3.png", "img/herofly.png", "img/prop.png"];
var n = 0;
for(var i = 0; i < imgs.length; i++) {
var tempImg = new Image();
tempImg.src = imgs[i];
tempImg.onload = function() {
n++;
if(n / imgs.length > 0.9) {
// 所有资源加载完成
isloadingFinish = true;
}
}
}
var gameTimer = setInterval(function() {
// 清空画布
clearCanvasRect();
if(isloadingFinish) {
//创建背景
createbackground();
}
if(isStartGame) {
isStartGameFunction();
// 游戏开始了背景出来英雄出来敌人落下子弹出来
} else {
// 游戏没有开始
//游戏资源加载完成
if(isloadingFinish) {
// createbackground();
// 加载完成。。loading界面消失,开始按钮出来
loading.style.display = "none";
startBnt.style.display = "block";
// var myBody = document.getElementsByTagName("body")[0];
// myBody.style.backgroundColor = "blue";
startBnt.style.backgroundColor = "blue";
}
}
}, 50);
//游戏场景中，各种对象的封装 ，下面三种封装，对象封装，函数封装，
//英雄
var hero = {
width: 66,
height: 82,
img: heroImg,
imgIndex: 0,
x: 127,
y: 486,
left: false,
right: false,
top: false,
bottom: false,
speed: 4,
isDie: false,
draw: function() {
if(this.isDie) {
//死亡 this.ingIdex 234.,
} else {
//没死 this.imgIdex 0 1
this.imgIndex = this.imgIndex ? 0 : 1;
}
context.drawImage(this.img, this.imgIndex * 66, 0, this.width, this.height, this.x, this.y, this.width, this.height);
},
move: function() {
// onkeydown
//左
if(this.left) {
this.x -= this.speed;
}
//右
if(this.right) {
this.x += this.speed;
}
// 上
if(this.top) {
this.y -= this.speed;
}
//xia
if(this.bottom) {
this.y += this.speed;
}
}
};
//敌机
//用来控制界面上敌人的数量。
var enemys = [];
var enemy = function(type, img, width, height) {
this.width = width;
this.height = height;
this.img = img;
this.type = type;
this.typeOver = false;
this.imgIndex = 0;
this.isDie = false;
this.xiaoguo = false;
this.draw = function() {
if(this.isDie == true) {
this.imgIndex++;
}
if(this.imgIndex == 5) {
this.xiaoguo = true;
}
context.drawImage(this.img, this.imgIndex * this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height);
}
this.move = function() {
this.draw();
this.y += this.speed;
}
this.x = randFn(0, 320 - 38);
this.y = -randFn(34, 100);
this.speed = randFn(2, 5);
}
//子弹
var bullets = [];
var bullet = function(img, x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.img = img;
this.speed = 10;
this.move = function() {
this.y -= this.speed;
context.drawImage(this.img, 0, 0, width, height, this.x, this.y, width, height);
};
}
var bt = 0;
//游戏开始的方法
function isStartGameFunction() {
//画飞机
hero.draw();
hero.move();
//画子弹
bt++;
if(bt % 6 == 0) {
var xxx = new bullet(bulletImg, hero.x + 30, hero.y, bulletWidth, bulletHeight);
bullets.push(xxx);
}
if(bt == 600) {
bt = 0;
}
for(var i = 0; i < bullets.length; i++) {
bullets[i].move();
}
//画敌机
if(enemys.length < 20) {
var randNum = randFn(100, 180);
if(randNum < 110) {
var rn = randFn(0, 10);
if(rn <= 1) {
var xxx = new enemy(2, prop, 39, 68);
enemys.push(xxx);
} else {
var xxx = new enemy(1, enemy1, 38, 34);
enemys.push(xxx);
}
}
}
//检测界面中所有的敌机和子弹
for(var i = 0; i < enemys.length; i++) {
for(var j = 0; j < bullets.length; j++) {
//如果飞机没有死亡
if(enemys[i].isDie == false) {
if(crash(enemys[i], bullets[j]) && enemys[i].type == 1) {
//i和j碰到一起，j，i一起死亡
enemys[i].isDie = true;
bullets.splice(j, 1);
continue;
}
}
//子弹跑上去死亡
if(bullets[j].y < 0) {
bullets.splice(j, 1);
continue;
}
}
//敌机碰到hero
if(crash(enemys[i], hero)) {
if(enemys[i].type == 1) {
//over
// clearInterval(gameTimer);
}
if(enemys[i].type == 2) {
//jiangli
bulletImg = bullet2;
bulletWidth = 48;
bulletHeight = 14;
enemys[i].xiaoguo = true;
}
// alert("gameover");
}
enemys[i].move();
//敌机掉下去死亡
if(enemys[i].y > ch) {
enemys.splice(i, 1);
i--;
continue;
}
//如果敌机是死亡状态也要移除
if(enemys[i].xiaoguo == true) {
enemys.splice(i, 1);
i--;
continue;
}
}
}
startBnt.onclick = function() {
isStartGame = true;
startBnt.style.display = "none";
}
function randFn(min, max) {
return parseInt(Math.random() * (max - min)) + min;
}
//获取元素下标
function getObjIndex(obj) {
for(var i = 0; i < enemys.length; i++) {
if(obj == enemys[i]) {
return i;
}
}
}
//键盘监听事件
document.onkeydown = function(e) {
switch(e.keyCode) {
case 37:
//左
hero.left = true;
hero.right = false;
hero.top = false;
hero.bottom = false;
break;
case 38:
// 上
hero.left = false;
hero.right = false;
hero.top = true;
hero.bottom = false;
break;
case 39:
//右
hero.left = false;
hero.right = true;
hero.top = false;
hero.bottom = false;
break;
case 40:
//下
hero.left = false;
hero.right = false;
hero.top = false;
hero.bottom = true;
break;
default:
break;
}
}
document.onkeyup = function() {
hero.left = false;
hero.right = false;
hero.top = false;
hero.bottom = false;
}
//判断两个物体碰撞
function crash(a, b) {
var ar = a.x + a.width;
var al = a.x;
var at = a.y;
var ab = a.y + a.height;
var br = b.x + b.width;
var bt = b.y;
var bl = b.x;
var bb = b.y + b.height;
if(ar >= bl && al <= br && ab >= bt && at <= bb) {
// console.log("111111")
return true;
} else {
// console.log("222222222")
return false;
}
}
</script>
</html>
扫一扫
580
05-01
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
