20行js的贪吃蛇,20行js代码实现的贪吃蛇小游戏

示例代码

再用三目运算符来判断,如果按键方向不是反方向,就更新direction的值。

判断五子棋赢棋算法
下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现。
其中函数的参数xx.yy为数组下标,chess数组实现五子棋棋盘落子点的数据结构映射。
算法的思想方法是:以当前落子点对应的下标为基点,向其周围8个方向进行搜索,如果有同色子连五子,返回1,或2,否则返回0。返回1代表白棋方胜,返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。
图片 1 
图片 2
图片 3 

以上就是本篇的全部内容啦,虽然都是一些基础的东西,但是感觉还是挺好玩的。要是哪里理解的不对还希望指证出来,共同进步。

本文首发于我的博客

<!DOCTYPE html>
< html xmlns=”;
< head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title></title>
<style type=”text/css”>
body {
margin: 10px;
}
</style>
<script type=”text/javascript”>
var canvas;
var context;
var isWhite = true;//设置是否该轮到白棋
var isWell = false;//设置该局棋盘是否赢了,如果赢了就不能再走了
var img_b = new Image();
img_b.src = “images/b.png”;//白棋图片
var img_w = new Image();
img_w.src = “images/w.png”;//黑棋图片
var chessData = new
Array(15);//这个为棋盘的二维数组用来保存棋盘信息,初始化0为没有走过的,1为白棋走的,2为黑棋走的
for (var x = 0; x < 15; x++) {
chessData[x] = new Array(15);
for (var y = 0; y < 15; y++) {
chessData[x][y] = 0;
}
}
function drawRect() {//页面加载完毕调用函数,初始化棋盘
canvas = document.getElementById(“canvas”);
context = canvas.getContext(“2d”);
for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线
context.beginPath();
context.moveTo(0, i);
context.lineTo(640, i);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, 640);
context.closePath();
context.stroke();
}
}
function play(e) {//鼠标点击时发生
var x = parseInt((e.clientX – 20) /
40);//计算鼠标点击的区域,如果点击了(65,65),那么就是点击了(1,1)的位置
var y = parseInt((e.clientY – 20) / 40);
if (chessData[x][y] != 0) {//判断该位置是否被下过了
alert(“你不能在这个位置下棋”);
return;
}
if (isWhite) {
isWhite = false;
drawChess(1, x, y);
}
else {
isWhite = true;
drawChess(2, x, y);
}
}
function drawChess(chess, x, y)
{//参数为,棋(1为白棋,2为黑棋),数组位置
if (isWell == true) {
alert(“已经结束了,如果需要重新玩,请刷新”);
return;
}
if (x >= 0 && x < 15 && y >= 0 && y < 15) {
if (chess == 1) {
context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//绘制白棋
chessData[x][y] = 1;
}
else {
context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
chessData[x][y] = 2;
}
judge(x, y, chess);
}
}
function judge(x, y, chess) {//判断该局棋盘是否赢了
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
//左右判断
for (var i = x; i >= 0; i–) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
for (var i = x + 1; i < 15; i++) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
//上下判断
for (var i = y; i >= 0; i–) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
for (var i = y + 1; i < 15; i++) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
//左上右下判断
for (var i = x, j = y; i >= 0, j >= 0; i–, j–) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
//右上左下判断
for (var i = x, j = y; i >= 0, j < 15; i–, j++) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
for (var i = x + 1, j = y – 1; i < 15, j >= 0; i++, j–) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >=
5) {
if (chess == 1) {
alert(“白棋赢了”);
}
else {
alert(“黑棋赢了”);
}
isWell = true;//设置该局棋盘已经赢了,不可以再走了
}
}
</script>
< /head>
< body onload=”drawRect()”>
<div>
<canvas width=”640″ id=”canvas” onmousedown=”play(event)”
height=”640″>你的浏览器不支持HTML5 canvas,请使用 google chrome
浏览器 打开.
</canvas>
</div>
< /body>
< /html>

回到47行,又是一个判断语句,判断下次蛇头出现的位置是不是和当前的食物的位置相同,如果相同,生成下一个食物,食物的位置为一个随机数,但是要判断这个点不是出现在当前的蛇身上,绘制食物。如果没有吃到食物,即蛇在正常运动时,每向前一次,将蛇尾弹出,并利用其返回值将这个点重新绘制为黑色。

