JS益智小游戏-游着活下来【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要设置好页面元素的样式，由于样式代码较多，这里仅贴出部分代码：

a {
	cursor: pointer;
}
html, body {
	margin: 0;
	padding: 0;
}
fieldset, img {
	border: 0;
}
li {
	list-style: none;
}

.pos{
  position: relative;
  top: -90px;
}
/*input[type="Submit"]{cursor:pointer;}*/

strong {
	font-weight: bold;
}
body {
	overflow: hidden;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
	font-size: 14px;
}
canvas {
	background-image:url(images/bg.jpg);
  background-position-x: initial;
  background-position-y: initial;
  background-size: cover;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-position: center;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}

页面的body部分，用了一个html5的canvas作为游戏的容器，其余均为辅助显示内容，代码如下：

<canvas id='world'></canvas>
<div id="status" class="ui"></div>
<div class="pos">
<div id="message" class="ui">
  <h2 id="title">游着活下来</h2>
  <ul>
    <li>1. 避开白色点。</li>
    <li>2. 吸收绿色点为无敌模式。</li>
    <li>3. 停留在中心, 不要接触侧面</li>
    <li>4. 使用不易破坏的红点。</li>
    <li>5. 到处移动可获得额外分数。</li>
  </ul>
  <a href="#" class="btn" id="startButton">开始游戏</a>
</div>
</div>

页面的底部通过javascript来实现整个游戏，部分代码如下：

function Point( x, y ) {
  this.position = { x: x, y: y };
}
Point.prototype.distanceTo = function(p) {
  var dx = p.x-this.position.x;
  var dy = p.y-this.position.y;
  return Math.sqrt(dx*dx + dy*dy);
};
Point.prototype.clonePosition = function() {
  return { x: this.position.x, y: this.position.y };
};

function Player() {
  this.position = { x: 0, y: 0 };
  this.trail = [];
  this.size = 8;
  this.boost = 0;
}
Player.prototype = new Point();

function Enemy() {
  this.position = { x: 0, y: 0 };
  this.size = 6 + ( Math.random() * 4 );
  this.force = 1 + ( Math.random() * 0.4 );
}
Enemy.prototype = new Point();

function Boost() {
  this.position = { x: 0, y: 0 };
  this.size = 10 + ( Math.random() * 8 );
  this.force = 1 + ( Math.random() * 0.4 );
}
Boost.prototype = new Point();

function Particle() {
  this.position = { x: 0, y: 0 };
  this.force = 1 + ( Math.random() * 0.4 );
  this.color = '#fa3380';
}
Particle.prototype = new Point();

SinuousWorld.init();