javascript实现贪吃蛇小游戏思路

2024-09-29 00:26:40

javascript小游戏贪吃蛇实现思路讲解(完整代码实现)，供大家参考，具体内容如下

效果流程

1、首先我们要操作的canvas

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>

<body>
 <canvas id="canvas"></canvas>   <!-- 我们要操作的canvas -->
 <input type="button" value="开始游戏" /><!-- 开始游戏按钮 -->
<script>
//获取元素
var canvas = document.getElementById("canvas"); //找到我们要操作的canvas
var context = canvas.getContext("2d"); //规定在canvas上操作的环境为2d
var but = document.getElementsByTagName("input")[0]; //找到开始按钮
</script>

2、在初始化

canvas.width = 500; //定义canvas宽度
canvas.height = 500; //定义canvas高度
canvas.style.border = "5px solid #000"; //定义canvas边框
var times = 100; //默认时间200毫秒
var long = 10; //蛇身相对于步长的个数
var x = y =8;  //蛇的初始坐标
var direction = 3;  // 1 上  2 右  3 下 0  左
var size = 8;  //蛇每次移动的长度（步长）
var map  = []; //用来记录蛇每次移动的坐标
var foodx = 0;  //食物的初始X轴坐标
var foody = 0;  //食物的初始y轴坐标
var onOff = true;
var foodT = true;
var timer = null;

3、根据方向控制蛇的坐标变化，判断蛇的坐标是否超出canvas边界，判断蛇有没有碰到自己

 //根据方向控制蛇的坐标变化
    switch(direction){

        case 1: y = y - size; break; //上
        case 2: x = x + size; break; //右
        case 3: y = y + size; break; //下
        case 0: x = x - size; break; //左
    }

    //判断蛇的坐标是否超出canvas边界，超出则出现碰壁提示，游戏结束
    if(x>500 || x<0 || y>500 || y<0){

//      alert("你碰壁挂了！继续努力吧……");
        window.location.reload();
    }

    //判断蛇有没有碰到自己，碰到自己游戏结束
    for(var i=0; i<map.length; i++){
        if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
//          alert("你碰到自己挂了！继续努力吧……");
            window.location.reload(); //重新载入
        }
    }

4、然后绘制蛇

//绘制蛇
    if(map.length>long){
        var cl = map.shift();
        context.clearRect(cl['x'],cl['y'],size,size);
    }
    map.push({'x':x,'y':y});
    context.fillStyle = "#777"; //填充蛇的颜色
    context.fillRect(x,y,size,size); //绘制蛇

5、判断食物坐标等于蛇的坐标时（蛇吃掉食物）

//判断食物坐标等于蛇的坐标时（蛇吃掉食物）
    if(foodx*8 == x && foody*8 == y ){
        food(); //再次绘制食物
        long++; //蛇的长度增加
        times = times - 10; //速度加快
        clearInterval(timer);
        onOff = true;
        setTimeout(goto,times); //开始新的一轮
    }

6、确定食物随机显示坐标，绘制食物

//确定食物随机显示坐标，绘制食物
function food(){
    foodx = Math.ceil(Math.random()*40); //食物的X轴随机坐标
    foody = Math.ceil(Math.random()*40); //食物的Y轴随机坐标
    context.fillStyle = "mediumvioletred"; //食物的填充颜色
    context.fillRect(foodx*8,foody*8,8,8); //绘制食物

}

7、监听按下方向键，获得蛇前进的方向

//监听按下方向键，获得蛇前进的方向
document.onkeydown = function(ev){
    var ev = ev || event;
    var cod = ev.keyCode - 37;

    switch(cod){
        case 1: direction = 1; break; //向上
        case 2: direction = 2; break; //向右
        case 3: direction = 3; break; //向下
        case 0: direction = 0; break; //向左
    }
}

完整代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
</head>

<body>
 <canvas id="canvas"></canvas>   <!-- 我们要操作的canvas -->
 <input type="button" value="开始游戏" /><!-- 开始游戏按钮 -->
