<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>生存游戏</title>
<style>
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: 'Comfortaa', cursive;
font-size: 11px;
}
canvas {
background-image:url(p9mUO.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: 'Comfortaa', cursive;
}
.ui {
border-radius: 50px 120px 120px;
font-family: 'Comfortaa', cursive;
font-size: 17px;
color: #fa3380;
background: linear-gradient(to right, rgba(2, 179, 228, 0.6) 0%, rgba(2, 204, 186,0.6) 100%);
position: absolute;
width: 70%;
}
#message {
border-radius: 50px 120px 120px;
padding: 70px;
position: relative;
margin: 0 auto;
-webkit-animation:colorchange 50s infinite alternate;
}
#startButton {
margin-top: 50px;
}
#status {
width: 100%;
height: 15px;
padding: 8px;
display: none;
}
#status span {
color: #fff;
font-weight: bold;
margin-right: 20px;
}
#title {
text-transform: uppercase;
text-align: center;
margin-top: 10px;
color: #fa3380;
-webkit-animation:colorchange 7s infinite alternate;
}
.ui a {
outline: none;
font-family: 'Comfortaa', cursive;
font-size: 38px;
width: 150px;
text-align: center;
margin: 0 auto;
text-decoration: none;
color: deepskyblue;
padding: 2px;
display: block;
-webkit-animation:colorchange 1s infinite alternate;
}
.ui a:hover {
font-weight: bold;
background: linear-gradient(to right, rgba(2, 179, 228, 0.9) 0%, rgba(2, 204, 186,0.9) 100%);
border-radius: 50px 120px 120px;
}
@-webkit-keyframes colorchange {
0% {
color: darkviolet;
}
10% {
color: #fa3380;
}
20% {
color: rgba(2,179,228,0.8);
}
30% {
color: rgba(2,204,186,0.8);
}
40% {
color: rgba(169,81,237,0.8);
}
50% {
color: rgba(255,162,52,0.8);
}
60% {
color: rgba(255,84,131,0.8);
}
70% {
color: deepskyblue;
}
80% {
color: purple;
}
90% {
color: lightpink;
}
100% {
color: rgba(125,151,173,0.8);
}
}
</style>
</head>
<body>
<canvas id='world'></canvas>
<div id="status" class="ui"></div>
<div class="pos">
<div id="message" class="ui">
<h2 id="title">Survival Game</h2>
<ul>
<li>1. 避免红点。</li>
<li>2. 触摸绿色点刀枪不入。</li>
<li>3. 停留在中心, 不要接触侧面</li>
<li>4. 使用不易破坏的红点。</li>
<li>5. 通过到处移动来获得额外的分数。</li>
<li>6. 活下去</li>
</ul>
<a href="#" class="btn" id="startButton">Play</a>
</div>
</div>
<script>
SinuousWorld = new function(){
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') != -1) || (navigator.userAgent.toLowerCase().indexOf('iphone') != -1);
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var canvas;
var context;
var status;
var message;
var title;
var startButton;
var enemies = [];
var boosts = [];
var particles = [];
var player;
var mouseX = (window.innerWidth - SCREEN_WIDTH);
var mouseY = (window.innerHeight - SCREEN_HEIGHT);
var mouseIsDown = false;
var playing = false;
var score = 0;
var time = 0;
var velocity = { x: -1.3, y: 1 };
var difficulty = 1;
this.init = function(){
canvas = document.getElementById('world');
status = document.getElementById('status');
message = document.getElementById('message');
title = document.getElementById('title');
startButton = document.getElementById('startButton');
if (canvas && canvas.getContext) {
context = canvas.getContext('2d');
// Register event listeners
document.addEventListener('mousemove', documentMouseMoveHandler, false);
document.addEventListener('mousedown', documentMouseDownHandler, false);
document.addEventListener('mouseup', documentMouseUpHandler, false);
canvas.addEventListener('touchstart', documentTouchStartHandler, false);
document.addEventListener('touchmove', documentTouchMoveHandler, false);
document.addEventListener('touchend', documentTouchEndHandler, false);
window.addEventListener('resize', windowResizeHandler, false);
startButton.addEventListener('click', startButtonClickHandler, false);
player = new Player();
windowResizeHandler();
setInterval(loop, 3000 / 100);
}
};
function startButtonClickHandler(event){
event.preventDefault();
if( playing == false ) {
playing = true;
enemies = [];
boosts = [];
score = 0;
difficulty = 1;
player.trail = [];
player.position.x = mouseX;
player.position.y = mouseY;
player.boost = 0;
message.style.display = 'none';
status.style.display = 'block';
time = new Date().getTime();
}
}
function gameOver() {
playing = false;
message.style.display = 'block';
title.innerHTML = 'You Lost( ' + Math.round (score ) + ' points)';
}
function documentMouseMoveHandler(event){
mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * .5 - 10;
mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * .5 - 10;
}
function documentMouseDownHandler(event){
mouseIsDown = true;
}
function documentMouseUpHandler(event) {
mouseIsDown = false;
}
function documentTouchStartHandler(event) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;
mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
mouseIsDown = true;
}
}
function documentTouchMoveHandler(event) {
if(event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;
mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
}
}
function documentTouchEndHandler(event) {
mouseIsDown = false;
}
function windowResizeHandler() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
var cvx = (window.innerWidth - SCREEN_WIDTH) * .5;
var cvy = (window.innerHeight - SCREEN_HEIGHT) * .5;
canvas.style.position = 'absolute';
canvas.style.left = cvx + 'px';
canvas.style.top = cvy + 'px';
message.style.left = cvx + 'px';
message.style.top = cvy + 200 + 'px';
}
function createParticles( position, spread, color ) {
var q = 10 + ( Math.random() * 15 );
while( --q >= 0 ) {
var p = new Particle();
p.position.x = position.x + ( Math.sin(q) * spread );
p.position.y = position.y + ( Math.cos(q) * spread );
p.velocity = { x: -4 + Math.random() * 8, y: - 4 + Math.random() * 8 };
p.alpha