什么鬼?这其实是立即执行函数IIFE的另一种写法。关于IIFE,这篇文章讲的挺不错的。继续往下看,给蛇头添加一个节点n,其值为当前蛇头的值加direction的值,如此一来就能理解为什么要用20表示向下,-20表示向上了。再下一行是一个if语句,其中值得提醒的是&&的优先级高于||,这个语句就是判断即将出现的蛇头是不是属于蛇身,或者跑到box外边去了。如果没有死亡,就把这个蛇头绘制出来,下边就看看绘制的代码:

您可能感兴趣的文章:

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)
  • JavaScript
    井字棋人工智能实现代码
  • javascript
    7行代码画出一个围棋棋盘
  • 中国象棋js代码,仅演示,未能真下
  • JS小游戏之象棋暗棋源码详解
  • 诘屈聱牙之javascript中国象棋
  • js 钻石棋网页游戏代码
  • 原生JS+Canvas实现五子棋游戏实例
  • 原生JS+Canvas实现五子棋游戏
  • 基于JavaScript实现五子棋游戏
  • html5 canvas-1.canvas介绍(hello
    canvas)

下边从函数运行的起始处(39行)开始看:

!function() {}();

这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战。
五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子;
判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

document.onkeydown = function(evt) { 
 direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};

在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,链接请点这里,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,和大家一起学习。可以在这里预览效果,可能需要翻墙,你也可以在我的github上直接查看源码。

复制代码 代码如下:

我们先看蛇活动的场所:

以上就是本篇的全部内容了,虽然都是一些基础的东西,但是感觉还是挺好玩的。要是哪里理解的不对还希望指证出来,共同进步。如果你觉得有所收获记得在github上点个star哦。

我对代码稍稍做了些修改,并添加了一些注释,方便理解。

document.onkeydown = function(evt) {    
    direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};
function draw(seat, color) {
 box.fillStyle = color;
 box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}
  1. snake[1] - snake[0]的值应该就是-direction,按理说此处写成-direction应该和原来是一个效果,那为什么没有这么做呢,因为如果这样写,玩家可能在一个函数周期中多次改变direction的值,最后使得direction和当前真正的运动方向不一致,导致游戏崩溃。
  2. ==后边,[-1, -20, 1, 20][(evt || event).keyCode - 37]中前边的[]是一个数组,后边的[]是取索引,左上右下四个键的keyCode分别为37, 38, 39, 40,计算后的索引为0, 1, 2, 3,使方向键与direction的取值对应起来。这里的巧妙之处在于如果按下的按键不是方向键,在数组中将得不到对应的值,返回undefine。此时,由于之后的||运算符,n会取到direction原来的值。
<!-- html -->
<canvas id="can" width="400" height="400" style="background-color: black">
 对不起,您的浏览器不支持canvas
</canvas>
<!-- js -->
box = document.getElementById('can').getContext('2d');

这是一个400px*400pxcanvas,思路是以20px*20px为一个方格,组成2020列的方阵,总共400格,然后绿色填充的格子表示蛇身,用黄色表示食物。这400个格子和数字0~399一一对应,对应的方式就是以20作为基数,n / 20再取整表示第几行,n % 20表示第几列。行数和列数都用0~19表示。
  蛇用一个一维数组表示,每个值都是这400个数中的一个,用var snake = [41, 40];初始化这条蛇,索引0为蛇头。food表示食物的位置,direction表示蛇头下一次运动的转向。蛇的运动就用添加和删除数组元素来实现,每次执行绘制蛇头,去掉蛇尾,循环执行使蛇运动。
  下边从函数运行的起始处(39行)开始看:

首先,我们要知道做一个贪吃蛇最主要的是什么,是做出蛇活动的场所和如何使蛇动起来。

function draw(seat, color) {
    box.fillStyle = color;
    box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}
!function() {}();

将这个函数绑定到键盘事件上,evt || event用法的原因这里有详细的解释,是为了兼容ie
  三目运算符?前边的判断语句又可分为两部分:

