[html] view plain copy print?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
text-align: center;
}
#canvas{
box-shadow: 0 5px 40px black;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
</body>
<!--<script src="snake.js"></script>-->
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); //獲取畫板
var snake = {
head:null, //蛇頭
snakeArray:null ,//整蛇數組、包括蛇頭
direction:"right"//蛇的運動方向，後期根據鍵盤來定
};
initSnake() ;//初始化
drawSnake() ;//繪製到頁面上
var foot = randomCreateFoot(); //得到食物
draw(foot);
//讓蛇動起來
var t = setInterval(function () {
context.clearRect(0,0,canvas.width,canvas.height);
moveSnake() ;//移動蛇
drawSnake() ;//繪製到頁面上
draw(foot) ;
},500);
//蛇移動
function moveSnake() {
/* 蛇移動原理：
* (1)創建一段，放到蛇頭的位置。
* (2)將蛇頭的位置，往前推進20px，到底往哪個方向推進，就需要根據當前按鍵盤的方向了。
* (3)如果喫到了食物，就不刪除最後一節，否則刪除刪除最後一節
*/
var snakeArray = snake.snakeArray;
var modiy = createSectionObj(snake.head.x,snake.head.y,20,20,"gray");
snakeArray.splice(1,0,modiy);
//修改蛇頭
switch (snake.direction){
case "up" :{
snake.head.y = snake.head.y - 20;
break;
}
case "down" :{
snake.head.y = snake.head.y + 20;
break;
}
case "left" :{
snake.head.x = snake.head.x - 20;
break;
}
case "right" :{
snake.head.x = snake.head.x + 20;
break;
}
}
if(isEat()){
foot = randomCreateFoot();
}else {
snakeArray.pop();
}
if(isGameOver()){
clearInterval(t);
// setTimeout(function () {
// context.clearRect(0,0,canvas.width,canvas.height);
// },500);
alert("game Over :"+snakeArray.length);
}
}
//隨機出現食物
function randomCreateFoot() {
/*
* 蛇的一塊一塊是寬度和高度是20，所以我們將canvas的寬度和高度分成多塊，
* 食物隨機出現在某一塊上
*
* 既然是隨機出現食物，有可能出現的位置剛好是在蛇身上。
* 所以，如果出現在蛇身上，需要重新生成
*
* */
var widthRange = canvas.width / 20 - 1;
var heightRange = canvas.height / 20 - 1;
var x = Math.round(Math.random() * widthRange) * 20;
var y = Math.round(Math.random() * heightRange) * 20;
return createSectionObj(x,y,20,20,"yellow");
}
//初始化 -默認蛇的長度是4
function initSnake() {
var snakeArray = []; //數組的第一個作爲蛇頭
for(var i = 0;i < 4;i++){
var sectionObj = createSectionObj(20*i,0,20,20,"gray");
snakeArray.unshift(sectionObj);
}
//蛇頭的顏色是紅色的
var head = snakeArray[0];
head.color = "red";
//將兩個後面常用的東西定爲屬性，方便後面調用
snake.head= head;
snake.snakeArray = snakeArray;
}
//創建一節蛇對象
function createSectionObj(x,y,w,h,color) {
return {
x:x,
y:y,
w:w,
h:h,
color:color
}
}
//判斷是否喫到食物
function isEat() {
if(foot.x == snake.head.x && foot.y == snake.head.y){
return true;
}else {
return false;
}
}
//繪製蛇
function drawSnake() {
var snakeArray = snake.snakeArray;
for(var i = 0;i< snakeArray.length;i++){
var section = snakeArray[i];
draw(section)
}
}
//繪製一節蛇
function draw(section) {
context.beginPath();
context.fillStyle = section.color;
context.rect(section.x,section.y,section.w,section.h);
context.fill();
context.stroke();
}
//判斷遊戲是否結束
function isGameOver() {
/*
* (1)頭碰到牆壁
* (2)頭碰到自己
* */
var canvasWidth = canvas.width;
var canvasHeigh = canvas.height;
var head = snake.head;
if(head.x < 0 || head.y < 0 || head.x > canvasWidth || head.y > canvasHeigh ){
return true;
}
for (var i = 1;i<snake.snakeArray.length;i++){
var section = snake.snakeArray[i];
if(section.x == head.x && section.y == head.y){
return true;
}
}
return false;
}
//根據鍵盤事件，判斷蛇頭的方向
document.addEventListener("keydown",function (e) {
var keycode = e.keyCode;
/* 40:下,
* 38:上,
* 37:左,
* 39:右；
*/
//注意：如果原來蛇頭是往右，不能直接向左，不能直接掉頭
if(keycode == 40 && snake.direction != "up"){
snake.direction = "down";
}else if(keycode == 38 && snake.direction !="down"){
snake.direction = "up";
}else if(keycode == 39 && snake.direction !="left"){
snake.direction = "right";
}else if(keycode == 37 && snake.direction !="right"){
snake.direction = "left";
}
e.preventDefault();
});
</script>
</html> canvas貪喫蛇
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章