HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<srcipt src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></srcipt>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<canvas id="myCanvas" width="320px" height="480px"></canvas>
</body>
</html>
JavaScript文件：
/*
* @Author: Administrator
* @Date: 2016-11-24 21:00:25
* @Last Modified by: Administrator
* @Last Modified time: 2016-11-25 11:27:40
*/
'use strict';
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var bgcolor = "black";
var score;
var highScore;
var fps = 30;
var player;
var bullets = [];
var enemies = [];
// 重置
function reset(){
if(score > highScore) highScore = score;
score = 0;
}
// 背景画布
function drawBackground(){
ctx.fillStyle = bgcolor;
ctx.fillRect(0,0,canvas.width,canvas.height);
}
//分数画布
function drawScore(){
ctx.fillStyle = "#CCFF99";
ctx.font ="24px sans-serif";
ctx.fillText("Score:" + score,10,24);
ctx.font ="16px sans-serif";
ctx.fillText("HighScore:" + highScore,10,48);
}
// Ready画布
function drawReady(){
drawBackground();
drawScore();
ctx.fillStyle = "white";
ctx.font = "72px sans-serif";
ctx.fillText("Ready?",canvas.width/2 - 140,canvas.height/2);
}
setInterval(function(){
update();
draw();
},1000/fps);
$(document).bind("keydown","left",function(){});
function update(){
if(keydown.left){
player.x -= 1;
}
if(keydown.right){
player.x += 1;
}
if(keydown.space){
player.shoot();
}
player.x = player.x.clamp(0,canvas.width-player.width);
bullets.forEach(function(bullet){
bullet.update();
});
bullets = bullets.filter(function(bullet){
return bullet.active;
});
enemies.forEach(function(enemy){
enemy.update();
};
enemies = enemies.filter(function(enemy){
returnenemy.active;
});
handleCollisions();
}
function draw(){
canvas.clearRect(0,0,canvas.width,canvas.height);
player.draw();
bullets.forEach(function(bullet){
bullet.draw();
});
enemies.forEach(function(enemy){
enemy.draw();
});
}
var player ={
color:"#0000AA",
x:220,
y:270,
width:32,
height:32,
draw:function(){
canvas.fillStyle=this.color;
canvas.fillRect(this.x,this.y,this.width,this.height);
}
};
// 创建炮弹
function bullet(p){
p.active = true;
p.xVelocity = 0;
p.yVelocity = speed;
p.color = "#FFFFFF";
p.width = 3px;
p.width = 3px;
p.inBounds = function(){
return p.x >= 0 && p.x <= canvas.width && p.y >= 0 && p.y <= canvas.height;
};
p.draw = function(){
canvas.fillStyle = this.color;
canvas.fillRect(this.x,this.y,this.width,this.height);
};
p.update = function(){
p.x += p.xVelocity;
p.y += p.yVelocity;
p.active = p.active && p.inBounds();
};
return p;
}
// player射击
player.shoot = function(){
var bulletPosition = this.midpoint();
bullets.push(bullet({
speed:5,
x:bulletPosition.x,
y:bulletPosition.y }));
};
player.midpoint = function(){
return{
x:this.x+this.width/2,
y:this.y+this.height/2
};
};
// 创建敌人
function enemy(e){
e.active=true;
e.age=Math.floor(Math.random()*128);
e.color="#A2B";
e.x= canvas.width/4+Math.random()*canvas.width/2;
e.y=0;
e.xVelocity=0
e.yVelocity=2;
e.width=32;
e.height=32;
e.inBounds = function(){
return e.x >= 0 && e.x <= canvas.width && e.y >= 0 && e.y <= canvas.height; };
e.draw = function(){
canvas.fillStyle=this.color;
canvas.fillRect(this.x,this.y,this.width,this.height);
};
e.update = function(){
e.x += e.xVelocity;
e.y += e.yVelocity;
e.xVelocity=3*Math.sin(I.age*Math.PI/64);
e.age++;
e.active = e.active && e.inBounds();
};
e.explode = function(){
this.active = false;
};
return e;
}
// 碰撞检测
function collides(a, b){
return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
}
// 碰撞处理
function handleCollisions(){
bullets.forEach(function(bullet){
enemies.forEach(function(enemy){
if(collides(bullet,enemy)){
enemy.explode();
bullet.active=false;
}
})
});
}
document.addEventListener('DOMContentLoaded',reset());
Doit的信仰
相关分类