网页版贪吃蛇(HTML 5)
(文字描述太繁琐了, 贪吃蛇算法很经典不多说， 那个伪播放器，不值一提。）
源码： 网页版贪吃蛇 【https://files.cnblogs.com/crystalplus/%E4%B8%A4%E4%B8%AA%E7%BD%91%E9%A1%B5%E6%A0%B7%E4%BE%8B(%E6%97%A0%E9%9F%B3%E4%B9%90%E7%89%88).7z】
显示截图:
//file : mian.css
body
{
margin:0px;
margin-top:20px;
padding: 0px;
background-color: gray;
}
#base
{
width:1240px;
margin-top:20px;
padding-top: 20px;
margin: 5px auto;
padding: 20px;
border:5px silver groove;
position:relative;
box-shadow: 10px 10px 5px #888888;
border-radius:20px;
background-color:white;
}
#wow
{
width: 1000px;
height:350px;
float:left;
position:relative;
margin:15px;
margin-left: 50px;
padding:15px;
}
#c{
background:fuchsia url('./def.jpg') no-repeat;
background-position: -50px;
margin: 5px;
float:left;
border-radius:25px;
}
#cav_con
{
background-color:black;
border:15px black solid;
box-shadow: 10px 10px 5px black;
border-radius:30px;
}
#mycanvas
{
background:white no-repeat url('../images/bg.jpg');
margin-top: 6px;
float:left;
border-radius:25px;
}
#content{
background: fuchsia url('../images/slider.jpg') no-repeat;
float:left;
width:336px;
height:340px;
margin: 10px;
margin-left: 50px;
color:fuchsia;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
border-radius: 25px;
box-shadow: 10px 10px 5px black;
}
#content p
{
color:white;
padding:5px;
font: bold 20px Tahoma;
color: skyBlue;
}
#musicplay{
position:relative;
float:right;
text-align:left;
//margin-top:10px;
top:0px;
right:250px;
}
#support
{
clear:left;
}
footer{
width:1220px;
margin: 0px auto;
padding:10px;
margin-top:20px;
border-top: 2px teal groove;
font-size:small;
border-radius:10px;
background: #EAEAEA;
color: black;
font-weight:bold;
}
span:hover
{
margin:5px;
color:Skyblue;
//font-size: 16px;}
// file: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Just test</title>
<link type="text/css" href="css/main.css" rel="stylesheet">
<script src="style/modernizr-1.6.min.js"></script>
<script>
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded()
{
canvasApp();
}
function canvasSupport()
{
return Modernizr.canvas;
}
function canvasApp()
{
if(!canvasSupport())
{
return;
}
else
{
var thecanvas = document.getElementById("mycanvas");
var context = thecanvas.getContext('2d');
}
const GAME_STARTED = 1;
const DOT_SIZE = 10;
var dots = 3;
var apple;
var left = false;
var right = true;
var up = false;
var down = false;
var inGame = true;
var keyPressList = [];
var dotArray ;//= new Array();
var head = new Image();
head.src = "./images/head.png";
var dot = new Image();
dot.src = "./images/dot.png";
var app = new Image();
app.src = "./images/apple.png";
var apple = new Apple(80, 50);
initDots();
paint();
//const FRAME_RATE = 20;
//var intervalTime = 1000 / FRAME_RATE;
setInterval(repaint, 180);
document.onkeydown=function(e){
e=e?e:window.event;
//ConsoleLog.log(e.keyCode + "down");
keyPressList[e.keyCode]=true;
}
document.onkeyup=function(e){
//document.body.onkeyup=function(e){
e=e?e:window.event;
//ConsoleLog.log(e.keyCode + "up");
keyPressList[e.keyCode]=false;
};
function checkKeys() {
//check keys
if (keyPressList[38]==true && !down){
left = false;
right = false;
up = true;
}
if (keyPressList[40]==true && !up){
left = false;
right = false;
down = true;
}
if (keyPressList[37] == true && !right) {
left = true;
up = false;
down = false;
}
if (keyPressList[39] == true && !left) {
right = true;
up = false;
down = false;
}
}
function Dot(x1, y1)
{
this.PointX = x1;
this.PointY = y1;
this.getX = getPointX;
this.getY = getPointY;
this.setX = setPointX;
this.setY = setPointY;
}
function getPointX()
{
return this.PointX;
}
function getPointY()
{
return this.PointY;
}
function setPointX(e)
{
this.PointX += e;
}
function setPointY(e)
{
this.PointY += e;
}
function initDots()
{
dotArray = new Array();
for(var z = 0; z < dots; z++)
{
dotArray.push(new Dot((50 - z * 10), 50));
}
apple.localApple();
}
function Apple(x, y)
{
this.x = x;
this.y = y;
this.localApple = LocalApple;
this.getx = function(){ return this.x};
this.gety = function() {return this.y};
}
function checkApple()
{
if(dotArray[0].getX() == apple.getx() && dotArray[0].getY() == apple.gety())
{
dots++;
dotArray.push(new Dot(0, 0));
apple.localApple();
}
}
function LocalApple()
{
var rx = Math.round(Math.random() * 49);
this.x = rx * DOT_SIZE;
var ry = Math.round(Math.random() * 31);
this.y = ry * DOT_SIZE;
}
function checkCollision()
{
for(var z = dots ; z > 0; z--)
{
if((z > 4) && (dotArray[0] == dotArray[z] ))
{
inGame = false;
}
}
var px = dotArray[0].getX();
var py = dotArray[0].getY();
if( py == thecanvas.height)
{
inGame = false;
}
if( py == 0)
{
inGame = false;
}
if( px == thecanvas.width)
{
inGame = false;
}
if( px == 0)
{
inGame = false;
}
}
function move()
{
for(var q = dots -1; q > 0; q--)
{
dotArray[q ].PointX = dotArray[q -1 ].getX();
dotArray[q ].PointY = dotArray[q -1].getY();
//dotArray[q] = dotArray[q ];
}
if(left)
{
dotArray[0].PointX -= DOT_SIZE;
}
if(right)
{
dotArray[0].PointX += DOT_SIZE;//
//dotArray[0].setX(DOT_SIZE);
}
if(up)
{
dotArray[0].PointY -= DOT_SIZE;
}
if(down)
{
dotArray[0].PointY += DOT_SIZE;
}
}
function restart()
{
if (keyPressList[32]==true){
inGame = true;
left = false;
right = true;
up = false;
down = false;
dots = 3;
delete dotArray;
initDots();
}
}
function gameOver()
{
//context.clearRect(0, 0, thecanvas.width, thecanvas.height);
context.fillStyle = 'aqua';
context.font = '30px _sans';
context.textBaseline = 'top';
context.fillText ("Game Over!", 150, 130);
context.fillText ("Press Space key to restart!", 80, 160);
}
function paint()
{
context.clearRect(0, 0, thecanvas.width, thecanvas.height);
if (inGame) {
context.drawImage(app, apple.x, apple.y);
context.save();
for (var e = 0; e < dots; e++) {
if (e == 0)
{
context.drawImage(head, dotArray[e].PointX, dotArray[e].PointY);
}
else
{
context.drawImage(dot, dotArray[e].PointX, dotArray[e].PointY);
}
}
context.restore();
} else {
gameOver();
}
}
function repaint()
{
if(inGame)
{
checkApple();
move();
checkCollision();
//apple.localApple();
checkKeys();
}
else
{
restart();
}
paint();
}
function drawScreen()
{
context.clearRect(0, 0, thecanvas.width, thecanvas.height);
context.drawImage(head, x, y);
context.drawImage(dot, x, y - 10);
if(x == 0 || x == thecanvas.width )
{
Xstep = -Xstep;
}
if(y == 0 || y == thecanvas.height)
{
Ystep = -Ystep;
}
x -= Xstep;
y -= Ystep;
}
//setInterval(drawScreen, 200);
}
</script>
</head>
<body>
<div id="base">
<header >
<h3 style="color:Skyblue;">: - )The Html Games!!! Snake</h3>
<aside id="musicplay">
<audio id="uu" autoplay="autoplay" preload="metadata" autobuffer onended="MusicPlayer()" controls="" >
<source src="./music/music.mp3"></source>
<source src="./music/music.ogg"></source>
</audio>
</aside>
<script>
function supportedAudioFormat(audio) {
var returnExtension = "";
if (audio.canPlayType("audio/mp3") == "probably" || audio.canPlayType("audio/mp3") == "maybe") {
returnExtension = ".mp3";
}
else if (audio.canPlayType("audio/ogg") =="probably" || audio.canPlayType("audio/ogg") == "maybe") {
returnExtension = ".ogg";
}
return returnExtension;
}
var count_one = 1;
var con = document.getElementById("uu");
con.volume = 0.36;
// con.controls="controls";
var Mnames = new Array();
Mnames.push("music");
Mnames[1] = "sanyue";
//Mnames[2] = "Sunshine Girl";
// Mnames.push("old boy");
var where = "./music/";
var audioType = supportedAudioFormat(con);
function MusicPlayer()
{
if(con.ended)
{
con.src= where + Mnames[count_one] + audioType;
con.play();
}
if(count_one != Mnames.length - 1)
{
count_one++;
}
else
{
count_one = 0;
}
}
</script>
</header>
<div id="wow">
<div id ="cav_con" style="float:left;">
<canvas id="mycanvas" width="500px" height="320px" >
Your browser does not support Html 5
</canvas>
</div>
<div id="content" >
<p > This is a Demo and Expression</p>
<p> ToRight : Right Array Key </p>
<p>Fire : Space Key</p>
<P>ToLeft : Left Array Key </p>
</div>
</div>
<!--<p id="support" onclick="support_html()">Click me :- D, check whether your browser supports Html 5</p>-->
<div id="support">
<footer><span class="copyright"> 2011 Made By Thomas.</span></footer>
</div>
</div>
</body>
</html>
