2. 程式人生 > >利用Canvas+js編寫貪吃蛇遊戲

利用Canvas+js編寫貪吃蛇遊戲

阿新 • • 發佈：2019-02-06
//拿到畫板 行內 var canvas = document.getElementById("canvas"); //獲取畫板許可權 var ctx = canvas.getContext("2d"); var width=15; //初始化的蛇的長度 var snakeCount = 6; //定義一條蛇 var snake = []; var foodX = 0; var foodY = 0; var toGo=3; //定義分數 var score = 0; //定義難度 var diff = 0
; //定義的一個畫窗格方法 function drawRect(){ for(var i=0;i<30;i++){ ctx.beginPath();//開始路徑 //起點 ctx.moveTo(i*15,0); //終點 ctx.lineTo(i*15,450); //橫向 ctx.moveTo(0,i*15); //縱向 ctx.lineTo(450,i*15); ctx.closePath();//結束路徑
//繪製線 ctx.stroke(); //ctx.strokeStyle="#000"; 定義線的顏色 } //畫蛇 for(var i=0;i<snakeCount;i++){ ctx.fillStyle="#000"; if(i==snakeCount-1)ctx.fillStyle="red"; //繪製矩形 ctx.fillRect(snake[i].x,snake[i].y,15,15); } //繪製食物 矩形
ctx.fillStyle="#66ff99"; ctx.fillRect(foodX,foodY,15,15); ctx.fill(); } //定義蛇的座標 function start(){ //遍歷蛇的長度 for(var i=0;i<snakeCount;i++){ snake[i] = {x:i*15,y:0}; } addFood(); drawRect(); } //新增食物 function addFood(){ //隨機座標 math.floor 向下取整20.99999=20 foodX = Math.floor(Math.random()*30)*15; foodY = Math.floor(Math.random()*30)*15; for(var i=0;i<snakeCount-1;i++){ if(foodX==snake[i].x&&foodY==snake[i].y){ addFood(); } } } //蛇的移動方向 function move(){ switch(toGo){ case 1:snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y});break;//向左 case 2:snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15});break;//向上 case 3:snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});break;//向右 case 4:snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15});break;//向下 } //刪除第一個元素 snake.shift(); //重新繪製 ctx.clearRect(0,0,450,450); isDead(); isEat(); drawRect(); } function keyDown(e){ switch(e.keyCode){ case 37:toGo=1;break; case 38:toGo=2;break; case 39:toGo=3;break; case 40:toGo=4;break; } } function btnstart(diff){ setInterval(move,diff); //監聽鍵盤事件 document.onkeydown = function(e){ //瀏覽器的相容性 var e = e||window.event; //console.log(e.keyCode);//獲取鍵盤的鍵碼值 keyDown(e); } } //定義遊戲的規則 function isDead(){ //判斷邊界 if(snake[snakeCount-1].x>435||snake[snakeCount-1].y>435|| snake[snakeCount-1].x<0||snake[snakeCount-1].y<0){ alert("你已撞牆，遊戲結束!分數是:"+score); window.location.reload(); } //判斷自身 遍歷蛇身上所有的座標 判斷是否與尾巴重疊 for(var i=0;i<snakeCount-1;i++){ if(snake[snakeCount-1].x==snake[i].x&&snake[snakeCount-1].y==snake[i].y){ alert("你咬住自己的尾巴，遊戲結束！分數是:"+score); window.location.reload(); } } } //可以吃食物 function isEat(){ if(snake[snakeCount-1].x==foodX&&snake[snakeCount-1].y==foodY){ addFood(); snakeCount++; snake.unshift({x:-15,y:-15}); score+=50;//score = score+50; } } //當頁面載入完成執行這個方法 window.onload = function(){ start(); }

相關推薦

利用Canvas+js編寫貪吃蛇遊戲

//拿到畫板 行內 var canvas = document.getElementById("canvas"); //獲取畫板許可權 var ctx = canvas.getContext("2d"); var width=15; //初始化的蛇的長度

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

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

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程式設計--貪吃蛇遊戲03

js程式設計–貪吃蛇遊戲03 在js程式設計–貪吃蛇遊戲02的基礎上修改功能如下： 1、運用了面向物件的程式設計思想，將蛇和食物分別用物件的方式實現。 2、蛇遇到食物，食物被吃之後，隨機生成新的食物 注意：引用jquery-3.3.1.min.js index.htm

javascript：用原生js模擬貪吃蛇遊戲練習

本次練習所有的程式碼：可以直接複製全部然後執行看效果~ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <

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實現的貪吃蛇遊戲

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

C語言編寫貪吃蛇小遊戲

**遊戲結構**       1.知道怎麼控制終端上游標的位置。 #include<stdio.h> #inc

用arduino編寫貪吃蛇小遊戲（完整程式碼）

用arduino編寫貪吃蛇小遊戲 裡面有大量的程式碼註釋，希望能真的幫助到電子愛好者。 工具 ： 硬體：arduino UNO 、搖桿模組（控制貪吃蛇前後左右移動、 OLED 螢幕 軟體：arduino IDE1.8.2版本（基本上大於1.6版本，就能使用） 咱

Ubuntu下純程式碼編寫簡易貪吃蛇遊戲（第二次做）

#include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/time.h> #include <sys/types.h> #include <unistd.h

純JS寫的貪吃蛇遊戲（大二暑假實習）

此遊戲是大二暑假實習無聊，然後弄的，剛翻檔案看到了，所以想和你們分享一下。。。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

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

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

用Java開發貪吃蛇遊戲

for 焦點 == tint 素材 ide graph 點擊 perf 貪吃蛇遊戲的設計步驟： Part 1：　　 　　設計遊戲圖紙 　　畫出900*700的白色窗口 　　在窗口上添加畫布 　　在畫布上添加標題 　　在畫布上添加黑色遊戲區 Part 2：

結對-貪吃蛇遊戲-需求分析

時間 退出 計時器 簡單 貪吃蛇遊戲 按鍵 開始 暫停 貪吃蛇 遊戲簡介： 貪吃蛇一款可以提升玩家反應速度的遊戲，簡單易操作 需要實現功能： 1.遊戲計時器，右上方顯示 2.開始按鈕，暫停按鈕，退出按鈕 3.難度選擇按鈕。難度選擇分為速度1~5檔 4.控制按鍵 ↑ ↓ ←

結對-貪吃蛇遊戲設計文檔

eve face 鍵盤 是否 存儲 貪吃蛇遊戲 黑屏 安裝 屏幕 貪吃蛇項目設計 準備階段1 pygame簡介及安裝2surface對象3窗口顯示4繪制幾何圖形5event事件設計階段1首先繪制屏幕2繪制一個點作為蛇的蛇頭3實現鍵盤對於蛇頭的控制4隨機在屏幕上出現一個點(食

結對-開發貪吃蛇遊戲-開發環境搭建過程

ips 開始 結果 開發 java 開發環境 ron 變量 環境搭建 項目：貪吃蛇遊戲開發 環境搭建： 　　　　Mac下： 　　　　　　1）官網下載jkd1.8版本。 　　　　　　2）下載IDE——eclipse或Myeclipse 　　　　win下： 　　　　　　1)官網