纯HTML+JS实现跑酷游戏

今天翻了翻以前的项目文件夹，发现了当初刚学前端的时候写的一个“小游戏”，遂决定整理到博客。

0、前言

写这个“游戏”是在三年前刚接触HTML+JS还不到三天的时候，纯粹是为了巩固刚学到的基础知识才自己“设计”并一步步的实现了这个“游戏”。只用到了HTML和JS的最基础的内容，碰撞检测等功能也是自己设计的“笨方法”。所以虽然当年在自己那 720P+火狐浏览器 的环境下运行并没有问题，但是如今在新设备跑却发现了在一些 屏幕分辨率+浏览器+放大设置 的组合上碰撞检测功能无法工作。

1、游戏概述

细心的读者可能会发现，在前言中，所有的游戏两字上都被我打上了双引号。没错，因为堂而皇之的称我写的这“玩意”叫游戏，实在是对广大游戏开发人员的不尊重，顶多算个小demo吧。所以被我高大上的标题吸引进来的朋友们可以考虑撤了。。。
整个游戏的内容就是一个小人在不断的向前跑，需要通过跳或二级跳躲开随机生成的方块，存活时间越久，得分越高。

2、代码实现

说好的只是为了巩固前端基础知识，所以以下实现部分以展示基础知识的用法为主。

2.1 游戏数据

首先是游戏界面的宽高以及方块出现的概率：

var BANNER_WIDTH = document.body.clientWidth;
var BANNER_HEIGHT = 100;
var PRB = 1/60; //方块生成的概率，会随游戏时间的增加而增加。

然后是用来储存方块（房子）的队列：

//创建一个队列用于储存房子
var house = [];

当然，跑酷游戏肯定少不了一个奔跑的小人：

var people = {
 x:BANNER_WIDTH/3,
 y:BANNER_HEIGHT*9/10,		//x,y为小人的位置。
 ground:BANNER_HEIGHT*9/10,	//小人的落地地面的位置
 ground_width:0,			//小人可在房子上行走的距离
 vy:0,					//y方向的速度
 g:1,					//重力加速度
 state:1,					//小人的当前运动形态
 score:0,					//当前得分
 failnum:0,				//失败次数
 mouseClick:2,				//剩余可连跳次数
 highest:0,				//最高纪录
}

2.2 功能函数

绘制小人的函数，一个奔跑的小人动画本应该是通过几张图片交替显示来实现。可是既然说了纯HTML+JS，那么，自然就得用代码来画呀！

//绘制小人的函数
function drawPeople(state,ctx){	//state为当前要绘制的小人的运动状态，ctx提供了在canvas上绘画的方法和属性。
 switch(state){
  case 1:						//运动状态1的绘制。
   ctx.beginPath();
   ctx.moveTo(people.x,people.y);
   ctx.lineTo(people.x+9,people.y-20);
   ctx.lineTo(people.x+18,people.y-15);
   ctx.lineTo(people.x+12,people.y-6);
   ctx.moveTo(people.x+9,people.y-20);
   ctx.lineTo(people.x+12,people.y-37);
   ctx.arc(people.x+12,people.y-37,2,0,Math.PI*2);
   ctx.moveTo(people.x+10,people.y-30);
   ctx.lineTo(people.x+14,people.y-23);
   ctx.lineTo(people.x+17,people.y-30);
   ctx.moveTo(people.x+10,people.y-30);
   ctx.lineTo(people.x+4,people.y-20);
   ctx.stroke();
   break;
  case -1:					//运动状态-1的绘制
   ctx.beginPath();
   ctx.moveTo(people.x-4,people.y-3);
   ctx.lineTo(people.x+11,people.y-15);
   ctx.lineTo(people.x+24,people.y-4);
   ctx.moveTo(people.x+11,people.y-15);
   ctx.lineTo(people.x+8,people.y-32);
   ctx.arc(people.x+8,people.y-32,2,0,Math.PI*2);
   ctx.moveTo(people.x+11,people.y-22);
   ctx.lineTo(people.x+14,people.y-22);
   ctx.lineTo(people.x+12,people.y-27);
   ctx.moveTo(people.x+10,people.y-25);
   ctx.lineTo(people.x,people.y-15);
   ctx.stroke();
   break;
   //运动状态1和-1交替，形成向前奔跑的动画。
 }
}

添加房子的函数：

//向队列中添加新的house
function addHouse(){
 var hus = {
 x:BANNER_WIDTH,
 y:BANNER_HEIGHT*9/10,		//初始位置在游戏界面的最右边。
 height:Math.ceil(Math.random()*5),	//高度一到五随机（向上取整）。
 width:Math.ceil(Math.random()*4),	//宽度一到四随机（向上取整）。
 }
 house.push(hus);		//添加到队列。
}

绘制房子的函数：

//绘制house
function drawHouse(ctx){
//循环绘制队列里面的每一座房子。
 for(var i=0;i<house.length;i++){
  ctx.lineWidth = 2;
  ctx.fillStyle = "#D8D8D8";
  
  ctx.beginPath();
  ctx.moveTo(house[i].x,house[i].y);
  ctx.lineTo(house[i].x,house[i].y-house[i].height*10);
  ctx.lineTo(house[i].x+house[i].width*10,house[i].y-house[i].height*10);
  ctx.lineTo(house[i].x+house[i].width*10,house[i].y);
  ctx.closePath();
  
  ctx.fill();
 }
 
//更新house队列状态
 for(var i=0;i<house.length;i++){
  house[i].x-=3;  //将所有房子向左移三个像素，以形成人在向前跑的错觉。
  if(house[i].x<-40){
   house.shift();	//去掉已经移出屏幕的房子。
  }
 }
 //根据概率确定是否要添加新的房子。
 if(Math.random()<(PRB)){
  addHouse();
 }
}

