js貪吃蛇

阿新 • • 發佈：2019-03-17

text char this mar gree 產生畫布 har dom

js貪吃蛇

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>snake</title>
</head>
<body>
    <canvas id="game"  width="450px"  height="450px"  style="border:1px solid blue; margin: 30px auto;display:block;"></canvas>
    <script  
type="text/javascript">
    //畫布包含30個格子
    var canvas = document.getElementById("game");
    var ctx = canvas.getContext("2d");
    var width = 15;
    /* for(var i = 0 ; i < 30 ; i ++){
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(0,i*width);
        ctx.lineTo(450,i*width);
        ctx.closePath();
        ctx.stroke();
    }
    for(var i = 0 ; i < 30 ; i ++){
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(i*width,0);
        ctx.lineTo(i*width,450);
        ctx.closePath();
        ctx.stroke();
    }  
*/
    //定義格子的類  x , y  為坐標， f  為方向
    // 1 向左， -1 向右   ， 2 向上  ， -2 向下
    function Cell(x,y,f){
        this.x = x;
        this.y = y;
        this.f = f;
    }
    function Food(x ,y ){
        this.x = x;
        this.y = y ;
    }
    //蛇的身體
    var snake = [];
    var length = 6;
     
var speed = 200;
    var food = new Food(15,15);
    for(var i= 0 ; i < length ; i ++){
        snake[i] = new Cell(i,0,-1);
    }

    //監聽鍵盤按下事件
    document.onkeydown = function(e){
        var code = e.keyCode;
        var direction = 0;
        switch(code){
            case 37:direction = 1;break;
            case 38:direction = 2;break;
            case 39:direction = -1;break;
            case 40:direction = -2;break;
        }
        var head = snake[snake.length - 1];
        if(direction != 0 &&  ( head.f + direction ) != 0 ){
            moveSnake(direction);
        }
    }
    
    //根據方向移動
    function moveSnake(direction){
        var head = snake[snake.length-1];
        if(!direction){
            direction = head.f;
        }
        var newSnake = [];
        var newHead = new Cell(head.x,head.y,head.f);
        newHead.f = direction;
        //將尾巴丟掉，把剩下的放到新的數組中
        for(var i = 1 ; i < snake.length ; i ++){
            newSnake[i - 1] = snake[i];
        }
        switch(direction){
          case 1:newHead.x -- ;break;
          case 2:newHead.y -- ;break;
          case -1:newHead.x ++ ;break;
          case -2:newHead.y ++ ;break;
        }
        newSnake[newSnake.length] = newHead;
        snake = newSnake;
        gameOver()
        draw();
    }
    
    function gameOver(){
        var head = snake[snake.length - 1];
        //邊界檢查
        if(head.x > 29 || head.y > 29 || head.x < 0 || head.y < 0 ){
            alert("Game Over ~");
            window.location.reload(); 
        }
        //自己不能撞到自己
        for(var i = 0 ; i < snake.length - 1 ; i ++){
            if(snake[i].x == head.x && snake[i].y == head.y){
                alert("Game Over ~");
                window.location.reload(); 
            }
        }
    }
    //初始化時繪制
    draw();
    function draw(){
        ctx.clearRect(0,0,450,450);
        //繪制食物
        ctx.fillStyle = "green";
        ctx.beginPath();
        ctx.rect(food.x*width,food.y*width,width,width);
        ctx.closePath();
        ctx.fill();
        var  head = snake[snake.length-1];
        if(food.x == head.x && food.y == head.y){
            var newHead = new Cell(head.x,head.y , head.f);
            switch(newHead.f){
              case 1:newHead.x -- ;break;
              case 2:newHead.y -- ;break;
              case -1:newHead.x ++ ;break;
              case -2:newHead.y ++ ;break;
            }
            snake[snake.length] = newHead;
            randomFood();
        }
        //繪制蛇
        for(var i = 0 ;i <snake.length ;i ++){
            var cell = snake[i];
            ctx.fillStyle = "gray";
            if(i == snake.length - 1){
                ctx.fillStyle = "red";
            }
            ctx.beginPath();
            ctx.rect(cell.x*width,cell.y*width,width,width);
            ctx.closePath();
            ctx.fill();
        }
    }
    //隨機產生食物的坐標
    function randomFood(){
        food.x = Math.ceil(Math.random()*28)+1;
        food.y = Math.ceil(Math.random()*28)+1;
    }
    //自動移動
    var autoRun = setInterval(moveSnake,speed);
    
    </script>