<script>
//获取元素
var canvas = document.getElementById("canvas"); //找到我们要操作的canvas
var context = canvas.getContext("2d"); //规定在canvas上操作的环境为2d
var but = document.getElementsByTagName("input")[0]; //找到开始按钮
//初始化
canvas.width = 500; //定义canvas宽度
canvas.height = 500; //定义canvas高度
canvas.style.border = "5px solid #000"; //定义canvas边框
var times = 100; //默认时间200毫秒
var long = 10; //蛇身相对于步长的个数
var x = y =8;  //蛇的初始坐标
var direction = 3;  // 1 上  2 右  3 下 0  左
var size = 8;  //蛇每次移动的长度（步长）
var map  = []; //用来记录蛇每次移动的坐标
var foodx = 0;  //食物的初始X轴坐标
var foody = 0;  //食物的初始y轴坐标
var onOff = true;
var foodT = true;
var timer = null;
function star(){

    //根据方向控制蛇的坐标变化
    switch(direction){

        case 1: y = y - size; break; //上
        case 2: x = x + size; break; //右
        case 3: y = y + size; break; //下
        case 0: x = x - size; break; //左
    }

    //判断蛇的坐标是否超出canvas边界，超出则出现碰壁提示，游戏结束
    if(x>500 || x<0 || y>500 || y<0){

//      alert("你碰壁挂了！继续努力吧……");
        window.location.reload();
    }

    //判断蛇有没有碰到自己，碰到自己游戏结束
    for(var i=0; i<map.length; i++){
        if(parseInt( map[i].x ) == x && parseInt( map[i].y ) == y){
//          alert("你碰到自己挂了！继续努力吧……");
            window.location.reload(); //重新载入
        }
    }

    //绘制蛇
    if(map.length>long){
        var cl = map.shift();
        context.clearRect(cl['x'],cl['y'],size,size);
    }
    map.push({'x':x,'y':y});
    context.fillStyle = "#777"; //填充蛇的颜色
    context.fillRect(x,y,size,size); //绘制蛇

    //判断食物坐标等于蛇的坐标时（蛇吃掉食物）
    if(foodx*8 == x && foody*8 == y ){
        food(); //再次绘制食物
        long++; //蛇的长度增加
        times = times - 10; //速度加快
        clearInterval(timer);
        onOff = true;
        setTimeout(goto,times); //开始新的一轮
    }

}

//确定食物随机显示坐标，绘制食物
function food(){
    foodx = Math.ceil(Math.random()*40); //食物的X轴随机坐标
    foody = Math.ceil(Math.random()*40); //食物的Y轴随机坐标
    context.fillStyle = "mediumvioletred"; //食物的填充颜色
    context.fillRect(foodx*8,foody*8,8,8); //绘制食物

}
//开始游戏
function goto(){
    if(onOff){
        timer = setInterval(star,times);
        onOff = false;
    }
    if(foodT){
        food();
        foodT = false;
    }
}
//点击按钮开始游戏开始
but.onclick = goto;//点击按钮，开始游戏

