<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
/* 游戏块背景样式 */
canvas{
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<!-- 开始游戏事件 -->
<body onload="startGame()">
<script type="text/javascript">
// 红色的砖块
var myGamePiece;
//我的障碍物
var myObstacles=[];
//游戏得分
var myScore;
// 点击开始游戏
function startGame(){
// 初始化对象
myGamePiece = new component(30,30,"red",10,120);
// 调用属性赋值
myGamePiece.gravity=0.05;
// 初始化对象
myScore=new component("30px","Consolas","black",280,40,"text");
// 调用方法
myGameArea.start();
}
// 定义一个游戏面积，字面量对象
var myGameArea={
canvas:document.createElement("canvas"),
start:function(){
this.canvas.width=480;
this.canvas.height=270;
this.context=this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,document.body.childNodes[0]);
this.frameNo=0;
this.interval=setInterval(updateGameArea,20);
},
clear:function(){
this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
}
}
// 定义一个组件，构造函数对象
function component(width,height,color,x,y,type){
this.type=type;
this.score=0;
this.width=width;
this.height=height;
this.speedX=0;
this.speedY=0;
this.x=x;
this.y=y;
// 重力
this.gravity=0;
this.gravitySpeed=0;
this.update=function(){
ctx=myGameArea.context;
if(this.type=="text"){
ctx.font=this.width+" "+this.height;
ctx.fillStyle=color;
ctx.fillText(this.text,this.x,this.y);
}
else{
ctx.fillStyle=color;
ctx.fillRect(this.x,this.y,this.width,this.height);
}
}
this.newPos=function(){
this.gravitySpeed+=this.gravity;
this.x+=this.speedX;
this.y+=this.speedY+this.gravitySpeed;
this.hitBottom();
}
// 红色按钮
this.hitBottom=function(){
var rockbottom=myGameArea.canvas.height-this.height;
if(this.y>rockbottom){
this.y=rockbottom;
this.gravitySpeed=0;
}
}
this.crashWith=function(otherobj){
var myleft=this.x;
var myright=this.x+(this.width);
var mytop=this.y;
var mybottom=this.y+(this.height);
var otherleft=otherobj.x;
var otherright=otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom=otherobj.y+(otherobj.height);
var crash = true;
if((mybottom < othertop)||(mytop>otherbottom)||(myright<otherleft)||(myleft>otherright)){
crash = false ;
}
return crash;
}
}
// 类似更新游戏里面得上下得柱子
function updateGameArea(){
var x,height,gap,minHeight,maxHeight,minGap,maxGap;
for(i=0;i<myObstacles.length;i++){
if(myGamePiece.crashWith(myObstacles[i])){
return ;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if(myGameArea.frameNo ==1 || everyinterval(150) ){
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10,height,"green",x,0));
myObstacles.push(new component(10,x-height-gap,"green",x,height+gap));
}
for(i=0;i<myObstacles.length;i++){
myObstacles[i].x += -1;
myObstacles[i].update();
}
myScore.text="SCORE:"+myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
function everyinterval(n){
if((myGameArea.frameNo / n)%1 == 0){
return true;
}
return false;
}
// 重力
function accelerate(n){
myGamePiece.gravity=n;
}
</script>
<br>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELRATE</button>
</body>
</html>