代码-贪吃蛇
Posted 冯丙见
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了代码-贪吃蛇相关的知识，希望对你有一定的参考价值。
贪吃蛇游戏代码
<!DOCTYPE html>
<html>
<head>
<style>
*
box-sizing: border-box;
html,
body
background-color: #000;
height: 100%;
body
background: #222;
background: -webkit-radial-gradient(#333, #111);
background: radial-gradient(#333, #111);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
font: 100%/1.5 sans-serif;
overflow: hidden;
/*================================================
Score
================================================*/
.score
color: rgba(255, 255, 255, 0.5);
font-size: 16px;
font-weight: bold;
padding-top: 5px;
text-align: center;
/*================================================
Stage
================================================*/
.stage
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
z-index: 2;
/*================================================
Tiles
================================================*/
.tile
background: rgba(0, 0, 0, 0.15);
position: absolute;
-webkit-transition-property: background,
box-shadow,
opacity,
-webkit-transform;
transition-property: background,
box-shadow,
opacity,
-webkit-transform;
transition-property: background,
box-shadow,
opacity,
transform
;
transition-property:
background,
box-shadow,
opacity,
transform,
-webkit-transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 3000ms;
transition-duration: 3000ms;
.tile:before
bottom: 0;
content: '';
height: 0;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
.tile.path:before
opacity: 1;
.tile.up:before
border-bottom: 4px inset rgba(255, 255, 255, 0.15);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
.tile.down:before
border-top: 4px inset rgba(255, 255, 255, 0.15);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
.tile.left:before
border-right: 4px inset rgba(255, 255, 255, 0.15);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
.tile.right:before
border-left: 4px inset rgba(255, 255, 255, 0.15);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
@media (max-width: 900px), (max-height: 900px)
.tile.up:before,
.tile.down:before,
.tile.left:before,
.tile.right:before
border-width: 3px;
@media (max-width: 500px), (max-height: 500px)
.tile.up:before,
.tile.down:before,
.tile.left:before,
.tile.right:before
border-width: 2px;
.tile.pressed
background: rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
-webkit-transition-duration: 0ms;
transition-duration: 0ms;
</style>
</head>
<body>
<div class="score">0</div>
<div class="stage"></div>
<script>
/*================================================
Polyfill
================================================*/
(function() 'use strict';
/*================================================
Request Animation Frame
================================================*/
var lastTime = 0;
var vendors = [ 'webkit', 'moz' ];
for( var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x )
window.requestAnimationFrame = window[ vendors[ x ] + 'RequestAnimationFrame' ];
window.cancelAnimationFrame = window[ vendors[ x ] + 'CancelAnimationFrame' ] || window[ vendors[ x ] + 'CancelRequestAnimationFrame' ];
if( !window.requestAnimationFrame )
window.requestAnimationFrame = function( callback, element )
var currTime = new Date().getTime();
var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
var id = window.setTimeout(
function()
callback( currTime + timeToCall );
, timeToCall );
lastTime = currTime + timeToCall;
return id;
if( !window.cancelAnimationFrame )
window.cancelAnimationFrame = function( id )
clearTimeout( id );
)();
/*================================================
DOM Manipulation
================================================*/
(function() 'use strict';
function hasClass( elem, className )
return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );
;
function addClass( elem, className )
if( !hasClass(elem, className ) )
elem.className += ' ' + className;
;
function removeClass( elem, className )
var newClass = ' ' + elem.className.replace( /[\\t\\r\\n]/g, ' ' ) + ' ';
if( hasClass( elem, className ) )
while( newClass.indexOf(' ' + className + ' ' ) >= 0 )
newClass = newClass.replace( ' ' + className + ' ', ' ' );
elem.className = newClass.replace( /^\\s+|\\s+$/g, '' );
;
function toggleClass( elem, className )
var newClass = ' ' + elem.className.replace( /[\\t\\r\\n]/g, ' ' ) + ' ';
if( hasClass(elem, className ) )
while( newClass.indexOf( ' ' + className + ' ' ) >= 0 )
newClass = newClass.replace( ' ' + className + ' ' , ' ' );
elem.className = newClass.replace( /^\\s+|\\s+$/g, '' );
else
elem.className += ' ' + className;
;
)();
/*================================================
Core
================================================*/
g = ;
(function() 'use strict';
/*================================================
Math
================================================*/
g.m = Math;
g.mathProps = 'E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min'.split( ' ' );
for ( var i = 0; i < g.mathProps.length; i++ )
g[ g.mathProps[ i ] ] = g.m[ g.mathProps[ i ] ];
g.m.TWO_PI = g.m.PI * 2;
/*================================================
Miscellaneous
================================================*/
g.isset = function( prop )
return typeof prop != 'undefined';
;
g.log = function()
if( g.isset( g.config ) && g.config.debug && window.console )
console.log( Array.prototype.slice.call( arguments ) );
;
)();
/*================================================
Group
================================================*/
(function() 'use strict';
g.Group = function()
this.collection = [];
this.length = 0;
;
g.Group.prototype.add = function( item )
this.collection.push( item );
this.length++;
;
g.Group.prototype.remove = function( index )
if( index < this.length )
this.collection.splice( index, 1 );
this.length--;
;
g.Group.prototype.empty = function()
this.collection.length = 0;
this.length = 0;
;
g.Group.prototype.each = function( action, asc )
var asc = asc || 0,
i;
if( asc )
for( i = 0; i < this.length; i++ )
this.collection[ i ][ action ]( i );
else
i = this.length;
while( i-- )
this.collection[ i ][ action ]( i );
;
)();
/*================================================
Utilities
================================================*/
(function() 'use strict';
g.util = ;
/*================================================
Random
================================================*/
g.util.rand = function( min, max )
return g.m.random() * ( max - min ) + min;
;
g.util.randInt = function( min, max )
return g.m.floor( g.m.random() * ( max - min + 1) ) + min;
;
());
/*================================================
State
================================================*/
(function() 'use strict';
g.states = ;
g.addState = function( state )
g.states[ state.name ] = state;
;
g.setState = function( name )
if( g.state )
g.states[ g.state ].exit();
g.state = name;
g.states[ g.state ].init();
;
g.currentState = function()
return g.states[ g.state ];
;
());
/*================================================
Time
================================================*/
(function() 'use strict';
g.Time = function()
this.reset();
g.Time.prototype.reset = function()
this.now = Date.now();
this.last = Date.now();
this.delta = 60;
this.ndelta = 1;
this.elapsed = 0;
this.nelapsed = 0;
this.tick = 0;
;
g.Time.prototype.update = function()
this.now = Date.now();
this.delta = this.now - this.last;
this.ndelta = Math.min( Math.max( this.delta / ( 1000 / 60 ), 0.0001 ), 10 );
this.elapsed += this.delta;
this.nelapsed += this.ndelta;
this.last = this.now;
this.tick&#以上是关于代码-贪吃蛇的主要内容，如果未能解决你的问题，请参考以下文章