貪吃蛇制作步驟

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <title>Document</title>

? ? <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>

? ? <style>

? ? ? ? canvas{

? ? ? ? ? ? box-shadow: 0 0? 10px #000;

? ? ? ? ? ? display: block;

? ? ? ? ? ? margin:20px auto;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <canvas width="1200" height="800" id="canvas"></canvas>

</body>

<script>

? ? $(function(){

? ? ? ? // var draw = new Draw($('#canvas')[0]);? //創(chuàng)建一個(gè)繪圖的實(shí)例對(duì)象

? ? ? ? // draw.main();//調(diào)用main繪制圖像

? ? ? ? function Draw(canvas){

? ? ? ? ? ? // 初始化

? ? ? ? ? ? this.canvas = canvas;

? ? ? ? ? ? // 創(chuàng)建check函數(shù)

? ? ? ? ? ? this.check = function(){

? ? ? ? ? ? ? ? // 檢測(cè)瀏覽器是否支持canvas

? ? ? ? ? ? ? ? if (!this.canvas.getContext) {

? ? ? ? ? ? ? ? ? ? //如果符合就輸出false

? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? ? ? // 否則輸出true

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ? ? return true;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? this.main = function(){

? ? ? ? ? ? ? ? // 檢測(cè)兼容

? ? ? ? ? ? ? ? if (!this.check()) {

? ? ? ? ? ? ? ? ? ? // 如果符合就打印顯示瀏覽器不支持canvas輸出false

? ? ? ? ? ? ? ? ? ? console.log('瀏覽器不支持canvas');

? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? // 繪畫上下文

? ? ? ? ? ? ? ? Draw.prototype.xt = this.canvas.getContext('2d');

? ? ? ? ? ? ? ? // 創(chuàng)建蛇? 畫出初始的蛇

? ? ? ? ? ? ? ? var snake = new Snake(this);

? ? ? ? ? ? ? ? snake.draw();

? ? ? ? ? ? ? ? // 隨機(jī)產(chǎn)生一個(gè)食物? 畫出初始的食物

? ? ? ? ? ? ? ? var food = randFood(snake);

? ? ? ? ? ? ? ? food.draw();

? ? ? ? ? ? ? ? // 做一個(gè)動(dòng)畫的定時(shí)器

? ? ? ? ? ? ? ? Draw.prototype.timer = setInterval(function(){

? ? ? ? ? ? ? ? ? ? // 清楚舊的圖像

? ? ? ? ? ? ? ? ? ? Draw.prototype.xt.clearRect(0,0,this.canvas.width,this.canvas.height);

? ? ? ? ? ? ? ? ? ? // 改變蛇的位置

? ? ? ? ? ? ? ? ? ? if (!snake.move()) {

? ? ? ? ? ? ? ? ? ? ? ? clearInterval(Draw.prototype.timer);

? ? ? ? ? ? ? ? ? ? ? ? alert('游戲結(jié)束');

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? // 重新繪制圖像

? ? ? ? ? ? ? ? ? ? snake.draw();

? ? ? ? ? ? ? ? ? ? food.draw();

? ? ? ? ? ? ? ? ? ? if (isRectHit(food,snake.head)) {

? ? ? ? ? ? ? ? ? ? ? ? Snake.prototype.isEatFood = true;

? ? ? ? ? ? ? ? ? ? ? ? // 重新產(chǎn)生食物

? ? ? ? ? ? ? ? ? ? ? ? food = randFood(snake);

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? },80);

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 蛇頭(準(zhǔn)備創(chuàng)建的方塊)的元素

? ? ? ? function Rect(x,y,width,height,color){

? ? ? ? ? ? this.x = x;

? ? ? ? ? ? this.y = y;

? ? ? ? ? ? this.width = width;

? ? ? ? ? ? this.height = height;

? ? ? ? ? ? this.color = color;

? ? ? ? }

? ? ? ? // 完善矩形? 繪制矩形? ?

? ? ? ? Rect.prototype.draw = function(){

? ? ? ? ? ? // 開始繪畫矩形

? ? ? ? ? ? Draw.prototype.xt.beginPath();

? ? ? ? ? ? // 畫筆顏色

? ? ? ? ? ? Draw.prototype.xt.fillStyle = this.color;

? ? ? ? ? ? // 填充矩形

? ? ? ? ? ? Draw.prototype.xt.fillRect(this.x,this.y,this.width,this.height);

? ? ? ? ? ? // 描邊

? ? ? ? ? ? Draw.prototype.xt.strokeRect(this.x,this.y,this.width,this.height);

? ? ? ? }

// 構(gòu)造對(duì)象蛇

? ? ? ? function Snake(obj){

? ? ? ? ? ? // 畫蛇頭? 蛇頭的顏色是紅色的?

? ? ? ? ? ? this.head = new Rect(obj.canvas.width/2-20,obj.canvas.height/2-20,40,40,'red');

? ? ? ? ? ? //定義一個(gè)空數(shù)組存放組成整蛇的方塊對(duì)象?

? ? ? ? ? ? this.body = [];? //表示多個(gè)身體

? ? ? ? ? ? // 蛇身的x比蛇頭移動(dòng)40

? ? ? ? ? ? var x = this.head.x-40;

? ? ? ? ? ? // 距離y不變

? ? ? ? ? ? var y = this.head.y;

? ? ? ? ? ? // 循環(huán)創(chuàng)建身體? 默認(rèn)蛇的長(zhǎng)度是3

? ? ? ? ? ? for (var i = 0; i < 3; i++) {

? ? ? ? ? ? ? ? // 每吃一個(gè)東西蛇身會(huì)加一個(gè)? 蛇身的顏色是灰色的

? ? ? ? ? ? ? ? var rect = new Rect(x,y,40,40,'gray');

? ? ? ? ? ? ? ? this.body.push(rect);

? ? ? ? ? ? ? ? x-=40;

? ? ? ? ? ? }? ? ?

? ? ? ? }

? ? ? ? // 添加蛇默認(rèn)的運(yùn)動(dòng)方向? 向右

? ? ? ? // 公有屬性映跟，任何地方能夠修改方向

? ? ? ? Snake.prototype.direction = 1;

? ? ? ? // 定義一個(gè)是否吃到食物的標(biāo)記

? ? ? ? Snake.prototype.isEatFood = false;

? ? ? ? // 畫蛇方法

? ? ? ? Snake.prototype.draw = function(){

? ? ? ? ? ? // 畫蛇頭

? ? ? ? ? ? this.head.draw();

? ? ? ? ? ? // 循環(huán)創(chuàng)建蛇身

? ? ? ? ? ? for (var i = 0; i < this.body.length; i++) {

? ? ? ? ? ? ? ? this.body[i].draw();

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 蛇移動(dòng)的方法

? ? ? ? Snake.prototype.move = function(){

? ? ? ? ? ? // 檢測(cè)碰撞到墻壁

? ? ? ? ? ? if (this.head.x<40 || this.head.y<-40 || this.head.x>$('#canvas')[0].width-40-40 || this.head.y>$('#canvas')[0].height-40-40) {

? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? }

? ? ? ? ? ? // 檢測(cè)蛇頭與蛇身

? ? ? ? ? ? for (var i =0;i<this.body.length;i++) {

? ? ? ? ? ? ? ? console.log(this.body[i])

? ? ? ? ? ? ? ? if (isRectHit(this.head,this.body[i])) {

? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? // 加一個(gè)頭

? ? ? ? ? ? var rect = new Rect(this.head.x,this.head.y,40,40,'gray');

? ? ? ? ? ? // 添加身體開始的地方

? ? ? ? ? ? this.body.splice(0,0,rect);


? ? ? ? ? ? // 去掉一個(gè)尾巴,

? ? ? ? ? ? if (Snake.prototype.isEatFood) {

? ? ? ? ? ? ? ? Snake.prototype.isEatFood = false;

? ? ? ? ? ? ? ? // 重新隨機(jī)產(chǎn)生食物


? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? this.body.pop();

? ? ? ? ? ? }


? ? ? ? ? ? switch(this.direction){

? ? ? ? ? ? ? ? case 0:

? ? ? ? ? ? ? ? ? ? this.head.y -= 40

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case 1:

? ? ? ? ? ? ? ? ? ? this.head.x += 40

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case 2:

? ? ? ? ? ? ? ? ? ? this.head.y +=40

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case 3:

? ? ? ? ? ? ? ? ? ? this.head.x -= 40

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? }

? ? ? ? ? ? return true;

? ? ? ? ? ? ? ? //判定吃到食物蓄拣，即蛇頭坐標(biāo)與食物坐標(biāo)重合

? ? ? ? ? ? function isEatFood () {

? ? ? ? ? ? ? ? if (Snake.head.x == food.x && Snake.head.y == food.y){

? ? ? ? ? ? ? ? ? ? return true;

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

// 添加鍵盤監(jiān)聽

? ? ? ? $(window).keydown(function(e){

? ? ? ? ? ? switch(e.keyCode){

? ? ? ? ? ? ? ? case 37:

? ? ? ? ? ? ? ? ? ? // 如果當(dāng)前的方向是向右的，不能改為向左

? ? ? ? ? ? ? ? ? ? if (Snake.prototype.direction == 1) {

? ? ? ? ? ? ? ? ? ? ? ? return;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? Snake.prototype.direction = 3;

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case 38:

? ? ? ? ? ? ? ? ? ? // 如果當(dāng)前的方向是向下的努隙，不能改為向上

? ? ? ? ? ? ? ? ? ? if (Snake.prototype.direction == 2) {

? ? ? ? ? ? ? ? ? ? ? ? return;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? Snake.prototype.direction = 0;

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case 39:

? ? ? ? ? ? ? ? ? ? if (Snake.prototype.direction == 3) {

? ? ? ? ? ? ? ? ? ? ? ? return;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? Snake.prototype.direction = 1;

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case 40:

? ? ? ? ? ? ? ? ? ? if (Snake.prototype.direction == 0) {

? ? ? ? ? ? ? ? ? ? ? ? return;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? Snake.prototype.direction = 2;

? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? }

? ? ? ? })

? ? ? ? // 隨機(jī)產(chǎn)生食物

? ? ? ? function randFood(snake){

? ? ? ? ? ? // 是否在蛇身上

? ? ? ? ? ? isInSnake = true;


? ? ? ? ? ? while(isInSnake){

? ? ? ? ? ? ? ? // 產(chǎn)生兩個(gè)位置 x,y

? ? ? ? ? ? ? ? var x = getRandPosition(0,($('#canvas')[0].width-40)/40)*40;

? ? ? ? ? ? ? ? var y = getRandPosition(0,($('#canvas')[0].height-40)/40)*40;

? ? ? ? ? ? ? ? // 創(chuàng)建食物矩形

? ? ? ? ? ? ? ? var food = new Rect(x-20,y-20,40,40,'green');

? ? ? ? ? ? ? ? isInSnake = false;

? ? ? ? ? ? ? ? // 判斷這個(gè)位置是否在蛇身

? ? ? ? ? ? ? ? // 是否是蛇頭

? ? ? ? ? ? ? ? if (isRectHit(food,snake.head)) {

? ? ? ? ? ? ? ? ? ? isInSnake = true;

? ? ? ? ? ? ? ? ? ? continue;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? // 是否是蛇身

? ? ? ? ? ? ? ? for (var i=0; i < snake.body.length; i++) {

? ? ? ? ? ? ? ? ? ? if (isRectHit(food,snake.body[i])) {

? ? ? ? ? ? ? ? ? ? ? ? isInSnake = true;

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? return food;

? ? ? ? }


? ? ? ? // 產(chǎn)生隨機(jī)數(shù)的函數(shù)

? ? ? ? function getRandPosition(min,max){

? ? ? ? ? ? return Math.round(Math.random()*(max-min)+min);

? ? ? ? }

? ? ? ? // 判斷矩形是否重合

? ? ? ? function isRectHit(rect1,rect2){

? ? ? ? ? ? var R1_min_x = rect1.x;

? ? ? ? ? ? var R1_min_y = rect1.y;

? ? ? ? ? ? var R2_min_x = rect2.x;

? ? ? ? ? ? var R2_min_y = rect2.y;

? ? ? ? ? ? var R1_max_x = rect1.x + 20;

? ? ? ? ? ? var R2_max_x = rect2.x + 20;

? ? ? ? ? ? var R1_max_y = rect1.y + 20;

? ? ? ? ? ? var R2_max_y = rect2.y + 20;

? ? ? ? ? ? // 兩個(gè)圖形的最大邊界和最小邊界

? ? ? ? ? ? var min_x = Math.max(R1_min_x,R2_min_x);

? ? ? ? ? ? var max_x = Math.min(R1_max_x,R2_max_x);

? ? ? ? ? ? var min_y = Math.max(R1_min_y,R2_min_y);

? ? ? ? ? ? var max_y = Math.min(R1_max_y,R2_max_y);

? ? ? ? ? ? if (min_x<max_x&&min_y<max_y) {

? ? ? ? ? ? ? ? return true;

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? }

? ? ? ? }


? ? ? ? var draw = new Draw($('#canvas')[0]);? //創(chuàng)建一個(gè)繪圖的實(shí)例對(duì)象

? ? ? ? draw.main();//調(diào)用main繪制圖像

? ? });


</script>

<ml>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末球恤，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子荸镊，更是在濱河造成了極大的恐慌咽斧，老刑警劉巖堪置，帶你破解...
    沈念sama閱讀 219,490評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異张惹，居然都是意外死亡晋柱，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門诵叁，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)雁竞，“玉大人，你說(shuō)我怎么就攤上這事拧额”撸” “怎么了？”我有些...
    開封第一講書人閱讀 165,830評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵侥锦，是天一觀的道長(zhǎng)进栽。 經(jīng)常有香客問我，道長(zhǎng)恭垦，這世上最難降的妖魔是什么快毛？ 我笑而不...
    開封第一講書人閱讀 58,957評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮番挺，結(jié)果婚禮上唠帝，老公的妹妹穿的比我還像新娘。我一直安慰自己玄柏，他們只是感情好襟衰，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,974評(píng)論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著粪摘，像睡著了一般瀑晒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上徘意，一...
    開封第一講書人閱讀 51,754評(píng)論 1贊 307
  • 城市分裂傳說(shuō)
    那天苔悦，我揣著相機(jī)與錄音，去河邊找鬼椎咧。 笑死玖详，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的邑退。 我是一名探鬼主播竹宋，決...
    沈念sama閱讀 40,464評(píng)論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼地技！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起秒拔，我...
    開封第一講書人閱讀 39,357評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤莫矗，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體作谚，經(jīng)...
    沈念sama閱讀 45,847評(píng)論 1贊 317
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡三娩，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,995評(píng)論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了妹懒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片雀监。...
    茶點(diǎn)故事閱讀 40,137評(píng)論 1贊 351
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖眨唬，靈堂內(nèi)的尸體忽然破棺而出会前，到底是詐尸還是另有隱情，我是刑警寧澤匾竿，帶...
    沈念sama閱讀 35,819評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布瓦宜，位于F島的核電站，受9級(jí)特大地震影響岭妖，放射性物質(zhì)發(fā)生泄漏临庇。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,482評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一昵慌、第九天 我趴在偏房一處隱蔽的房頂上張望假夺。 院中可真熱鬧，春花似錦斋攀、人聲如沸侄泽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評(píng)論 0贊 22
  • 一樁弒父案蜻韭，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)悼尾。三九已至，卻和暖如春肖方，著一層夾襖步出監(jiān)牢的瞬間闺魏，已是汗流浹背店溢。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工锯仪， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人败京。 一個(gè)月前我還...
    沈念sama閱讀 48,409評(píng)論 3贊 373
  • 代替公主和親
    正文 我出身青樓艰垂，卻偏偏與公主長(zhǎng)得像泡仗，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子猜憎，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,086評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • HTML canvas 實(shí)現(xiàn)貪吃蛇的效果 思路：1. 畫蛇 食物被吃掉之后隨機(jī)位置出現(xiàn) 食物不能隨機(jī)在蛇身上...
    Agonl_0929a閱讀 507評(píng)論 0贊 1
  • 思路： 蛇 食物 食物被吃掉之后隨機(jī)位置出現(xiàn) 食物不能隨機(jī)在蛇身上 蛇頭碰到蛇身就結(jié)束了娩怎，碰到墻也結(jié)束了。 碰...
    孤久成癮_63e8閱讀 389評(píng)論 0贊 0
  • 貪吃蛇的思路與方法 1.設(shè)計(jì)蛇： 設(shè)計(jì)蛇的寬胰柑、高截亦、長(zhǎng)爬泥、蛇的狀態(tài)、蛇的方向崩瓤。 2.設(shè)計(jì)蛇的食物：設(shè)計(jì)食物的寬袍啡、高、位...
    guoshauili閱讀 197評(píng)論 0贊 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,031評(píng)論 0贊 2
  • 源站：http://fengyuanchen.github.io/viewer/ 應(yīng)用： html: 源碼上是正常...
    羊繪霖閱讀 5,497評(píng)論 0贊 2