HTML文檔:
<!DOCTYPE HTML> <html lang="zh-en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="css/idnex.css" /> <script src="js/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <canvas id="cav"></canvas> <div id="end"> <div class="gold">您的分數是:<span class="number">6</span></div> <div class="retry">重新開始</div> </div> </body> </html>
JS文件(需要引入JQuery)
var bgImg = new Image(); bgImg.src = "./img/bgImg.jpg"; var leftImg = new Image(); leftImg.src = "./img/left.png"; var rightImg = new Image(); rightImg.src = "./img/right.png"; var topImg = new Image(); topImg.src = "./img/top.png"; var bottomImg = new Image(); bottomImg.src = "./img/bottom.png"; var bodyImg = new Image(); bodyImg.src = "./img/body.png"; var foodImg = new Image(); foodImg.src = "./img/food.gif"; var cutImg = new Image(); cutImg.src = "./img/cut.jpg"; function Snake() { this.canvas = $('#cav').get(0).getContext('2d'); this.step = 25;//步長 // this.width = parseInt(($(window).width()/this.step)) * this.step ;//畫布寬度 // this.height = parseInt(($(window).height()/this.step)) * this.step ;//畫布高度 this.width = 500; this.height = 500; this.stepW = this.width / this.step; this.stepH = this.height / this.step; this.snakeArr = [];//蛇身數組 this.foodArr = [];//食物數組 this.direction = 'left';//默認方向 this.speed = 200;//移動速度 this.eatNumber = 0;//吃到食物的數量 //調整畫板位置 //$('#cav').css('margin-top',($(window).width()-this.width)/2 + 'px').css('margin-left',($(window).height()-this.height)/2 + 'px'); //1.繪製遊俠元素 this.draw = function () { //a.畫背景 this.canvas.drawImage(bgImg,0,0,this.width,this.height); //b.畫蛇 this.drawSnake(); //c.畫食物 this.drawFood(); } this.drawFood = function () { if(this.foodArr.length != 0) { //有食物的情況 this.canvas.drawImage(this.foodArr[0].img,this.foodArr[0].x * this.step,this.foodArr[0].y * this.step,this.step,this.step); return; } var x = Math.floor(Math.random() * this.stepW); var y = Math.floor(Math.random() * this.stepH); var snakeLength = this.snakeArr.length; for (var i=0;i<snakeLength;i++) {//和蛇身重合就重新執行 if(this.snakeArr[i].x == x && this.snakeArr[i].y == y ) { this.drawFood(); break; } } //沒和蛇身重合 if(this.eatNumber >= 30 && this.eatNumber % Math.floor((Math.random() * 10)) == 0 && this.snakeArr.length > 8) { this.foodArr[0] = { x : x, y : y, img : cutImg, cut : 'true' } } else { this.foodArr[0] = { x : x, y : y, img : foodImg, cut : 'false' } } this.canvas.drawImage(this.foodArr[0].img,this.foodArr[0].x * this.step,this.foodArr[0].y * this.step,this.step,this.step); } this.drawSnake = function () { //初始化蛇身 if(this.snakeArr.length == 0 ) { for (var i=0;i<5;i++) { this.snakeArr[i] = { x : parseInt(this.stepW/2) + i -2, y : parseInt(this.stepH/2), img : bodyImg, direction : 'left', } } this.snakeArr[0].img = leftImg; } //繪製蛇身 var snakeLength = this.snakeArr.length; switch (this.direction) { case 'left' : this.snakeArr[0].img = leftImg; break; case 'right' : this.snakeArr[0].img = rightImg; break; case 'top' : this.snakeArr[0].img = topImg; break; case 'bottom' : this.snakeArr[0].img = bottomImg; break; } for (var i=0;i<snakeLength;i++) { var snakeImg = this.snakeArr[i]; this.canvas.drawImage( snakeImg.img, snakeImg.x * this.step, snakeImg.y * this.step, this.step, this.step ); } } //2.讓蛇動起來 this.move = function () { this.snakeMove(); this.hit(); this.draw(); this.eatFood(); } //移動蛇的位置 this.snakeMove = function () { var snakeLength = this.snakeArr.length; for (var i=snakeLength-1;i>0;i--) { this.snakeArr[i].x = this.snakeArr[i-1].x; this.snakeArr[i].y = this.snakeArr[i-1].y; this.snakeArr[i].direction = this.snakeArr[i-1].direction; } switch (this.direction) { case 'left' : this.snakeArr[0].x -= 1; break; case 'right' : this.snakeArr[0].x += 1; break; case 'top' : this.snakeArr[0].y -= 1; break; case 'bottom' : this.snakeArr[0].y += 1; break; } } //吃到食物 this.eatFood = function () { if(this.snakeArr[0].x == this.foodArr[0].x && this.snakeArr[0].y == this.foodArr[0].y) { if(this.foodArr[0].cut == 'false') { this.snakeArr.push({ x : this.foodArr[0].x, y : this.foodArr[0].y, img : bodyImg, direction : this.direction, }); } else { this.snakeArr.splice(this.snakeArr.length - 5,5); } this.foodArr.pop(); this.eatNumber += 1; if(this.eatNumber % 5 == 0 && this.speed >= 20) { console.log(this.speed); this.accelerate(); } } } //3.讓蛇去死 this.hit = function () { // if(this.snakeArr[0].x < 0 || this.snakeArr[0].x >= this.stepW || this.snakeArr[0].y < 0 || this.snakeArr[0].y >= this.stepH) { // this.end(); // } if(this.snakeArr[0].x < 0){ this.snakeArr[0].x = this.stepW - 1; } if(this.snakeArr[0].x >= this.stepW){ this.snakeArr[0].x = 0; } if(this.snakeArr[0].y < 0){ this.snakeArr[0].y = this.stepH - 1; } if(this.snakeArr[0].y >= this.stepH){ this.snakeArr[0].y = 0; } var snakeLength = this.snakeArr.length; for(var i=1;i<snakeLength;i++) { if(this.snakeArr[0].x == this.snakeArr[i].x && this.snakeArr[0].y == this.snakeArr[i].y) { this.end(); break; } } } //設定按鍵事件 this.keypress = function (e) { switch (parseInt(e)) { case 37 : if(this.direction != 'right') { this.direction = 'left'; } break; case 38 : if(this.direction != 'bottom') { this.direction = 'top'; } break; case 39 : if(this.direction != 'left') { this.direction = 'right'; } break; case 40 : if(this.direction != 'top') { this.direction = 'bottom'; } break; } } //開始遊戲 this.start = function () { this.draw(); this.interval(); } //定時器 this.interval = function () { var that = this; this.timer = setInterval(function(){ that.move(); },this.speed); } //修改速度 this.accelerate = function () { this.speed = Math.ceil(this.speed * 0.9); clearInterval(this.timer); this.interval(); } //結束遊戲 this.end = function () { $('#cav').hide(); $('#end .gold span').text(this.eatNumber); $('#end').show(); clearInterval(this.timer); } } window.onload = function () { $('#cav').attr('width',$(window).width() + 'px'); $('#cav').attr('height',$(window).height() + 'px'); $('#cav').css('margin','0 auto'); var snake = new Snake(); snake.start(); $(window).on('keydown',function(e){ snake.keypress(e.keyCode || e.which); }); $('.retry').click(function(){ location.reload(); }); }
CSS文件
@charset "utf-8"; html,body,div,canvas,span { padding:0; margin: 0; } body { width: 100%; height: 100%; overflow: hidden; } #cav { } #end { display: none; width: 100%; font-size: 30px; color: #000; text-align: center; box-sizing: border-box; margin-top: 50px; } #end .gold { } #end .gold span { display: inline-block; width: 100px; text-align: center; font-size: 40px; color: #00f; } #end .retry{ display: inline-block; margin-top: 30px; text-align: center; cursor: pointer; color: #00f; }
IMG文件
bgImg.jpg(1px*1px的白色圖片)
body.png
bottom.png
cut.jpg
food.gif
left.png
right.png
top.png