HTML5貪吃蛇程式碼
阿新 • • 發佈：2019-01-04
首先宣告，這是網上摘錄的貪吃蛇完整程式碼，放在我部落格上僅作學習用。
<!DOCTYPE html>
<html lang="en"><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 80: //開始/暫停
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){
alert("Game Over!");
clearInterval(interval);
}
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,100);
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="helper">
<table>
<tr>
<td></td>
<td><button onclick="keydown(38);">上</button></td>
<td></td>
</tr>
<tr>
<td><button onclick="keydown(37);">左</button></td>
<td><button onclick="keydown(80);" id="pause">暫停</button></td>
<td><button onclick="keydown(39);">右</button></td>
</tr>
<tr>
<td></td>
<td><button onclick="keydown(40);">下</button></td>
<td></td>
</tr>
</table><a href="index.html">再玩一次</a>
</div>-->
</div>
</div>
<div style="text-align:center;">
<p>來源:<a href="http://www.mycodes.net/" target="_blank">原始碼之家</a></p>
</div>
</body>
</html>