</body>
</html>

js貪吃蛇

JS貪吃蛇小遊戲

ttr etime opened IE title 跨瀏覽器 tac 再次 key 效果圖展示：具體實現代碼如下：（1）html部分 1 !DOCTYPE html> 2 <html> 3 <head> 4

html,css,js,貪吃蛇網頁遊戲

mov reload dom document bubuko ima sep rand [] 遊戲效果如圖：實現代碼如下： <!DOCTYPE html><html> <head> <meta charset="utf-8

html5+js 貪吃蛇

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content="kzm"> <meta name="Keyw

js貪吃蛇小遊戲（相容ie8）DOM,BOM操作

效果圖本篇將使用JavaScript 編寫一個貪吃蛇的小遊戲，採用OOP（面向物件）程式設計基本沒有CSS樣式和HTML結構，主要是體會js操作 HTML程式碼 <div class="map"></div> &

js--貪吃蛇小遊戲（加牆）

---新手上路，路過的大佬多多指教。用了大半天的時間熟悉了一下js的基本語法，學習他就是為了寫幾個小的網頁遊戲。網上的關於js寫的貪吃蛇遊戲的程式碼比比皆是，我就學了一個試著自己寫。寫了將近兩天，還有很多介面問題我還有很多想法沒實現。先寫個小部落格，後面有加就再改改博文就好

HTML5 + js 貪吃蛇遊戲設計與實現

遊戲截圖：遊戲架構：此遊戲架構大概分為三層： Game.html：說明：包含了介面的展示，以及一些事件的入口。完整程式碼： <html> <head> <title>html5 snake game</title&

純原生js 貪吃蛇（鍛鍊你邏輯思維）

//獲取分數標籤 var score = document.getElementById('score'); // 獲取路徑地圖標籤 var map = document.getElementById('snake_map'); // 為了靈活的設定地圖的大小,以下設定兩個變數 // 用於儲存行數和列數(即

js貪吃蛇

text char this mar gree 產生畫布 har dom js貪吃蛇 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

js-->貪吃蛇小遊戲,能成功玩

function 小遊戲 absolute images 貪吃蛇 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>貪吃蛇小遊戲</tit

使用前端原生 js，貪吃蛇小遊戲

oct 新的生成方便描述 logs turn asc 轉動好久好久，真的是好久好久沒來寫過了，因為最近有點小忙。不過即使是忙，也也還是寫了兩個小遊戲，其中一個就是這個，貪吃蛇啦。算是一個小練手了，這個是在有點太簡單了，只是第一次寫這種小遊戲，還是零零星星花了三

簡單貪吃蛇遊戲js

貪吃蛇 col doc var math oat turn rip onkeyup 新手，仿照別人的寫的。只能實現簡單的功能，代碼如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4

JS編寫貪吃蛇（面向對象思想）

removes 超出 child case 如果原來 creat http 改變效果圖：（抱歉，由於本人能力有限，只能暫時放靜態圖。後期會把動態圖更新上去） <!DOCTYPE html><html><head lang="en">

用JS實現的貪吃蛇遊戲

JavaScript 小遊戲需要用到html、css、javascript 和 DOM 這些知識點就可以了。主要是js，其他只是一些基本的知識。js貌似也不是很難。但是問題就在這裏，即使知識點都會了，但是還是無法綜合運用把東西做出來遊戲界面先把整個遊戲界面做出來： <!DOCTYPE ht

40行貪吃蛇原生js

tel 1.0 ott 執行 htm html oct bre aps <!doctype html> <html> <body> <canvas id="1" width="400" height="400" ><

JS高級----------------->貪吃蛇案例

ase nbsp eid 暫時 sele last 函數 height ctype <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

原生JS之貪吃蛇

注：本文章程式碼根據網上教程所編寫（略有改動） html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

原生JS版的貪吃蛇

原生JS版的貪吃蛇簡版效果圖上程式碼 css <style> body, div, p, input{ padding:0; margin:0; }

js程式設計--貪吃蛇遊戲07

注意，都是建立在前面幾個步驟至上開發的。 index.html <!DOCTYPE html> <html> <head>

js程式設計--貪吃蛇遊戲05

增加功能： 1.修復Bug：只按上下左右鍵有效、蛇碰到自身彈窗警告。 2.蛇自己能動 index.html <!DOCTYPE html> <html> <head> <meta charset="u

js程式設計--貪吃蛇遊戲04

在Test工程的基礎上修改 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的貪吃蛇test&l

js貪吃蛇

相關推薦