生存游戏

下载代码

html

css

分享到微信朋友圈

html

css

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(https://i.stack.imgur.com/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);
      }
    }

JavaScript

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 = 1;
      
      particles.push( p );
    }
  }

/**
 * 
 */
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();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg