在别人基础上，修改了一部分。用谷歌浏览器或360极速浏览器都可以。ie8不行。
index.html源码
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style type="text/css"> *{margin:0;padding: 0;font-family: "Microsoft YaHei";} #page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; } #yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;} #mark{font-weight: 800;} #mark_con{ color: red; } button{width: 50px; } a{text-decoration:none;} </style> <script type="text/javascript"> //伪常量 var BLOCK_SIZE = 20; //格子大小 var COLS = 40; //列数 var ROWS = 30; //行数 //变量 var snakes = []; //保存蛇坐标 var c = null; //绘图对象 var toGo = 3; //行进方向 var snakecount = 4; //蛇身数量 var interval = null; //计时器 var foodX = 0; //食物X轴坐标 var foodY = 0; //食物Y轴坐标 var oMark = null; //分数显示框 var isPause = false; //是否暂停 // 绘图函数 function draw(){ c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS); //画出横线 for( var i = 1; i <= ROWS; i++ ) { c.beginPath(); c.moveTo(0, i * BLOCK_SIZE); c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE); c.strokeStyle = "gray"; c.stroke(); } //画出竖线 for(var i = 1; i <= COLS; i++){ c.beginPath(); c.moveTo(i * BLOCK_SIZE, 0); c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS); c.stroke(); } //画出蛇 for (var i = 0; i < snakes.length; i++){ c.beginPath(); c.fillStyle = "green"; c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE); c.moveTo(snakes[i].x, snakes[i].y); c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y); c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE); c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE); c.closePath(); c.strokeStyle = "red"; c.stroke(); } //画出食物 c.beginPath(); c.fillStyle = "yellow"; c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE); c.moveTo(foodX, foodY); c.lineTo(foodX + BLOCK_SIZE, foodY); c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE); c.lineTo(foodX, foodY + BLOCK_SIZE); c.closePath(); c.strokeStyle = "red"; c.stroke(); } //游戏初始化 function start(){ for( var i = 0; i < snakecount; i++){ snakes[i] = {x: i * BLOCK_SIZE, y: 0}; } addFood(); //draw(); oMark.innerHTML = 0; } //移动函数 function move(){ switch(toGo){ case 1: //左边 snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y}); break; case 2: //上边 snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE}); break; case 3: //右边 snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y}); break; case 4: //下边 snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE}); break; default:; } snakes.shift(); isEat(); isDie(); draw(); } //吃到食物判断 function isEat(){ if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) { oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString(); addFood(); addSnake(); } } //添加蛇身 function addSnake(){ snakecount++; snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS}); } //交互响应函数 function keydown(keyCode){ switch(keyCode){ case 37: //左边 if(toGo != 1 && toGo != 3) toGo = 1;break; case 38: //上边 if(toGo != 2 && toGo != 4) toGo = 2;break; case 39: //右边 if(toGo != 3 && toGo != 1) toGo = 3;break; case 40: //下的 if(toGo != 4 && toGo != 2) toGo = 4;break; case 32: //开始/暂停 if(isPause){ interval = setInterval(move,200); isPause = false; document.getElementById('pause').innerHTML = "Pause"; }else{ clearInterval(interval); isPause = true; document.getElementById('pause').innerHTML = "Start"; } break; } } //制造食物 function addFood(){ foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE; foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE; // console.log(foodX + " -- " + foodY); } //死亡判断 function isDie(){ if(snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS || snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE * ROWS){ clearInterval(interval); alert("你撞墙了，Game Over!"); } for(var i = 0; i < snakecount - 1; i++){ if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){ clearInterval(interval); alert("你咬到自己了，Game Over!"); } } } // 启动函数 window.onload = function(){ c = document.getElementById('canvas').getContext('2d'); oMark = document.getElementById('mark_con'); start(); interval = setInterval(move,200); document.onkeydown = function(event){ var event = event || window.event; keydown(event.keyCode); } } </script> </head> <body> <div id="page"> <div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div> <div id="help"> <div id="mark">得分：<span id="mark_con"></span></div> <div id="mark">上下左右 启/停：↑ ↓ ← → 空格</div> <div id="helper"> <table> <tr> <td></td> <td><button οnclick="keydown(38);">上</button></td> <td></td> </tr> <tr> <td><button οnclick="keydown(37);">左</button></td> <td><button οnclick="keydown(32);" id="pause">暂停</button></td> <td><button οnclick="keydown(39);">右</button></td> </tr> <tr> <td></td> <td><button οnclick="keydown(40);">下</button></td> <td></td> </tr> </table><a href="index.html">再玩一次</a> </div> </div> </div> <div style="text-align:center;"> <p>来源:<a href="https://chenhao0568.taobao.com/" target="_blank">小黄人软件 优化</a></p> </div> </body> </html>
HTML5俄罗斯方块源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <script type="text/javascript"> function getPanelArr(x,y){ var panelArr = new Array(x); for(var i = 0 ;i<x;i++)panelArr[i]=new Array(y); return panelArr; } function initPanelArr(){ for(var i = 0 ; i<22;i++){ for(var j = 0 ; j <17;j++){ panelArr[i][j]= 0 ; } } } function initSmallArr(){ for(var i = 0 ; i<5;i++){ for(var j = 0 ; j <5;j++){ smallArr[i][j]= 0 ; } } } function colorOk(){ for(var i=1;i<=20;i++){ for(var j=1;j<=15;j++){ sum = i*17+j; colorArr[i][j] = document.getElementById(sum).style.backgroundColor ; } } } function getScore(){ var totalScore = 0 ; var rowTag = false; for(var i=1;i<=20;i++){ rowTag = false; for(var j=1;j<=15;j++){ if(panelArr[i][j]==0){rowTag = true ;break;} } if(!rowTag){ panelArr[i] = null;totalScore++; } } /** 改变分值 */ SCORE += totalScore ; if(totalScore!=0)document.getElementById("scoreInput").value="得分:"+SCORE; colorOk(); var k = 20 ; for(var i=20;i>=1;i--){ if(panelArr[i]!=null){ colorArr[k] = colorArr[i];// panelArr[k--]=panelArr[i]; } } for(;k>=1;k--){ colorArr[k] = new Array(17); panelArr[k] = new Array(17); for(var j = 1 ;j<=15;j++){ panelArr[k][j]=0; colorArr[k][j] = bgColor; } } for(var i=1;i<=20;i++){ for(var j=1;j<=15;j++){ document.getElementById(i*17+j).style.backgroundColor = colorArr[i][j] ; if(panelArr[i][j] ==0 ){ //cleanOneBlock(i*17+j); } else{ //drawOneBlock(i*17+j); } } } } function drawOneBlock(id){ document.getElementById(id).style.backgroundColor=blockColor; } function cleanOneBlock(id){ document.getElementById(id).style.backgroundColor=bgColor; } function getBlockArr(){ var blockArr= new Array(4); var smallArr= null; smallArr = getPanelArr(5,5); smallArr[0][0]=0;smallArr[0][1] =0;smallArr[0][2]=0;smallArr[0][3]=0;smallArr[0][4]=0; smallArr[1][0]=0;smallArr[1][1] =0;smallArr[1][2]=0;smallArr[1][3]=0;smallArr[1][4]=0; smallArr[2][0]=0;smallArr[2][1] =1;smallArr[2][2]=1;smallArr[2][3]=1;smallArr[2][4]=0; smallArr[3][0]=0;smallArr[3][1] =0;smallArr[3][2]=0;smallArr[3][3]=1;smallArr[3][4]=0; smallArr[4][0]=0;smallArr[4][1] =0;smallArr[4][2]=0;smallArr[4][3]=0;smallArr[4][4]=0; blockArr[0]=smallArr; smallArr = getPanelArr(5,5); smallArr[0][0]=0;smallArr[0][1] =0;smallArr[0][2]=0;smallArr[0][3]=0;smallArr[0][4]=0; smallArr[1][0]=0;smallArr[1][1] =0;smallArr[1][2]=0;smallArr[1][3]=0;smallArr[1][4]=0; smallArr[2][0]=1;smallArr[2][1] =1;smallArr[2][2]=1;smallArr[2][3]=1;smallArr[2][4]=0; smallArr[3][0]=0;smallArr[3][1] =0;smallArr[3][2]=0;smallArr[3][3]=0;smallArr[3][4]=0; smallArr[4][0]=0;smallArr[4][1] =0;smallArr[4][2]=0;smallArr[4][3]=0;smallArr[4][4]=0; blockArr[1]=smallArr; smallArr = getPanelArr(5,5); smallArr[0][0]=0;smallArr[0][1] =0;smallArr[0][2]=0;smallArr[0][3]=0;smallArr[0][4]=0; smallArr[1][0]=0;smallArr[1][1] =0;smallArr[1][2]=0;smallArr[1][3]=0;smallArr[1][4]=0; smallArr[2][0]=0;smallArr[2][1] =1;smallArr[2][2]=1;smallArr[2][3]=0;smallArr[2][4]=0; smallArr[3][0]=0;smallArr[3][1] =1;smallArr[3][2]=1;smallArr[3][3]=0;smallArr[3][4]=0; smallArr[4][0]=0;smallArr[4][1] =0;smallArr[4][2]=0;smallArr[4][3]=0;smallArr[4][4]=0; blockArr[2]=smallArr; smallArr = getPanelArr(5,5); smallArr[0][0]=0;smallArr[0][1] =0;smallArr[0][2]=0;smallArr[0][3]=0;smallArr[0][4]=0; smallArr[1][0]=0;smallArr[1][1] =0;smallArr[1][2]=0;smallArr[1][3]=0;smallArr[1][4]=0; smallArr[2][0]=0;smallArr[2][1] =1;smallArr[2][2]=1;smallArr[2][3]=1;smallArr[2][4]=0; smallArr[3][0]=0;smallArr[3][1] =0;smallArr[3][2]=1;smallArr[3][3]=0;smallArr[3][4]=0; smallArr[4][0]=0;smallArr[4][1] =0;smallArr[4][2]=0;smallArr[4][3]=0;smallArr[4][4]=0; blockArr[3]=smallArr; return blockArr; } var SCORE = 0 ; var STOPTAG = true ; var SPEED = 1000; var GAMEOVERTAG = false; var panelArr = getPanelArr(22,17) ; var colorArr = getPanelArr(22,17) ; var smallArr = getPanelArr(5,5); var blockArr = getBlockArr(); var tTime = null; var blockColor = "red"; var bgColor = "#ffffff"; initPanelArr(); var centerX = 1; var centerY = 8; var downTag = false; function generateBlock(){ var t = Math.floor(Math.random()*4); r = Math.floor(10+Math.random()*246); g = Math.floor(Math.random()*246); b = Math.floor(Math.random()*246); blockColor = "rgb("+r+", "+g+", "+b+")"; smallArr = blockArr[t]; centerX = 0; centerY = 8; drawSmallArr(); } function addBlock(){ downTag = true; var sum = 0 ; var start = (centerX-2)*17+(centerY-2); for(var i =0 ;i<5;i++){ for(var j=0;j<5;j++){ if(smallArr[i][j]==1){ sum=start+i*17+j; if(sum<17)continue; panelArr[Math.floor(sum/17)][sum]=1; } } } isGameOver(); } function isCanMove(k){ var sum = 0 ; var start = (centerX-2)*17+centerY-2; for(var i =4 ;i>=0;i--){ for(var j=4;j>=0;j--){ if(smallArr[i][j]==1){ sum=start+i*17+j; if(panelArr[Math.floor(sum/17)][(sum)+k]==1&&smallArr[i][j]==1)return false; } } } return true } function isAddBlock(){ //var rowTag=0; var sum = 0 ; var start = (centerX-2)*17+centerY-2; for(var i =4 ;i>=0;i--){ for(var j=4;j>=0;j--){ //if(rowTag>i)break; if(smallArr[i][j]==1){ //rowTag = i; sum=start+i*17+j; if(sum<0)continue; if(Math.floor(sum/17)>=20)return true; if(panelArr[Math.floor(sum/17)+1][sum]==1)return true; } } } return false; } function downOneStep(){ if(STOPTAG||GAMEOVERTAG)return; if(isAddBlock()){ addBlock(); getScore(); generateBlock(); return; } cleanSmallArr(); centerX++; drawSmallArr(); } function leftOneStep(){ var start=(centerX-2)*17+1; for(var i = 0;i<5;i++){ sum = start+i*17; if(sum>341)continue; if(document.getElementById(sum).style.backgroundColor==blockColor)return; } if(!isCanMove(-1))return; cleanSmallArr(); centerY--; centerY=(centerY+17); drawSmallArr(); } function rightOneStep(){ var start=(centerX-2)*17+15; for(var i = 0;i<5;i++){ sum = start+i*17; if(sum>356)continue; if(document.getElementById(sum).style.backgroundColor==blockColor)return; } if(!isCanMove(1))return; cleanSmallArr(); centerY++; centerY=(centerY+17); drawSmallArr(); } function clockOneStep(a){ cleanSmallArr(); turnClock(a); drawSmallArr(); } function cleanSmallArr(){ var initX=centerX-2; var initY=centerY-2; var start = initX*17+initY; for(var i=0;i<5;i++){ for(var j = 0 ;j <5;j++){ sum=start+i*17+j; if(sum<17)continue; if(smallArr[i][j]==1){ //if(panelArr[Math.floor(sum/17)+1][sum]==0)continue; if(sum<16&&sum>0&&Math.floor(sum/17)<21&&panelArr[Math.floor(sum/17)][sum]==0) document.getElementById(sum).style.backgroundColor=bgColor; } } } } function drawSmallArr(){ var initX=centerX-2; var initY=centerY-2; var start = initX*17+initY; for(var i=0;i<5;i++){ for(var j = 0 ;j <5;j++){ sum=start+i*17+j; if(sum<17)continue; if(smallArr[i][j]==0){ //if(panelArr[Math.floor(sum/17)+1][sum]==0)continue; if(sum<16&&sum>0&&Math.floor(sum/17)<21&&panelArr[Math.floor(sum/17)][sum]==0) document.getElementById(sum).style.backgroundColor=bgColor; }else{ document.getElementById(sum).style.backgroundColor=blockColor; } } } } //initSmallArr(); function turnClock(k){ if(isAddBlock())return; var tmpArr = getPanelArr(5,5); for(var i = 0 ; i <5 ; i++){ for(var j = 0 ;j < 5 ; j++){ tmpArr[i][j]=smallArr[k*(2*(k+1)-j)][-k*(2*(-k+1)-i)]; } } for(var i = 0 ; i <5 ; i++){ for(var j = 0 ;j < 5 ; j++){ smallArr[i][j]=tmpArr[i][j]; } } if(centerY<3)centerY=3; if(centerY>13)centerY=13; } function _play(){ if(!GAMEOVERTAG){ if(!STOPTAG) downOneStep(); } } function play(){ if(tTime!=null)window.clearInterval(tTime); tTime = window.setInterval(_play,SPEED); } function printSmall(){ var str = ""; for(var i = 0;i<5;i++){ for(var j = 0 ;j <5 ; j++){ str+=smallArr[i][j]; } str+="<br>"; } print(str); } function print(str){ document.write(str); } function isGameOver(){ for(var i = 1 ;i <= 15;i++){ if(panelArr[1][i]==1){ GAMEOVERTAG=true; STOPTAG = true; alert("GAME OVER !"); return ; } } } var Replay = play; function drawPanel(){ var bodyNode = document.getElementsByTagName("body")[0]; //bodyNode.style.backgroundColor = "rgb(0,0,0)"; var contentHtml = ""; contentHtml+="<div id='mainPanel' style='top: 10px;position:absolute ; left: 30%;background-color:rgb(0,0,0);'>"; contentHtml+="<div id='tooldiv' style='margin:2px 2px 2px 2px;'><input id='stopBtn' type='button' value='开始' style='float:left'></input><input id='restartBtn' type='button' value='重置' style='float:left'></input><select id='speedBtn'><OPTION VALUE='1000'>初级1</OPTION><OPTION VALUE='800'>初级2</OPTION><OPTION VALUE='600'>初级3</OPTION><OPTION VALUE='400'>中级1</OPTION><OPTION VALUE='200'>中级2</OPTION><OPTION VALUE='100'>中级3</OPTION><OPTION VALUE='80'>高级1</OPTION><OPTION VALUE='50'>高级2</OPTION><OPTION VALUE='20'>高级3</OPTION></select><input id='scoreInput' readOnly='true' type='text' style='border:0px;width:50px' value='得分:0'></input></div>"; contentHtml+="<div id='showPanel'>"; var i = 0 ;var j = 0 ; var colorStr=""; var sizeStr="8px"; var ma = 1; for(;i<22;i++){ j = 0; sizeStr="8px"; ma=1; if(i==0||i==21||j==0||j==16){colorStr="black";sizeStr="8px";} else colorStr=bgColor; contentHtml+= "<div id='"+(17*i+j)+"' style='clear:left ;float:left;width:"+sizeStr+";height:"+sizeStr+";background-color:"+colorStr+";margin:0px 0px 1px 1px;' '></div>"; for(j = 1;j<17;j++){ sizeStr="8px"; if(i==0||i==21||j==0||j==16){colorStr="black";sizeStr="8px";} else colorStr=bgColor; contentHtml += "<div id='"+(17*i+j)+"' style='float:left;width:"+sizeStr+";height:"+sizeStr+";background-color:"+colorStr+";margin:0px 0px 1px 1px' ></div>"; } } contentHtml += "</div></div>"; document.write(contentHtml); var panelNode = document.getElementById("showPanel"); var stopBtn = document.getElementById("stopBtn"); stopBtn.οnclick=function(){ if(stopBtn.value=='开始'){ stopBtn.value = '暂停'; STOPTAG = false; }else{ stopBtn.value = '开始'; STOPTAG = true; } }; var restartBtn = document.getElementById("restartBtn"); restartBtn.οnclick=function(){ window.location.reload(); }; var speedBtn = document.getElementById("speedBtn"); speedBtn.οnchange=function(){ SPEED=speedBtn.value; speedBtn.blur(); window.focus(); play(); } } window.onload = function(){ drawPanel(); generateBlock(); play(); //test(); window.οnkeydοwn=function(){ switch(event.keyCode){ case 37: leftOneStep(); break; case 38: clockOneStep(1); break; case 39: rightOneStep(); break; case 40: for(var i=0;i<20;i++){ if(downTag){downTag=false;break;} downOneStep(); } break; } } } </script> </head> </html>