计算小人运动状态的函数：

//计算小人运动的函数
function runpeople(){
 //如果小人的y坐标不等于小人此时的地面坐标或小人的y方向速度不等于0，则说明小人正在跳跃动作中，需要计算小人本帧的y坐标。
 if(people.y!=people.ground||people.vy!=0){ 
  people.y+=people.vy;
  people.vy+=people.g;
  people.score++;
 }
 else{
  //否则增加分数并切换小人当前帧的运动状态即可。注：在跳跃动作中是不需要切换运动状态的。
  people.score+=3;
  if(people.score%2==0){
   people.state*=-1;
  }
 }
 //如果小人此时正在方块上，那需要减去当前前进的距离，以便在走过方块时下落。
 if(people.ground_width>0){
  people.ground_width-=3;
 }
 for(var i=0;i<house.length;i++){
  //碰撞检测，如果小人的x坐标加20（即小人图像的右边框位置）等于房子的x坐标，则说明此时小人与该房子处于位置交叉状态。
  //判断三个坐标是因为房子每次右移三个坐标，所以交叉时并不一定刚好和小人的坐标相等。
  if(house[i].x==people.x+20||house[i].x==people.x+21||house[i].x==people.x+19){
   //输赢检测，当处于交叉状态时，检测小人的y坐标是否高于房子的高度，若不高于，则小人与房子相撞，游戏失败。
   if(people.y>BANNER_HEIGHT*9/10-house[i].height*10){
    //初始化数据
    //更新最高分
    if(people.score>people.highest){
     people.highest=people.score;
    }
    PRB=1/60;
    people.score=0;
    people.failnum++;
    var j = house.length;
    for(var i=0;i<j;i++){
     house.shift();
    }
    break;
   }
   
   //如果小人跳上了房子，那么小人的落地地面就在房子上。
   if(people.ground>BANNER_HEIGHT*9/10-house[i].height*10){
   people.ground=BANNER_HEIGHT*9/10-house[i].height*10;
   //小人在房子上可行走的距离。
   people.ground_width=house[i].width*10+20;
   }
  }
 }
 //当小人在房子上可行走的距离小于零时，小人落地的地面重新回到游戏“地面”。
 if(people.ground_width<=0){
  people.ground=BANNER_HEIGHT*9/10;
 }
 
 //落地判断，如果落到了地面，则重置连跳次数等数据。
 if(people.y>=people.ground){
  people.vy=0;
  people.y=people.ground;
  people.mouseClick=2;
  //console.log(people.score);
  }
 //随着分数的增加，游戏难度也相应增加，添加房子的概率越来越大。
 PRB =(1/60)*(Math.pow(2,(Math.floor(people.score/1000))));
 //难度上限
 if(PRB>0.3){
  PRB=0.3;
 }
}

监听器

//定义canvas的单击监听器
function cvs_click(){
 if(people.mouseClick){
  people.vy=-10;  //跳跃获得y方向向上的10点初速度。
  people.mouseClick--; //可连跳次数减1.
 }
}

绘制游戏logo、背景、以及显示游戏数据：

function drawLogo(ctx){
 var image = new Image();
 image.onload = function(){
  ctx.drawImage(image,2,2,191,95);
 }
 image.src = "img/personalportfolio.png";
 
 ctx.fillStyle = "#FFFFFF";
 ctx.font = "normal 37px 楷体";
 ctx.textAlign = "center";
 ctx.fillText("千里之行 始于足下",BANNER_WIDTH*17/20+20,BANNER_HEIGHT*7/10+5);
 
 ctx.fillStyle = "#FFFFFF";
 ctx.font = "normal 15px 楷体";
 ctx.textAlign = "center";
 ctx.fillText("分数："+people.score.toString(),BANNER_WIDTH/5,BANNER_HEIGHT*3/10);
 
 ctx.fillStyle = "#FFFFFF";
 ctx.font = "normal 15px 楷体";
 ctx.textAlign = "center";
 ctx.fillText("最高分："+people.highest.toString(),BANNER_WIDTH/5,BANNER_HEIGHT*7/10);
 
 ctx.fillStyle = "#FFFFFF";
 ctx.font = "normal 15px 楷体";
 ctx.textAlign = "center";
 ctx.fillText("失败次数："+people.failnum.toString(),BANNER_WIDTH/5,BANNER_HEIGHT*5/10);
}

2.3 游戏动画显示

通过定时调用函数来按帧绘制游戏图像：

window.onload = function(){
//设置canvas标签
 var canvas = document.getElementById("forbanner");
 canvas.width = BANNER_WIDTH;
 canvas.height = BANNER_HEIGHT;
 canvas.addEventListener("mousedown",function(e){cvs_click();});
 
 var ctx = canvas.getContext("2d");
 
 var intT = setInterval(
  function(){
   ctx.clearRect(0,0,BANNER_WIDTH,BANNER_HEIGHT);  //清除上一帧图像。
   drawHouse(ctx); //绘制当前所有的房子。
   drawLogo(ctx);
   runpeople();  //计算小人的运动状态
   drawPeople(people.state,ctx);  //绘制小人图像
  }
  ,
  45   //每45ms绘制一帧
 );
}

3、总结

当时本只是想随便写写，但是，后来由于强迫症发作···硬是从晚上八九点写到了凌晨三四点(刚刚接触前端，debug占了大量的时间），把它变成了一个真正可以玩的“游戏”。所有的实现包括图像在内都纯粹只用到了HTML+JS的最基础内容，虽然游戏本身不具备多少的可玩性，但以巩固基础为目的，还是值得一试的。