填充时填充18*18的像素,留1px边框。
.fillRect()中第一个参数就是要绘制的矩形的x坐标seat % 20 *20 +
1,即先得到所要绘制的矩形块在方阵中的位置:第(seat / 20)行,第seat %
20列,再* 20 +
1具体到像素点。可能这个
有点难理解,我感觉在这里的用处应该和Math.floor()差不多,对一个浮点型的数取反再取反,得到的数就是去掉小数位的整数了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇重构</title>
    <style>
        body {
            display: flex;
            height: 100vh;
            margin: 0;
            padding: 0;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <canvas id="can" width="400" height="400" style="background-color: black">对不起,您的浏览器不支持canvas</canvas>
    <script>

        var snake = [41, 40],       //snake队列表示蛇身,初始节点存在但不显示
            direction = 1,          //1表示向右,-1表示向左,20表示向下,-20表示向上
            food = 43,              //食物的位置
            n,                      //与下次移动的位置有关
            box = document.getElementById('can').getContext('2d');
                                    //从0到399表示box里[0~19]*[0~19]的所有节点,每20px一个节点

        function draw(seat, color) {
            box.fillStyle = color;
            box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
                                    //用color填充一个矩形,以前两个参数为x,y坐标,后两个参数为宽和高。
        }

        document.onkeydown = function(evt) {    
                                    //当键盘上下左右键摁下的时候改变direction
            direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
        };

        !function() {
            snake.unshift(n = snake[0] + direction);    
                                    //此时的n为下次蛇头出现的位置,n进入队列
            if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
                                    //if语句判断贪吃蛇是否撞到自己或者墙壁,碰到时返回,结束程序
                return alert("GAME OVER!");
            }
            draw(n, "lime");        //画出蛇头下次出现的位置
            if(n == food) {         //如果吃到食物时,产生一个蛇身以外的随机的点,不会去掉蛇尾
                while (snake.indexOf(food = ~~(Math.random() * 400)) >= 0);
                draw(food, "yellow");
            } else {                //没有吃到食物时正常移动,蛇尾出队列
                draw(snake.pop(),"black");
            }
            setTimeout(arguments.callee, 150);      
                                    //每隔0.15秒执行函数一次,可以调节蛇的速度
        }();
    </script>
</body>
</html>

蛇用一个一维数组表示,每个值都是这400个数中的一个,用var snake = [41, 40];初始化这条蛇,索引0为蛇头。food表示食物的位置,direction表示蛇头下一次运动的转向。蛇的运动就用添加和删除数组元素来实现,每次执行绘制蛇头,去掉蛇尾,循环执行使蛇运动。

    <!-- html -->
    <canvas id="can" width="400" height="400" style="background-color: black">
        对不起,您的浏览器不支持canvas
    </canvas>
    <!-- js -->
    box = document.getElementById('can').getContext('2d');

到了这里,我们发现这条蛇已经可以动了,加上键盘的操作就完成了:

我对代码稍稍做了些修改,并添加了一些注释,方便理解。

总结

首先,我们要知道做一个贪吃蛇最主要的是什么,是做出蛇活动的场所和如何使蛇动起来。
  我们先看蛇活动的场所:

最后的setTimeout,循环执行当前函数,设置执行周期来调蛇的移动速度。

填充时填充18*18的像素,留1px边框。.fillRect()中第一个参数就是要绘制的矩形的x坐标seat % 20 *20 + 1,即先得到所要绘制的矩形块在方阵中的位置:第~~(seat / 20)行,第seat % 20列,再* 20 + 1具体到像素点。可能这个~~有点难理解,我感觉在这里的用处应该和Math.floor()差不多,可以用来截除小数。这两者具体还有一些区别,可以去看《你不知道的js(中卷)》62页。
  回到47行,又是一个判断语句,判断下次蛇头出现的位置是不是和当前的食物的位置相同,如果相同,生成下一个食物,食物的位置为一个随机数,但是要判断这个点不是出现在当前的蛇身上,绘制食物。如果没有吃到食物,即蛇在正常运动时,每向前一次,将蛇尾弹出,并利用其返回值将这个点重新绘制为黑色。
  最后的setTimeout,循环执行当前函数,设置执行周期来调蛇的移动速度。
  到了这里,我们发现这条蛇已经可以动了,加上键盘的操作就完成了:

最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习。