//监听按下方向键，获得蛇前进的方向
document.onkeydown = function(ev){
    var ev = ev || event;
    var cod = ev.keyCode - 37;

    switch(cod){
        case 1: direction = 1; break; //向上
        case 2: direction = 2; break; //向右
        case 3: direction = 3; break; //向下
        case 0: direction = 0; break; //向左
    }
}
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生js实现简单贪吃蛇小游戏

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下先上图话不多说,代码奉上,喜欢的请留下你的小星星♥(ˆ◡ˆԅ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
JavaScript贪吃蛇的实现代码

本文实例为大家分享了JavaScript实现贪吃蛇的具体代码,供大家参考,具体内容如下首先我们要确定贪吃蛇应有的功能 1.通过键盘的上下左右控制蛇的移动方向 2.边界判定,即蛇头超出边界则游戏结束 3.碰撞判定,即蛇头和食物块发生触碰 4.吃到食物积分加1 具体实现一.html代码 <div class="container">  <div id="playground"> <!--小蛇--&
JavaScript实现贪吃蛇游戏

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下通过JavaScript,我们可以实现贪吃蛇游戏,具体功能如下: (1)通过按上下左右键来改变蛇的移动方向 (2)若蛇撞到自己,则游戏结束 (3)蛇移动出地图边缘时,会从地图的另一边进来 (4)长按方向键,蛇加速移动 (5)蛇吃到食物后,重新生成食物完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <met
JavaScript实现网页贪吃蛇游戏

本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head><title>贪吃蛇</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <s
用js编写简单的贪吃蛇小游戏

本文实例为大家分享了js编写简单的贪吃蛇小游戏的具体代码,供大家参考,具体内容如下代码如下: HTML 5 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
原生js编写贪吃蛇小游戏

本文实例为大家分享了js编写贪吃蛇小游戏的具体代码,供大家参考,具体内容如下刚学完js模仿着教程,把自己写的js原生小程序. HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
js实现贪吃蛇游戏含注释

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下两个小时完成的,有点简陋. 直接看效果.打开调试面板,在resource面板,新建snippet 粘贴以下代码,右键snippet,run. clearInterval(timer); document.body.innerHTML = ""; //每秒移动多少格 let speed = 10; let speedUpMul = 3; //是否能穿墙 let isThroughTheWall = true; /
JavaScript 精美贪吃蛇实现流程

目录一.创建html结构二.创建表格三.创建蛇头.蛇身四.创建食物五.让蛇动起来六.控制蛇的方向七.完整代码 index.html Game.js Snake.js Food.js 八.图片九.总结这篇文章不简单!! 今天博主呕心沥血写了一个贪吃蛇的小游戏,整个过程从无到有简直扣人心弦. 接下来本博主就来好好说到说到这个过程!! 话不多说,我们还是先来看看最后的呈现效果吧. 看完了才知道什么叫做操作,简直传奇!! 接下来不吹牛来讲讲实际操作 ! 首先我们要知道所谓的贪吃蛇无非就
JavaScript实现经典贪吃蛇游戏

本文实例为大家分享了JavaScript实现经典贪吃蛇游戏的具体代码,供大家参考,具体内容如下主要使用单例模式,所有元素动态创建: 1.创建地图 var Map; function map(){ this.mapp=null; this.makemap=function(){ this.mapp=document.createElement ("div"); this.mapp.className ="mymap"; document.body.appendChi
javascript实现贪吃蛇小游戏思路

javascript小游戏贪吃蛇实现思路讲解(完整代码实现),供大家参考,具体内容如下效果流程 1.首先我们要操作的canvas <!doctype html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇</title> </head> <body> <canvas id="canvas"></can
原生javascript制作贪吃蛇小游戏的方法分析

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下:     HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char
Javascript实现贪吃蛇小游戏（含详细注释）

本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下前言原生JavaScript实现贪吃蛇小游戏 GitHub地址直接复制可用 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
javascript实现贪吃蛇小游戏

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> // 贪吃蛇: // 键盘的方向键,控制蛇的方向,碰撞食物,实现增加长度的
基于javascript实现贪吃蛇小游戏

本文实例为大家分享了js贪吃蛇游戏的具体代码,供大家参考,具体内容如下先不多说先上图下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo
JavaScript写个贪吃蛇小游戏(超详细)

贪吃蛇大家都玩过,但你会制作嘛?听起来好像很难的样子,其实非常的简单,话不多说直接上代码我们先把dom结构写出来 <div id="content"> <div id="snake"> <div class="box head"></div> <div class="box"></div> </div> </div> 其中,con
JS学习笔记之贪吃蛇小游戏demo实例详解

本文实例讲述了JS学习笔记之贪吃蛇小游戏demo实例.分享给大家供大家参考,具体如下: 最近跟着视频教程打了一个贪吃蛇, 来记录一下实现思路, 先上代码静态页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>贪吃蛇</title> </head> <style> *{ mar
原生JS实现贪吃蛇小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到食物时(既坐标重复时),增加蛇身长度,碰到墙壁或自身时,程序停止,游戏结束. HTML结构: <body> <div id="map"></div> </body> CSS样式: <style> #map{ width: 600p
纯js和css完成贪吃蛇小游戏demo

本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下 <!doctype html> <html> <meta charset="utf-8"> <head> <style> *{ margin: 0; padding:0; } .content{ position: absolute; width: 500px; height: 500px; background-color: #212
js实现贪吃蛇小游戏

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

javascript实现贪吃蛇小游戏思路

效果流程

相关推荐

随机推荐