什么鬼?这其实是立即执行函数IIFE的另一种写法。关于IIFE,这篇文章讲的挺不错的。继续往下看,给蛇头添加一个节点n,其值为当前蛇头的值加direction的值,如此一来就能理解为什么要用20表示向下,-20表示向上了。再下一行是一个if语句,其中值得提醒的是&&的优先级高于||,这个语句就是判断即将出现的蛇头是不是属于蛇身,或者跑到box外边去了。如果没有死亡,就把这个蛇头绘制出来,下边就看看绘制的代码:

三目运算符?前边的判断语句又可分为两部分:

再用三目运算符来判断,如果按键方向不是反方向,就更新direction的值。

这是一个400px*400px的canvas,思路是以20px*20px为一个方格,组成20行20列的方阵,总共400格,然后绿色填充的格子表示蛇身,用黄色表示食物。这400个格子和数字0~399一一对应,对应的方式就是以20作为基数,n
/ 20再取整表示第几行,n % 20表示第几列。行数和列数都用0~19表示。

将这个函数绑定到键盘事件上,evt ||
event用法的原因这里有详细的解释,是为了兼容ie。

您可能感兴趣的文章:

  • 原生JS+Canvas实现五子棋游戏实例
  • Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
  • 纯JS实现五子棋游戏兼容各浏览器(附源码)
  • JS+Canvas实现的俄罗斯方块游戏完整实例
  • js H5 canvas投篮小游戏
  • 原生JavaScript编写canvas版的连连看游戏
  • javascript HTML5
    canvas实现打砖块游戏
  • javascript和HTML5利用canvas构建猜牌游戏实现算法
  • JS实现的走迷宫小游戏完整实例
  • JavaScript用200行代码制作打飞机小游戏实例
  • JavaScript实现打地鼠小游戏
  • JS+canvas实现的五子棋游戏【人机大战版】

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

前言

  1. snake[1] - snake[0]的值应该就是-direction,按理说此处写成-direction应该和原来是一个效果,那为什么没有这么做呢,因为如果这样写,玩家可能在一个函数周期中多次改变direction的值,最后使得direction和当前真正的运动方向不一致,导致游戏崩溃。
  2. 在==后边,[-1, -20, 1, 20][(evt || event).keyCode - 37]中前边的[]是一个数组,后边的[]是取索引,左上右下四个键的keyCode分别为37,
    38, 39, 40,计算后的索引为0, 1, 2,
    3,使方向键与direction的取值对应起来。这里的巧妙之处在于如果按下的按键不是方向键,在数组中将得不到对应的值,返回undefine。此时,由于之后的||运算符,n会取到direction原来的值。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>贪吃蛇重构</title>
 <style>
  body {
   display: flex;
   height: 100vh;
   margin: 0;
   padding: 0;
   justify-content: center;
   align-items: center;
  }
 </style>
</head>
<body>
 <canvas id="can" width="400" height="400" style="background-color: black">对不起,您的浏览器不支持canvas</canvas>
 <script>

  var snake = [41, 40],  //snake队列表示蛇身,初始节点存在但不显示
   direction = 1,   //1表示向右,-1表示向左,20表示向下,-20表示向上
   food = 43,    //食物的位置
   n,      //与下次移动的位置有关
   box = document.getElementById('can').getContext('2d');
         //从0到399表示box里[0~19]*[0~19]的所有节点,每20px一个节点
  function draw(seat, color) {
   box.fillStyle = color;
   box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
         //用color填充一个矩形,以前两个参数为x,y坐标,后两个参数为宽和高。
  }
  document.onkeydown = function(evt) { 
         //当键盘上下左右键摁下的时候改变direction
   direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
  };
  !function() {
   snake.unshift(n = snake[0] + direction); 
         //此时的n为下次蛇头出现的位置,n进入队列
   if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
         //if语句判断贪吃蛇是否撞到自己或者墙壁,碰到时返回,结束程序
    return alert("GAME OVER!");
   }
   draw(n, "lime");  //画出蛇头下次出现的位置
   if(n == food) {   //如果吃到食物时,产生一个蛇身以外的随机的点,不会去掉蛇尾
    while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
    draw(food, "yellow");
   } else {    //没有吃到食物时正常移动,蛇尾出队列
    draw(snake.pop(),"black");
   }
   setTimeout(arguments.callee, 150);  
         //每隔0.15秒执行函数一次,可以调节蛇的速度
  }();
 </script>
</body>
</html>